left_sidebar: Auto-hide on clicking new topic or new direct message.

On smaller screens, where left_sidebar is hidden by default,
clicking the `New topic` and `New direct message` buttons did not
close the left_sidebar because these buttons are located within
the left_sidebar.
Clicking these buttons made the cursor to focus over the compose
but the compose remained half hidden by the left_sidebar.

This commit enables the left_sidebar to automatically hide
when these buttons are clicked by introducing the
auto-hide-left-sidebar-overlay class on these buttons.
This commit is contained in:
Sourabh Patel
2025-01-20 16:50:00 +05:30
committed by Tim Abbott
parent fa1f911c5d
commit 4f78ecdd47
3 changed files with 9 additions and 2 deletions

View File

@@ -208,6 +208,13 @@ export function initialize(): void {
return;
}
if (
left_sidebar_expanded_as_overlay &&
$elt.closest(".auto-hide-left-sidebar-overlay").length > 0
) {
hide_streamlist_sidebar();
}
if (
left_sidebar_expanded_as_overlay &&
$elt.closest(".no-auto-hide-left-sidebar-overlay").length === 0

View File

@@ -153,7 +153,7 @@
<a id="show-all-direct-messages" class="tippy-left-sidebar-tooltip-no-label-delay" href="#narrow/is/dm" data-tooltip-template-id="show-all-direct-messages-template">
<i class="zulip-icon zulip-icon-all-messages" aria-label="{{t 'Direct message feed' }}"></i>
</a>
<span id="compose-new-direct-message" class="tippy-left-sidebar-tooltip-no-label-delay" data-tooltip-template-id="new_direct_message_button_tooltip_template">
<span id="compose-new-direct-message" class="tippy-left-sidebar-tooltip-no-label-delay auto-hide-left-sidebar-overlay" data-tooltip-template-id="new_direct_message_button_tooltip_template">
<i class="left-sidebar-new-direct-message-icon zulip-icon zulip-icon-square-plus" aria-label="{{t 'New direct message' }}"></i>
</span>
</div>

View File

@@ -12,7 +12,7 @@
<div class="left-sidebar-controls">
{{#if can_post_messages}}
<div class="channel-new-topic-button tippy-zulip-tooltip hidden-for-spectators" data-tippy-content="{{t 'New topic'}}" data-stream-id="{{id}}">
<div class="channel-new-topic-button tippy-zulip-tooltip hidden-for-spectators auto-hide-left-sidebar-overlay" data-tippy-content="{{t 'New topic'}}" data-stream-id="{{id}}">
<i class="channel-new-topic-icon zulip-icon zulip-icon-square-plus" aria-hidden="true"></i>
</div>
{{/if}}