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

settings_orgs: Use button element for save-discard button. 

There is no clear reason to not use a button element here. According
to the spec pharasing content, which includes the <span> element,
are allowed in the button element.

Manually tested both buttons to make sure it works and made sure all
the selectors are updated by grepping all the selector classes/id in
the handlebars templates that are parents of the button or are
present on the button.

(One of the jQuery handler code got reformatted due to it fitting
the line limit due to one character deletion for the selector)
This commit is contained in:
Priyank Patel 2021-06-03 16:15:17 +00:00 committed by Tim Abbott
parent cee94654df
commit 2441138a7b
3 changed files with 18 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend_tests/node_tests/settings_org.js
View File

@ -147,7 +147,7 @@ function createSaveButtons(subsection) {
stub_save_button.set_find_results(".save-discard-widget-button-text", stub_save_button_text); stub_save_button.set_find_results(".save-discard-widget-button-text", stub_save_button_text);
stub_save_button_header.set_find_results(".save-button-controls", save_button_controls); stub_save_button_header.set_find_results(".save-button-controls", save_button_controls);
stub_save_button_header.set_find_results( stub_save_button_header.set_find_results(
".subsection-changes-discard .button", ".subsection-changes-discard button",
$(`#org-discard-${CSS.escape(subsection)}`), $(`#org-discard-${CSS.escape(subsection)}`),
); );
save_button_controls.set_find_results(".discard-button", stub_discard_button); save_button_controls.set_find_results(".discard-button", stub_discard_button);
@ -816,7 +816,7 @@ test("set_up", (override) => {
override, override,
$(".organization").get_on_handler( $(".organization").get_on_handler(
"click", "click",
".subsection-header .subsection-changes-save .button", ".subsection-header .subsection-changes-save button",
), ),
); );
test_upload_realm_icon(override, upload_realm_logo_or_icon); test_upload_realm_icon(override, upload_realm_logo_or_icon);
@ -830,7 +830,7 @@ test("set_up", (override) => {
test_discard_changes_button( test_discard_changes_button(
$(".organization").get_on_handler( $(".organization").get_on_handler(
"click", "click",
".subsection-header .subsection-changes-discard .button", ".subsection-header .subsection-changes-discard button",
), ),
); );
}); });

26
static/js/settings_org.js
View File

@ -763,19 +763,15 @@ export function build_page() {
return undefined; return undefined;
}); });
$(".organization").on( $(".organization").on("click", ".subsection-header .subsection-changes-discard button", (e) => {
"click", e.preventDefault();
".subsection-header .subsection-changes-discard .button", e.stopPropagation();
(e) => { for (const elem of get_subsection_property_elements(e.target)) {
e.preventDefault(); discard_property_element_changes(elem);
e.stopPropagation(); }
for (const elem of get_subsection_property_elements(e.target)) { const save_btn_controls = $(e.target).closest(".save-button-controls");
discard_property_element_changes(elem); change_save_button_state(save_btn_controls, "discarded");
} });
const save_btn_controls = $(e.target).closest(".save-button-controls");
change_save_button_state(save_btn_controls, "discarded");
},
);
save_organization_settings = function (data, save_button) { save_organization_settings = function (data, save_button) {
const subsection_parent = save_button.closest(".org-subsection-parent"); const subsection_parent = save_button.closest(".org-subsection-parent");
@ -992,7 +988,7 @@ export function build_page() {
return data; return data;
} }
$(".organization").on("click", ".subsection-header .subsection-changes-save .button", (e) => { $(".organization").on("click", ".subsection-header .subsection-changes-save button", (e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const save_button = $(e.currentTarget); const save_button = $(e.currentTarget);
@ -1013,7 +1009,7 @@ export function build_page() {
e.preventDefault(); e.preventDefault();
$(e.target) $(e.target)
.closest(".org-subsection-parent") .closest(".org-subsection-parent")
.find(".subsection-changes-save .button") .find(".subsection-changes-save button")
.trigger("click"); .trigger("click");
} }
}); });

8
static/templates/settings/settings_save_discard_widget.hbs
View File

@ -1,20 +1,20 @@
<div class="save-button-controls hide"> <div class="save-button-controls hide">
<div class="inline-block organization-submission subsection-changes-save"> <div class="inline-block organization-submission subsection-changes-save">
<div class="save-discard-widget-button button primary save-button" type="button" id="org-submit-{{section_name}}" data-status="save"> <button class="save-discard-widget-button button primary save-button" id="org-submit-{{section_name}}" data-status="save">
<span class="fa fa-spinner fa-spin save-discard-widget-button-loading"></span> <span class="fa fa-spinner fa-spin save-discard-widget-button-loading"></span>
<span class="fa fa-check save-discard-widget-button-icon"></span> <span class="fa fa-check save-discard-widget-button-icon"></span>
<span class="save-discard-widget-button-text"> <span class="save-discard-widget-button-text">
{{t 'Save changes' }} {{t 'Save changes' }}
</span> </span>
</div> </button>
</div> </div>
<div class="inline-block subsection-changes-discard"> <div class="inline-block subsection-changes-discard">
<div class="save-discard-widget-button button discard-button" type="button" id="org-discard-{{section_name}}"> <button class="save-discard-widget-button button discard-button" id="org-discard-{{section_name}}">
<span class="fa fa-times save-discard-widget-button-icon"></span> <span class="fa fa-times save-discard-widget-button-icon"></span>
<span class="save-discard-widget-button-text"> <span class="save-discard-widget-button-text">
{{t 'Discard' }} {{t 'Discard' }}
</span> </span>
</div> </button>
</div> </div>
<div class="inline-block subsection-failed-status"><p class="hide"></p></div> <div class="inline-block subsection-failed-status"><p class="hide"></p></div>
</div> </div>