mirror of https://github.com/zulip/zulip.git
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:
parent
6a40c17ccf
commit
e6e601077f
|
@ -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,
|
||||
|
|
|
@ -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");
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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: () => {
|
||||
|
|
|
@ -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},
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue