left-sidebar: Show the 3-dots icon when the menu is selected.

This commit fixes the issue where the 3-dots menu icons on the left
sidebar disappear even though the associated popover is open by
toggling a special CSS class on the menu item. It follows the same
approach used by the emoji picker on the message feed UI.

Fixes  #23157
This commit is contained in:
Eyuel Berga Woldemichael 2022-10-21 12:23:22 +00:00 committed by Tim Abbott
parent 019ff29daf
commit c8cfef0581
2 changed files with 24 additions and 0 deletions

View File

@ -49,6 +49,16 @@ let drafts_sidebar_elem;
let stream_widget;
let $stream_header_colorblock;
// Keep the menu icon over which the popover is based off visible.
function show_left_sidebar_menu_icon(element) {
$(element).closest("[class*='-sidebar-menu-icon']").addClass("left_sidebar_menu_icon_visible");
}
// Remove the class from element when popover is closed
function hide_left_sidebar_menu_icon() {
$(".left_sidebar_menu_icon_visible").removeClass("left_sidebar_menu_icon_visible");
}
function get_popover_menu_items(sidebar_elem) {
if (!sidebar_elem) {
blueslip.error("Trying to get menu items when action popover is closed.");
@ -120,6 +130,7 @@ export function drafts_popped() {
export function hide_stream_popover() {
if (stream_popped()) {
$(current_stream_sidebar_elem).popover("destroy");
hide_left_sidebar_menu_icon();
current_stream_sidebar_elem = undefined;
}
}
@ -127,6 +138,7 @@ export function hide_stream_popover() {
export function hide_topic_popover() {
if (topic_popped()) {
$(current_topic_sidebar_elem).popover("destroy");
hide_left_sidebar_menu_icon();
current_topic_sidebar_elem = undefined;
}
}
@ -134,6 +146,7 @@ export function hide_topic_popover() {
export function hide_all_messages_popover() {
if (all_messages_popped()) {
$(all_messages_sidebar_elem).popover("destroy");
hide_left_sidebar_menu_icon();
all_messages_sidebar_elem = undefined;
}
}
@ -141,6 +154,7 @@ 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;
}
}
@ -148,6 +162,7 @@ export function hide_starred_messages_popover() {
export function hide_drafts_popover() {
if (drafts_popped()) {
$(drafts_sidebar_elem).popover("destroy");
hide_left_sidebar_menu_icon();
drafts_sidebar_elem = undefined;
}
}
@ -257,6 +272,7 @@ function build_stream_popover(opts) {
});
current_stream_sidebar_elem = elt;
show_left_sidebar_menu_icon(elt);
}
function build_topic_popover(opts) {
@ -307,6 +323,7 @@ function build_topic_popover(opts) {
$(elt).popover("show");
current_topic_sidebar_elem = elt;
show_left_sidebar_menu_icon(elt);
}
function build_all_messages_popover(e) {
@ -332,6 +349,7 @@ function build_all_messages_popover(e) {
$(elt).popover("show");
all_messages_sidebar_elem = elt;
show_left_sidebar_menu_icon(elt);
e.stopPropagation();
}
@ -362,6 +380,7 @@ function build_starred_messages_popover(e) {
$(elt).popover("show");
starred_messages_sidebar_elem = elt;
show_left_sidebar_menu_icon(elt);
e.stopPropagation();
}
@ -386,6 +405,7 @@ function build_drafts_popover(e) {
$(elt).popover("show");
drafts_sidebar_elem = elt;
show_left_sidebar_menu_icon(elt);
e.stopPropagation();
}

View File

@ -387,6 +387,10 @@ li.top_left_recent_topics {
line-height: 1.1;
}
.left_sidebar_menu_icon_visible {
display: block !important;
}
/*
All of our left sidebar handlers use absolute
positioning. We should fix that.