From f81f26116f41671486416a1381e334e25b4627d8 Mon Sep 17 00:00:00 2001 From: Sayam Samal Date: Thu, 13 Jun 2024 13:02:26 +0530 Subject: [PATCH] left_sidebar: Redesign condensed view popover. This commit also sets all popover labels to flex grow into the remaining available space. This allows us to align the unread counters, if any to the rightmost corner of the menu option. This change, however, does not lead to visual changes in any popover. Fixes part of #28699. --- .../left_sidebar_navigation_area_popovers.js | 1 + web/styles/left_sidebar.css | 17 +----- web/styles/popovers.css | 1 + .../left_sidebar_condensed_views_popover.hbs | 59 ++++++++----------- 4 files changed, 29 insertions(+), 49 deletions(-) diff --git a/web/src/left_sidebar_navigation_area_popovers.js b/web/src/left_sidebar_navigation_area_popovers.js index a3feebbc04..359c4705c4 100644 --- a/web/src/left_sidebar_navigation_area_popovers.js +++ b/web/src/left_sidebar_navigation_area_popovers.js @@ -218,6 +218,7 @@ export function initialize() { }); popover_menus.register_popover_menu(".left-sidebar-navigation-menu-icon", { + theme: "popover-menu", ...popover_menus.left_sidebar_tippy_options, onShow(instance) { // Determine at show time whether there are scheduled messages, diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css index c47e6487fc..6fb74c07e9 100644 --- a/web/styles/left_sidebar.css +++ b/web/styles/left_sidebar.css @@ -847,23 +847,8 @@ li.top_left_scheduled_messages { } .condensed-views-popover-menu { - .left-sidebar-popover-icon-label-count { - display: flex; - align-items: baseline; - } - - .filter-icon { - align-self: center; - height: 15px; - } - - .left-sidebar-navigation-label { - flex: 1 0 0; - margin-left: 3px; - } - .unread_count { - margin-left: 6px; + margin: 1px 0 0 6px; border-color: var(--color-border-unread-counter-popover-menu); } } diff --git a/web/styles/popovers.css b/web/styles/popovers.css index db144ea0bd..e5efaf9c8a 100644 --- a/web/styles/popovers.css +++ b/web/styles/popovers.css @@ -1178,6 +1178,7 @@ ul { /* Keep menu items on a single line, unless forced to wrap by a max-width on the popover. */ width: max-content; + flex: 1 0 0; } .text-item, diff --git a/web/templates/popovers/left_sidebar/left_sidebar_condensed_views_popover.hbs b/web/templates/popovers/left_sidebar/left_sidebar_condensed_views_popover.hbs index 0003ddfeeb..fc4e5a5066 100644 --- a/web/templates/popovers/left_sidebar/left_sidebar_condensed_views_popover.hbs +++ b/web/templates/popovers/left_sidebar/left_sidebar_condensed_views_popover.hbs @@ -1,33 +1,26 @@ -{{! Contents of the condensed nav vdots popup }} - +
+ +