mirror of https://github.com/zulip/zulip.git
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:
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];
|
||||
element.scrollTop = 0;
|
||||
if (element.perfectScrollbar !== undefined) {
|
||||
element.perfectScrollbar.update();
|
||||
var element = element_selector.expectOne()[0];
|
||||
if (element.SimpleBar) {
|
||||
element.SimpleBar.getScrollElement().scrollTop = 0;
|
||||
} else {
|
||||
element.scrollTop = 0;
|
||||
}
|
||||
};
|
||||
|
||||
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"
|
||||
|
|
Loading…
Reference in New Issue