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

left_sidebar: Maintain Channels hover state while showing popover.

This commit is contained in:
Karl Stolley 2024-10-23 11:59:32 -05:00 committed by Tim Abbott
parent 70d9d8c09e
commit 625245af50
2 changed files with 19 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/add_stream_options_popover.ts
View File

@ -31,6 +31,8 @@ export function initialize(): void {
instance.setContent(parse_html(render_left_sidebar_stream_setting_popover()));
popover_menus.on_show_prep(instance);
$("#streams_header").addClass("showing-streams-popover");
// When showing the popover menu, we want the
// "Add channels" and the "Filter channels" tooltip
// to appear below the "Add channels" icon.
@ -55,6 +57,9 @@ export function initialize(): void {
onHidden(instance) {
instance.destroy();
popover_menus.popover_instances.stream_settings = null;
$("#streams_header").removeClass("showing-streams-popover");
// After the popover menu is closed, we want the
// "Add channels" and the "Filter channels" tooltip
// to appear at it's original position that is

28
web/styles/left_sidebar.css
View File

@ -1556,16 +1556,6 @@ li.topic-list-item {
background-color: var(--color-background);
border-radius: 4px;
&:hover {
background-color: var(--color-background-opaque-hover-narrow-filter);
box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
.left-sidebar-title,
.sidebar-heading-icon {
opacity: var(--opacity-sidebar-heading-hover);
}
}
&.showing-stream-search-section {
/* Open up the stream-search rows. The 10px
row maintains space with the streams list
@ -1610,10 +1600,6 @@ li.topic-list-item {
}
}
&:hover #filter_streams_tooltip {
display: flex;
}
#add_streams_tooltip {
grid-row: 1 / 1;
margin: 2px 0;
@ -1632,9 +1618,21 @@ li.topic-list-item {
}
}
&:hover #streams_inline_icon {
&:hover,
&.showing-streams-popover {
background-color: var(--color-background-opaque-hover-narrow-filter);
box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
.left-sidebar-title,
.sidebar-heading-icon {
opacity: var(--opacity-sidebar-heading-hover);
}
#filter_streams_tooltip,
#streams_inline_icon {
display: flex;
}
}
.stream_search_section {
grid-area: filter-box;