mirror of
				https://github.com/zulip/zulip.git
				synced 2025-11-04 05:53:43 +00:00 
			
		
		
		
	Completely replace perfect-scrollbar with SimpleBar.
perfect-scrollbar replaces both the appearance and the behavior of the scrollbar, and its emulated behavior will never feel native on most platforms. SimpleBar customizes the appearance while preserving the native behavior. Signed-off-by: Anders Kaseorg <andersk@mit.edu>
This commit is contained in:
		
				
					committed by
					
						
						Tim Abbott
					
				
			
			
				
	
			
			
			
						parent
						
							491589579a
						
					
				
				
					commit
					141088586b
				
			@@ -16,7 +16,6 @@
 | 
			
		||||
        "LightboxCanvas": false,
 | 
			
		||||
        "MessageListData": false,
 | 
			
		||||
        "MessageListView": false,
 | 
			
		||||
        "PerfectScrollbar": false,
 | 
			
		||||
        "Plotly": false,
 | 
			
		||||
        "SockJS": false,
 | 
			
		||||
        "Socket": false,
 | 
			
		||||
 
 | 
			
		||||
@@ -20,7 +20,7 @@ const _channel = {};
 | 
			
		||||
 | 
			
		||||
const _ui = {
 | 
			
		||||
    set_up_scrollbar: function () {},
 | 
			
		||||
    update_scrollbar: function () {},
 | 
			
		||||
    get_content_element: element => element,
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const _keydown_util = {
 | 
			
		||||
 
 | 
			
		||||
@@ -2,6 +2,7 @@ set_global('$', global.make_zjquery());
 | 
			
		||||
zrequire('people');
 | 
			
		||||
zrequire('buddy_data');
 | 
			
		||||
zrequire('buddy_list');
 | 
			
		||||
zrequire('ui');
 | 
			
		||||
 | 
			
		||||
set_global('blueslip', global.make_zblueslip());
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -6,7 +6,6 @@ set_global('resize', {
 | 
			
		||||
});
 | 
			
		||||
set_global('ui', {
 | 
			
		||||
    set_up_scrollbar: function () {},
 | 
			
		||||
    update_scrollbar: function () {},
 | 
			
		||||
});
 | 
			
		||||
set_global('stream_popover', {
 | 
			
		||||
    hide_topic_popover: function () {},
 | 
			
		||||
 
 | 
			
		||||
@@ -1,4 +1,7 @@
 | 
			
		||||
zrequire('scroll_util');
 | 
			
		||||
set_global('ui', {
 | 
			
		||||
    get_scroll_element: element => element,
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
run_test('scroll_delta', () => {
 | 
			
		||||
    // If we are entirely on-screen, don't scroll
 | 
			
		||||
 
 | 
			
		||||
@@ -17,6 +17,7 @@ zrequire('scroll_util');
 | 
			
		||||
zrequire('list_cursor');
 | 
			
		||||
zrequire('stream_list');
 | 
			
		||||
zrequire('topic_zoom');
 | 
			
		||||
zrequire('ui');
 | 
			
		||||
 | 
			
		||||
stream_color.initialize();
 | 
			
		||||
 | 
			
		||||
@@ -326,14 +327,9 @@ run_test('narrowing', () => {
 | 
			
		||||
    stream_list.zoom_out_topics = noop;
 | 
			
		||||
    scroll_util.scroll_element_into_container = noop;
 | 
			
		||||
 | 
			
		||||
    var scrollbar_updated = false;
 | 
			
		||||
 | 
			
		||||
    set_global('ui', {
 | 
			
		||||
        update_scrollbar: function () {scrollbar_updated = true;},
 | 
			
		||||
        get_scroll_element: element => element,
 | 
			
		||||
    });
 | 
			
		||||
    ui.update_scrollbar(
 | 
			
		||||
        $.stub_selector("#stream-filters-container")
 | 
			
		||||
    );
 | 
			
		||||
 | 
			
		||||
    assert(!$('<devel sidebar row html>').hasClass('active-filter'));
 | 
			
		||||
 | 
			
		||||
@@ -346,9 +342,7 @@ run_test('narrowing', () => {
 | 
			
		||||
    ]);
 | 
			
		||||
    stream_list.handle_narrow_activated(filter);
 | 
			
		||||
    assert($('<devel sidebar row html>').hasClass('active-filter'));
 | 
			
		||||
    assert(scrollbar_updated);  // Make sure we are updating perfectScrollbar.
 | 
			
		||||
 | 
			
		||||
    scrollbar_updated = false;
 | 
			
		||||
    filter = new Filter([
 | 
			
		||||
        {operator: 'stream', operand: 'cars'},
 | 
			
		||||
        {operator: 'topic', operand: 'sedans'},
 | 
			
		||||
@@ -356,7 +350,6 @@ run_test('narrowing', () => {
 | 
			
		||||
    stream_list.handle_narrow_activated(filter);
 | 
			
		||||
    assert(!$("ul.filters li").hasClass('active-filter'));
 | 
			
		||||
    assert(!$('<cars sidebar row html>').hasClass('active-filter')); // false because of topic
 | 
			
		||||
    assert(scrollbar_updated);  // Make sure we are updating perfectScrollbar.
 | 
			
		||||
 | 
			
		||||
    filter = new Filter([
 | 
			
		||||
        {operator: 'stream', operand: 'cars'},
 | 
			
		||||
 
 | 
			
		||||
@@ -1,7 +1,10 @@
 | 
			
		||||
global.stub_out_jquery();
 | 
			
		||||
 | 
			
		||||
set_global('templates', {});
 | 
			
		||||
set_global('ui', {});
 | 
			
		||||
set_global('ui', {
 | 
			
		||||
    get_content_element: element => element,
 | 
			
		||||
    get_scroll_element: element => element,
 | 
			
		||||
});
 | 
			
		||||
zrequire('util');
 | 
			
		||||
zrequire('stream_data');
 | 
			
		||||
zrequire('search_util');
 | 
			
		||||
 
 | 
			
		||||
@@ -74,6 +74,7 @@ zrequire('util');
 | 
			
		||||
 | 
			
		||||
util.is_mobile = () => false;
 | 
			
		||||
templates.render = () => 'some-html';
 | 
			
		||||
ui.get_scroll_element = element => element;
 | 
			
		||||
 | 
			
		||||
zrequire('echo');
 | 
			
		||||
zrequire('colorspace');
 | 
			
		||||
 
 | 
			
		||||
@@ -31,7 +31,6 @@
 | 
			
		||||
    "moment": "2.22.1",
 | 
			
		||||
    "moment-timezone": "0.5.17",
 | 
			
		||||
    "node-sass": "4.9.0",
 | 
			
		||||
    "perfect-scrollbar": "1.3.0",
 | 
			
		||||
    "plotly.js": "1.37.1",
 | 
			
		||||
    "sass-loader": "7.0.1",
 | 
			
		||||
    "script-loader": "0.7.2",
 | 
			
		||||
 
 | 
			
		||||
@@ -28,26 +28,6 @@ exports.new_user_input = true;
 | 
			
		||||
 | 
			
		||||
var huddle_timestamps = new Dict();
 | 
			
		||||
 | 
			
		||||
exports.update_scrollbar = (function () {
 | 
			
		||||
    var $buddy_list_wrapper = $("#buddy_list_wrapper");
 | 
			
		||||
    var $group_pms = $("#group-pms");
 | 
			
		||||
 | 
			
		||||
    return {
 | 
			
		||||
        users: function () {
 | 
			
		||||
            if (!$buddy_list_wrapper.length) {
 | 
			
		||||
                $buddy_list_wrapper = $("#buddy_list_wrapper");
 | 
			
		||||
            }
 | 
			
		||||
            ui.update_scrollbar($buddy_list_wrapper);
 | 
			
		||||
        },
 | 
			
		||||
        group_pms: function () {
 | 
			
		||||
            if (!$group_pms.length) {
 | 
			
		||||
                $group_pms = $("#group-pms");
 | 
			
		||||
            }
 | 
			
		||||
            ui.update_scrollbar($group_pms);
 | 
			
		||||
        },
 | 
			
		||||
    };
 | 
			
		||||
}());
 | 
			
		||||
 | 
			
		||||
function update_pm_count_in_dom(count_span, value_span, count) {
 | 
			
		||||
    var li = count_span.parent();
 | 
			
		||||
 | 
			
		||||
@@ -203,8 +183,6 @@ exports.redraw_user = function (user_id) {
 | 
			
		||||
        key: user_id,
 | 
			
		||||
        item: info,
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    exports.update_scrollbar.users();
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
exports.searching = function () {
 | 
			
		||||
@@ -270,7 +248,7 @@ exports.update_huddles = function () {
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    var html = templates.render('group_pms', {group_pms: group_pms});
 | 
			
		||||
    $('#group-pms').expectOne().html(html);
 | 
			
		||||
    ui.get_content_element($('#group-pms')).html(html);
 | 
			
		||||
 | 
			
		||||
    _.each(huddles, function (user_ids_string) {
 | 
			
		||||
        var count = unread.num_unread_for_person(user_ids_string);
 | 
			
		||||
@@ -278,7 +256,6 @@ exports.update_huddles = function () {
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    show_huddles();
 | 
			
		||||
    exports.update_scrollbar.group_pms();
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
function focus_ping(want_redraw) {
 | 
			
		||||
@@ -351,6 +328,7 @@ exports.initialize = function () {
 | 
			
		||||
    exports.build_user_sidebar();
 | 
			
		||||
    exports.update_huddles();
 | 
			
		||||
 | 
			
		||||
    ui.set_up_scrollbar($("#buddy_list_wrapper"));
 | 
			
		||||
    buddy_list.start_scroll_handler();
 | 
			
		||||
 | 
			
		||||
    // Let the server know we're here, but pass "false" for
 | 
			
		||||
@@ -363,7 +341,6 @@ exports.initialize = function () {
 | 
			
		||||
 | 
			
		||||
    setInterval(get_full_presence_list_update, ACTIVE_PING_INTERVAL_MS);
 | 
			
		||||
 | 
			
		||||
    ui.set_up_scrollbar($("#buddy_list_wrapper"));
 | 
			
		||||
    ui.set_up_scrollbar($("#group-pms"));
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -289,7 +289,7 @@ function buddy_list_create() {
 | 
			
		||||
    self.fill_screen_with_content = function () {
 | 
			
		||||
        var height_to_fill = self.height_to_fill();
 | 
			
		||||
 | 
			
		||||
        var elem = $(self.scroll_container_sel).expectOne()[0];
 | 
			
		||||
        var elem = ui.get_scroll_element($(self.scroll_container_sel)).expectOne()[0];
 | 
			
		||||
 | 
			
		||||
        // Add a fudge factor.
 | 
			
		||||
        height_to_fill += 10;
 | 
			
		||||
@@ -317,7 +317,7 @@ function buddy_list_create() {
 | 
			
		||||
    self.start_scroll_handler = function () {
 | 
			
		||||
        // We have our caller explicitly call this to make
 | 
			
		||||
        // sure everything's in place.
 | 
			
		||||
        var scroll_container = $(self.scroll_container_sel);
 | 
			
		||||
        var scroll_container = ui.get_scroll_element($(self.scroll_container_sel));
 | 
			
		||||
 | 
			
		||||
        scroll_container.scroll(function () {
 | 
			
		||||
            self.fill_screen_with_content();
 | 
			
		||||
 
 | 
			
		||||
@@ -20,7 +20,6 @@ import "node_modules/handlebars/dist/handlebars.runtime.js";
 | 
			
		||||
import "node_modules/to-markdown/dist/to-markdown.js";
 | 
			
		||||
import "node_modules/flatpickr/dist/flatpickr.js";
 | 
			
		||||
import "node_modules/flatpickr/dist/plugins/confirmDate/confirmDate.js";
 | 
			
		||||
import "node_modules/perfect-scrollbar/dist/perfect-scrollbar.js";
 | 
			
		||||
import "node_modules/error-stack-parser/dist/error-stack-parser.min.js";
 | 
			
		||||
import "node_modules/sortablejs/Sortable.js";
 | 
			
		||||
import "generated/emoji/emoji_codes.js";
 | 
			
		||||
 
 | 
			
		||||
@@ -13,7 +13,7 @@ import "node_modules/sortablejs/Sortable.js";
 | 
			
		||||
import "third/bootstrap/css/bootstrap.css";
 | 
			
		||||
import "third/bootstrap/css/bootstrap-btn.css";
 | 
			
		||||
import "third/bootstrap/css/bootstrap-responsive.css";
 | 
			
		||||
import "node_modules/perfect-scrollbar/css/perfect-scrollbar.css";
 | 
			
		||||
import "node_modules/simplebar/dist/simplebar.css";
 | 
			
		||||
import "node_modules/font-awesome/css/font-awesome.css";
 | 
			
		||||
import "generated/icons/style.css";
 | 
			
		||||
import "node_modules/source-sans-pro/source-sans-pro.css";
 | 
			
		||||
 
 | 
			
		||||
@@ -334,10 +334,10 @@ function may_be_change_focused_emoji(next_section, next_index, preserve_scroll)
 | 
			
		||||
            next_emoji.focus();
 | 
			
		||||
        } else {
 | 
			
		||||
            var $emoji_map = $(".emoji-popover-emoji-map");
 | 
			
		||||
            var start = $emoji_map.scrollTop();
 | 
			
		||||
            var start = ui.get_scroll_element($emoji_map).scrollTop();
 | 
			
		||||
            next_emoji.focus();
 | 
			
		||||
            if ($emoji_map.scrollTop() !== start) {
 | 
			
		||||
                $emoji_map.scrollTop(start);
 | 
			
		||||
            if (ui.get_scroll_element($emoji_map).scrollTop() !== start) {
 | 
			
		||||
                ui.get_scroll_element($emoji_map).scrollTop(start);
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
        update_emoji_showcase(next_emoji);
 | 
			
		||||
@@ -352,7 +352,7 @@ function may_be_change_active_section(next_section) {
 | 
			
		||||
        current_index = 0;
 | 
			
		||||
        var offset = section_head_offsets[current_section];
 | 
			
		||||
        if (offset) {
 | 
			
		||||
            $(".emoji-popover-emoji-map").scrollTop(offset.position_y);
 | 
			
		||||
            ui.get_scroll_element($(".emoji-popover-emoji-map")).scrollTop(offset.position_y);
 | 
			
		||||
            may_be_change_focused_emoji(current_section, current_index);
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
@@ -427,7 +427,7 @@ exports.navigate = function (event_name) {
 | 
			
		||||
           is_cursor_at_end && event_name === "right_arrow") {
 | 
			
		||||
            selected_emoji.focus();
 | 
			
		||||
            if (current_section === 0 && current_index < 6) {
 | 
			
		||||
                $(".emoji-popover-emoji-map").scrollTop(0);
 | 
			
		||||
                ui.get_scroll_element($(".emoji-popover-emoji-map")).scrollTop(0);
 | 
			
		||||
            }
 | 
			
		||||
            update_emoji_showcase(selected_emoji);
 | 
			
		||||
            return true;
 | 
			
		||||
@@ -449,8 +449,8 @@ exports.navigate = function (event_name) {
 | 
			
		||||
            // consistent (cursor goes to the end of the filter
 | 
			
		||||
            // string).
 | 
			
		||||
            $('.emoji-popover-filter').focus().caret(Infinity);
 | 
			
		||||
            $(".emoji-popover-emoji-map").scrollTop(0);
 | 
			
		||||
            $(".emoji-search-results-container").scrollTop(0);
 | 
			
		||||
            ui.get_scroll_element($(".emoji-popover-emoji-map")).scrollTop(0);
 | 
			
		||||
            ui.get_scroll_element($(".emoji-search-results-container")).scrollTop(0);
 | 
			
		||||
            current_section = 0;
 | 
			
		||||
            current_index = 0;
 | 
			
		||||
            reset_emoji_showcase();
 | 
			
		||||
@@ -549,8 +549,8 @@ exports.emoji_select_tab = function (elt) {
 | 
			
		||||
function register_popover_events(popover) {
 | 
			
		||||
    var $emoji_map = popover.find('.emoji-popover-emoji-map');
 | 
			
		||||
 | 
			
		||||
    $emoji_map.on("scroll", function () {
 | 
			
		||||
        emoji_picker.emoji_select_tab($emoji_map);
 | 
			
		||||
    ui.get_scroll_element($emoji_map).on("scroll", function () {
 | 
			
		||||
        emoji_picker.emoji_select_tab(ui.get_scroll_element($emoji_map));
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    $('.emoji-popover-filter').on('input', filter_emojis);
 | 
			
		||||
@@ -713,7 +713,7 @@ exports.register_click_handlers = function () {
 | 
			
		||||
        }.bind(this));
 | 
			
		||||
 | 
			
		||||
        if (offset) {
 | 
			
		||||
            $(".emoji-popover-emoji-map").scrollTop(offset.position_y);
 | 
			
		||||
            ui.get_scroll_element($(".emoji-popover-emoji-map")).scrollTop(offset.position_y);
 | 
			
		||||
        }
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -33,10 +33,10 @@ function set_user_list_heights(res, usable_height, buddy_list_wrapper, group_pms
 | 
			
		||||
    //    res.group_pms_max_height
 | 
			
		||||
    var blocks = [
 | 
			
		||||
        {
 | 
			
		||||
            real_height: buddy_list_wrapper.prop('scrollHeight'),
 | 
			
		||||
            real_height: ui.get_scroll_element(buddy_list_wrapper).prop('scrollHeight'),
 | 
			
		||||
        },
 | 
			
		||||
        {
 | 
			
		||||
            real_height: group_pms.prop('scrollHeight'),
 | 
			
		||||
            real_height: ui.get_scroll_element(group_pms).prop('scrollHeight'),
 | 
			
		||||
        },
 | 
			
		||||
    ];
 | 
			
		||||
 | 
			
		||||
@@ -115,7 +115,7 @@ function left_userlist_get_new_heights() {
 | 
			
		||||
    var buddy_list_wrapper = $('#buddy_list_wrapper').expectOne();
 | 
			
		||||
 | 
			
		||||
    var stream_filters_real_height = stream_filters.prop("scrollHeight");
 | 
			
		||||
    var user_list_real_height = buddy_list_wrapper.prop("scrollHeight");
 | 
			
		||||
    var user_list_real_height = ui.get_scroll_element(buddy_list_wrapper).prop("scrollHeight");
 | 
			
		||||
 | 
			
		||||
    res.total_leftlist_height = viewport_height
 | 
			
		||||
                                - parseInt($("#left-sidebar").css("marginTop"), 10)
 | 
			
		||||
@@ -200,7 +200,6 @@ exports.resize_stream_filters_container = function (h) {
 | 
			
		||||
    h = narrow_window ? left_userlist_get_new_heights() : get_new_heights();
 | 
			
		||||
    exports.resize_bottom_whitespace(h);
 | 
			
		||||
    $("#stream-filters-container").css('max-height', h.stream_filters_max_height);
 | 
			
		||||
    ui.update_scrollbar($("#stream-filters-container"));
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
exports.resize_page_components = function () {
 | 
			
		||||
@@ -242,10 +241,6 @@ exports.resize_page_components = function () {
 | 
			
		||||
    $("#group-pms").css('max-height', h.group_pms_max_height);
 | 
			
		||||
 | 
			
		||||
    $("#stream-filters-container").css('max-height', h.stream_filters_max_height);
 | 
			
		||||
    ui.update_scrollbar($("#stream-filters-container"));
 | 
			
		||||
 | 
			
		||||
    activity.update_scrollbar.users();
 | 
			
		||||
    activity.update_scrollbar.group_pms();
 | 
			
		||||
 | 
			
		||||
    panels.resize_app();
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
@@ -34,6 +34,7 @@ exports.scroll_element_into_container = function (elem, container) {
 | 
			
		||||
    // this will be non-intrusive to users when they already have
 | 
			
		||||
    // the element visible.
 | 
			
		||||
 | 
			
		||||
    container = ui.get_scroll_element(container);
 | 
			
		||||
    var elem_top = elem.position().top;
 | 
			
		||||
    var elem_bottom = elem_top + elem.innerHeight();
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -73,12 +73,12 @@ exports.make_menu = function (opts) {
 | 
			
		||||
 | 
			
		||||
        $(".settings-section, .settings-wrapper").removeClass("show");
 | 
			
		||||
 | 
			
		||||
        ui.reset_scrollbar($("#settings_content"));
 | 
			
		||||
 | 
			
		||||
        settings_sections.load_settings_section(section);
 | 
			
		||||
 | 
			
		||||
        self.get_panel().addClass('show');
 | 
			
		||||
 | 
			
		||||
        ui.reset_scrollbar($("#settings_content"));
 | 
			
		||||
 | 
			
		||||
        var $settings_overlay_container = $("#settings_overlay_container");
 | 
			
		||||
        $settings_overlay_container.find(".right").addClass("show");
 | 
			
		||||
        $settings_overlay_container.find(".settings-header.mobile").addClass("slide-left");
 | 
			
		||||
 
 | 
			
		||||
@@ -230,14 +230,12 @@ exports.show_settings_for = function (node) {
 | 
			
		||||
 | 
			
		||||
    stream_data.update_calculated_fields(sub);
 | 
			
		||||
    var html = templates.render('subscription_settings', sub);
 | 
			
		||||
    $('.subscriptions .right .settings').html(html);
 | 
			
		||||
    ui.get_content_element($('.subscriptions .right .settings')).html(html);
 | 
			
		||||
 | 
			
		||||
    var sub_settings = exports.settings_for_sub(sub);
 | 
			
		||||
 | 
			
		||||
    $(".nothing-selected").hide();
 | 
			
		||||
 | 
			
		||||
    ui.update_scrollbar($("#subscription_overlay .settings"));
 | 
			
		||||
 | 
			
		||||
    sub_settings.addClass("show");
 | 
			
		||||
 | 
			
		||||
    show_subscription_settings(sub_settings);
 | 
			
		||||
@@ -392,7 +390,6 @@ exports.change_stream_name = function (e) {
 | 
			
		||||
        error: function (xhr) {
 | 
			
		||||
            new_name_box.text(stream_data.maybe_get_stream_name(stream_id));
 | 
			
		||||
            ui_report.error(i18n.t("Error"), xhr, $(".stream_change_property_info"));
 | 
			
		||||
            ui.update_scrollbar($("#subscription_overlay .settings"));
 | 
			
		||||
        },
 | 
			
		||||
    });
 | 
			
		||||
};
 | 
			
		||||
@@ -435,7 +432,6 @@ exports.change_stream_description = function (e) {
 | 
			
		||||
        error: function (xhr) {
 | 
			
		||||
            sub_settings.find('.stream-description-editable').html(sub.rendered_description);
 | 
			
		||||
            ui_report.error(i18n.t("Error"), xhr, $(".stream_change_property_info"));
 | 
			
		||||
            ui.update_scrollbar($("#subscription_overlay .settings"));
 | 
			
		||||
        },
 | 
			
		||||
    });
 | 
			
		||||
};
 | 
			
		||||
@@ -566,7 +562,6 @@ exports.initialize = function () {
 | 
			
		||||
            }
 | 
			
		||||
            stream_subscription_info_elem.addClass('text-success')
 | 
			
		||||
                .removeClass('text-error');
 | 
			
		||||
            ui.update_scrollbar($("#subscription_overlay .settings"));
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        function removal_failure() {
 | 
			
		||||
 
 | 
			
		||||
@@ -426,8 +426,6 @@ exports.handle_narrow_activated = function (filter) {
 | 
			
		||||
    if (stream_li) {
 | 
			
		||||
        exports.scroll_stream_into_view(stream_li);
 | 
			
		||||
    }
 | 
			
		||||
    // Update scrollbar size.
 | 
			
		||||
    ui.update_scrollbar($("#stream-filters-container"));
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
exports.handle_narrow_deactivated = function () {
 | 
			
		||||
@@ -510,7 +508,7 @@ exports.set_event_handlers = function () {
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    // check for user scrolls on streams list for first time
 | 
			
		||||
    $('#stream-filters-container').on('scroll', function () {
 | 
			
		||||
    ui.get_scroll_element($('#stream-filters-container')).on('scroll', function () {
 | 
			
		||||
        has_scrolled = true;
 | 
			
		||||
        // remove listener once user has scrolled
 | 
			
		||||
        $(this).off('scroll');
 | 
			
		||||
 
 | 
			
		||||
@@ -172,7 +172,6 @@ exports.update_subscribers_list = function (sub) {
 | 
			
		||||
            stream_edit.sort_but_pin_current_user_on_top(emails);
 | 
			
		||||
            subscribers_list.data(emails);
 | 
			
		||||
            subscribers_list.render();
 | 
			
		||||
            ui.update_scrollbar($(".subscriber_list_container"));
 | 
			
		||||
        }
 | 
			
		||||
        $(".subscriber_list_settings_container").show();
 | 
			
		||||
    }
 | 
			
		||||
 
 | 
			
		||||
@@ -230,11 +230,12 @@ exports.add_sub_to_table = function (sub) {
 | 
			
		||||
    var html = templates.render('subscription', sub);
 | 
			
		||||
    var settings_html = templates.render('subscription_settings', sub);
 | 
			
		||||
    if (stream_create.get_name() === sub.name) {
 | 
			
		||||
        $(".streams-list").prepend(html).scrollTop(0);
 | 
			
		||||
        ui.get_content_element($(".streams-list")).prepend(html);
 | 
			
		||||
        ui.reset_scrollbar($(".streams-list"));
 | 
			
		||||
    } else {
 | 
			
		||||
        $(".streams-list").append(html);
 | 
			
		||||
        ui.get_content_element($(".streams-list")).append(html);
 | 
			
		||||
    }
 | 
			
		||||
    $(".subscriptions .settings").append($(settings_html));
 | 
			
		||||
    ui.get_content_element($(".subscriptions .settings")).append($(settings_html));
 | 
			
		||||
 | 
			
		||||
    if (stream_create.get_name() === sub.name) {
 | 
			
		||||
        // This `stream_create.get_name()` check tells us whether the
 | 
			
		||||
@@ -393,7 +394,7 @@ exports.populate_stream_settings_left_panel = function () {
 | 
			
		||||
        subscriptions: sub_rows,
 | 
			
		||||
    };
 | 
			
		||||
    var html = templates.render('subscriptions', template_data);
 | 
			
		||||
    $('#subscriptions_table .streams-list').html(html);
 | 
			
		||||
    ui.get_content_element($('#subscriptions_table .streams-list')).html(html);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
// query is now an object rather than a string.
 | 
			
		||||
@@ -402,7 +403,7 @@ exports.filter_table = function (query) {
 | 
			
		||||
    exports.show_active_stream_in_left_panel();
 | 
			
		||||
 | 
			
		||||
    var widgets = {};
 | 
			
		||||
    var streams_list_scrolltop = $(".streams-list").scrollTop();
 | 
			
		||||
    var streams_list_scrolltop = ui.get_scroll_element($(".streams-list")).scrollTop();
 | 
			
		||||
 | 
			
		||||
    var stream_ids = [];
 | 
			
		||||
    _.each($("#subscriptions_table .stream-row"), function (row) {
 | 
			
		||||
@@ -443,13 +444,13 @@ exports.filter_table = function (query) {
 | 
			
		||||
    );
 | 
			
		||||
 | 
			
		||||
    _.each(all_stream_ids, function (stream_id) {
 | 
			
		||||
        $('#subscriptions_table .streams-list').append(widgets[stream_id]);
 | 
			
		||||
        ui.get_content_element($('#subscriptions_table .streams-list')).append(widgets[stream_id]);
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    exports.maybe_reset_right_panel();
 | 
			
		||||
 | 
			
		||||
    // this puts the scrollTop back to what it was before the list was updated again.
 | 
			
		||||
    $(".streams-list").scrollTop(streams_list_scrolltop);
 | 
			
		||||
    ui.get_scroll_element($(".streams-list")).scrollTop(streams_list_scrolltop);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
var subscribed_only = true;
 | 
			
		||||
 
 | 
			
		||||
@@ -305,12 +305,9 @@ exports.zoom_in = function () {
 | 
			
		||||
        if (after_count === before_count) {
 | 
			
		||||
            widget.show_no_more_topics();
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
        ui.update_scrollbar($("#stream-filters-container"));
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    $('#stream-filters-container').scrollTop(0);
 | 
			
		||||
    ui.update_scrollbar($("#stream-filters-container"));
 | 
			
		||||
    ui.get_scroll_element($('#stream-filters-container')).scrollTop(0);
 | 
			
		||||
    active_widget.show_spinner();
 | 
			
		||||
    topic_data.get_server_history(stream_id, on_success);
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
@@ -1,5 +1,7 @@
 | 
			
		||||
var ui = (function () {
 | 
			
		||||
 | 
			
		||||
var SimpleBar = require("simplebar").default;
 | 
			
		||||
 | 
			
		||||
var exports = {};
 | 
			
		||||
 | 
			
		||||
// What, if anything, obscures the home tab?
 | 
			
		||||
@@ -13,34 +15,37 @@ exports.replace_emoji_with_text = function (element) {
 | 
			
		||||
    });
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
exports.set_up_scrollbar = function (element) {
 | 
			
		||||
    var perfectScrollbar = new PerfectScrollbar(element[0], {
 | 
			
		||||
        suppressScrollX: true,
 | 
			
		||||
        useKeyboard: false,
 | 
			
		||||
        wheelSpeed: 0.68,
 | 
			
		||||
        scrollingThreshold: 50,
 | 
			
		||||
        minScrollbarLength: 40,
 | 
			
		||||
    });
 | 
			
		||||
    element[0].perfectScrollbar = perfectScrollbar;
 | 
			
		||||
exports.set_up_scrollbar = function (element_selector) {
 | 
			
		||||
    new SimpleBar(element_selector.expectOne()[0]);
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
exports.update_scrollbar = function (element_selector) {
 | 
			
		||||
    var element = element_selector[0];
 | 
			
		||||
    if (element.perfectScrollbar !== undefined) {
 | 
			
		||||
        element.perfectScrollbar.update();
 | 
			
		||||
exports.get_content_element = function (element_selector) {
 | 
			
		||||
    var element = element_selector.expectOne()[0];
 | 
			
		||||
    if (element.SimpleBar) {
 | 
			
		||||
        return $(element.SimpleBar.getContentElement());
 | 
			
		||||
    }
 | 
			
		||||
    return element_selector;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
exports.get_scroll_element = function (element_selector) {
 | 
			
		||||
    var element = element_selector.expectOne()[0];
 | 
			
		||||
    if (element.SimpleBar) {
 | 
			
		||||
        return $(element.SimpleBar.getScrollElement());
 | 
			
		||||
    }
 | 
			
		||||
    return element_selector;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
exports.reset_scrollbar = function (element_selector) {
 | 
			
		||||
    var element = element_selector[0];
 | 
			
		||||
    var element = element_selector.expectOne()[0];
 | 
			
		||||
    if (element.SimpleBar) {
 | 
			
		||||
        element.SimpleBar.getScrollElement().scrollTop = 0;
 | 
			
		||||
    } else {
 | 
			
		||||
        element.scrollTop = 0;
 | 
			
		||||
    if (element.perfectScrollbar !== undefined) {
 | 
			
		||||
        element.perfectScrollbar.update();
 | 
			
		||||
    }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
exports.destroy_scrollbar = function (element) {
 | 
			
		||||
    element[0].perfectScrollbar.destroy();
 | 
			
		||||
exports.destroy_scrollbar = function (element_selector) {
 | 
			
		||||
    element_selector.expectOne()[0].SimpleBar.unMount();
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
function update_message_in_all_views(message_id, callback) {
 | 
			
		||||
 
 | 
			
		||||
@@ -91,13 +91,13 @@ exports.initialize_kitchen_sink_stuff = function () {
 | 
			
		||||
    // element is already at the top or bottom.  Otherwise we get a
 | 
			
		||||
    // new scroll event on the parent (?).
 | 
			
		||||
    $('.modal-body, .scrolling_list, input, textarea').on('wheel', function (e) {
 | 
			
		||||
        var self = $(this);
 | 
			
		||||
        var self = ui.get_scroll_element($(this));
 | 
			
		||||
        var scroll = self.scrollTop();
 | 
			
		||||
        var delta = e.originalEvent.deltaY;
 | 
			
		||||
 | 
			
		||||
        // The -1 fudge factor is important here due to rounding errors.  Better
 | 
			
		||||
        // to err on the side of not scrolling.
 | 
			
		||||
        var max_scroll = this.scrollHeight - self.innerHeight() - 1;
 | 
			
		||||
        var max_scroll = self.prop("scrollHeight") - self.innerHeight() - 1;
 | 
			
		||||
 | 
			
		||||
        e.stopPropagation();
 | 
			
		||||
        if (delta < 0 && scroll <= 0 ||
 | 
			
		||||
 
 | 
			
		||||
@@ -66,12 +66,44 @@ a.no-underline:hover {
 | 
			
		||||
    font-style: italic;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ps--scrolling-x > .ps__rail-x > .ps__thumb-x:hover {
 | 
			
		||||
    background-color: hsl(0, 0%, 38%);
 | 
			
		||||
.simplebar-track .simplebar-scrollbar::before {
 | 
			
		||||
    background-color: rgb(136, 136, 136);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.ps--scrolling-y > .ps__rail-y > .ps__thumb-y:hover {
 | 
			
		||||
    background-color: hsl(0, 0%, 38%);
 | 
			
		||||
.simplebar-track.simplebar-vertical {
 | 
			
		||||
    transition: width 0.2s ease 1s;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.simplebar-track.simplebar-vertical.simplebar-hover {
 | 
			
		||||
    width: 15px;
 | 
			
		||||
    transition: width 0.2s ease;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.simplebar-track.simplebar-vertical .simplebar-scrollbar {
 | 
			
		||||
    transition: width 0.2s ease 1s;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-hover {
 | 
			
		||||
    width: 11px;
 | 
			
		||||
    transition: width 0.2s ease;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.simplebar-track.simplebar-horizontal {
 | 
			
		||||
    transition: height 0.2s ease 1s;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.simplebar-track.simplebar-horizontal.simplebar-hover {
 | 
			
		||||
    height: 15px;
 | 
			
		||||
    transition: height 0.2s ease;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
 | 
			
		||||
    transition: height 0.2s ease 1s;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.simplebar-track.simplebar-horizontal .simplebar-scrollbar.simplebar-hover {
 | 
			
		||||
    height: 11px;
 | 
			
		||||
    transition: height 0.2s ease;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* -- flex forms -- */
 | 
			
		||||
 
 | 
			
		||||
@@ -119,7 +119,7 @@ li.show-more-topics a {
 | 
			
		||||
#private-container,
 | 
			
		||||
#stream-filters-container {
 | 
			
		||||
    overflow-x: hidden;
 | 
			
		||||
    overflow-y: hidden;
 | 
			
		||||
    overflow-y: auto;
 | 
			
		||||
    position: relative;
 | 
			
		||||
    z-index: 0;
 | 
			
		||||
    width: 100%;
 | 
			
		||||
 
 | 
			
		||||
@@ -562,10 +562,6 @@ on a dark background, and don't change the dark labels dark either. */
 | 
			
		||||
        border-bottom-color: hsl(211, 16%, 30%) !important;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .ps__rail-y {
 | 
			
		||||
        background-color: hsl(212, 28%, 18%);
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    #bots_lists_navbar .active a {
 | 
			
		||||
        color: hsl(0, 0%, 87%);
 | 
			
		||||
        background-color: hsl(212, 28%, 18%);
 | 
			
		||||
 
 | 
			
		||||
@@ -317,10 +317,6 @@ body {
 | 
			
		||||
    outline: none;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.help .sidebar .simplebar-scrollbar {
 | 
			
		||||
    width: 10px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.app.help .hamburger {
 | 
			
		||||
    display: none;
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -185,7 +185,8 @@
 | 
			
		||||
.emoji-search-results-container {
 | 
			
		||||
    padding: 0px;
 | 
			
		||||
    position: relative;
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
    overflow-x: hidden;
 | 
			
		||||
    overflow-y: auto;
 | 
			
		||||
    display: block;
 | 
			
		||||
    height: 250px;
 | 
			
		||||
    width: 247px;
 | 
			
		||||
 
 | 
			
		||||
@@ -29,11 +29,6 @@
 | 
			
		||||
    list-style-position: inside; /* Draw the bullets inside our box */
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#user_presences:hover,
 | 
			
		||||
#group-pms:hover {
 | 
			
		||||
    overflow-y: auto;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
#user_presences li {
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
    white-space: nowrap;
 | 
			
		||||
 
 | 
			
		||||
@@ -69,7 +69,6 @@ run(['cp', '-R', 'node_modules/katex/dist/fonts',
 | 
			
		||||
 | 
			
		||||
CSS_FILES = [
 | 
			
		||||
    'node_modules/simplebar/dist/simplebar.css',
 | 
			
		||||
    'node_modules/perfect-scrollbar/css/perfect-scrollbar.css',
 | 
			
		||||
    'node_modules/flatpickr/dist/flatpickr.css',
 | 
			
		||||
    'node_modules/flatpickr/dist/plugins/confirmDate/confirmDate.css',
 | 
			
		||||
]
 | 
			
		||||
 
 | 
			
		||||
@@ -5,7 +5,6 @@
 | 
			
		||||
    ],
 | 
			
		||||
    "archive": [
 | 
			
		||||
        "./node_modules/xdate/src/xdate.js",
 | 
			
		||||
        "./node_modules/perfect-scrollbar/dist/perfect-scrollbar.js",
 | 
			
		||||
        "./node_modules/handlebars/dist/handlebars.runtime.js",
 | 
			
		||||
        "./static/js/archive.js",
 | 
			
		||||
        "./static/js/colorspace.js",
 | 
			
		||||
@@ -57,7 +56,7 @@
 | 
			
		||||
        "./static/third/bootstrap/css/bootstrap.css",
 | 
			
		||||
        "./static/third/bootstrap/css/bootstrap-btn.css",
 | 
			
		||||
        "./static/third/bootstrap/css/bootstrap-responsive.css",
 | 
			
		||||
        "./node_modules/perfect-scrollbar/css/perfect-scrollbar.css",
 | 
			
		||||
        "./node_modules/simplebar/dist/simplebar.css",
 | 
			
		||||
        "./node_modules/font-awesome/css/font-awesome.css",
 | 
			
		||||
        "./static/generated/icons/style.css",
 | 
			
		||||
        "./node_modules/source-sans-pro/source-sans-pro.css",
 | 
			
		||||
 
 | 
			
		||||
@@ -123,7 +123,6 @@ export default (env?: string): webpack.Configuration => {
 | 
			
		||||
        { path: "../node_modules/blueimp-md5/js/md5.js" },
 | 
			
		||||
        { path: "../node_modules/clipboard/dist/clipboard.js", name: "ClipboardJS" },
 | 
			
		||||
        { path: "../node_modules/xdate/src/xdate.js", name: "XDate" },
 | 
			
		||||
        { path: "../node_modules/perfect-scrollbar/dist/perfect-scrollbar.js", name: "PerfectScrollbar" },
 | 
			
		||||
        { path: "../node_modules/simplebar/dist/simplebar.js"},
 | 
			
		||||
        { path: "../static/third/marked/lib/marked.js" },
 | 
			
		||||
        { path: "../static/generated/emoji/emoji_codes.js" },
 | 
			
		||||
 
 | 
			
		||||
@@ -11,4 +11,4 @@ LATEST_RELEASE_ANNOUNCEMENT = "https://blog.zulip.org/2019/03/01/zulip-2-0-relea
 | 
			
		||||
# Typically, adding a dependency only requires a minor version bump, and
 | 
			
		||||
# removing a dependency requires a major version bump.
 | 
			
		||||
 | 
			
		||||
PROVISION_VERSION = '31.2'
 | 
			
		||||
PROVISION_VERSION = '32.0'
 | 
			
		||||
 
 | 
			
		||||
@@ -8759,11 +8759,6 @@ pend@~1.2.0:
 | 
			
		||||
  resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
 | 
			
		||||
  integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
 | 
			
		||||
 | 
			
		||||
perfect-scrollbar@1.3.0:
 | 
			
		||||
  version "1.3.0"
 | 
			
		||||
  resolved "https://registry.yarnpkg.com/perfect-scrollbar/-/perfect-scrollbar-1.3.0.tgz#61da56f94b58870d8e0a617bce649cee17d1e3b2"
 | 
			
		||||
  integrity sha512-7Ub8YOvZB5k+pTy0K3LYUDnH9Xl3qvHcclJyIX+AV5UxHxll146iVGq4rtc+848nTDBQq89J7QxKKMA++cTXzQ==
 | 
			
		||||
 | 
			
		||||
performance-now@^2.1.0:
 | 
			
		||||
  version "2.1.0"
 | 
			
		||||
  resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user