left_sidebar: Add scrollbar for private messages region.

This fixes a longstanding UI issue when you have way too many recent private message conversations, as you can now scroll down the list to find what you're looking for. Fixes zulip#5384.
matt- · Feb 18, 2019 · 815d009 · 815d009
1 parent af3b18d
commit 815d009
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 25 deletions.
diff --git a/frontend_tests/node_tests/pm_list.js b/frontend_tests/node_tests/pm_list.js
@@ -4,6 +4,9 @@ set_global('narrow_state', {});
 set_global('resize', {
     resize_stream_filters_container: function () {},
 });
+set_global('ui', {
+    set_up_scrollbar: function () {},
+});
 set_global('stream_popover', {
     hide_topic_popover: function () {},
 });
@@ -48,7 +51,7 @@ run_test('get_conversation_li', () => {
 
 run_test('close', () => {
     var collapsed;
-    $('ul.expanded_private_messages').remove = function () {
+    $('#private-container').remove = function () {
         collapsed = true;
     };
     pm_list.close();
@@ -118,7 +121,7 @@ run_test('build_private_messages_list', () => {
 
 run_test('expand_and_update_private_messages', () => {
     var collapsed;
-    $('ul.expanded_private_messages').remove = function () {
+    $('#private-container').remove = function () {
         collapsed = true;
     };
 

diff --git a/static/js/pm_list.js b/static/js/pm_list.js
@@ -62,7 +62,7 @@ function set_pm_conversation_count(user_ids_string, count) {
 
 function remove_expanded_private_messages() {
     stream_popover.hide_topic_popover();
-    $("ul.expanded_private_messages").remove();
+    $("#private-container").remove();
     resize.resize_stream_filters_container();
 }
 
@@ -167,6 +167,9 @@ exports.update_private_messages = function () {
         exports.rebuild_recent("");
         $(".top_left_private_messages").addClass('active-filter');
     }
+    if ($("#private-container").length !== 0) {
+        ui.set_up_scrollbar($("#private-container"));
+    }
 };
 
 exports.set_click_handlers = function () {

diff --git a/static/styles/left-sidebar.scss b/static/styles/left-sidebar.scss
@@ -81,6 +81,7 @@
     padding: 2px 0px 2px 29px;
 }
 
+#private-container,
 #stream-filters-container {
     overflow-x: hidden;
     overflow-y: hidden;
@@ -89,6 +90,10 @@
     width: 100%;
 }
 
+#private-container {
+    max-height: 200px;
+}
+
 #global_filters li:hover,
 #stream_filters li:hover,
 #stream_filters li.highlighted_stream {

diff --git a/static/templates/sidebar_private_message_list.handlebars b/static/templates/sidebar_private_message_list.handlebars
@@ -1,22 +1,24 @@
-<ul class='expanded_private_messages {{zoom_class}}' data-name='private'>
-    {{#each messages}}
-    <li class='{{#if is_zero}}zero-topic-unreads{{/if}} {{#if zoom_out_hide}}zoom-out-hide{{/if}} expanded_private_message' data-user-ids-string='{{user_ids_string}}'>
-        <span class='pm-box'>
-            <a href='{{url}}' class="conversation-partners" title="{{ recipients }}">
-                {{recipients}}
-            </a>
-            <div class="private_message_count {{#if is_zero}}zero_count{{/if}}">
-                <div class="value">{{unread}}</div>
-            </div>
-        </span>
-        <span class="arrow topic-sidebar-arrow">
-            <i class="fa fa-chevron-down" aria-hidden="true"></i>
-        </span>
-    </li>
-    {{/each}}
-    {{#if want_show_more_messages_links}}
-    <li class="show-more-private-messages" data-name='more-private-messages'>
-        <a href="#">({{t "more conversations" }})</a>
-    </li>
-    {{/if}}
-</ul>
+<div id="private-container" class="scrolling_list">
+    <ul class='expanded_private_messages {{zoom_class}}' data-name='private'>
+        {{#each messages}}
+        <li class='{{#if is_zero}}zero-topic-unreads{{/if}} {{#if zoom_out_hide}}zoom-out-hide{{/if}} expanded_private_message' data-user-ids-string='{{user_ids_string}}'>
+            <span class='pm-box'>
+                <a href='{{url}}' class="conversation-partners" title="{{ recipients }}">
+                    {{recipients}}
+                </a>
+                <div class="private_message_count {{#if is_zero}}zero_count{{/if}}">
+                    <div class="value">{{unread}}</div>
+                </div>
+            </span>
+            <span class="arrow topic-sidebar-arrow">
+                <i class="fa fa-chevron-down" aria-hidden="true"></i>
+            </span>
+        </li>
+        {{/each}}
+        {{#if want_show_more_messages_links}}
+        <li class="show-more-private-messages" data-name='more-private-messages'>
+            <a href="#">({{t "more conversations" }})</a>
+        </li>
+        {{/if}}
+    </ul>
+</div>