From 36fcb67812def2f1f123daf4cdedbf11a516bfe8 Mon Sep 17 00:00:00 2001 From: Pragati Agrawal Date: Thu, 7 Mar 2019 19:48:10 +0530 Subject: [PATCH] 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. --- frontend_tests/node_tests/settings_org.js | 9 ++++- static/js/settings_org.js | 46 +++++++++++++---------- 2 files changed, 34 insertions(+), 21 deletions(-) diff --git a/frontend_tests/node_tests/settings_org.js b/frontend_tests/node_tests/settings_org.js index a1cbaa1f95..3449db59d5 100644 --- a/frontend_tests/node_tests/settings_org.js +++ b/frontend_tests/node_tests/settings_org.js @@ -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', $('') @@ -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"); diff --git a/static/js/settings_org.js b/static/js/settings_org.js index bfa467ec61..dbcde61e96 100644 --- a/static/js/settings_org.js +++ b/static/js/settings_org.js @@ -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); }