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}} {{/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; +}