left_sidebar: Show home unread count in condensed views.

The view is left as-is, however, for users who prefer
masked unreads.
This commit is contained in:
Karl Stolley
2025-07-31 15:23:21 -05:00
committed by Tim Abbott
parent 070f497785
commit b27a9fdbf1
3 changed files with 52 additions and 26 deletions

View File

@@ -96,10 +96,12 @@ export function update_dom_with_unread_counts(
// mentioned/home views have simple integer counts // mentioned/home views have simple integer counts
const $mentioned_li = $(".top_left_mentions"); const $mentioned_li = $(".top_left_mentions");
const $home_view_li = $(".selected-home-view"); const $home_view_li = $(".selected-home-view");
const $condensed_view_li = $(".top_left_condensed_unread_marker");
const $back_to_streams = $("#topics_header"); const $back_to_streams = $("#topics_header");
ui_util.update_unread_count_in_dom($mentioned_li, counts.mentioned_message_count); ui_util.update_unread_count_in_dom($mentioned_li, counts.mentioned_message_count);
ui_util.update_unread_count_in_dom($home_view_li, counts.home_unread_messages); ui_util.update_unread_count_in_dom($home_view_li, counts.home_unread_messages);
ui_util.update_unread_count_in_dom($condensed_view_li, counts.home_unread_messages);
ui_util.update_unread_count_in_dom($back_to_streams, counts.stream_unread_messages); ui_util.update_unread_count_in_dom($back_to_streams, counts.stream_unread_messages);
const pinned_unread_counts: SectionUnreadCount = { const pinned_unread_counts: SectionUnreadCount = {

View File

@@ -949,35 +949,37 @@ li.active-sub-filter {
/* Set a positioning context for the unread dot. */ /* Set a positioning context for the unread dot. */
position: relative; position: relative;
.unread_count { &:not(.top_left_condensed_unread_marker) {
position: absolute;
}
/* Show the same styles when each item is
hovered or, via the keyboard, the `<a>`
element within receives focus. */
&:hover,
&:focus-within {
background: var(--color-background-navigation-item-hover);
.unread_count { .unread_count {
/* 6px at 12px/1em */ position: absolute;
top: -0.5em;
right: -0.5em;
background: var(--color-background-unread-counter-no-alpha);
} }
}
&:not(:hover) .unread_count { /* Show the same styles when each item is
/* .unread_count has its based font-size set to 12px at 14px/em. */ hovered or, via the keyboard, the `<a>`
/* 2px, 6px at 12px/1em */ element within receives focus. */
top: 0.1667em; &:hover,
right: 0.1667em; &:focus-within {
width: 0.5em; background: var(--color-background-navigation-item-hover);
height: 0.5em;
padding: 0; .unread_count {
color: transparent; /* 6px at 12px/1em */
background-color: var(--color-background-unread-counter-dot); top: -0.5em;
right: -0.5em;
background: var(--color-background-unread-counter-no-alpha);
}
}
&:not(:hover) .unread_count {
/* .unread_count has its based font-size set to 12px at 14px/em. */
/* 2px, 6px at 12px/1em */
top: 0.1667em;
right: 0.1667em;
width: 0.5em;
height: 0.5em;
padding: 0;
color: transparent;
background-color: var(--color-background-unread-counter-dot);
}
} }
&.top_left_starred_messages .unread_count { &.top_left_starred_messages .unread_count {
@@ -985,6 +987,25 @@ li.active-sub-filter {
} }
} }
&.hide-unread-messages-count {
/* We suppress the entire unread area
for users who prefer masked unreads. */
.top_left_condensed_unread_marker {
display: none;
}
}
.top_left_condensed_unread_marker {
display: flex;
align-content: center;
.unread_count {
flex: 0 0 auto;
margin: 0 var(--left-sidebar-unread-offset);
align-self: center;
}
}
.left-sidebar-navigation-icon-container { .left-sidebar-navigation-icon-container {
/* Unset margin from full nav list anchor elements. */ /* Unset margin from full nav list anchor elements. */
margin: 0; margin: 0;

View File

@@ -8,6 +8,9 @@
{{#each primary_condensed_views}} {{#each primary_condensed_views}}
{{> left_sidebar_primary_condensed_view_item . }} {{> left_sidebar_primary_condensed_view_item . }}
{{/each}} {{/each}}
<li class="top_left_condensed_unread_marker left-sidebar-navigation-condensed-item">
<span class="unread_count normal-count"></span>
</li>
</ul> </ul>
<div class="left-sidebar-navigation-menu-icon"> <div class="left-sidebar-navigation-menu-icon">
<i class="zulip-icon zulip-icon-more-vertical" aria-label="{{t 'Other views'}}"></i> <i class="zulip-icon zulip-icon-more-vertical" aria-label="{{t 'Other views'}}"></i>