diff --git a/web/src/pm_list.ts b/web/src/pm_list.ts index 84503ea78e..7169babd69 100644 --- a/web/src/pm_list.ts +++ b/web/src/pm_list.ts @@ -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(); diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css index d909d972fd..8056bb36f6 100644 --- a/web/styles/left_sidebar.css +++ b/web/styles/left_sidebar.css @@ -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 { diff --git a/web/templates/filter_topics.hbs b/web/templates/filter_topics.hbs index 9a4fdcc205..477732142d 100644 --- a/web/templates/filter_topics.hbs +++ b/web/templates/filter_topics.hbs @@ -1,11 +1,13 @@ -
-
-
- {{~! Squash whitespace so that placeholder is displayed when empty. ~}} +
+
+
+
+ {{~! Squash whitespace so that placeholder is displayed when empty. ~}} +
+
-
diff --git a/web/templates/left_sidebar.hbs b/web/templates/left_sidebar.hbs index 8d750992c6..a2fdbb4cba 100644 --- a/web/templates/left_sidebar.hbs +++ b/web/templates/left_sidebar.hbs @@ -165,6 +165,9 @@
+ + {{t 'back to channels' }} +

{{t 'DIRECT MESSAGES' }}

@@ -179,12 +182,11 @@
- - {{t 'back to channels' }} - - {{#> input input_type="filter-input" custom_classes="zoom-out-hide direct-messages-search-section" icon="search" input_button_icon="close"}} - - {{/input}} +
+ {{#> input input_type="filter-input" icon="search" input_button_icon="close"}} + + {{/input}} +
{{~!-- squash whitespace --~}} - - {{#> input input_type="filter-input" custom_classes="notdisplayed stream_search_section" icon="search" input_button_icon="close"}} - - {{/input}} +
+ {{#> input input_type="filter-input" custom_classes="notdisplayed stream_search_section" icon="search" input_button_icon="close"}} + + {{/input}} +
{{t 'Back to channels' }}