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

settings_org: Fix visibility time of `Saved` state. 

This fixes the bug where the `Saved` state button faded out almost
instantly (that is actually 300 ms) and `Discard` button fades out
along with `Saved` state button; the key problem here was that the
setTimeout intended to fade was actually delaying the transition from
"saving" to "saved".

Now, first of all, we use `setTimeOut` function to fadeout elements giving
fadeout_delay time as `800 ms` and we hide discard button during `saving`
state. Also, when `Discard` button is selected, `Save changes` and `Dicard`
fade out simultaneously.

Fixes: #11737.
This commit is contained in:
Pragati Agrawal 2019-03-07 19:48:10 +05:30 committed by Tim Abbott
parent 6a159b5743
commit 36fcb67812
2 changed files with 34 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend_tests/node_tests/settings_org.js
View File

@ -169,6 +169,7 @@ function createSaveButtons(subsection) {
const stub_save_button_header = $('.subsection-header');
const save_btn_controls = $('.save-btn-controls');
const stub_save_button = $(`#org-submit-${subsection}`);
const stub_discard_button = $(`#org-submit-${subsection}`);
const stub_save_button_text = $('.icon-button-text');
stub_save_button_header.set_find_results(
'.subsection-failed-status p', $('<failed status element>')
@ -186,6 +187,9 @@ function createSaveButtons(subsection) {
stub_save_button_header.set_find_results(
'.subsection-changes-discard .button', $(`#org-discard-${subsection}`)
);
save_btn_controls.set_find_results(
'.discard-button', stub_discard_button
);
const props = {};
props.hidden = false;
save_btn_controls.fadeIn = () => {
@ -197,6 +201,7 @@ function createSaveButtons(subsection) {
return {
props: props,
save_button: stub_save_button,
discard_button: stub_discard_button,
save_button_header: stub_save_button_header,
save_button_controls: save_btn_controls,
save_button_text: stub_save_button_text,
@ -275,12 +280,14 @@ function test_change_save_button_state() {
var $save_btn_controls = stubs.save_button_controls;
var $save_btn_text = stubs.save_button_text;
var $save_btn = stubs.save_button;
var $discard_btn = stubs.discard_button;
$save_btn.attr("id", "org-submit-msg-editing");
var props = stubs.props;
settings_org.change_save_button_state($save_btn_controls, "unsaved");
assert.equal($save_btn_text.text(), 'translated: Save changes');
assert.equal(props.hidden, false);
assert.equal($save_btn.attr("data-status"), "unsaved");
assert.equal($discard_btn.visible(), true);
settings_org.change_save_button_state($save_btn_controls, "saved");
assert.equal($save_btn_text.text(), 'translated: Save changes');
assert.equal(props.hidden, true);
@ -289,9 +296,9 @@ function test_change_save_button_state() {
assert.equal($save_btn_text.text(), 'translated: Saving');
assert.equal($save_btn.attr("data-status"), "saving");
assert.equal($save_btn.hasClass('saving'), true);
assert.equal($discard_btn.visible(), false);
settings_org.change_save_button_state($save_btn_controls, "discarded");
assert.equal(props.hidden, true);
assert.equal($save_btn.hasClass('saving'), false);
settings_org.change_save_button_state($save_btn_controls, "succeeded");
assert.equal(props.hidden, true);
assert.equal($save_btn.attr("data-status"), "saved");

46
static/js/settings_org.js
View File

@ -535,20 +535,31 @@ exports.sync_realm_settings = function (property) {
discard_property_element_changes(element);
}
};
function show_hide_element($element, show) {
if (show) {
$element.removeClass('hide').addClass('.show').fadeIn(300);
return;
}
$element.fadeOut(300);
}
exports.change_save_button_state = function ($element, state) {
function show_hide_element($element, show, fadeout_delay) {
if (show) {
$element.removeClass('hide').addClass('.show').fadeIn(300);
return;
}
setTimeout(function () {
$element.fadeOut(300);
}, fadeout_delay);
}
var $saveBtn = $element.find('.save-button');
var $textEl = $saveBtn.find('.icon-button-text');
if (state !== "saving") {
$saveBtn.removeClass('saving');
}
if (state === "discarded") {
show_hide_element($element, false);
return;
}
var button_text;
var data_status;
var is_show;
@ -556,17 +567,18 @@ exports.change_save_button_state = function ($element, state) {
button_text = i18n.t("Save changes");
data_status = "unsaved";
is_show = true;
$element.find('.discard-button').show();
} else if (state === "saved") {
button_text = i18n.t("Save changes");
data_status = "";
is_show = false;
} else if (state === "discarded") {
$element.removeClass('saving');
is_show = false;
} else if (state === "saving") {
button_text = i18n.t("Saving");
data_status = "saving";
is_show = true;
$element.find('.discard-button').hide();
$saveBtn.addClass('saving');
} else if (state === "failed") {
button_text = i18n.t("Save changes");
@ -578,13 +590,9 @@ exports.change_save_button_state = function ($element, state) {
is_show = false;
}
if (button_text) {
$textEl.text(button_text);
}
if (data_status) {
$saveBtn.attr("data-status", data_status);
}
show_hide_element($element, is_show);
$textEl.text(button_text);
$saveBtn.attr("data-status", data_status);
show_hide_element($element, is_show, 800);
};
exports.set_up = function () {
@ -704,9 +712,7 @@ exports.build_page = function () {
data: data,
success: function (response_data) {
failed_alert_elem.hide();
setTimeout(function () {
exports.change_save_button_state(save_btn_container, "succeeded");
}, 500);
exports.change_save_button_state(save_btn_container, "succeeded");
if (success_continuation !== undefined) {
success_continuation(response_data);
}