mirror of
https://github.com/zulip/zulip.git
synced 2025-11-12 18:06:44 +00:00
f6d8204d23
We show red color for confirmation modals and green for other modals with input fields. As of this commit, only confirmation modals use dialog_widget but some other modals with input fields will be migrated to use dialog_widget.
133 lines
4.2 KiB
JavaScript
133 lines
4.2 KiB
JavaScript
import $ from "jquery";
|
|
|
|
import render_dialog_widget from "../templates/dialog_widget.hbs";
|
|
import render_dialog_heading from "../templates/dialog_widget_heading.hbs";
|
|
|
|
import * as blueslip from "./blueslip";
|
|
import {$t_html} from "./i18n";
|
|
import * as overlays from "./overlays";
|
|
import * as settings_data from "./settings_data";
|
|
|
|
/*
|
|
Look for dialog_widget in settings_users
|
|
to see an example of how to use this widget. It's
|
|
pretty simple to use!
|
|
|
|
Some things to note:
|
|
|
|
1) We create DOM on the fly, and we remove
|
|
the DOM once it's closed.
|
|
|
|
2) We attach the DOM for the modal to conf.parent,
|
|
and this temporary DOM location will influence
|
|
how styles work.
|
|
|
|
3) The cancel button is driven by bootstrap.js.
|
|
|
|
4) For settings, we have a click handler in settings.js
|
|
that will close the dialog via overlays.close_active_modal.
|
|
|
|
5) We assume that since this is a modal, you will
|
|
only ever have one dialog active at any
|
|
time.
|
|
|
|
6) If a modal wants a loading spinner, it should pass loading_spinner: true.
|
|
This will show a loading spinner when the yes button is clicked.
|
|
The caller is responsible for calling hide_dialog_spinner()
|
|
to hide the spinner in both success and error handlers.
|
|
|
|
7) If a caller needs to run code after the modal body is added
|
|
to DOM, it can do so by passing a post_render hook.
|
|
*/
|
|
|
|
export function hide_dialog_spinner() {
|
|
$(".dialog_submit_button .loader").hide();
|
|
$(".dialog_submit_button span").show();
|
|
$(".dialog_submit_button").prop("disabled", false);
|
|
$("#dialog_widget_modal .close-modal-btn").prop("disabled", false);
|
|
}
|
|
|
|
export function show_dialog_spinner() {
|
|
$(".dialog_submit_button .loader").css("display", "inline-block");
|
|
$(".dialog_submit_button span").hide();
|
|
$(".dialog_submit_button").prop("disabled", true);
|
|
$("#dialog_widget_modal .close-modal-btn").prop("disabled", true);
|
|
if (!settings_data.using_dark_theme()) {
|
|
$(".dialog_submit_button object").on("load", function () {
|
|
const doc = this.getSVGDocument();
|
|
const $svg = $(doc).find("svg");
|
|
$svg.find("rect").css("fill", "#000");
|
|
});
|
|
}
|
|
}
|
|
|
|
export function launch(conf) {
|
|
const html = render_dialog_widget({fade: conf.fade, is_confirm_dialog: conf.is_confirm_dialog});
|
|
const dialog = $(html);
|
|
|
|
const mandatory_fields = [
|
|
// The html_ fields should be safe HTML. If callers
|
|
// interpolate user data into strings, they should use
|
|
// templates.
|
|
"html_heading",
|
|
"html_body",
|
|
"on_click",
|
|
"parent",
|
|
];
|
|
|
|
for (const f of mandatory_fields) {
|
|
if (conf[f] === undefined) {
|
|
blueslip.error("programmer omitted " + f);
|
|
}
|
|
}
|
|
|
|
conf.parent.append(dialog);
|
|
|
|
// Close any existing modals--on settings screens you can
|
|
// have multiple buttons that need confirmation.
|
|
if (overlays.is_modal_open()) {
|
|
overlays.close_modal("#dialog_widget_modal");
|
|
}
|
|
|
|
dialog.find(".dialog_heading").html(
|
|
render_dialog_heading({
|
|
heading_text: conf.html_heading,
|
|
link: conf.help_link,
|
|
}),
|
|
);
|
|
dialog.find(".dialog_body").append(conf.html_body);
|
|
|
|
const submit_button_span = dialog.find(".dialog_submit_button span");
|
|
|
|
let html_submit_button = conf.html_submit_button || $t_html({defaultMessage: "Save changes"});
|
|
submit_button_span.html(html_submit_button);
|
|
|
|
if (conf.post_render !== undefined) {
|
|
conf.post_render();
|
|
}
|
|
|
|
const submit_button = dialog.find(".dialog_submit_button");
|
|
// Set up handlers.
|
|
submit_button.on("click", () => {
|
|
if (conf.loading_spinner) {
|
|
show_dialog_spinner();
|
|
} else if (conf.is_confirm_dialog) {
|
|
overlays.close_modal("#dialog_widget_modal");
|
|
}
|
|
conf.on_click();
|
|
});
|
|
|
|
dialog.on("hidden.bs.modal", () => {
|
|
dialog.remove();
|
|
});
|
|
|
|
// Open the modal
|
|
overlays.open_modal("#dialog_widget_modal");
|
|
|
|
if (conf.is_confirm_dialog) {
|
|
conf.parent.on("shown.bs.modal", () => {
|
|
submit_button.trigger("focus");
|
|
});
|
|
}
|
|
}
|