mirror of
https://github.com/zulip/zulip.git
synced 2025-11-03 05:23:35 +00:00
5189826f27
Previously, when you clicked the confirmation button in a dialog_widget, we'd display a loading spinner on top of an ugly grey button background. Remove the ugly grey background color, while making sure the loading spinner inside the button looks good and doesn't resize the button. Fixes: #22002
93 lines
2.9 KiB
TypeScript
93 lines
2.9 KiB
TypeScript
import $ from "jquery";
|
|
|
|
import render_loader from "../templates/loader.hbs";
|
|
|
|
export function make_indicator(
|
|
$outer_container: JQuery,
|
|
{
|
|
abs_positioned = false,
|
|
text,
|
|
width,
|
|
height,
|
|
}: {abs_positioned?: boolean; text?: string; width?: number; height?: number} = {},
|
|
): void {
|
|
let $container = $outer_container;
|
|
|
|
// TODO: We set white-space to 'nowrap' because under some
|
|
// unknown circumstances (it happens on Keegan's laptop) the text
|
|
// width calculation, above, returns a result that's a few pixels
|
|
// too small. The container's div will be slightly too small,
|
|
// but that's probably OK for our purposes.
|
|
$outer_container.css({"white-space": "nowrap"});
|
|
|
|
$container.empty();
|
|
|
|
if (abs_positioned) {
|
|
// Create some additional containers to facilitate absolutely
|
|
// positioned spinners.
|
|
const container_id = $container.attr("id")!;
|
|
let $inner_container = $("<div>").attr("id", `${container_id}_box_container`);
|
|
$container.append($inner_container);
|
|
$container = $inner_container;
|
|
$inner_container = $("<div>").attr("id", `${container_id}_box`);
|
|
$container.append($inner_container);
|
|
$container = $inner_container;
|
|
}
|
|
|
|
const $spinner_elem = $("<div>")
|
|
.addClass("loading_indicator_spinner")
|
|
.attr("aria-hidden", "true");
|
|
$spinner_elem.html(render_loader({container_id: $outer_container.attr("id")}));
|
|
$container.append($spinner_elem);
|
|
let text_width = 0;
|
|
|
|
if (text !== undefined) {
|
|
const $text_elem = $("<span>").addClass("loading_indicator_text");
|
|
$text_elem.text(text);
|
|
$container.append($text_elem);
|
|
// See note, below
|
|
if (!abs_positioned) {
|
|
text_width = 20 + ($text_elem.width() ?? 0);
|
|
}
|
|
}
|
|
|
|
// These width calculations are tied to the spinner width and
|
|
// margins defined via CSS
|
|
if (width !== undefined) {
|
|
$container.css({width: width + text_width});
|
|
} else {
|
|
$container.css({width: 38 + text_width});
|
|
}
|
|
if (height !== undefined) {
|
|
$container.css({height});
|
|
} else {
|
|
$container.css({height: 0});
|
|
}
|
|
|
|
$outer_container.data("destroying", false);
|
|
}
|
|
|
|
export function destroy_indicator($container: JQuery): void {
|
|
if ($container.data("destroying")) {
|
|
return;
|
|
}
|
|
$container.data("destroying", true);
|
|
|
|
const spinner = $container.data("spinner_obj");
|
|
if (spinner !== undefined) {
|
|
spinner.stop();
|
|
}
|
|
$container.removeData("spinner_obj");
|
|
$container.empty();
|
|
$container.css({width: 0, height: 0});
|
|
}
|
|
|
|
export function show_button_spinner($elt: JQuery, using_dark_theme: boolean): void {
|
|
if (!using_dark_theme) {
|
|
$elt.attr("src", "/static/images/loading/loader-black.svg");
|
|
} else {
|
|
$elt.attr("src", "/static/images/loading/loader-white.svg");
|
|
}
|
|
$elt.css("display", "inline-block");
|
|
}
|