Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

stream_popover: Migrate Bootstrap to Tippy in starred messages' popover.

This commit is contained in:
Daniil Fadeev 2023-03-08 19:12:24 +04:00 committed by Tim Abbott
parent 2b6ec56238
commit b65b94894f
8 changed files with 103 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/src/hotkey.js
View File

@ -362,6 +362,11 @@ function handle_popover_events(event_name) {
return true;
}
if (popover_menus.is_starred_messages_visible()) {
popover_menus.starred_messages_sidebar_menu_handle_keyboard(event_name);
return true;
}
if (popovers.user_info_manage_menu_popped()) {
popovers.user_info_popover_manage_menu_handle_keyboard(event_name);
return true;
@ -397,10 +402,6 @@ function handle_popover_events(event_name) {
return true;
}
if (stream_popover.starred_messages_popped()) {
stream_popover.starred_messages_sidebar_menu_handle_keyboard(event_name);
return true;
}
return false;
}

97
web/src/popover_menus.js
View File

@ -11,7 +11,9 @@ import render_compose_control_buttons_popover from "../templates/compose_control
import render_compose_select_enter_behaviour_popover from "../templates/compose_select_enter_behaviour_popover.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";
import * as blueslip from "./blueslip";
import * as channel from "./channel";
import * as common from "./common";
import * as compose_actions from "./compose_actions";
@ -28,6 +30,8 @@ import * as popovers from "./popovers";
import * as read_receipts from "./read_receipts";
import * as rows from "./rows";
import * as settings_data from "./settings_data";
import * as starred_messages from "./starred_messages";
import * as starred_messages_ui from "./starred_messages_ui";
import * as stream_popover from "./stream_popover";
import {parse_html} from "./ui_util";
import * as unread_ops from "./unread_ops";
@ -36,18 +40,47 @@ import {user_settings} from "./user_settings";
let left_sidebar_stream_setting_popover_displayed = false;
let compose_mobile_button_popover_displayed = false;
export let compose_enter_sends_popover_displayed = false;
let compose_control_buttons_popover_instance;
let message_actions_popover_displayed = false;
let message_actions_popover_keyboard_toggle = false;
let compose_control_buttons_popover_instance;
let starred_messages_popover_instance;
export function actions_popped() {
return message_actions_popover_displayed;
}
export function is_starred_messages_visible() {
return starred_messages_popover_instance?.state.isVisible;
}
export function get_compose_control_buttons_popover() {
return compose_control_buttons_popover_instance;
}
export function get_starred_messages_popover() {
return starred_messages_popover_instance;
}
function get_popover_items_for_instance(instance) {
const $current_elem = $(instance.popper);
const class_name = $current_elem.attr("class");
if (!$current_elem) {
blueslip.error(
`Trying to get menu items when popover with class "${class_name}" is closed.`,
);
return undefined;
}
return $current_elem.find("li:not(.divider):visible a");
}
export function starred_messages_sidebar_menu_handle_keyboard(key) {
const items = get_popover_items_for_instance(starred_messages_popover_instance);
popovers.popover_items_handle_keyboard(key, items);
}
const default_popover_props = {
delay: 0,
appendTo: () => document.body,
@ -69,7 +102,8 @@ export function any_active() {
compose_mobile_button_popover_displayed ||
compose_control_buttons_popover_instance ||
compose_enter_sends_popover_displayed ||
message_actions_popover_displayed
message_actions_popover_displayed ||
is_starred_messages_visible()
);
}
@ -441,4 +475,63 @@ export function initialize() {
message_actions_popover_keyboard_toggle = false;
},
});
// Starred messages popover
tippy_no_propagation(".starred-messages-sidebar-menu-icon", {
placement: "right",
maxWidth: "none",
popperOptions: {
modifiers: [
{
name: "flip",
options: {
fallbackPlacements: "bottom",
},
},
{
name: "preventOverflow",
options: {
padding: 40,
},
},
],
},
onMount(instance) {
const $popper = $(instance.popper);
starred_messages_popover_instance = instance;
$popper.one("click", "#unstar_all_messages", () => {
starred_messages_ui.confirm_unstar_all_messages();
instance.hide();
});
$popper.one("click", "#toggle_display_starred_msg_count", () => {
const data = {};
const starred_msg_counts = user_settings.starred_message_counts;
data.starred_message_counts = JSON.stringify(!starred_msg_counts);
channel.patch({
url: "/json/settings",
data,
});
instance.hide();
});
},
onShow(instance) {
popovers.hide_all_except_sidebars();
const show_unstar_all_button = starred_messages.get_count() > 0;
instance.setContent(
parse_html(
render_starred_messages_sidebar_actions({
show_unstar_all_button,
starred_message_counts: user_settings.starred_message_counts,
}),
),
);
},
onHidden(instance) {
instance.destroy();
starred_messages_popover_instance = undefined;
},
});
}

1
web/src/popovers.js
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_starred_messages_popover();
stream_popover.hide_drafts_popover();
hide_all_user_info_popovers();
hide_playground_links_popover();

3
web/src/starred_messages.js
View File

@ -1,5 +1,6 @@
import * as message_store from "./message_store";
import {page_params} from "./page_params";
import * as popover_menus from "./popover_menus";
import * as stream_popover from "./stream_popover";
import * as top_left_corner from "./top_left_corner";
import {user_settings} from "./user_settings";
@ -81,6 +82,6 @@ export function rerender_ui() {
}
stream_popover.hide_topic_popover();
popover_menus.get_starred_messages_popover()?.hide();
top_left_corner.update_starred_count(count);
stream_popover.hide_starred_messages_popover();
}

78
web/src/stream_popover.js
View File

@ -6,13 +6,11 @@ import render_all_messages_sidebar_actions from "../templates/all_messages_sideb
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_starred_messages_sidebar_actions from "../templates/starred_messages_sidebar_actions.hbs";
import render_stream_sidebar_actions from "../templates/stream_sidebar_actions.hbs";
import render_topic_sidebar_actions from "../templates/topic_sidebar_actions.hbs";
import * as blueslip from "./blueslip";
import * as browser_history from "./browser_history";
import * as channel from "./channel";
import * as compose_actions from "./compose_actions";
import * as composebox_typeahead from "./composebox_typeahead";
import * as confirm_dialog from "./confirm_dialog";
@ -37,7 +35,6 @@ import * as stream_settings_ui from "./stream_settings_ui";
import * as sub_store from "./sub_store";
import * as ui_report from "./ui_report";
import * as unread_ops from "./unread_ops";
import {user_settings} from "./user_settings";
import * as user_topics from "./user_topics";
// We handle stream popovers and topic popovers in this
@ -45,7 +42,6 @@ import * as user_topics from "./user_topics";
let current_stream_sidebar_elem;
let current_topic_sidebar_elem;
let all_messages_sidebar_elem;
let starred_messages_sidebar_elem;
let drafts_sidebar_elem;
let stream_widget;
let $stream_header_colorblock;
@ -89,11 +85,6 @@ export function all_messages_sidebar_menu_handle_keyboard(key) {
popovers.popover_items_handle_keyboard(key, items);
}
export function starred_messages_sidebar_menu_handle_keyboard(key) {
const items = get_popover_menu_items(starred_messages_sidebar_elem);
popovers.popover_items_handle_keyboard(key, items);
}
function elem_to_stream_id($elem) {
const stream_id = Number.parseInt($elem.attr("data-stream-id"), 10);
@ -120,10 +111,6 @@ export function all_messages_popped() {
return all_messages_sidebar_elem !== undefined;
}
export function starred_messages_popped() {
return starred_messages_sidebar_elem !== undefined;
}
export function drafts_popped() {
return drafts_sidebar_elem !== undefined;
}
@ -152,14 +139,6 @@ export function hide_all_messages_popover() {
}
}
export function hide_starred_messages_popover() {
if (starred_messages_popped()) {
$(starred_messages_sidebar_elem).popover("destroy");
hide_left_sidebar_menu_icon();
starred_messages_sidebar_elem = undefined;
}
}
export function hide_drafts_popover() {
if (drafts_popped()) {
$(drafts_sidebar_elem).popover("destroy");
@ -348,36 +327,6 @@ function build_all_messages_popover(e) {
e.stopPropagation();
}
function build_starred_messages_popover(e) {
const elt = e.target;
if (starred_messages_popped() && starred_messages_sidebar_elem === elt) {
hide_starred_messages_popover();
e.stopPropagation();
return;
}
popovers.hide_all_except_sidebars();
const show_unstar_all_button = starred_messages.get_count() > 0;
const content = render_starred_messages_sidebar_actions({
show_unstar_all_button,
starred_message_counts: user_settings.starred_message_counts,
});
$(elt).popover({
content,
html: true,
trigger: "manual",
fixed: true,
});
$(elt).popover("show");
starred_messages_sidebar_elem = elt;
show_left_sidebar_menu_icon(elt);
e.stopPropagation();
}
function build_drafts_popover(e) {
const elt = e.target;
@ -624,12 +573,6 @@ export function register_click_handlers() {
$("#global_filters").on("click", ".all-messages-sidebar-menu-icon", build_all_messages_popover);
$("#global_filters").on(
"click",
".starred-messages-sidebar-menu-icon",
build_starred_messages_popover,
);
$("#global_filters").on("click", ".drafts-sidebar-menu-icon", build_drafts_popover);
$("body").on("click keypress", ".move-topic-dropdown .list_item", (e) => {
@ -684,14 +627,6 @@ export function register_stream_handlers() {
unread_ops.confirm_mark_all_as_read();
});
// Unstar all messages
$("body").on("click", "#unstar_all_messages", (e) => {
hide_starred_messages_popover();
e.preventDefault();
e.stopPropagation();
starred_messages_ui.confirm_unstar_all_messages();
});
$("body").on("click", "#delete_all_drafts_sidebar", (e) => {
hide_drafts_popover();
e.stopPropagation();
@ -711,19 +646,6 @@ export function register_stream_handlers() {
);
});
// Toggle displaying starred message count
$("body").on("click", "#toggle_display_starred_msg_count", (e) => {
hide_starred_messages_popover();
e.preventDefault();
e.stopPropagation();
const starred_msg_counts = user_settings.starred_message_counts;
const data = {};
data.starred_message_counts = JSON.stringify(!starred_msg_counts);
channel.patch({
url: "/json/settings",
data,
});
});
// Mute/unmute
$("body").on("click", ".toggle_stream_muted", (e) => {
const sub = stream_popover_sub(e);

2
web/tests/hotkey.test.js
View File

@ -66,6 +66,7 @@ const popovers = mock_esm("../src/popovers", {
});
const popover_menus = mock_esm("../src/popover_menus", {
actions_popped: () => false,
is_starred_messages_visible: () => false,
});
const reactions = mock_esm("../src/reactions");
const search = mock_esm("../src/search");
@ -86,7 +87,6 @@ const stream_popover = mock_esm("../src/stream_popover", {
stream_popped: () => false,
topic_popped: () => false,
all_messages_popped: () => false,
starred_messages_popped: () => false,
});
message_lists.current = {

1
web/tests/popovers.test.js
View File

@ -33,7 +33,6 @@ mock_esm("../src/stream_popover", {
hide_stream_popover: noop,
hide_topic_popover: noop,
hide_all_messages_popover: noop,
hide_starred_messages_popover: noop,
hide_drafts_popover: noop,
hide_streamlist_sidebar: noop,
});

1
web/tests/starred_messages.test.js
View File

@ -12,7 +12,6 @@ const top_left_corner = mock_esm("../src/top_left_corner", {
});
const stream_popover = mock_esm("../src/stream_popover", {
hide_topic_popover() {},
hide_starred_messages_popover() {},
});
const message_store = zrequire("message_store");