[staging] Add "Show more topics..." link to topic lists.

This link lets you zoom in to more topics.  We only show it if
there are topics that we had to hide to respect the max-5 limit
along with other rules of when you show topics.

This is feature flagged to staging only.

(imported from commit 9915004ec2eb3df7416fe45c0e60cebcd7fecfea)

static/js/stream_list.js

@@ -243,6 +243,7 @@ function build_subject_list(stream, active_topic, max_subjects) {
     }
 
     var display_subjects = [];
+    var hiding_topics = false;
 
     _.each(subjects, function (subject_obj, idx) {
         var topic_name = subject_obj.subject;
@@ -259,10 +260,16 @@ function build_subject_list(stream, active_topic, max_subjects) {
             };
             display_subjects.push(display_subject);
         }
+        else {
+            hiding_topics = true;
+        }
     });
 
+    var want_show_more_topics_links = hiding_topics && !zoomed_to_topics && feature_flags.topic_zooming;
+
     var topic_dom = templates.render('sidebar_subject_list',
                                       {subjects: display_subjects,
+                                       want_show_more_topics_links: want_show_more_topics_links,
                                        stream: stream});
 
     return topic_dom;
@@ -449,6 +456,15 @@ $(function () {
         e.stopPropagation();
     });
 
+    $('#stream_filters').on('click', '.show-more-topics', function (e) {
+        var stream = $(e.target).parents('.show-more-topics').attr('data-name');
+
+        toggle_zoom();
+
+        e.preventDefault();
+        e.stopPropagation();
+    });
+
     $('#stream_filters').on('dblclick', 'li .subscription_block', function (e) {
         if (!feature_flags.topic_zooming) {
             return;

static/styles/zulip.css

@@ -2549,6 +2549,7 @@ ul.expanded_subjects {
     margin-left: 0px;
 }
 
+li.show-more-topics,
 li.expanded_subject {
     position: relative;
 }
@@ -3659,3 +3660,9 @@ div.edit_bot {
     margin-top: 55px;
     padding-left: 15px;
 }
+
+li.show-more-topics a {
+    font-size: 75%;
+    color: #0000cc;
+}
+

static/templates/sidebar_subject_list.handlebars

@@ -14,4 +14,9 @@
       </span>
     </li>
     {{/each}}
+    {{#if want_show_more_topics_links}}
+    <li class="show-more-topics" data-stream="{{stream}}">
+      <a href="#">Show more topics...</a>
+    </li>
+    {{/if}}
 </ul>