Add chevron menu for topics in left sidebar.

The first menu option supported is to narrow to the topic.

The chevron only shows up if you turn on feature_flags.muting.

(imported from commit 17482f538a6d3e4ff96a36c042bad972d34f4b11)

static/js/popovers.js

@@ -145,6 +145,7 @@ exports.show_streamlist_sidebar = function () {
 };
 
 var current_stream_sidebar_elem;
+var current_topic_sidebar_elem;
 var current_user_sidebar_elem;
 
 function user_sidebar_popped() {
@@ -155,6 +156,10 @@ function stream_sidebar_popped() {
     return current_stream_sidebar_elem !== undefined;
 }
 
+function topic_sidebar_popped() {
+    return current_topic_sidebar_elem !== undefined;
+}
+
 exports.hide_stream_sidebar_popover = function () {
     if (stream_sidebar_popped()) {
         $(current_stream_sidebar_elem).popover("destroy");
@@ -162,6 +167,13 @@ exports.hide_stream_sidebar_popover = function () {
     }
 };
 
+exports.hide_topic_sidebar_popover = function () {
+    if (topic_sidebar_popped()) {
+        $(current_topic_sidebar_elem).popover("destroy");
+        current_topic_sidebar_elem = undefined;
+    }
+};
+
 exports.hide_user_sidebar_popover = function () {
     if (user_sidebar_popped()) {
         $(current_user_sidebar_elem).closest("li").popover("destroy");
@@ -253,6 +265,55 @@ exports.register_click_handlers = function () {
         e.preventDefault();
     });
 
+
+    $('#stream_filters').on('click', '.topic-sidebar-arrow', function (e) {
+        var elt = e.target;
+
+        if (topic_sidebar_popped()
+            && current_topic_sidebar_elem === elt) {
+            // If the popover is already shown, clicking again should toggle it.
+            popovers.hide_topic_sidebar_popover();
+            e.stopPropagation();
+            return;
+        }
+
+        popovers.hide_all();
+        popovers.show_streamlist_sidebar();
+
+        var stream_name = $(elt).closest('.expanded_subjects').expectOne().attr('data-stream');
+        var topic_name = $(elt).closest('li').expectOne().attr('data-name');
+
+        var content = templates.render('topic_sidebar_actions', {
+            'stream_name': stream_name,
+            'topic_name': topic_name
+        });
+
+        $(elt).popover({
+            content: content,
+            trigger: "manual",
+            fixed: true
+        });
+
+        $(elt).popover("show");
+
+        current_topic_sidebar_elem = elt;
+        e.stopPropagation();
+    });
+
+    $('body').on('click', '.narrow_to_topic', function (e) {
+        popovers.hide_topic_sidebar_popover();
+
+        var row = $(e.currentTarget).closest('.narrow_to_topic').expectOne();
+        var stream_name = row.attr('data-stream-name');
+        var topic_name = row.attr('data-topic-name');
+
+        var operators = [['stream', stream_name], ['topic', topic_name]];
+        var opts = {select_first_unread: true, trigger: 'sidebar'};
+        narrow.activate(operators, opts);
+
+        e.stopPropagation();
+    });
+
     $('#stream_filters').on('click', '.stream-sidebar-arrow', function (e) {
         var elt = e.target;
         if (stream_sidebar_popped()
@@ -441,13 +502,14 @@ exports.register_click_handlers = function () {
 
 exports.any_active = function () {
     // True if any popover (that this module manages) is currently shown.
-    return popovers.actions_popped() || user_sidebar_popped() || stream_sidebar_popped() || message_info_popped();
+    return popovers.actions_popped() || user_sidebar_popped() || stream_sidebar_popped() || topic_sidebar_popped() || message_info_popped();
 };
 
 exports.hide_all = function () {
     popovers.hide_actions_popover();
     popovers.hide_message_info_popover();
     popovers.hide_stream_sidebar_popover();
+    popovers.hide_topic_sidebar_popover();
     popovers.hide_user_sidebar_popover();
     popovers.hide_userlist_sidebar();
     popovers.hide_streamlist_sidebar();

static/js/stream_list.js

@@ -198,6 +198,7 @@ function rebuild_recent_subjects(stream, subject) {
 
     stream_li.append(templates.render('sidebar_subject_list',
                                       {subjects: display_subjects,
+                                       topic_sidebar_arrow: feature_flags.muting,
                                        stream: stream}));
 
     if (active_orig_subject !== undefined) {

static/js/ui.js

@@ -1275,6 +1275,9 @@ $(function () {
         if (exports.home_tab_obscured()) {
             ui.change_tab_to('#home');
         }
+
+        popovers.hide_all();
+
         var stream = $(e.target).parents('ul').attr('data-stream');
         var subject = $(e.target).parents('li').attr('data-name');
 

static/templates/sidebar_subject_list.handlebars

@@ -9,6 +9,11 @@
             <div class="value">{{unread}}</div>
         </div>
       </span>
+      {{#if ../topic_sidebar_arrow}}
+        <span class="arrow topic-sidebar-arrow">
+          <i class="icon-vector-chevron-down"></i>
+        </span>
+      {{/if}}
     </li>
     {{/each}}
 </ul>

static/templates/topic_sidebar_actions.handlebars

@@ -0,0 +1,8 @@
+<ul class="nav nav-list topics_popover">
+  <li>
+    <a class="narrow_to_topic" data-stream-name="{{ stream_name}}" data-topic-name="{{ topic_name }}">
+      <i class="icon-vector-bullhorn"></i>
+      Narrow to topic <b>{{ topic_name }}</b>
+    </a>
+  </li>
+</ul>