paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-11 17:36:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

left_sidebar: Rewrite back to channels to use css grid.

Browse Source 
While the TODO comment we deleted in left_sidebar.css says we need to
rewrite both show more and show less button to grids; show more was
already a grid.
There have been some very slight changes in the actual size of the back
to channels row; those changes make the row more consistent with the
rest of the left sidebar rows in terms of sizing.

We've introduced a new class called `.hide-more-direct-messages-text`
that applies the same properties as the `span` selector used to. We are
using a class because of better performance when selecting, see
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more info on the why,
The `font-size` was moved inside the above class, so that when setting
the line-height of the anchor component, the `em` refers to the normal
font size and not the smaller font size for `back to channels`.

We've moved the link inside `.direct-messages-section-header` and most
of the grid properties are inherited from that element.

This is a preparatory commit to introduce DM filter in #30332.
This commit is contained in:
Shubham Padia
2024-07-03 13:13:38 +00:00
committed by Tim Abbott
parent 5bb66e6c99
commit 847ff6ee21
2 changed files with 12 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/styles/left_sidebar.css
View File

@@ -711,6 +711,7 @@ li.top_left_scheduled_messages {
/* New .topic-box grid definitions here. */ /* New .topic-box grid definitions here. */
#views-label-container, #views-label-container,
.zoom-in #hide-more-direct-messages,
.top_left_row, .top_left_row,
.left-sidebar-navigation-label-container, .left-sidebar-navigation-label-container,
.dm-box, .dm-box,
@@ -1396,31 +1397,23 @@ li.topic-list-item {
} }
#hide-more-direct-messages { #hide-more-direct-messages {
display: block; grid-template-columns: inherit;
grid-column: 1 / -1;
line-height: var(--line-height-sidebar-row);
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
/* 12px at 14px/1em */ /* 12px at 14px/1em */
font-size: 0.8571em;
& span { .hide-more-direct-messages-text {
display: block; font-size: 0.8571em;
/* TODO: Rewrite the show-more and show-less grid-area: row-content;
buttons as grids alongside the left sidebar
header rewrites. The 12px left padding here
aligns the "back to channels" text with the
DIRECT MESSAGES heading above, which itself
is offset -3 px to the left, but reserves
15px for the arrow marker. 15px - 3px = 12px. */
padding: 2px 0 2px 12px;
} }
&:hover { &:hover {
& span {
background-color: hsl(120deg 12.3% 71.4% / 38%); background-color: hsl(120deg 12.3% 71.4% / 38%);
border-radius: 4px; border-radius: 4px;
} }
} }
}
.zoom-in-hide { .zoom-in-hide {
display: none; display: none;

6
web/templates/left_sidebar.hbs
View File

@@ -154,12 +154,12 @@
</a> </a>
<span class="unread_count"></span> <span class="unread_count"></span>
</div> </div>
</div>
</div>
<a class="zoom-out-hide" id="hide-more-direct-messages"> <a class="zoom-out-hide" id="hide-more-direct-messages">
<span> {{t 'back to channels' }}</span> <span class="hide-more-direct-messages-text"> {{t 'back to channels' }}</span>
</a> </a>
</div> </div>
</div>
</div>
{{~!-- squash whitespace --~}} {{~!-- squash whitespace --~}}
<div id="left_sidebar_scroll_container" class="scrolling_list" data-simplebar data-simplebar-tab-index="-1"> <div id="left_sidebar_scroll_container" class="scrolling_list" data-simplebar data-simplebar-tab-index="-1">
<div class="direct-messages-container zoom-out hidden-for-spectators"> <div class="direct-messages-container zoom-out hidden-for-spectators">