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

ui: Replace set_up_scrollbar with data-simplebar attribute. 

With perfectScrollbar, we needed to call a function from JavaScript to
enable a scrollbar on a new element, but simplebar has a much simpler
default API one can do by using data-simplebar attributes in the HTML.

So we can delete all the scrollbar creation/deletion code.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This commit is contained in:
Anders Kaseorg 2019-05-17 14:11:33 -07:00 committed by Tim Abbott
parent 119948022f
commit 01613e71fb
32 changed files with 22 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend_tests/node_tests/activity.js
View File

@ -19,7 +19,6 @@ const _document = {
const _channel = {};
const _ui = {
set_up_scrollbar: function () {},
get_content_element: element => element,
};

1
frontend_tests/node_tests/pm_list.js
View File

@ -5,7 +5,6 @@ set_global('resize', {
resize_stream_filters_container: function () {},
});
set_global('ui', {
set_up_scrollbar: function () {},
get_content_element: element => element,
});
set_global('stream_popover', {

1
frontend_tests/node_tests/ui_init.js
View File

@ -74,7 +74,6 @@ zrequire('util');
util.is_mobile = () => false;
templates.render = () => 'some-html';
ui.set_up_scrollbar = () => {};
ui.get_scroll_element = element => element;
zrequire('echo');

3
static/js/activity.js
View File

@ -328,7 +328,6 @@ 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
@ -340,8 +339,6 @@ exports.initialize = function () {
}
setInterval(get_full_presence_list_update, ACTIVE_PING_INTERVAL_MS);
ui.set_up_scrollbar($("#group-pms"));
};
exports.update_presence_info = function (email, info, server_time) {

3
static/js/attachments_ui.js
View File

@ -131,12 +131,9 @@ exports.update_attachments = function (event) {
exports.set_up_attachments = function () {
// The settings page must be rendered before this function gets called.
var uploaded_files_table = $("#uploaded_files_table").expectOne();
var status = $('#delete-upload-status');
loading.make_indicator($('#attachments_loading_indicator'), {text: 'Loading...'});
ui.set_up_scrollbar(uploaded_files_table.closest(".progressive-table-wrapper"));
$('#uploaded_files_table').on('click', '.remove-attachment', function (e) {
delete_attachments($(e.target).closest(".uploaded_file_row").attr('data-attachment-id'));
});

4
static/js/emoji_picker.js
View File

@ -175,8 +175,6 @@ exports.hide_emoji_popover = function () {
$('.has_popover').removeClass('has_popover has_emoji_popover');
if (exports.reactions_popped()) {
var orig_title = current_message_emoji_popover_elem.data("original-title");
ui.destroy_scrollbar($(".emoji-popover-emoji-map"));
ui.destroy_scrollbar($(".emoji-search-results-container"));
current_message_emoji_popover_elem.popover("destroy");
current_message_emoji_popover_elem.prop("title", orig_title);
current_message_emoji_popover_elem.removeClass("reaction_button_visible");
@ -602,8 +600,6 @@ exports.render_emoji_popover = function (elt, id) {
var popover = elt.data('popover').$tip;
popover.find('.emoji-popover-filter').focus();
ui.set_up_scrollbar(popover.find(".emoji-popover-emoji-map"));
ui.set_up_scrollbar(popover.find(".emoji-search-results-container"));
current_message_emoji_popover_elem = elt;
emoji_catalog_last_coordinates = {

2
static/js/invite.js
View File

@ -138,8 +138,6 @@ function prepare_form_to_be_shown() {
}
exports.launch = function () {
ui.set_up_scrollbar($("#invite_user_form .modal-body"));
$('#submit-invitation').button();
prepare_form_to_be_shown();
$("#invitee_emails").focus().autosize();

1
static/js/pm_list.js
View File

@ -185,7 +185,6 @@ exports.update_dom_with_unread_counts = function (counts) {
exports.initialize = function () {
ui.set_up_scrollbar($("#private-container"));
};
return exports;

2
static/js/popovers.js
View File

@ -276,7 +276,6 @@ exports.show_user_profile = function (user) {
};
$("#user-profile-modal-holder").html(templates.render("user_profile_modal", args));
ui.set_up_scrollbar($("#user-profile-modal #body"));
$("#user-profile-modal").modal("show");
settings_account.initialize_custom_user_type_fields("#user-profile-modal #content", user.user_id, false, false);
@ -355,7 +354,6 @@ function show_user_group_info_popover(element, group, message) {
trigger: "manual",
});
elt.popover("show");
ui.set_up_scrollbar($('.group-info-popover .member-list'));
current_message_info_popover_elem = elt;
}
}

1
static/js/scroll_bar.js
View File

@ -64,7 +64,6 @@ exports.initialize = function () {
exports.set_layout_width();
}
ui.set_up_scrollbar($("#stream-filters-container"));
};
exports.set_layout_width = function () {

3
static/js/settings.js
View File

@ -119,9 +119,6 @@ function setup_settings_label() {
}
exports.build_page = function () {
ui.set_up_scrollbar($("#settings_page .sidebar.left"));
ui.set_up_scrollbar($("#settings_content"));
setup_settings_label();
var rendered_settings_tab = templates.render('settings_tab', {

2
static/js/settings_org.js
View File

@ -372,8 +372,6 @@ exports.populate_notifications_stream_dropdown = function (stream_list) {
},
}).init();
ui.set_up_scrollbar(dropdown_list_body);
$("#id_realm_notifications_stream .dropdown-search").click(function (e) {
e.stopPropagation();
});

2
static/js/settings_streams.js
View File

@ -46,8 +46,6 @@ exports.build_default_stream_table = function (streams_data) {
},
}).init();
ui.set_up_scrollbar(table.closest(".progressive-table-wrapper"));
loading.destroy_indicator($('#admin_page_default_streams_loading_indicator'));
self.remove = function (stream_id) {

4
static/js/settings_users.js
View File

@ -203,10 +203,6 @@ function populate_users(realm_people_data) {
},
}).init();
[$bots_table, $users_table, $deactivated_users_table].forEach(function ($o) {
ui.set_up_scrollbar($o.closest(".progressive-table-wrapper"));
});
loading.destroy_indicator($('#admin_page_users_loading_indicator'));
loading.destroy_indicator($('#admin_page_bots_loading_indicator'));
loading.destroy_indicator($('#admin_page_deactivated_users_loading_indicator'));

2
static/js/stream_edit.js
View File

@ -194,8 +194,6 @@ function show_subscription_settings(sub_row) {
},
}).init();
ui.set_up_scrollbar($(".subscriber_list_container"));
sub_settings.find('input[name="principal"]').typeahead({
source: people.get_realm_persons, // This is a function.
items: 5,

4
static/js/subs.js
View File

@ -638,10 +638,6 @@ exports.launch = function (section) {
on_close: exports.close,
});
exports.change_state(section);
ui.set_up_scrollbar($("#subscription_overlay .streams-list"));
ui.set_up_scrollbar($("#subscription_overlay .settings"));
});
if (!exports.get_active_data().id) {
$('#search_stream_name').focus();

10
static/js/ui.js
View File

@ -1,6 +1,6 @@
var ui = (function () {
var SimpleBar = require("simplebar").default;
require("simplebar");
var exports = {};
@ -15,10 +15,6 @@ exports.replace_emoji_with_text = function (element) {
});
};
exports.set_up_scrollbar = function (element_selector) {
new SimpleBar(element_selector.expectOne()[0]);
};
exports.get_content_element = function (element_selector) {
var element = element_selector.expectOne()[0];
if (element.SimpleBar) {
@ -44,10 +40,6 @@ exports.reset_scrollbar = function (element_selector) {
}
};
exports.destroy_scrollbar = function (element_selector) {
element_selector.expectOne()[0].SimpleBar.unMount();
};
function update_message_in_all_views(message_id, callback) {
_.each([message_list.all, home_msg_list, message_list.narrowed], function (list) {
if (list === undefined) {

4
static/templates/emoji_popover_content.handlebars
View File

@ -8,7 +8,7 @@
<span class="emoji-popover-tab-item {{#if @first}} active {{/if}}" data-tab-name='{{name}}' title='{{name}}'><i class="fa {{icon}}"></i></span>
{{/each}}
</div>
<div class="emoji-popover-emoji-map" data-message-id="{{message_id}}">
<div class="emoji-popover-emoji-map" data-simplebar data-message-id="{{message_id}}">
{{#each emoji_categories }}
<div class="emoji-popover-subheading" data-section="{{name}}">{{name}}</div>
<div class="emoji-collection" data-section="{{name}}">
@ -18,7 +18,7 @@
</div>
{{/each}}
</div>
<div class="emoji-search-results-container" data-message-id="{{message_id}}">
<div class="emoji-search-results-container" data-simplebar data-message-id="{{message_id}}">
<div class="emoji-popover-results-heading">{{t "Search results" }}</div>
<div class="emoji-search-results"></div>
</div>

2
static/templates/settings/attachments-settings.handlebars
View File

@ -12,7 +12,7 @@
<th class="upload-actions">{{t "Actions" }}</th>
</thead>
</table>
<div class="progressive-table-wrapper" data-list-render="uploaded-files-list">
<div class="progressive-table-wrapper" data-simplebar data-list-render="uploaded-files-list">
<table class="table table-condensed table-striped wrapped-table">
<tbody class="required-text" data-empty="{{t 'You have not uploaded any files.' }}"
id="uploaded_files_table" ></tbody>

2
static/templates/settings/bot-list-admin.handlebars
View File

@ -15,7 +15,7 @@
{{/if}}
</thead>
</table>
<div class="progressive-table-wrapper">
<div class="progressive-table-wrapper" data-simplebar>
<table class="table table-condensed table-striped wrapped-table">
<tbody id="admin_bots_table" class="admin_bot_table required-text thick"
data-empty="{{t 'No bots match your current filter.' }}"></tbody>

2
static/templates/settings/deactivated-users-admin.handlebars
View File

@ -4,7 +4,7 @@
<div class="alert-notification" id="deactivated-user-field-status"></div>
<div class="clear-float"></div>
<div class="progressive-table-wrapper">
<div class="progressive-table-wrapper" data-simplebar>
<table class="table table-condensed table-striped">
<thead>
<th>{{t "Name" }}</th>

2
static/templates/settings/default-streams-list-admin.handlebars
View File

@ -24,7 +24,7 @@
<input type="text" class="search" placeholder="{{t 'Filter streams' }}" aria-label="{{t 'Filter streams' }}"/>
<div class="clear-float"></div>
<div class="progressive-table-wrapper">
<div class="progressive-table-wrapper" data-simplebar>
<table class="table table-condensed table-striped">
<thead>
<th>{{t "Name" }}</th>

4
static/templates/settings/organization-settings-admin.handlebars
View File

@ -113,7 +113,7 @@
<li class="dropdown-search" role="presentation">
<input type="text" role="menuitem" placeholder="{{t 'Filter streams' }}" autofocus/>
</li>
<span class="dropdown-list-body"></span>
<span class="dropdown-list-body" data-simplebar></span>
</ul>
</span>
</label>
@ -135,7 +135,7 @@
<li class="dropdown-search" role="presentation">
<input type="text" role="menuitem" placeholder="{{t 'Filter streams' }}" autofocus/>
</li>
<span class="dropdown-list-body"></span>
<span class="dropdown-list-body" data-simplebar></span>
</ul>
</span>
</label>

2
static/templates/settings/user-list-admin.handlebars
View File

@ -16,7 +16,7 @@
{{/if}}
</thead>
</table>
<div class="progressive-table-wrapper">
<div class="progressive-table-wrapper" data-simplebar>
<table class="table table-condensed table-striped wrapped-table">
<tbody id="admin_users_table" class="admin_user_table required-text thick"
data-empty="{{t 'No users match your current filter.' }}"></tbody>

2
static/templates/subscription_members.handlebars
View File

@ -21,7 +21,7 @@
<div class="clear-float"></div>
</div>
<div class="subscriber-list-box">
<div class="subscriber_list_container">
<div class="subscriber_list_container" data-simplebar>
<div class="subscriber_list_loading_indicator"></div>
<table class="subscriber-list"></table>
</div>

4
static/templates/subscription_table_body.handlebars
View File

@ -20,7 +20,7 @@
<div class="float-clear"></div>
</form>
</div>
<div class="streams-list">
<div class="streams-list" data-simplebar>
</div>
</div>
<div class="right">
@ -34,7 +34,7 @@
<span>{{t 'First time? Read our <a href="/help/getting-your-organization-started-with-zulip#create-streams" target="_blank">guidelines</a> for creating and naming streams.' }}</span>
{{/if}}
</div>
<div class="settings">
<div class="settings" data-simplebar>
{{!-- edit stream here --}}
</div>
{{ partial "stream_creation_form" }}

2
static/templates/user_group_info_popover_content.handlebars
View File

@ -6,7 +6,7 @@
</div>
</div>
<hr>
<ul class="nav nav-list member-list">
<ul class="nav nav-list member-list" data-simplebar>
{{#each members}}
<li>
{{#if is_active }}

2
static/templates/user_profile_modal.handlebars
View File

@ -1,4 +1,4 @@
<div id="user-profile-modal" class="modal modal-bg fade{{#unless profile_data.length}} no-fields{{/unless}}" tabindex="-1"
<div id="user-profile-modal" class="modal modal-bg fade{{#unless profile_data.length}} no-fields{{/unless}}" data-simplebar tabindex="-1"
role="dialog" aria-labelledby="user_profile_modal label" aria-hidden="true">
<div class="modal-body" id="body">
<button type="button" class="close" data-dismiss="modal" aria-label="{{t 'Close' }}">

2
templates/zerver/app/invite_user.html
View File

@ -6,7 +6,7 @@
<h3 id="invite-user-label">{% trans %}Invite users to Zulip{% endtrans %}</h3>
</div>
<form id="invite_user_form" class="form-horizontal">{{ csrf_input }}
<div class="modal-body">
<div class="modal-body" data-simplebar>
<div class="alert" id="invite_status"></div>
{% if development_environment %}
<div class="alert" id="dev_env_msg"></div>

4
templates/zerver/app/left_sidebar.html
View File

@ -28,7 +28,7 @@
</span>
</a>
</div>
<div id="private-container" class="scrolling_list">
<div id="private-container" class="scrolling_list" data-simplebar>
</div>
</li>
<li class="top_left_mentions top_left_row">
@ -71,7 +71,7 @@
<div id="topics_header">
<a href="" class="show-all-streams"> <i class="fa fa-chevron-left" aria-hidden="true"></i>{{ _('All streams') }}</a>
</div>
<div id="stream-filters-container" class="scrolling_list">
<div id="stream-filters-container" class="scrolling_list" data-simplebar>
<ul id="stream_filters" class="filters"></ul>
{% if show_add_streams %}
<a id="add-stream-link" href="#streams/all"><i class="fa fa-plus-circle" aria-hidden="true"></i>{{ _('Add streams') }}</a>

4
templates/zerver/app/right_sidebar.html
View File

@ -18,7 +18,7 @@
<i class="fa fa-remove" aria-hidden="true"></i>
</button>
</div>
<div id="buddy_list_wrapper" class="scrolling_list">
<div id="buddy_list_wrapper" class="scrolling_list" data-simplebar>
<ul id="user_presences" class="filters"></ul>
<div id="buddy_list_wrapper_padding"></div>
</div>
@ -27,7 +27,7 @@
<div id="group-pm-header">
<h4 class='sidebar-title' id='group-pm-title'>{{ _('GROUP PMs') }}</h4>
</div>
<ul id="group-pms" class="filters scrolling_list">
<ul id="group-pms" class="filters scrolling_list" data-simplebar>
</ul>
</div>
{% if show_invites %}

4
templates/zerver/app/settings_overlay.html
View File

@ -7,7 +7,7 @@
</div>
<div class="clear-float"></div>
</div>
<div class="sidebar left">
<div class="sidebar left" data-simplebar>
<div class="sidebar-list dark-grey small-text">
<div class="center tab-container"></div>
<ul class="normal-settings-list">
@ -152,7 +152,7 @@
<span class="exit-sign">&times;</span>
</div>
</div>
<div id="settings_content">
<div id="settings_content" data-simplebar>
<div class="organization-box organization">
</div>