popovers: Migrate "drafts" popover to Tippy.

This commit is contained in:
Daniil Fadeev 2023-03-21 18:34:25 +04:00 committed by Tim Abbott
parent 22561e2f3b
commit edb293c3da
3 changed files with 29 additions and 48 deletions

View File

@ -9,6 +9,7 @@ import tippy, {delegate} from "tippy.js";
import render_actions_popover_content from "../templates/actions_popover_content.hbs";
import render_compose_control_buttons_popover from "../templates/compose_control_buttons_popover.hbs";
import render_compose_select_enter_behaviour_popover from "../templates/compose_select_enter_behaviour_popover.hbs";
import render_drafts_sidebar_actions from "../templates/drafts_sidebar_action.hbs";
import render_left_sidebar_stream_setting_popover from "../templates/left_sidebar_stream_setting_popover.hbs";
import render_mobile_message_buttons_popover_content from "../templates/mobile_message_buttons_popover_content.hbs";
import render_starred_messages_sidebar_actions from "../templates/starred_messages_sidebar_actions.hbs";
@ -18,6 +19,7 @@ import * as channel from "./channel";
import * as common from "./common";
import * as compose_actions from "./compose_actions";
import * as condense from "./condense";
import * as drafts from "./drafts";
import * as emoji_picker from "./emoji_picker";
import * as giphy from "./giphy";
import {$t} from "./i18n";
@ -48,6 +50,7 @@ let compose_control_buttons_popover_instance;
const popover_instances = {
compose_control_buttons: null,
starred_messages: null,
drafts: null,
};
export function sidebar_menu_instance_handle_keyboard(instance, key) {
@ -95,6 +98,8 @@ const default_popover_props = {
is a popover styling similar to Bootstrap. We've also customized
its CSS to support Zulip's dark theme. */
theme: "light-border",
// The maxWidth has been set to "none" to avoid the default value of 300px.
maxWidth: "none",
touch: true,
/* Don't use allow-HTML here since it is unsafe. Instead, use `parse_html`
to generate the required html */
@ -535,4 +540,28 @@ export function initialize() {
popover_instances.starred_messages = undefined;
},
});
// Drafts popover
tippy_no_propagation(".drafts-sidebar-menu-icon", {
...left_sidebar_tippy_options,
onMount(instance) {
const $popper = $(instance.popper);
$popper.addClass("drafts-popover");
popover_instances.drafts = instance;
$popper.one("click", "#delete_all_drafts_sidebar", () => {
drafts.confirm_delete_all_drafts();
instance.hide();
});
},
onShow(instance) {
popovers.hide_all_except_sidebars();
instance.setContent(parse_html(render_drafts_sidebar_actions({})));
},
onHidden(instance) {
instance.destroy();
popover_instances.drafts = undefined;
},
});
}

View File

@ -1142,7 +1142,6 @@ export function hide_all_except_sidebars(opts) {
stream_popover.hide_stream_popover();
stream_popover.hide_topic_popover();
stream_popover.hide_all_messages_popover();
stream_popover.hide_drafts_popover();
hide_all_user_info_popovers();
hide_playground_links_popover();

View File

@ -4,7 +4,6 @@ import $ from "jquery";
import * as resolved_topic from "../shared/src/resolved_topic";
import render_all_messages_sidebar_actions from "../templates/all_messages_sidebar_actions.hbs";
import render_delete_topic_modal from "../templates/confirm_dialog/confirm_delete_topic.hbs";
import render_drafts_sidebar_actions from "../templates/drafts_sidebar_action.hbs";
import render_move_topic_to_stream from "../templates/move_topic_to_stream.hbs";
import render_stream_sidebar_actions from "../templates/stream_sidebar_actions.hbs";
import render_topic_sidebar_actions from "../templates/topic_sidebar_actions.hbs";
@ -15,7 +14,6 @@ import * as compose_actions from "./compose_actions";
import * as composebox_typeahead from "./composebox_typeahead";
import * as confirm_dialog from "./confirm_dialog";
import * as dialog_widget from "./dialog_widget";
import * as drafts from "./drafts";
import {DropdownListWidget} from "./dropdown_list_widget";
import * as hash_util from "./hash_util";
import {$t, $t_html} from "./i18n";
@ -42,7 +40,6 @@ import * as user_topics from "./user_topics";
let current_stream_sidebar_elem;
let current_topic_sidebar_elem;
let all_messages_sidebar_elem;
let drafts_sidebar_elem;
let stream_widget;
let $stream_header_colorblock;
@ -111,10 +108,6 @@ export function all_messages_popped() {
return all_messages_sidebar_elem !== undefined;
}
export function drafts_popped() {
return drafts_sidebar_elem !== undefined;
}
export function hide_stream_popover() {
if (stream_popped()) {
$(current_stream_sidebar_elem).popover("destroy");
@ -139,14 +132,6 @@ export function hide_all_messages_popover() {
}
}
export function hide_drafts_popover() {
if (drafts_popped()) {
$(drafts_sidebar_elem).popover("destroy");
hide_left_sidebar_menu_icon();
drafts_sidebar_elem = undefined;
}
}
export function show_streamlist_sidebar() {
$(".app-main .column-left").addClass("expanded");
resize.resize_stream_filters_container();
@ -327,30 +312,6 @@ function build_all_messages_popover(e) {
e.stopPropagation();
}
function build_drafts_popover(e) {
const elt = e.target;
if (drafts_popped() && drafts_sidebar_elem === elt) {
hide_drafts_popover();
e.stopPropagation();
return;
}
popovers.hide_all_except_sidebars();
const content = render_drafts_sidebar_actions({});
$(elt).popover({
content,
html: true,
trigger: "manual",
fixed: true,
});
$(elt).popover("show");
drafts_sidebar_elem = elt;
show_left_sidebar_menu_icon(elt);
e.stopPropagation();
}
export function build_move_topic_to_stream_popover(current_stream_id, topic_name, message) {
const current_stream_name = stream_data.maybe_get_stream_name(current_stream_id);
const args = {
@ -573,8 +534,6 @@ export function register_click_handlers() {
$("#global_filters").on("click", ".all-messages-sidebar-menu-icon", build_all_messages_popover);
$("#global_filters").on("click", ".drafts-sidebar-menu-icon", build_drafts_popover);
$("body").on("click keypress", ".move-topic-dropdown .list_item", (e) => {
// We want the dropdown to collapse once any of the list item is pressed
// and thus don't want to kill the natural bubbling of event.
@ -627,12 +586,6 @@ export function register_stream_handlers() {
unread_ops.confirm_mark_all_as_read();
});
$("body").on("click", "#delete_all_drafts_sidebar", (e) => {
hide_drafts_popover();
e.stopPropagation();
drafts.confirm_delete_all_drafts();
});
// Unstar all messages in topic
$("body").on("click", ".sidebar-popover-unstar-all-in-topic", (e) => {
e.preventDefault();