paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-24 16:43:57 +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; zoomed = true;
update_private_messages(); update_private_messages();
$(".direct-messages-container").removeClass("zoom-out").addClass("zoom-in"); $(".direct-messages-container").removeClass("zoom-out").addClass("zoom-in");
$("#hide-more-direct-messages").addClass("dm-zoomed-in");
$("#streams_list").hide(); $("#streams_list").hide();
$(".left-sidebar .right-sidebar-items").hide(); $(".left-sidebar .right-sidebar-items").hide();
@@ -229,6 +230,7 @@ function zoom_out(): void {
zoomed = false; zoomed = false;
clear_search(); clear_search();
$(".direct-messages-container").removeClass("zoom-in").addClass("zoom-out"); $(".direct-messages-container").removeClass("zoom-in").addClass("zoom-out");
$("#hide-more-direct-messages").removeClass("dm-zoomed-in");
$("#streams_list").show(); $("#streams_list").show();
$(".left-sidebar .right-sidebar-items").show(); $(".left-sidebar .right-sidebar-items").show();
} }
@@ -256,7 +258,7 @@ export function initialize(): void {
zoom_in(); zoom_in();
}); });
$(".direct-messages-container").on("click", "#hide-more-direct-messages", (e) => { $("#left-sidebar").on("click", "#hide-more-direct-messages", (e) => {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();

115
web/styles/left_sidebar.css
View File

@@ -112,7 +112,7 @@
font-weight: normal; font-weight: normal;
.topic_search_section { .topic_search_section {
margin: 3px 0 3px var(--left-sidebar-toggle-width-offset); margin: 3px 0;
} }
& li { & li {
@@ -212,6 +212,7 @@
} }
} }
#hide-more-direct-messages,
#direct-messages-section-header { #direct-messages-section-header {
grid-template-columns: grid-template-columns:
0 var(--left-sidebar-header-icon-toggle-width) 0 minmax(0, 1fr) 0 var(--left-sidebar-header-icon-toggle-width) 0 minmax(0, 1fr)
@@ -219,7 +220,33 @@
--left-sidebar-vdots-width --left-sidebar-vdots-width
) )
0; 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; cursor: pointer;
white-space: nowrap; white-space: nowrap;
border-radius: 4px; border-radius: 4px;
@@ -379,7 +406,7 @@
.active-direct-messages-section { .active-direct-messages-section {
background-color: var(--color-background-active-narrow-filter); background-color: var(--color-background-active-narrow-filter);
#direct-messages-section-header { &#direct-messages-section-header {
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} }
@@ -976,7 +1003,7 @@ li.top_left_scheduled_messages {
/* New grid definitions here. */ /* New grid definitions here. */
#views-label-container, #views-label-container,
.zoom-in #hide-more-direct-messages, #hide-more-direct-messages.dm-zoomed-in,
.top_left_row, .top_left_row,
.left-sidebar-navigation-label-container, .left-sidebar-navigation-label-container,
.dm-box, .dm-box,
@@ -1022,16 +1049,32 @@ li.top_left_scheduled_messages {
display: grid; display: grid;
align-items: center; align-items: center;
/* This extends the general pattern of left sidebar rows, but includes a /* This extends the general pattern of left sidebar rows, but includes a
second grid row for placing filter boxes. This pattern keeps the box second grid row for placing filter boxes. */
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. */
grid-template-areas: grid-template-areas:
"starting-offset starting-anchor-element icon-content-gap row-content controls markers-and-unreads ending-anchor-element ending-offset" "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 . "; "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 { #views-label-container {
@@ -1670,6 +1713,7 @@ li.topic-list-item {
} }
#topics_header { #topics_header {
display: grid;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 2; z-index: 2;
@@ -1680,7 +1724,7 @@ li.topic-list-item {
[topics-content-area-end] var(--left-sidebar-right-margin); [topics-content-area-end] var(--left-sidebar-right-margin);
grid-template-rows: grid-template-rows:
[topics-content-area-start] var(--line-height-sidebar-row-prominent) [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); padding-top: var(--left-sidebar-sections-vertical-gutter);
color: hsl(0deg 0% 43%); color: hsl(0deg 0% 43%);
background-color: var(--color-background); background-color: var(--color-background);
@@ -1727,8 +1771,6 @@ li.topic-list-item {
) )
minmax(0, max-content) var(--left-sidebar-vdots-width) minmax(0, max-content) var(--left-sidebar-vdots-width)
0; 0;
/* Keep the stream-search area rows collapsed. */
grid-template-rows: var(--line-height-sidebar-row-prominent) 0 0;
cursor: pointer; cursor: pointer;
margin: var(--left-sidebar-sections-vertical-gutter) margin: var(--left-sidebar-sections-vertical-gutter)
var(--left-sidebar-right-margin) 3px 0; var(--left-sidebar-right-margin) 3px 0;
@@ -1741,10 +1783,9 @@ li.topic-list-item {
background-color: var(--color-background); background-color: var(--color-background);
&.showing-stream-search-section { &.showing-stream-search-section {
/* Open up the stream-search rows. The 3px gap + 7px /* Open up the stream-search rows and maintain
row maintains space with the streams list space with the streams list below. */
below. */ padding-bottom: var(--left-sidebar-sections-vertical-gutter);
grid-template-rows: var(--line-height-sidebar-row-prominent) auto 7px;
row-gap: 3px; row-gap: 3px;
/* When the search section is showing, switch /* When the search section is showing, switch
@@ -1822,11 +1863,6 @@ li.topic-list-item {
display: flex; display: flex;
} }
} }
.stream_search_section {
grid-area: filter-box;
white-space: nowrap;
}
} }
/* Prepare an adjusted grid for the logged-out state, /* 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); 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 { .direct-messages-search-section {
grid-column: filter-box; grid-column: filter-container;
margin: 5px 0 5px var(--left-sidebar-toggle-width-offset); margin: 5px 0;
} }
.zoom-in-hide { .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="left-sidebar-filter-input-container">
<div class="topic-list-filter home-page-input filter_text_input pill-container" id="left-sidebar-filter-topic-input"> <div class="topic_search_section filter-topics left-sidebar-filter-row">
<div class="input" contenteditable="true" id="topic_filter_query" <div class="topic-list-filter home-page-input filter_text_input pill-container" id="left-sidebar-filter-topic-input">
data-placeholder="{{t 'Filter topics' }}"> <div class="input" contenteditable="true" id="topic_filter_query"
{{~! Squash whitespace so that placeholder is displayed when empty. ~}} data-placeholder="{{t 'Filter topics' }}">
{{~! Squash whitespace so that placeholder is displayed when empty. ~}}
</div>
</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> </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> </div>

23
web/templates/left_sidebar.hbs
View File

@@ -165,6 +165,9 @@
</ul> </ul>
</div> </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"> <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> <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> <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"> <div class="heading-markers-and-unreads">
<span class="unread_count"></span> <span class="unread_count"></span>
</div> </div>
<a class="zoom-out-hide" id="hide-more-direct-messages"> <div class="zoom-out-hide direct-messages-search-section left-sidebar-filter-input-container">
<span class="hide-more-direct-messages-text"> {{t 'back to channels' }}</span> {{#> input input_type="filter-input" icon="search" input_button_icon="close"}}
</a> <input type="text" class="input-element direct-messages-list-filter home-page-input" autocomplete="off" placeholder="{{t 'Filter direct messages' }}" />
{{#> input input_type="filter-input" custom_classes="zoom-out-hide direct-messages-search-section" icon="search" input_button_icon="close"}} {{/input}}
<input type="text" class="input-element direct-messages-list-filter home-page-input" autocomplete="off" placeholder="{{t 'Filter direct messages' }}" /> </div>
{{/input}}
</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">
@@ -207,10 +209,11 @@
<i class="zulip-icon zulip-icon-masked-unread"></i> <i class="zulip-icon zulip-icon-masked-unread"></i>
</span> </span>
</div> </div>
<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 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 type="text" class="input-element stream-list-filter home-page-input" autocomplete="off" placeholder="{{t 'Filter channels' }}" />
{{/input}} {{/input}}
</div>
</div> </div>
<div id="topics_header"> <div id="topics_header">
<a class="show-all-streams" tabindex="0">{{t 'Back to channels' }}</a> <span class="unread_count quiet-count"></span> <a class="show-all-streams" tabindex="0">{{t 'Back to channels' }}</a> <span class="unread_count quiet-count"></span>