From 8782625f07b53e55529bc95c3ab6c6c4dea8da65 Mon Sep 17 00:00:00 2001 From: Shubham Padia Date: Thu, 4 Jul 2024 10:52:48 +0000 Subject: [PATCH] left_sidebar: Remove `#direct-messages-sticky-header`. We clean up unnecessary nesting in this commit and replace one usage of `#direct-messages-sticky-header` with `#direct-messages-section-header`. Since `.direct-messages-container` was being used along with `#direct-messages-sticky-header` at multiple places, just removing the nesting would break those selectors. For those selectors, they have been refactored to just look for `#direct-messages-section-header` instead. `.direct-messages-container` specific selectors still exist but they apply to both instances of `.direct-messages-container`, the DM header and the DM list. --- web/src/click_handlers.js | 64 +++++++++++++++------------------- web/src/pm_list.ts | 2 +- web/src/resize.ts | 2 +- web/styles/left_sidebar.css | 2 +- web/templates/left_sidebar.hbs | 22 ++++++------ web/tests/pm_list.test.js | 2 +- 6 files changed, 42 insertions(+), 52 deletions(-) diff --git a/web/src/click_handlers.js b/web/src/click_handlers.js index b953c7b5a2..e6b529b616 100644 --- a/web/src/click_handlers.js +++ b/web/src/click_handlers.js @@ -740,50 +740,42 @@ export function initialize() { stream_list.toggle_filter_displayed(e); }); - $("body").on( - "click", - ".direct-messages-container.zoom-out #direct-messages-section-header", - (e) => { - if ($(e.target).closest("#show-all-direct-messages").length === 1) { - // Let the browser handle the "direct message feed" widget. - return; - } + $("body").on("click", "#direct-messages-section-header.zoom-out", (e) => { + if ($(e.target).closest("#show-all-direct-messages").length === 1) { + // Let the browser handle the "direct message feed" widget. + return; + } - e.preventDefault(); - e.stopPropagation(); - const $left_sidebar_scrollbar = $( - "#left_sidebar_scroll_container .simplebar-content-wrapper", - ); - const scroll_position = $left_sidebar_scrollbar.scrollTop(); + e.preventDefault(); + e.stopPropagation(); + const $left_sidebar_scrollbar = $( + "#left_sidebar_scroll_container .simplebar-content-wrapper", + ); + const scroll_position = $left_sidebar_scrollbar.scrollTop(); - if (stream_list.is_zoomed_in()) { - stream_list.zoom_out(); - } + if (stream_list.is_zoomed_in()) { + stream_list.zoom_out(); + } - // This next bit of logic is a bit subtle; this header - // button scrolls to the top of the direct messages - // section is uncollapsed but out of view; otherwise, we - // toggle its collapsed state. - if (scroll_position === 0 || pm_list.is_private_messages_collapsed()) { - pm_list.toggle_private_messages_section(); - } - $left_sidebar_scrollbar.scrollTop(0); - }, - ); + // This next bit of logic is a bit subtle; this header + // button scrolls to the top of the direct messages + // section is uncollapsed but out of view; otherwise, we + // toggle its collapsed state. + if (scroll_position === 0 || pm_list.is_private_messages_collapsed()) { + pm_list.toggle_private_messages_section(); + } + $left_sidebar_scrollbar.scrollTop(0); + }); /* The DIRECT MESSAGES label's click behavior is complicated; * only when zoomed in does it have a navigation effect, so we need * this click handler rather than just a link. */ - $("body").on( - "click", - ".direct-messages-container.zoom-in #direct-messages-section-header", - (e) => { - e.preventDefault(); - e.stopPropagation(); + $("body").on("click", "#direct-messages-section-header.zoom-in", (e) => { + e.preventDefault(); + e.stopPropagation(); - window.location.hash = "narrow/is/dm"; - }, - ); + window.location.hash = "narrow/is/dm"; + }); // disable the draggability for left-sidebar components $("#stream_filters, #left-sidebar-navigation-list").on("dragstart", (e) => { diff --git a/web/src/pm_list.ts b/web/src/pm_list.ts index 7466e1faba..ae228eb879 100644 --- a/web/src/pm_list.ts +++ b/web/src/pm_list.ts @@ -23,7 +23,7 @@ let private_messages_collapsed = false; let zoomed = false; function get_private_messages_section_header(): JQuery { - return $(".direct-messages-container #direct-messages-section-header"); + return $("#direct-messages-section-header"); } export function set_count(count: number): void { diff --git a/web/src/resize.ts b/web/src/resize.ts index f24ced9549..ceb7d30ec5 100644 --- a/web/src/resize.ts +++ b/web/src/resize.ts @@ -30,7 +30,7 @@ function get_new_heights(): { Number.parseInt($("#left-sidebar-navigation-area").css("marginTop"), 10) - Number.parseInt($("#left-sidebar-navigation-area").css("marginBottom"), 10) - ($("#left-sidebar-navigation-list").outerHeight(true) ?? 0) - - ($("#direct-messages-sticky-header").outerHeight(true) ?? 0); + ($("#direct-messages-section-header").outerHeight(true) ?? 0); // Don't let us crush the stream sidebar completely out of view stream_filters_max_height = Math.max(80, stream_filters_max_height); diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css index 2ea7ed26c4..569f7be2a2 100644 --- a/web/styles/left_sidebar.css +++ b/web/styles/left_sidebar.css @@ -203,7 +203,7 @@ li.show-more-topics { in the DM section. */ margin-right: 12px; - #direct-messages-section-header { + &#direct-messages-section-header { grid-template-columns: 0 15px minmax(0, 1fr) max-content 30px 0; grid-template-rows: var(--line-height-sidebar-row-prominent); /* TODO: Rewrite the `--left-sidebar-collapse-widget-gutter` diff --git a/web/templates/left_sidebar.hbs b/web/templates/left_sidebar.hbs index 5a4650db13..3968105ffc 100644 --- a/web/templates/left_sidebar.hbs +++ b/web/templates/left_sidebar.hbs @@ -143,20 +143,18 @@ -
-
- -

{{t 'DIRECT MESSAGES' }}

-
- - - - -
- - {{t 'back to channels' }} + {{~!-- squash whitespace --~}}