paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-10 17:07:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

left_sidebar: Remove #direct-messages-sticky-header.

Browse Source 
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.
This commit is contained in:
Shubham Padia
2024-07-04 10:52:48 +00:00
committed by Tim Abbott
parent 737e075cc3
commit 8782625f07
6 changed files with 42 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
web/src/click_handlers.js
View File

@@ -740,50 +740,42 @@ export function initialize() {
stream_list.toggle_filter_displayed(e); stream_list.toggle_filter_displayed(e);
}); });
$("body").on( $("body").on("click", "#direct-messages-section-header.zoom-out", (e) => {
"click", if ($(e.target).closest("#show-all-direct-messages").length === 1) {
".direct-messages-container.zoom-out #direct-messages-section-header", // Let the browser handle the "direct message feed" widget.
(e) => { return;
if ($(e.target).closest("#show-all-direct-messages").length === 1) { }
// Let the browser handle the "direct message feed" widget.
return;
}
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const $left_sidebar_scrollbar = $( const $left_sidebar_scrollbar = $(
"#left_sidebar_scroll_container .simplebar-content-wrapper", "#left_sidebar_scroll_container .simplebar-content-wrapper",
); );
const scroll_position = $left_sidebar_scrollbar.scrollTop(); const scroll_position = $left_sidebar_scrollbar.scrollTop();
if (stream_list.is_zoomed_in()) { if (stream_list.is_zoomed_in()) {
stream_list.zoom_out(); stream_list.zoom_out();
} }
// This next bit of logic is a bit subtle; this header // This next bit of logic is a bit subtle; this header
// button scrolls to the top of the direct messages // button scrolls to the top of the direct messages
// section is uncollapsed but out of view; otherwise, we // section is uncollapsed but out of view; otherwise, we
// toggle its collapsed state. // toggle its collapsed state.
if (scroll_position === 0 || pm_list.is_private_messages_collapsed()) { if (scroll_position === 0 || pm_list.is_private_messages_collapsed()) {
pm_list.toggle_private_messages_section(); pm_list.toggle_private_messages_section();
} }
$left_sidebar_scrollbar.scrollTop(0); $left_sidebar_scrollbar.scrollTop(0);
}, });
);
/* The DIRECT MESSAGES label's click behavior is complicated; /* The DIRECT MESSAGES label's click behavior is complicated;
* only when zoomed in does it have a navigation effect, so we need * only when zoomed in does it have a navigation effect, so we need
* this click handler rather than just a link. */ * this click handler rather than just a link. */
$("body").on( $("body").on("click", "#direct-messages-section-header.zoom-in", (e) => {
"click", e.preventDefault();
".direct-messages-container.zoom-in #direct-messages-section-header", e.stopPropagation();
(e) => {
e.preventDefault();
e.stopPropagation();
window.location.hash = "narrow/is/dm"; window.location.hash = "narrow/is/dm";
}, });
);
// disable the draggability for left-sidebar components // disable the draggability for left-sidebar components
$("#stream_filters, #left-sidebar-navigation-list").on("dragstart", (e) => { $("#stream_filters, #left-sidebar-navigation-list").on("dragstart", (e) => {

2
web/src/pm_list.ts
View File

@@ -23,7 +23,7 @@ let private_messages_collapsed = false;
let zoomed = false; let zoomed = false;
function get_private_messages_section_header(): JQuery { 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 { export function set_count(count: number): void {

2
web/src/resize.ts
View File

@@ -30,7 +30,7 @@ function get_new_heights(): {
Number.parseInt($("#left-sidebar-navigation-area").css("marginTop"), 10) - Number.parseInt($("#left-sidebar-navigation-area").css("marginTop"), 10) -
Number.parseInt($("#left-sidebar-navigation-area").css("marginBottom"), 10) - Number.parseInt($("#left-sidebar-navigation-area").css("marginBottom"), 10) -
($("#left-sidebar-navigation-list").outerHeight(true) ?? 0) - ($("#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 // Don't let us crush the stream sidebar completely out of view
stream_filters_max_height = Math.max(80, stream_filters_max_height); stream_filters_max_height = Math.max(80, stream_filters_max_height);

2
web/styles/left_sidebar.css
View File

@@ -203,7 +203,7 @@ li.show-more-topics {
in the DM section. */ in the DM section. */
margin-right: 12px; 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-columns: 0 15px minmax(0, 1fr) max-content 30px 0;
grid-template-rows: var(--line-height-sidebar-row-prominent); grid-template-rows: var(--line-height-sidebar-row-prominent);
/* TODO: Rewrite the `--left-sidebar-collapse-widget-gutter` /* TODO: Rewrite the `--left-sidebar-collapse-widget-gutter`

22
web/templates/left_sidebar.hbs
View File

@@ -143,20 +143,18 @@
</ul> </ul>
</div> </div>
<div id="direct-messages-sticky-header" class="direct-messages-container zoom-out hidden-for-spectators"> <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="zoom-out zoom-in-sticky"> <i id="toggle-direct-messages-section-icon" class="fa fa-sm fa-caret-down dm-tooltip-target zoom-in-hide" aria-hidden="true" tabindex="0" role="button"></i>
<i id="toggle-direct-messages-section-icon" class="fa fa-sm fa-caret-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> <div class="heading-markers-and-controls">
<div class="heading-markers-and-controls"> <a id="show-all-direct-messages" href="#narrow/is/dm" data-tooltip-template-id="show-all-direct-messages-template">
<a id="show-all-direct-messages" href="#narrow/is/dm" data-tooltip-template-id="show-all-direct-messages-template"> <i class="fa fa-align-right" aria-label="{{t 'Direct message feed' }}"></i>
<i class="fa fa-align-right" aria-label="{{t 'Direct message feed' }}"></i>
</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> </a>
<span class="unread_count"></span>
</div> </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>
{{~!-- 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">

2
web/tests/pm_list.test.js
View File

@@ -12,7 +12,7 @@ run_test("update_dom_with_unread_counts", () => {
let counts; let counts;
const $total_count = $.create("total-count-stub"); const $total_count = $.create("total-count-stub");
const $private_li = $(".direct-messages-container #direct-messages-section-header"); const $private_li = $("#direct-messages-section-header");
$private_li.set_find_results(".unread_count", $total_count); $private_li.set_find_results(".unread_count", $total_count);
counts = { counts = {