paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

left_sidebar: Align filter inputs with preexisting left sidebar grids.

Browse Source 
This commit acts as a follow-up commit to the previous three commits
implementing the redesigned filter input in the left sidebar. This
makes some structural changes to the channel/topic/dm headers, and
aligns to filter inputs to the predefined grid lines in the left sidebar
to ensure good visual flow.

Fixes #34476.
This commit is contained in:
Sayam Samal
2025-06-14 05:12:43 +05:30
committed by Tim Abbott
parent 82edac0166
commit 2df8ee43cf
4 changed files with 89 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/pm_list.ts
View File

@@ -218,6 +218,7 @@ function zoom_in(): void {
zoomed = true;
update_private_messages();
$(".direct-messages-container").removeClass("zoom-out").addClass("zoom-in");
$("#hide-more-direct-messages").addClass("dm-zoomed-in");
$("#streams_list").hide();
$(".left-sidebar .right-sidebar-items").hide();
@@ -229,6 +230,7 @@ function zoom_out(): void {
zoomed = false;
clear_search();
$(".direct-messages-container").removeClass("zoom-in").addClass("zoom-out");
$("#hide-more-direct-messages").removeClass("dm-zoomed-in");
$("#streams_list").show();
$(".left-sidebar .right-sidebar-items").show();
}
@@ -256,7 +258,7 @@ export function initialize(): void {
zoom_in();
});
$(".direct-messages-container").on("click", "#hide-more-direct-messages", (e) => {
$("#left-sidebar").on("click", "#hide-more-direct-messages", (e) => {
e.stopPropagation();
e.preventDefault();

115
web/styles/left_sidebar.css
View File

@@ -112,7 +112,7 @@
font-weight: normal;
.topic_search_section {
margin: 3px 0 3px var(--left-sidebar-toggle-width-offset);
margin: 3px 0;
}
& li {
@@ -212,6 +212,7 @@
}
}
#hide-more-direct-messages,
#direct-messages-section-header {
grid-template-columns:
0 var(--left-sidebar-header-icon-toggle-width) 0 minmax(0, 1fr)
@@ -219,7 +220,33 @@
--left-sidebar-vdots-width
)
0;
grid-template-rows: var(--line-height-sidebar-row-prominent);
}
#hide-more-direct-messages {
/* Keep the DM zoom-out option hidden until zoomed-in. */
display: none;
margin-right: var(--left-sidebar-right-margin);
line-height: var(--line-height-sidebar-row);
text-decoration: none;
color: inherit;
.hide-more-direct-messages-text {
color: var(--color-text-sidebar-action-heading);
font-size: var(--font-size-sidebar-action-heading);
font-weight: var(--font-weight-sidebar-action-heading);
font-variant: var(--font-variant-sidebar-action-heading);
text-transform: var(--text-transform-sidebar-action-heading);
grid-area: row-content;
}
&:hover {
background-color: var(--color-background-sidebar-action-heading-hover);
box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
border-radius: 4px;
}
}
#direct-messages-section-header {
cursor: pointer;
white-space: nowrap;
border-radius: 4px;
@@ -379,7 +406,7 @@
.active-direct-messages-section {
background-color: var(--color-background-active-narrow-filter);
#direct-messages-section-header {
&#direct-messages-section-header {
border-radius: 4px 4px 0 0;
}
@@ -976,7 +1003,7 @@ li.top_left_scheduled_messages {
/* New grid definitions here. */
#views-label-container,
.zoom-in #hide-more-direct-messages,
#hide-more-direct-messages.dm-zoomed-in,
.top_left_row,
.left-sidebar-navigation-label-container,
.dm-box,
@@ -1022,16 +1049,32 @@ li.top_left_scheduled_messages {
display: grid;
align-items: center;
/* This extends the general pattern of left sidebar rows, but includes a
second grid row for placing filter boxes. This pattern keeps the box
aligned with the text content in `row-content` and includes the
`ending-anchor-element` space.
There is currently no filter box on DM rows, but we can prepare for
that now by having it share this grid template. Its row and column
definitions have the final say about dimensions and placement. */
second grid row for placing filter boxes. */
grid-template-areas:
"starting-offset starting-anchor-element icon-content-gap row-content controls markers-and-unreads ending-anchor-element ending-offset"
". filter-box filter-box filter-box filter-box filter-box filter-box . ";
"starting-offset starting-anchor-element icon-content-gap row-content controls markers-and-unreads ending-anchor-element ending-offset"
"filter-container filter-container filter-container filter-container filter-container filter-container filter-container filter-container";
grid-template-rows: var(--line-height-sidebar-row-prominent) minmax(
0,
max-content
);
}
.left-sidebar-filter-input-container {
grid-area: filter-container;
display: grid;
align-items: center;
grid-template:
"starting-offset filter-input ending-offset" minmax(0, max-content)
/ calc(
var(--left-sidebar-toggle-width-offset) -
var(--input-icon-starting-offset)
)
minmax(0, 1fr) var(--left-sidebar-vdots-width);
.filter-input,
.filter-topics {
grid-area: filter-input;
}
}
#views-label-container {
@@ -1670,6 +1713,7 @@ li.topic-list-item {
}
#topics_header {
display: grid;
position: sticky;
top: 0;
z-index: 2;
@@ -1680,7 +1724,7 @@ li.topic-list-item {
[topics-content-area-end] var(--left-sidebar-right-margin);
grid-template-rows:
[topics-content-area-start] var(--line-height-sidebar-row-prominent)
[topics-content-area-end];
[topics-content-area-end] 0;
padding-top: var(--left-sidebar-sections-vertical-gutter);
color: hsl(0deg 0% 43%);
background-color: var(--color-background);
@@ -1727,8 +1771,6 @@ li.topic-list-item {
)
minmax(0, max-content) var(--left-sidebar-vdots-width)
0;
/* Keep the stream-search area rows collapsed. */
grid-template-rows: var(--line-height-sidebar-row-prominent) 0 0;
cursor: pointer;
margin: var(--left-sidebar-sections-vertical-gutter)
var(--left-sidebar-right-margin) 3px 0;
@@ -1741,10 +1783,9 @@ li.topic-list-item {
background-color: var(--color-background);
&.showing-stream-search-section {
/* Open up the stream-search rows. The 3px gap + 7px
row maintains space with the streams list
below. */
grid-template-rows: var(--line-height-sidebar-row-prominent) auto 7px;
/* Open up the stream-search rows and maintain
space with the streams list below. */
padding-bottom: var(--left-sidebar-sections-vertical-gutter);
row-gap: 3px;
/* When the search section is showing, switch
@@ -1822,11 +1863,6 @@ li.topic-list-item {
display: flex;
}
}
.stream_search_section {
grid-area: filter-box;
white-space: nowrap;
}
}
/* Prepare an adjusted grid for the logged-out state,
@@ -1933,34 +1969,9 @@ li.topic-list-item {
margin-bottom: var(--left-sidebar-bottom-scrolling-buffer);
}
#hide-more-direct-messages {
grid-template-columns: inherit;
grid-column: 1 / -1;
line-height: var(--line-height-sidebar-row);
text-decoration: none;
color: inherit;
.hide-more-direct-messages-text {
color: var(--color-text-sidebar-action-heading);
font-size: var(--font-size-sidebar-action-heading);
font-weight: var(--font-weight-sidebar-action-heading);
font-variant: var(--font-variant-sidebar-action-heading);
text-transform: var(--text-transform-sidebar-action-heading);
grid-area: row-content;
}
&:hover {
background-color: var(
--color-background-sidebar-action-heading-hover
);
box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
border-radius: 4px;
}
}
.direct-messages-search-section {
grid-column: filter-box;
margin: 5px 0 5px var(--left-sidebar-toggle-width-offset);
grid-column: filter-container;
margin: 5px 0;
}
.zoom-in-hide {

18
web/templates/filter_topics.hbs
View File

@@ -1,11 +1,13 @@
<div class="topic_search_section filter-topics left-sidebar-filter-row">
<div class="topic-list-filter home-page-input filter_text_input pill-container" id="left-sidebar-filter-topic-input">
<div class="input" contenteditable="true" id="topic_filter_query"
data-placeholder="{{t 'Filter topics' }}">
{{~! Squash whitespace so that placeholder is displayed when empty. ~}}
<div class="left-sidebar-filter-input-container">
<div class="topic_search_section filter-topics left-sidebar-filter-row">
<div class="topic-list-filter home-page-input filter_text_input pill-container" id="left-sidebar-filter-topic-input">
<div class="input" contenteditable="true" id="topic_filter_query"
data-placeholder="{{t 'Filter topics' }}">
{{~! Squash whitespace so that placeholder is displayed when empty. ~}}
</div>
</div>
<button type="button" class="clear_search_button" id="clear_search_topic_button">
<i class="zulip-icon zulip-icon-close" aria-hidden="true"></i>
</button>
</div>
<button type="button" class="clear_search_button" id="clear_search_topic_button">
<i class="zulip-icon zulip-icon-close" aria-hidden="true"></i>
</button>
</div>

23
web/templates/left_sidebar.hbs
View File

@@ -165,6 +165,9 @@
</ul>
</div>
<a id="hide-more-direct-messages">
<span class="hide-more-direct-messages-text"> {{t 'back to channels' }}</span>
</a>
<div id="direct-messages-section-header" class="direct-messages-container hidden-for-spectators zoom-out zoom-in-sticky">
<i id="toggle-direct-messages-section-icon" class="zulip-icon zulip-icon-heading-triangle-right sidebar-heading-icon rotate-icon-down dm-tooltip-target zoom-in-hide" aria-hidden="true" tabindex="0" role="button"></i>
<h4 class="left-sidebar-title"><span class="dm-tooltip-target">{{t 'DIRECT MESSAGES' }}</span></h4>
@@ -179,12 +182,11 @@
<div class="heading-markers-and-unreads">
<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>
{{#> input input_type="filter-input" custom_classes="zoom-out-hide direct-messages-search-section" icon="search" input_button_icon="close"}}
<input type="text" class="input-element direct-messages-list-filter home-page-input" autocomplete="off" placeholder="{{t 'Filter direct messages' }}" />
{{/input}}
<div class="zoom-out-hide direct-messages-search-section left-sidebar-filter-input-container">
{{#> input input_type="filter-input" icon="search" input_button_icon="close"}}
<input type="text" class="input-element direct-messages-list-filter home-page-input" autocomplete="off" placeholder="{{t 'Filter direct messages' }}" />
{{/input}}
</div>
</div>
{{~!-- squash whitespace --~}}
<div id="left_sidebar_scroll_container" class="scrolling_list" data-simplebar data-simplebar-tab-index="-1">
@@ -207,10 +209,11 @@
<i class="zulip-icon zulip-icon-masked-unread"></i>
</span>
</div>
{{#> input input_type="filter-input" custom_classes="notdisplayed stream_search_section" icon="search" input_button_icon="close"}}
<input type="text" class="input-element stream-list-filter home-page-input" autocomplete="off" placeholder="{{t 'Filter channels' }}" />
{{/input}}
<div class="left-sidebar-filter-input-container">
{{#> input input_type="filter-input" custom_classes="notdisplayed stream_search_section" icon="search" input_button_icon="close"}}
<input type="text" class="input-element stream-list-filter home-page-input" autocomplete="off" placeholder="{{t 'Filter channels' }}" />
{{/input}}
</div>
</div>
<div id="topics_header">
<a class="show-all-streams" tabindex="0">{{t 'Back to channels' }}</a> <span class="unread_count quiet-count"></span>