paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 05:23:35 +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

25
web/styles/left_sidebar.css
View File

@@ -711,6 +711,7 @@ li.top_left_scheduled_messages {
/* New .topic-box grid definitions here. */
#views-label-container,
.zoom-in #hide-more-direct-messages,
.top_left_row,
.left-sidebar-navigation-label-container,
.dm-box,
@@ -1396,29 +1397,21 @@ li.topic-list-item {
}
#hide-more-direct-messages {
display: block;
grid-template-columns: inherit;
grid-column: 1 / -1;
line-height: var(--line-height-sidebar-row);
text-decoration: none;
color: inherit;
/* 12px at 14px/1em */
font-size: 0.8571em;
& span {
display: block;
/* TODO: Rewrite the show-more and show-less
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;
.hide-more-direct-messages-text {
font-size: 0.8571em;
grid-area: row-content;
}
&:hover {
& span {
background-color: hsl(120deg 12.3% 71.4% / 38%);
border-radius: 4px;
}
background-color: hsl(120deg 12.3% 71.4% / 38%);
border-radius: 4px;
}
}

6
web/templates/left_sidebar.hbs
View File

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