dialog_widget: Append dialog_widget to the body element.

We attach the DOM for the modal to the body element
to avoid style interference from other elements and having to choose
a separate parent element for every single dialog_widget.
This commit is contained in:
Ganesh Pawar 2021-07-04 11:33:07 +05:30 committed by Tim Abbott
parent 6a40c17ccf
commit e6e601077f
16 changed files with 10 additions and 64 deletions

View File

@ -95,12 +95,9 @@ export function build_user_avatar_widget(upload_function) {
},
});
}
const modal_parent = $("#profile-settings");
const html_body = render_confirm_delete_user_avatar();
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Delete profile picture"}),
html_body,
on_click: delete_user_avatar,

View File

@ -19,9 +19,8 @@ import * as settings_data from "./settings_data";
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.
2) We attach the DOM for the modal to the body element
to avoid style interference from other elements.
3) The cancel button is driven by bootstrap.js.
@ -68,7 +67,6 @@ export function launch(conf) {
"html_heading",
"html_body",
"on_click",
"parent",
];
// Optional parameters:
@ -103,7 +101,7 @@ export function launch(conf) {
danger_submit_button: conf.danger_submit_button,
});
const dialog = $(html);
conf.parent.append(dialog);
$("body").append(dialog);
if (conf.post_render !== undefined) {
conf.post_render();
@ -126,7 +124,7 @@ export function launch(conf) {
});
if (conf.focus_submit_on_open) {
conf.parent.on("shown.bs.modal", () => {
dialog.on("shown.bs.modal", () => {
submit_button.trigger("focus");
});
}

View File

@ -1008,7 +1008,6 @@ export function edit_last_sent_message() {
export function delete_message(msg_id) {
const html_body = render_delete_message_modal();
const modal_parent = $("#main_div");
function do_delete_message() {
currently_deleting_messages.push(msg_id);
@ -1037,7 +1036,6 @@ export function delete_message(msg_id) {
}
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Delete message"}),
html_body,
help_link: "/help/edit-or-delete-a-message#delete-a-message",

View File

@ -1,5 +1,3 @@
import $ from "jquery";
import render_confirm_mute_user from "../templates/confirm_dialog/confirm_mute_user.hbs";
import * as activity from "./activity";
@ -27,13 +25,11 @@ export function confirm_mute_user(user_id) {
mute_user(user_id);
}
const modal_parent = $(".mute-user-modal-holder");
const html_body = render_confirm_mute_user({
user_name: people.get_full_name(user_id),
});
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Mute user"}),
help_link: "/help/mute-a-user",
html_body,

View File

@ -598,9 +598,7 @@ export function set_up() {
});
}
const html_body = render_confirm_deactivate_own_user();
const modal_parent = $("#account-settings .account-settings-form");
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Deactivate your account"}),
html_body,
on_click: handle_confirm,

View File

@ -250,13 +250,11 @@ export function set_up() {
}
if (is_default_emoji(emoji.name)) {
const modal_parent = $("#settings_content");
const html_body = emoji_settings_warning_modal({
emoji_name: emoji.name,
});
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Override built-in emoji?"}),
html_body,
on_click: submit_custom_emoji_request,

View File

@ -197,11 +197,9 @@ export function on_load_success(invites_data, initialize_event_handlers) {
email,
referred_by,
};
const modal_parent = $("#admin_invites_table");
const html_body = render_settings_revoke_invite_modal(ctx);
confirm_dialog.launch({
parent: modal_parent,
html_heading: ctx.is_multiuse
? $t_html({defaultMessage: "Revoke invitation link"})
: $t_html({defaultMessage: "Revoke invitation to {email}"}, {email}),
@ -224,11 +222,9 @@ export function on_load_success(invites_data, initialize_event_handlers) {
const email = row.find(".email").text();
meta.current_resend_invite_user_modal_row = row;
meta.invite_id = $(e.currentTarget).attr("data-invite-id");
const modal_parent = $("#admin_invites_table");
const html_body = render_settings_resend_invite_modal({email});
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Resend invitation"}),
html_body,
on_click: do_resend_invite,

View File

@ -51,7 +51,6 @@ function open_linkifier_edit_form(linkifier_id) {
pattern: linkifier.pattern,
url_format_string: linkifier.url_format,
});
const modal_parent = $("#linkifier-edit-form-modal-container");
function submit_linkifier_form() {
const change_linkifier_button = $(".dialog_submit_button");
@ -99,7 +98,6 @@ function open_linkifier_edit_form(linkifier_id) {
dialog_widget.launch({
html_heading: $t_html({defaultMessage: "Edit linkfiers"}),
parent: modal_parent,
html_body,
on_click: submit_linkifier_form,
fade: true,

View File

@ -1235,10 +1235,8 @@ export function build_page() {
}
const html_body = render_settings_deactivate_realm_modal();
const modal_parent = $(".organization-box");
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Deactivate organization"}),
help_link: "/help/deactivate-your-organization",
html_body,

View File

@ -353,15 +353,11 @@ export function set_up() {
});
}
// This is mostly important for styling concerns.
const modal_parent = $("#settings_content");
const html_body = render_confirm_delete_user({
group_name: user_group.name,
});
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Delete user group"}),
html_body,
on_click: delete_user_group,

View File

@ -419,7 +419,6 @@ function get_human_profile_data(fields_user_pills) {
function confirm_deactivation(row, user_id, status_field) {
const user = people.get_by_user_id(user_id);
const modal_parent = $("#settings_content .organization-box");
const opts = {
username: user.full_name,
email: user.email,
@ -443,7 +442,6 @@ function confirm_deactivation(row, user_id, status_field) {
}
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Deactivate {email}"}, {email: user.email}),
html_body,
on_click: handle_confirm,
@ -539,7 +537,6 @@ function handle_human_form(tbody, status_field) {
disable_role_dropdown: person.is_owner && !page_params.is_owner,
});
const modal_parent = $("#user-info-form-modal-container");
let fields_user_pills;
function set_role_dropdown_and_fields_user_pills() {
@ -584,7 +581,6 @@ function handle_human_form(tbody, status_field) {
dialog_widget.launch({
html_heading: $t_html({defaultMessage: "Change user info and roles"}),
parent: modal_parent,
html_body,
on_click: submit_user_details,
post_render: set_role_dropdown_and_fields_user_pills,
@ -610,8 +606,6 @@ function handle_bot_form(tbody, status_field) {
full_name: bot.full_name,
});
const modal_parent = $("#user-info-form-modal-container");
let owner_widget;
function submit_bot_details() {
@ -656,7 +650,6 @@ function handle_bot_form(tbody, status_field) {
dialog_widget.launch({
html_heading: $t_html({defaultMessage: "Change bot info and owner"}),
parent: modal_parent,
html_body,
on_click: submit_bot_details,
post_render: get_bot_owner_widget,

View File

@ -1,5 +1,3 @@
import $ from "jquery";
import render_confirm_unstar_all_messages from "../templates/confirm_dialog/confirm_unstar_all_messages.hbs";
import render_confirm_unstar_all_messages_in_topic from "../templates/confirm_dialog/confirm_unstar_all_messages_in_topic.hbs";
@ -9,11 +7,9 @@ import * as message_flags from "./message_flags";
import * as stream_data from "./stream_data";
export function confirm_unstar_all_messages() {
const modal_parent = $(".left-sidebar-modal-holder");
const html_body = render_confirm_unstar_all_messages();
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Unstar all messages"}),
html_body,
on_click: message_flags.unstar_all_messages,
@ -30,14 +26,12 @@ export function confirm_unstar_all_messages_in_topic(stream_id, topic) {
return;
}
const modal_parent = $(".left-sidebar-modal-holder");
const html_body = render_confirm_unstar_all_messages_in_topic({
stream_name,
topic,
});
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Unstar messages in topic"}),
html_body,
on_click,

View File

@ -455,14 +455,12 @@ export function set_up_handlers() {
}
if (principals.length >= 50) {
const modal_parent = $("#subscription_overlay");
const html_body = render_subscription_invites_warning_modal({
stream_name,
count: principals.length,
});
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Large number of subscribers"}),
html_body,
on_click: () => {

View File

@ -914,11 +914,9 @@ export function initialize() {
}
if (sub.invite_only && people.is_my_user_id(target_user_id)) {
const modal_parent = $("#subscriptions_table");
const html_body = render_unsubscribe_private_stream_modal();
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html(
{defaultMessage: "Unsubscribe from {stream_name}"},
{stream_name: sub.name},
@ -941,7 +939,7 @@ export function initialize() {
const stream_row = $(
`#subscriptions_table div.stream-row[data-stream-id='${CSS.escape(sub.stream_id)}']`,
);
stream_settings_ui.sub_or_unsub(sub, false, stream_row);
stream_settings_ui.sub_or_unsub(sub, stream_row);
if (!sub.subscribed) {
open_edit_panel_for_row(stream_row);
@ -978,14 +976,12 @@ export function initialize() {
archive_stream(stream_id, $(".stream_change_property_info"), row);
}
const modal_parent = $("#subscription_overlay");
const stream_name = stream_data.maybe_get_stream_name(stream_id);
const html_body = render_settings_deactivation_stream_modal({
stream_name,
});
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html(
{defaultMessage: "Archive stream {stream}"},
{stream: stream_name},

View File

@ -543,7 +543,7 @@ export function register_stream_handlers() {
$(this).closest(".popover").fadeOut(500).delay(500).remove();
const sub = stream_popover_sub(e);
stream_settings_ui.sub_or_unsub(sub, true);
stream_settings_ui.sub_or_unsub(sub);
e.preventDefault();
e.stopPropagation();
});
@ -664,11 +664,9 @@ export function register_topic_handlers() {
hide_topic_popover();
const modal_parent = $("#delete-topic-modal-holder");
const html_body = render_delete_topic_modal(args);
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html({defaultMessage: "Delete topic"}),
help_link: "/help/delete-a-topic",
html_body,

View File

@ -799,7 +799,7 @@ export function keyboard_sub() {
const active_data = get_active_data();
const row_data = get_row_data(active_data.row);
if (row_data) {
sub_or_unsub(row_data.object, false);
sub_or_unsub(row_data.object);
}
}
@ -949,14 +949,9 @@ export function open_create_stream() {
browser_history.update("#streams/new");
}
export function unsubscribe_from_private_stream(sub, from_stream_popover) {
let modal_parent = $("#subscriptions_table");
export function unsubscribe_from_private_stream(sub) {
const html_body = render_unsubscribe_private_stream_modal();
if (from_stream_popover) {
modal_parent = $(".left-sidebar-modal-holder");
}
function unsubscribe_from_stream() {
let stream_row;
if (overlays.streams_open()) {
@ -969,7 +964,6 @@ export function unsubscribe_from_private_stream(sub, from_stream_popover) {
}
confirm_dialog.launch({
parent: modal_parent,
html_heading: $t_html(
{defaultMessage: "Unsubscribe from {stream_name}"},
{stream_name: sub.name},
@ -980,11 +974,11 @@ export function unsubscribe_from_private_stream(sub, from_stream_popover) {
});
}
export function sub_or_unsub(sub, from_stream_popover, stream_row) {
export function sub_or_unsub(sub, stream_row) {
if (sub.subscribed) {
// TODO: This next line should allow guests to access web-public streams.
if (sub.invite_only || page_params.is_guest) {
unsubscribe_from_private_stream(sub, from_stream_popover);
unsubscribe_from_private_stream(sub);
return;
}
ajaxUnsubscribe(sub, stream_row);