Pop up a little box of info/actions when you click a name or gravatar.

Known issues:
* Not all of the options in the menu are functional yet
* The wording isn't totally perfect on some of these options;
   I kind of want to use a 'first name' in some of them.

(imported from commit 5a333fb939fcca7e0d0ecb2c43e79501139ac0db)

templates/zephyr/index.html

@@ -15,6 +15,13 @@
 {% rawjstemplate "subscription" %}
 </script>
 
+<script id="template_userinfo_popover_title" type="text/x-handlebars-template">
+{% rawjstemplate "userinfo_popover_title" %}
+</script>
+<script id="template_userinfo_popover_content" type="text/x-handlebars-template">
+{% rawjstemplate "userinfo_popover_content" %}
+</script>
+
 <link href="{{ static_hidden }}styles/zephyr.css?dummy_time={% now "U" %}" rel="stylesheet">
 <link href="{{ static_hidden }}styles/pygments.css" rel="stylesheet">
 <script type="text/javascript" src="{{ static_third  }}jquery/jquery.form.js"></script>

zephyr/jstemplates/message.html

@@ -47,7 +47,8 @@
     <td class="message_picture">
     {{#include_sender}}
         <img class="img-rounded profile_picture"
-             src="https://secure.gravatar.com/avatar/{{gravatar_hash}}?d=identicon&s=30"/>
+             src="https://secure.gravatar.com/avatar/{{gravatar_hash}}?d=identicon&s=30"
+             onclick="userinfo_popover(event, this, {{id}});"/>
     {{/include_sender}}
     </td>
     <td class="pointer"><p></p></td>
@@ -57,7 +58,9 @@
         <span class="message_sender"
               onmouseover="show_email({{id}});"
               onmouseout="hide_email();">
-            <span class="sender_name">{{sender_full_name}}</span>
+            <span class="sender_name"
+              onclick="userinfo_popover(event, this, {{id}});">
+              {{sender_full_name}}</span>
             <span class="sender_email invisible">{{sender_email}}</span>
         </span>
     {{/include_sender}}

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 }}
+<ul class="nav nav-list userinfo_popover">
+  <li>
+    <a onclick="respond_to_message();">
+      <i class="icon-share-alt"></i> Reply to this {{#if is_stream}}stream{{else}}huddle{{/if}}
+    </a>
+  </li>
+  <li>
+    <a onclick="respond_to_message('personal');">
+      <i class="icon-user"></i> Start a huddle with me
+    </a>
+  </li>
+  <li class="disabled">
+    <a>
+      <i class="icon-th-list"></i> View huddles with me
+    </a>
+ </li>
+</ul>

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 }}
+<b>{{sender_full_name}}</b><br /><span class='my_email'>{{sender_email}}</span>

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({

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;
+        }
+    });
 });

zephyr/static/styles/zephyr.css

@@ -423,3 +423,7 @@ table.floating_recipient {
 .message_body_gravatar {
     margin-bottom: 2px;
 }
+
+.userinfo_popover a {
+    cursor: pointer;
+}