paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 05:53:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

dropdown-list-widget: Properly handle disabled state.

Browse Source 
We wrap the [reset] anchor tag in a button so that we can set 'disabled'
attribute on it. We change the styles to hide the [reset] button and the
pencil icon when the widget is disabled.

We also need to call `e.preventDefault()` in the event handler since now
the anchor tag behaves as a button.
This commit is contained in:
Rohitt Vashishtha
2020-05-19 10:31:53 +05:30
committed by Tim Abbott
parent f4e70714b4
commit 4d14ba41ba
5 changed files with 23 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend_tests/node_tests/dropdown_list_widget.js
View File

@@ -14,7 +14,7 @@ const setup_zjquery_data = (name) => {
$.clear_all_elements();
const input_group = $(".input_group");
const reset_button = $('.dropdown_list_reset_button');
input_group.set_find_results('.dropdown_list_reset_button', reset_button);
input_group.set_find_results('.dropdown_list_reset_button:not([disabled])', reset_button);
$(`#${name}_widget #${name}_name`).closest = () => input_group;
const $widget = $(`#${name}_widget #${name}_name`);
return {reset_button, $widget};

4
frontend_tests/node_tests/settings_org.js
View File

@@ -947,7 +947,7 @@ run_test('misc', () => {
page_params.is_admin = false;
const stub_notification_disable_parent = $.create('<stub notification_disable parent');
stub_notification_disable_parent.set_find_results('.dropdown_list_reset_button',
stub_notification_disable_parent.set_find_results('.dropdown_list_reset_button:not([disabled])',
$.create('<disable link>'));
page_params.realm_name_changes_disabled = false;
@@ -1027,7 +1027,7 @@ run_test('misc', () => {
'realm_signup_notifications_stream_id',
'realm_default_code_block_language'];
const dropdown_list_parent = $.create(`<list parent>`);
dropdown_list_parent.set_find_results('.dropdown_list_reset_button', $.create('<disable button>'));
dropdown_list_parent.set_find_results('.dropdown_list_reset_button:not([disabled])', $.create('<disable button>'));
widget_settings.forEach(name => {
const elem = $.create(`#${name}_widget #${name}_name`);
elem.closest = () => {

7
static/js/dropdown_list_widget.js
View File

@@ -25,7 +25,7 @@ const DropdownListWidget = function (opts) {
if (!value || value === opts.null_value) {
elem.text(opts.default_text);
elem.addClass("text-warning");
elem.closest('.input-group').find('.dropdown_list_reset_button').hide();
elem.closest('.input-group').find('.dropdown_list_reset_button:not([disabled])').hide();
return;
}
@@ -34,7 +34,7 @@ const DropdownListWidget = function (opts) {
const text = opts.render_text(item.name);
elem.text(text);
elem.removeClass('text-warning');
elem.closest('.input-group').find('.dropdown_list_reset_button').show();
elem.closest('.input-group').find('.dropdown_list_reset_button:not([disabled])').show();
};
const update = (value) => {
@@ -55,8 +55,9 @@ const DropdownListWidget = function (opts) {
const value = $(this).attr('data-value');
update(value);
});
$(`#${opts.container_id} .dropdown_list_reset_button`).click(function () {
$(`#${opts.container_id} .dropdown_list_reset_button`).click(function (e) {
update(opts.null_value);
e.preventDefault();
});
};

13
static/styles/settings.scss
View File

@@ -1676,6 +1676,19 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
.dropdown-list-widget {
button {
margin: 0px 5px;
&.dropdown_list_reset_button {
// Prevent night mode from overriding background.
background: unset !important;
border: none;
&:disabled {
display: none;
}
}
&:disabled i {
display: none;
}
}
.dropdown-search > input[type=text] {

6
static/templates/settings/dropdown_list_widget.hbs
View File

@@ -15,7 +15,7 @@
</ul>
</span>
</label>
{{#if is_admin }}
<a class="dropdown_list_reset_button">{{reset_button_text}}</a>
{{/if}}
<button class="button small dropdown_list_reset_button">
<a>{{reset_button_text}}</a>
</button>
</div>