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

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.
This commit is contained in:
Sayam Samal 2024-06-13 13:02:26 +05:30 committed by Tim Abbott
parent c4defc80aa
commit f81f26116f
4 changed files with 29 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/left_sidebar_navigation_area_popovers.js
View File

@ -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,

17
web/styles/left_sidebar.css
View File

@ -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);
}
}

1
web/styles/popovers.css
View File

@ -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,

59
web/templates/popovers/left_sidebar/left_sidebar_condensed_views_popover.hbs
View File

@ -1,33 +1,26 @@
{{! Contents of the condensed nav vdots popup }}
<ul class="nav nav-list condensed-views-popover-menu">
<li class="condensed-views-popover-menu-reactions">
{{! tabindex="0" Makes anchor tag focusable. Needed for keyboard support. }}
<a tabindex="0" href="#narrow/has/reaction/sender/me" class="left-sidebar-popover-icon-label-count tippy-left-sidebar-tooltip" data-tooltip-template-id="my-reactions-tooltip-template">
<span class="filter-icon">
<i class="zulip-icon zulip-icon-smile" aria-hidden="true"></i>
</span>
<span class="left-sidebar-navigation-label">{{t 'Reactions' }}</span>
</a>
</li>
<li class="condensed-views-popover-menu-drafts">
{{! tabindex="0" Makes anchor tag focusable. Needed for keyboard support. }}
<a tabindex="0" href="#drafts" class="left-sidebar-popover-icon-label-count tippy-left-sidebar-tooltip" data-tooltip-template-id="drafts-tooltip-template">
<span class="filter-icon">
<i class="zulip-icon zulip-icon-drafts" aria-hidden="true"></i>
</span>
<span class="left-sidebar-navigation-label">{{t 'Drafts' }}</span>
<span class="unread_count"></span>
</a>
</li>
{{#if has_scheduled_messages }}
<li class="condensed-views-popover-menu-scheduled-messages">
<a tabindex="0" href="#scheduled" class="left-sidebar-popover-icon-label-count">
<span class="filter-icon">
<i class="zulip-icon zulip-icon-scheduled-messages" aria-hidden="true"></i>
</span>
<span class="left-sidebar-navigation-label">{{t 'Scheduled messages' }}</span>
<span class="unread_count"></span>
</a>
</li>
{{/if}}
</ul>
<div class="popover-menu" data-simplebar>
<ul role="menu" class="popover-menu-list condensed-views-popover-menu">
<li role="none" class="link-item popover-menu-list-item condensed-views-popover-menu-reactions">
<a href="#narrow/has/reaction/sender/me" role="menuitem" class="popover-menu-link tippy-left-sidebar-tooltip" data-tooltip-template-id="my-reactions-tooltip-template" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-smile" aria-hidden="true"></i>
<span class="popover-menu-label">{{t 'Reactions' }}</span>
</a>
</li>
<li role="none" class="link-item popover-menu-list-item condensed-views-popover-menu-drafts">
<a href="#drafts" role="menuitem" class="popover-menu-link tippy-left-sidebar-tooltip" data-tooltip-template-id="drafts-tooltip-template" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-drafts" aria-hidden="true"></i>
<span class="popover-menu-label">{{t 'Drafts' }}</span>
<span class="unread_count"></span>
</a>
</li>
{{#if has_scheduled_messages }}
<li role="none" class="link-item popover-menu-list-item condensed-views-popover-menu-scheduled-messages">
<a href="#scheduled" role="menuitem" class="popover-menu-link" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-scheduled-messages" aria-hidden="true"></i>
<span class="popover-menu-label">{{t 'Scheduled messages' }}</span>
<span class="unread_count"></span>
</a>
</li>
{{/if}}
</ul>
</div>