diff --git a/templates/zephyr/index.html b/templates/zephyr/index.html
index abe289c8a4..c87eb6ee5a 100644
--- a/templates/zephyr/index.html
+++ b/templates/zephyr/index.html
@@ -15,6 +15,13 @@
{% rawjstemplate "subscription" %}
+
+
+
diff --git a/zephyr/jstemplates/message.html b/zephyr/jstemplates/message.html
index 9bb48ae095..ce71b6fd9d 100644
--- a/zephyr/jstemplates/message.html
+++ b/zephyr/jstemplates/message.html
@@ -47,7 +47,8 @@
{{#include_sender}}
+ src="https://secure.gravatar.com/avatar/{{gravatar_hash}}?d=identicon&s=30"
+ onclick="userinfo_popover(event, this, {{id}});"/>
{{/include_sender}}
@@ -57,7 +58,9 @@
- {{sender_full_name}}
+
+ {{sender_full_name}}
{{sender_email}}
{{/include_sender}}
diff --git a/zephyr/jstemplates/userinfo_popover_content.html b/zephyr/jstemplates/userinfo_popover_content.html
new file mode 100644
index 0000000000..59ea5278b5
--- /dev/null
+++ b/zephyr/jstemplates/userinfo_popover_content.html
@@ -0,0 +1,18 @@
+{{! Client-side Mustache template for the contents of the little "userinfo" popup that shows up when you click on a name }}
+
diff --git a/zephyr/jstemplates/userinfo_popover_title.html b/zephyr/jstemplates/userinfo_popover_title.html
new file mode 100644
index 0000000000..82b1b094c3
--- /dev/null
+++ b/zephyr/jstemplates/userinfo_popover_title.html
@@ -0,0 +1,2 @@
+{{! Client-side Mustache template for the title of the little "userinfo" popup that shows up when you click on a name }}
+{{sender_full_name}} {{sender_email}}
diff --git a/zephyr/static/js/setup.js b/zephyr/static/js/setup.js
index 00706b1a00..efa30b70f9 100644
--- a/zephyr/static/js/setup.js
+++ b/zephyr/static/js/setup.js
@@ -15,6 +15,8 @@ $(function () {
// Compile Handlebars templates.
templates.message = Handlebars.compile($("#template_message").html());
templates.subscription = Handlebars.compile($("#template_subscription").html());
+ templates.userinfo_popover_title = Handlebars.compile($("#template_userinfo_popover_title").html());
+ templates.userinfo_popover_content = Handlebars.compile($("#template_userinfo_popover_content").html());
});
$.ajaxSetup({
diff --git a/zephyr/static/js/ui.js b/zephyr/static/js/ui.js
index a90dd9e37a..58ce12b722 100644
--- a/zephyr/static/js/ui.js
+++ b/zephyr/static/js/ui.js
@@ -233,6 +233,30 @@ function show_api_key_box() {
$("#api_key_button_box").hide();
}
+var userinfo_currently_popped;
+function userinfo_popover(event, element, id) {
+ event.stopPropagation();
+ select_message_by_id(id);
+ var elt = $(element);
+ if (elt.data('popover') === undefined) {
+ // One popover at a time.
+ if (userinfo_currently_popped) {
+ userinfo_currently_popped.popover("destroy");
+ }
+ var message = message_dict[id];
+ elt.popover({placement: "bottom",
+ title: templates.userinfo_popover_title(message),
+ content: templates.userinfo_popover_content(message),
+ trigger: "manual"
+ });
+ elt.popover("show");
+ userinfo_currently_popped = elt;
+ } else {
+ elt.popover("destroy");
+ userinfo_currently_popped = undefined;
+ }
+}
+
$(function () {
// NB: This just binds to current elements, and won't bind to elements
// created after ready() is called.
@@ -431,4 +455,11 @@ $(function () {
});
update_autocomplete();
+
+ $("body").bind('click', function() {
+ if (userinfo_currently_popped !== undefined) {
+ userinfo_currently_popped.popover('destroy');
+ userinfo_currently_popped = undefined;
+ }
+ });
});
diff --git a/zephyr/static/styles/zephyr.css b/zephyr/static/styles/zephyr.css
index 80739c49a0..3ea484b045 100644
--- a/zephyr/static/styles/zephyr.css
+++ b/zephyr/static/styles/zephyr.css
@@ -423,3 +423,7 @@ table.floating_recipient {
.message_body_gravatar {
margin-bottom: 2px;
}
+
+.userinfo_popover a {
+ cursor: pointer;
+}