Add a sidebar actions popover for the right/user sidebar.

Currently, this is accessed by clicking anywhere in the sidebar region
other than the text of the person's name itself, which does the
existing narrow behaviour.  Later we can make it do something clever
with hovering pulling out the popover or something, but that's
potentially a significant design project I think this is good enough
to be useful.

(imported from commit a2cc5dc851661117a6d438ca48a1ce7585d4eb63)

zephyr/static/js/ui.js

@@ -712,7 +712,9 @@ function collapse(row) {
 }
 
 var current_stream_sidebar_elem;
+var current_user_sidebar_elem;
 var stream_sidebar_popup_shown_this_click = false;
+var user_sidebar_popup_shown_this_click = false;
 
 exports.hide_stream_sidebar_popover = function () {
     if (ui.stream_sidebar_currently_popped()) {
@@ -721,6 +723,17 @@ exports.hide_stream_sidebar_popover = function () {
     }
 };
 
+exports.hide_user_sidebar_popover = function () {
+    if (ui.user_sidebar_currently_popped()) {
+        current_user_sidebar_elem.popover("destroy");
+        current_user_sidebar_elem = undefined;
+    }
+};
+
+exports.user_sidebar_currently_popped = function () {
+    return current_user_sidebar_elem !== undefined;
+};
+
 exports.stream_sidebar_currently_popped = function () {
     return current_stream_sidebar_elem !== undefined;
 };
@@ -1238,6 +1251,46 @@ $(function () {
         e.preventDefault();
     });
 
+    $('body').on('click', '.user_sidebar_entry', function (e) {
+        var last_sidebar_elem = current_user_sidebar_elem;
+        ui.hide_user_sidebar_popover();
+        user_sidebar_popup_shown_this_click = true;
+
+        var email = $(e.target).find('a').attr('data-email');
+        var name = $(e.target).find('a').text();
+
+        $(e.target).popover({
+            content:   templates.render('user_sidebar_actions', {'email': email,
+                                                                 'name': name}),
+            placement: "left",
+            trigger:   "manual"
+        });
+        $(e.target).popover("show");
+        current_user_sidebar_elem = $(e.target);
+        e.preventDefault();
+    });
+
+    $('body').on('click', '.user_popover .narrow_to_private_messages', function (e) {
+        var email = $(e.target).parents('ul').attr('data-email');
+        ui.hide_user_sidebar_popover();
+        narrow.by('pm-with', email, {select_first_unread: true, trigger: 'user sidebar popover'});
+        e.stopPropagation();
+    });
+
+    $('body').on('click', '.user_popover .narrow_to_messages_sent', function (e) {
+        var email = $(e.target).parents('ul').attr('data-email');
+        ui.hide_user_sidebar_popover();
+        narrow.by('sender', email, {select_first_unread: true, trigger: 'user sidebar popover'});
+        e.stopPropagation();
+    });
+
+    $('body').on('click', '.user_popover .compose_private_message', function (e) {
+        var email = $(e.target).parents('ul').attr('data-email');
+        ui.hide_user_sidebar_popover();
+        compose.start('private', {"private_message_recipient": email, trigger: 'sidebar user actions'});
+        e.stopPropagation();
+    });
+
     $('#stream_filters').on('click', 'span.arrow', function (e) {
         var last_sidebar_elem = current_stream_sidebar_elem;
         ui.hide_stream_sidebar_popover();
@@ -1475,7 +1528,11 @@ $(function () {
             if (stream_sidebar_popup_shown_this_click === false ) {
                 ui.hide_stream_sidebar_popover();
             }
+            if (user_sidebar_popup_shown_this_click === false ) {
+                ui.hide_user_sidebar_popover();
+            }
             stream_sidebar_popup_shown_this_click = false;
+            user_sidebar_popup_shown_this_click = false;
         }
 
         // Unfocus our compose area if we click out of it. Don't let exits out

zephyr/static/styles/zephyr.css

@@ -217,6 +217,14 @@ a:hover code {
     overflow-y: auto;
 }
 
+#user_presences li:hover {
+    background-color: lightgrey;
+}
+
+#user_presences .user_sidebar_entry:hover {
+    cursor: pointer;
+}
+
 #user_presences li {
     overflow: hidden;
     white-space: nowrap;
@@ -235,6 +243,18 @@ a:hover code {
     list-style-image: url(/static/images/presence/user-idle.png);
 }
 
+#user_presences .arrow {
+    font-size: 1em;
+    width: 2em;
+}
+#user_presences .arrow-real {
+    display: none;
+}
+#user_presences li:hover .arrow-real {
+    display: inline;
+    cursor: pointer;
+}
+
 #user_presences a {
     color: #333;
 }

zephyr/static/templates/stream_sidebar_actions.handlebars

@@ -1,4 +1,4 @@
-{{! Contents of the "message actions" popup }}
+{{! Contents of the "stream actions" popup }}
 <ul class="nav nav-list streams_popover" data-id="{{ stream.id }}" data-name="{{ stream.name }}">
   <li>
     <a class="narrow_to_stream">

zephyr/static/templates/user_sidebar_actions.handlebars

@@ -0,0 +1,22 @@
+{{! Contents of the "user actions" popup }}
+<ul class="nav nav-list user_popover" data-email="{{email}}">
+  <li>
+    <a class="narrow_to_private_messages">
+      <i class="icon-vector-user"></i>
+      Narrow to private messages with {{name}}
+    </a>
+  </li>
+  <li>
+    <a class="narrow_to_messages_sent">
+      <i class="icon-vector-bullhorn"></i>
+      Narrow to messages sent by {{name}}
+    </a>
+  </li>
+  <li>
+    <a class="compose_private_message">
+      <i class="icon-vector-edit"></i>
+      Compose a message to {{name}}
+    </a>
+  </li>
+
+</ul>