Add a dropdown menu to the sidebar.

This allows you to compose to a stream, narrow, or hide it from your home
view.

(imported from commit 183eb85af3401de592bae61a61409ffcc116eb45)

zephyr/static/js/stream_list.js

@@ -89,7 +89,9 @@ function add_narrow_filter(name, type) {
     var swatch = $('<span/>').attr('id', "stream_sidebar_swatch_" + subs.stream_id(name))
                              .addClass('streamlist_swatch')
                              .css('background-color', subs.get_color(name)).html("&nbsp;");
-    list_item = $('<li>').attr('data-name', name).html(swatch);
+    list_item = $('<li>').attr('data-name', name)
+                         .addClass("narrow-filter")
+                         .html(swatch);
     if (type === 'stream') {
         list_item.attr('id', "stream_sidebar_" + subs.stream_id(name));
     }
@@ -97,7 +99,8 @@ function add_narrow_filter(name, type) {
     list_item.append($('<a>').attr('href', uri)
                      .addClass('subscription_name')
                      .text(name)
-                     .append('<span class="count">(<span class="value"></span>)</span>'));
+                     .append('<span class="count">(<span class="value"></span>)</span>'))
+             .append('<span class="arrow pull-right">▽</span>');
     if (type === "stream" && subs.have(name).invite_only) {
         list_item.append("<i class='icon-lock'/>");
     }

zephyr/static/js/ui.js

@@ -693,6 +693,20 @@ function collapse(row) {
     show_more_link(row);
 }
 
+var current_sidebar_elem;
+var sidebar_popup_shown_this_click = false;
+
+exports.hide_sidebar_popover = function () {
+    if (ui.sidebar_currently_popped()) {
+        current_sidebar_elem.popover("destroy");
+        current_sidebar_elem = undefined;
+    }
+};
+
+exports.sidebar_currently_popped = function () {
+    return current_sidebar_elem !== undefined;
+};
+
 $(function () {
     // NB: This just binds to current elements, and won't bind to elements
     // created after ready() is called.
@@ -1200,6 +1214,23 @@ $(function () {
         e.preventDefault();
     });
 
+    $('#stream_filters').on('click', 'span.arrow', function (e) {
+        var last_sidebar_elem = current_sidebar_elem;
+        ui.hide_sidebar_popover();
+        sidebar_popup_shown_this_click = true;
+
+        var stream = $(e.target).parents('li').attr('data-name');
+
+        var ypos = $(e.target).offset().top - viewport.scrollTop();
+        $(e.target).popover({
+            content:   templates.render('sidebar_stream_actions', {'stream': subs.have(stream)}),
+            trigger:   "manual"
+        });
+        $(e.target).popover("show");
+        current_sidebar_elem = $(e.target);
+        e.preventDefault();
+    });
+
     $('#stream_filters').on('click', '.expanded_subject a', function (e) {
         if (exports.home_tab_obscured()) {
             ui.change_tab_to('#home');
@@ -1324,10 +1355,36 @@ $(function () {
         e.stopPropagation();
     });
 
+
+    $('body').on('click', '.toggle_home', function (e) {
+        var stream = $(e.currentTarget).parents('ul').attr('data-name');
+        ui.hide_sidebar_popover();
+        subs.toggle_home(stream);
+        e.stopPropagation();
+    });
+
+    $('body').on('click', '.narrow_to_stream', function (e) {
+        var stream = $(e.currentTarget).parents('ul').attr('data-name');
+        ui.hide_sidebar_popover();
+        narrow.by('stream', stream, {select_first_unread: true});
+        e.stopPropagation();
+    });
+
+    $('body').on('click', '.compose_to_stream', function (e) {
+        var stream = $(e.currentTarget).parents('ul').attr('data-name');
+        ui.hide_sidebar_popover();
+        compose.start('stream', {"stream": stream});
+        e.stopPropagation();
+    });
+
     $("body").on('click', function (e) {
         // Dismiss the popover if the user has clicked outside it
         if ($('.popover-inner').has(e.target).length === 0) {
             ui.hide_actions_popover();
+            if (sidebar_popup_shown_this_click === false ) {
+                ui.hide_sidebar_popover();
+            }
+            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

@@ -197,6 +197,10 @@ a:hover code {
     overflow-y: auto;
 }
 
+#stream_filters li:hover {
+    background-color: lightgrey;
+}
+
 #user_presences {
     list-style-position: inside; /* Draw the bullets inside our box */
     margin-top:  1em;
@@ -262,6 +266,17 @@ ul.filters i {
     padding-right: 0.25em;
 }
 
+ul.filters .arrow {
+    margin-right: 5em;
+    font-size: 1em;
+    display: none;
+}
+
+ul.filters li:hover .arrow {
+    display: inline;
+    cursor: pointer;
+}
+
 .message_list {
     /* If we change this color, we must change message_reply_fade */
     background-color: aliceblue;

zephyr/static/templates/sidebar_stream_actions.handlebars

@@ -0,0 +1,27 @@
+{{! Contents of the "message actions" popup }}
+<ul class="nav nav-list actions_popover" data-name="{{ stream.name }}">
+  <li>
+    <a class="narrow_to_stream">
+      <i class="icon-vector-bullhorn"></i>
+      Narrow to this stream.
+    </a>
+  </li>
+  <li>
+    <a class="toggle_home">
+      {{#if stream.in_home_view}}
+      <i class="icon-vector-minus-sign"></i>
+      Hide this stream from your home view.
+      {{else}}
+      <i class="icon-vector-plus-sign"></i>
+      Show this stream in your home view.
+      {{/if}}
+    </a>
+  </li>
+  <li>
+    <a class="compose_to_stream">
+      <i class="icon-vector-edit"></i>
+      Compose a new message on this stream.
+    </a>
+  </li>
+
+</ul>