paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 14:03:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

sidebars: Show overlays full-screen, in proper stacking order.

Browse Source 
This takes effect only at narrow viewports.

Fixes: #33713
This commit is contained in:
Karl Stolley
2025-03-04 10:43:18 -06:00
committed by Tim Abbott
parent 86cd95c35e
commit 71dc11189a
3 changed files with 59 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/css_variables.ts
View File

@@ -38,6 +38,7 @@ export const container_breakpoints = {
cq_xl_min: xl / base_em_px + "em",
cq_lg_min: lg / base_em_px + "em",
cq_md_min: md / base_em_px + "em",
cq_ml_min: ml / base_em_px + "em",
cq_sm_min: sm / base_em_px + "em",
cq_mm_min: mm / base_em_px + "em",
};

16
web/src/sidebar_ui.ts
View File

@@ -44,11 +44,13 @@ export let left_sidebar_expanded_as_overlay = false;
export let right_sidebar_expanded_as_overlay = false;
export function hide_userlist_sidebar(): void {
$(".app-main .column-right").removeClass("expanded");
const $userlist_sidebar = $(".app-main .column-right");
$userlist_sidebar.removeClass("expanded topmost-overlay");
right_sidebar_expanded_as_overlay = false;
}
export function show_userlist_sidebar(): void {
const $streamlist_sidebar = $(".app-main .column-left");
const $userlist_sidebar = $(".app-main .column-right");
if ($userlist_sidebar.css("display") !== "none") {
// Return early if the right sidebar is already visible.
@@ -62,14 +64,24 @@ export function show_userlist_sidebar(): void {
}
$userlist_sidebar.addClass("expanded");
if (left_sidebar_expanded_as_overlay) {
$userlist_sidebar.addClass("topmost-overlay");
$streamlist_sidebar.removeClass("topmost-overlay");
}
fix_invite_user_button_flicker();
resize.resize_page_components();
right_sidebar_expanded_as_overlay = true;
}
export function show_streamlist_sidebar(): void {
const $userlist_sidebar = $(".app-main .column-right");
const $streamlist_sidebar = $(".app-main .column-left");
// Left sidebar toggle icon is attached to middle column.
$(".app-main .column-left, #navbar-middle").addClass("expanded");
if (right_sidebar_expanded_as_overlay) {
$streamlist_sidebar.addClass("topmost-overlay");
$userlist_sidebar.removeClass("topmost-overlay");
}
resize.resize_stream_filters_container();
left_sidebar_expanded_as_overlay = true;
}
@@ -90,7 +102,9 @@ export function show_left_sidebar(): void {
}
export function hide_streamlist_sidebar(): void {
const $streamlist_sidebar = $(".app-main .column-left");
$(".app-main .column-left, #navbar-middle").removeClass("expanded");
$streamlist_sidebar.removeClass("topmost-overlay");
left_sidebar_expanded_as_overlay = false;
}

43
web/styles/zulip.css
View File

@@ -544,6 +544,19 @@ body.has-overlay-scrollbar {
top: 0;
}
.app-main .column-right.expanded,
.app-main .column-left.expanded {
/* We share a baseline z-index to make
sure overlays respect the .topmost-overlay
below. */
z-index: 10;
}
.app-main .column-right.expanded.topmost-overlay,
.app-main .column-left.expanded.topmost-overlay {
z-index: 15;
}
#message_feed_container,
.app-main .column-left .left-sidebar,
.app-main .column-right .right-sidebar {
@@ -1784,6 +1797,20 @@ body:not(.hide-left-sidebar) {
}
}
@container app (width <= $cq_ml_min) {
.column-right.expanded,
.column-left.expanded {
width: 100vw;
max-width: 100%;
}
.app-main .column-right.expanded .right-sidebar,
.app-main .column-left.expanded .left-sidebar {
width: 100vw;
max-width: 100%;
}
}
@container header-container (width <= $cq_sm_min) {
.narrow_description {
display: none;
@@ -1871,6 +1898,22 @@ body:not(.hide-left-sidebar) {
}
}
@media (width <= $ml_min) {
.without-container-query-support {
.column-right.expanded,
.column-left.expanded {
width: 100vw;
max-width: 100%;
}
.app-main .column-right.expanded .right-sidebar,
.app-main .column-left.expanded .left-sidebar {
width: 100vw;
max-width: 100%;
}
}
}
@media (width <= $sm_min) {
.without-container-query-support {
.narrow_description {