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

left_sidebar: Correct unread alignment in condensed popover.

This commit is contained in:
Karl Stolley 2024-11-05 14:09:12 -05:00 committed by Tim Abbott
parent 331004f025
commit 96b62a5372
3 changed files with 40 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/styles/left_sidebar.css
View File

@ -1058,14 +1058,6 @@ li.top_left_scheduled_messages {
}
}
.condensed-views-popover-menu {
.unread_count {
margin: 1px 0 0 6px;
border-color: var(--color-border-unread-counter-popover-menu);
width: max-content;
}
}
.subscription_block {
grid-template-columns:
var(--left-sidebar-toggle-width-offset) var(

32
web/styles/popovers.css
View File

@ -1476,3 +1476,35 @@ ul.popover-menu-list {
border: 1px solid var(--color-border-popover-hotkey-hint);
}
}
.condensed-views-popover-menu {
.popover-menu-link:has(.label-and-unread-wrapper) {
align-items: center;
.popover-menu-icon {
margin-top: 1px;
}
.label-and-unread-wrapper {
/* Occupy the maximum width of the
parent flex container. */
flex: 1 0 max-content;
display: flex;
gap: 5px;
align-items: baseline;
}
.popover-menu-label {
margin-top: 0;
}
.unread_count {
margin: 0 0 0 6px;
border-color: var(--color-border-unread-counter-popover-menu);
width: max-content;
height: auto;
line-height: 1.2445em;
align-self: baseline;
}
}
}

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

@ -9,16 +9,20 @@
<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="label-and-unread-wrapper">
<span class="popover-menu-label">{{t 'Drafts' }}</span>
<span class="unread_count"></span>
</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-calendar-days" aria-hidden="true"></i>
<span class="label-and-unread-wrapper">
<span class="popover-menu-label">{{t 'Scheduled messages' }}</span>
<span class="unread_count"></span>
</span>
</a>
</li>
{{/if}}