Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 #5384.
This commit is contained in:
Challa Venkata Raghava Reddy 2019-02-13 18:35:58 +05:30 committed by Tim Abbott
parent af3b18d1f5
commit 815d009006
4 changed files with 38 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend_tests/node_tests/pm_list.js
View File

@ -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;
};

5
static/js/pm_list.js
View File

@ -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 () {

5
static/styles/left-sidebar.scss
View File

@ -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 {

46
static/templates/sidebar_private_message_list.handlebars
View File

@ -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>