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

settings: Show spinner inside the confirm button for confirm_dialog. 

We show a spinner inside the button instead of hiding the button
and then showing the spinner in the bottom area. We also disable
the button to avoid repetitive clicking by user.
This commit is contained in:
sahil839 2021-06-24 14:52:13 +05:30 committed by Tim Abbott
parent 8d158852fd
commit 98bb0f7b28
4 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend_tests/puppeteer_tests/delete-message.ts
View File

@ -20,10 +20,10 @@ async function delete_message_test(page: Page): Promise<void> {
await page.waitForSelector("#confirm_dialog_modal", {visible: true});
await page.click(".confirm_dialog_yes_button");
await page.waitForSelector("#confirm_dialog_spinner .loading_indicator_spinner", {
await page.waitForSelector(".confirm_dialog_yes_button .loader", {
visible: true,
});
await page.waitForSelector(".confirm_dialog_yes_button", {hidden: true});
await page.waitForSelector(".confirm_dialog_yes_button span", {hidden: true});
await page.waitForFunction(
(expected_length: number) => $("#zhome .message_row").length === expected_length,
@ -32,7 +32,7 @@ async function delete_message_test(page: Page): Promise<void> {
);
await page.waitForSelector(`#${CSS.escape(last_message_id!)}`, {hidden: true});
await page.waitForSelector("#confirm_dialog_spinner .loading_indicator_spinner", {
await page.waitForSelector(".confirm_dialog_yes_button .loader", {
hidden: true,
});
}

25
static/js/confirm_dialog.js
View File

@ -4,7 +4,6 @@ import render_confirm_dialog from "../templates/confirm_dialog.hbs";
import render_confirm_dialog_heading from "../templates/confirm_dialog_heading.hbs";
import * as blueslip from "./blueslip";
import * as loading from "./loading";
import * as overlays from "./overlays";
/*
@ -37,15 +36,20 @@ import * as overlays from "./overlays";
*/
export function hide_confirm_dialog_spinner() {
const spinner = $("#confirm_dialog_spinner");
loading.destroy_indicator(spinner);
$("#confirm_dialog_modal > div.modal-footer > button").show();
$(".confirm_dialog_yes_button .loader").hide();
$(".confirm_dialog_yes_button span").show();
$(".confirm_dialog_yes_button").prop("disabled", false);
}
export function show_confirm_dialog_spinner() {
const spinner = $("#confirm_dialog_spinner");
$("#confirm_dialog_modal > div.modal-footer > button").hide();
loading.make_indicator(spinner);
$(".confirm_dialog_yes_button .loader").css("display", "inline-block");
$(".confirm_dialog_yes_button span").hide();
$(".confirm_dialog_yes_button").prop("disabled", true);
$(".confirm_dialog_yes_button object").on("load", function () {
const doc = this.getSVGDocument();
const $svg = $(doc).find("svg");
$svg.find("rect").css("fill", "#000");
});
}
export function launch(conf) {
@ -85,10 +89,11 @@ export function launch(conf) {
);
confirm_dialog.find(".confirm_dialog_body").prepend(conf.html_body);
const yes_button_span = confirm_dialog.find(".confirm_dialog_yes_button span");
yes_button_span.html(conf.html_yes_button);
const yes_button = confirm_dialog.find(".confirm_dialog_yes_button");
yes_button.html(conf.html_yes_button);
// Set up handlers.
yes_button.on("click", () => {
if (conf.loading_spinner) {

3
static/styles/settings.css
View File

@ -1581,13 +1581,14 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
margin-top: 10px;
}
#do_deactivate_self_button .loader {
.confirm_dialog_yes_button .loader {
display: none;
vertical-align: top;
position: relative;
height: 30px;
margin-top: -10px;
top: 5px;
width: 30px;
}
.dropdown-list-widget {

6
static/templates/confirm_dialog.hbs
View File

@ -8,7 +8,9 @@
</div>
<div class="modal-footer">
<button class="button rounded close-modal-btn" data-dismiss="modal">{{t "Cancel" }}</button>
<button class="button rounded btn-danger confirm_dialog_yes_button"></button>
<div id="confirm_dialog_spinner"></div>
<button class="button rounded btn-danger confirm_dialog_yes_button">
<object class="loader" type="image/svg+xml" data="/static/images/loader.svg"></object>
<span></span>
</button>
</div>
</div>