left_sidebar: Use icons for the inactive/muted toggle.

Finishes #35552.
This commit is contained in:
Evy Kassirer
2025-07-31 13:04:45 -07:00
committed by Tim Abbott
parent c56ddf9ba4
commit fd08149993
2 changed files with 19 additions and 4 deletions

View File

@@ -457,13 +457,26 @@
.hide-inactive-or-muted-channels {
display: grid;
grid-template:
"content markers-and-unreads three-dot-placeholder" auto
/ minmax(0, 1fr) minmax(0, max-content) var(--left-sidebar-vdots-width);
"icon content markers-and-unreads three-dot-placeholder" auto
/ 1.5em minmax(0, 1fr) minmax(0, max-content) var(
--left-sidebar-vdots-width
);
align-items: center;
.markers-and-unreads {
margin-right: var(--left-sidebar-unread-offset);
}
.zulip-icon-collapse,
.zulip-icon-expand {
grid-area: icon;
/* 2px at 16px/1em to properly vertically center it */
margin-top: 0.125em;
}
.stream-list-toggle-inactive-or-muted-channels-text {
grid-area: content;
}
}
.stream-list-section {

View File

@@ -1,7 +1,8 @@
<div class="stream-list-toggle-inactive-or-muted-channels bottom_left_row zoom-in-hide">
<div class="show-inactive-or-muted-channels sidebar-topic-action-heading">
<i class="zulip-icon zulip-icon-expand" aria-hidden="true"></i>
<div class="stream-list-toggle-inactive-or-muted-channels-text">
{{#tr}}+ {inactive_or_muted_count} inactive or muted{{/tr}}
{{#tr}}{inactive_or_muted_count} inactive or muted{{/tr}}
</div>
<div class="markers-and-unreads">
<span class="unread_count quiet-count"></span>
@@ -11,8 +12,9 @@
</div>
</div>
<div class="hide-inactive-or-muted-channels sidebar-topic-action-heading">
<i class="zulip-icon zulip-icon-collapse" aria-hidden="true"></i>
<div class="stream-list-toggle-inactive-or-muted-channels-text">
{{#tr}}- {inactive_or_muted_count} inactive or muted{{/tr}}
{{#tr}}{inactive_or_muted_count} inactive or muted{{/tr}}
</div>
</div>
</div>