Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

sidebar_ui: Hide sidebars when user clicks outside them.

This commit is contained in:
Aman Agrawal 2023-09-30 07:47:11 +00:00 committed by Tim Abbott
parent 1a8320dc8e
commit e957603fb9
9 changed files with 72 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/click_handlers.js
View File

@ -35,6 +35,7 @@ import * as server_events from "./server_events";
import * as settings_display from "./settings_display";
import * as settings_panel_menu from "./settings_panel_menu";
import * as settings_toggle from "./settings_toggle";
import * as sidebar_ui from "./sidebar_ui";
import * as spectators from "./spectators";
import * as starred_messages_ui from "./starred_messages_ui";
import * as stream_list from "./stream_list";
@ -489,6 +490,7 @@ export function initialize() {
e.preventDefault();
e.stopPropagation();
sidebar_ui.hide_userlist_sidebar();
popovers.hide_all();
$(".tooltip").remove();
});

2
web/src/hashchange.js
View File

@ -26,6 +26,7 @@ import * as scheduled_messages_overlay_ui from "./scheduled_messages_overlay_ui"
import * as settings from "./settings";
import * as settings_panel_menu from "./settings_panel_menu";
import * as settings_toggle from "./settings_toggle";
import * as sidebar_ui from "./sidebar_ui";
import * as spectators from "./spectators";
import * as stream_settings_ui from "./stream_settings_ui";
import * as ui_report from "./ui_report";
@ -474,6 +475,7 @@ function hashchanged(from_reload, e) {
// We are changing to a "main screen" view.
overlays.close_for_hash_change();
sidebar_ui.hide_all();
popovers.hide_all();
browser_history.state.changing_hash = true;
const ret = do_hashchange_normal(from_reload);

1
web/src/hotkey.js
View File

@ -271,6 +271,7 @@ export function process_escape_key(e) {
$("#user_card_popover .user-card-popover-manage-menu-btn").trigger("focus");
return true;
}
sidebar_ui.hide_all();
popovers.hide_all();
return true;
}

3
web/src/popovers.js
View File

@ -3,7 +3,6 @@ import {hideAll} from "tippy.js";
import * as emoji_picker from "./emoji_picker";
import * as playground_links_popover from "./playground_links_popover";
import * as popover_menus from "./popover_menus";
import * as sidebar_ui from "./sidebar_ui";
import * as stream_popover from "./stream_popover";
import * as user_card_popover from "./user_card_popover";
import * as user_group_popover from "./user_group_popover";
@ -41,8 +40,6 @@ export function hide_all_except_sidebars(opts) {
// This function will hide all the popovers, including the mobile web
// or narrow window sidebars.
export function hide_all(not_hide_tippy_instances) {
sidebar_ui.hide_userlist_sidebar();
sidebar_ui.hide_streamlist_sidebar();
hide_all_except_sidebars({
not_hide_tippy_instances,
});

2
web/src/resize.js
View File

@ -11,6 +11,7 @@ import * as navbar_alerts from "./navbar_alerts";
import * as navigate from "./navigate";
import * as popover_menus from "./popover_menus";
import * as popovers from "./popovers";
import * as sidebar_ui from "./sidebar_ui";
import * as util from "./util";
function get_bottom_whitespace_height() {
@ -167,6 +168,7 @@ export function handler() {
// popping up when the user opened that very popover.
const mobile = util.is_mobile();
if (!mobile || new_width !== _old_width) {
sidebar_ui.hide_all();
popovers.hide_all();
}

68
web/src/sidebar_ui.js
View File

@ -1,6 +1,5 @@
import $ from "jquery";
import * as popovers from "./popovers";
import * as resize from "./resize";
import * as settings_data from "./settings_data";
import * as spectators from "./spectators";
@ -45,6 +44,11 @@ export function update_invite_user_option() {
}
}
export function hide_all() {
hide_streamlist_sidebar();
hide_userlist_sidebar();
}
export function initialize() {
$("body").on("click", ".login_button", (e) => {
e.preventDefault();
@ -56,19 +60,69 @@ export function initialize() {
e.preventDefault();
e.stopPropagation();
popovers.hide_all();
if (!right_sidebar_expanded_as_overlay) {
show_userlist_sidebar();
if (right_sidebar_expanded_as_overlay) {
hide_userlist_sidebar();
return;
}
show_userlist_sidebar();
});
$("#streamlist-toggle-button").on("click", (e) => {
e.preventDefault();
e.stopPropagation();
popovers.hide_all();
if (!left_sidebar_expanded_as_overlay) {
show_streamlist_sidebar();
if (left_sidebar_expanded_as_overlay) {
hide_streamlist_sidebar();
return;
}
show_streamlist_sidebar();
});
// Hide left / right sidebar on click outside.
document.addEventListener(
"click",
(e) => {
if (!(left_sidebar_expanded_as_overlay || right_sidebar_expanded_as_overlay)) {
return;
}
const $elt = $(e.target);
// Since sidebar toggle buttons have their own click handlers, don't handle them here.
if (
$elt.closest("#streamlist-toggle-button").length ||
$elt.closest("#userlist-toggle-button").length
) {
return;
}
// Overrides for certain elements that should not close the sidebars.
if ($elt.closest(".no-auto-hide-sidebar-overlays").length) {
return;
}
if (
left_sidebar_expanded_as_overlay &&
!$elt.closest(".no-auto-hide-left-sidebar-overlay").length
) {
const $left_column = $(".app-main .column-left");
const click_outside_left_sidebar = !$elt.closest($left_column).length;
if (click_outside_left_sidebar) {
hide_streamlist_sidebar();
}
}
if (
right_sidebar_expanded_as_overlay &&
!$elt.closest(".no-auto-hide-right-sidebar-overlay").length
) {
const $right_column = $(".app-main .column-right");
const click_outside_right_sidebar = !$elt.closest($right_column).length;
if (click_outside_right_sidebar) {
hide_userlist_sidebar();
}
}
},
{capture: true},
);
}

2
web/templates/navbar.hbs
View File

@ -50,7 +50,7 @@
<span id="userlist-toggle-unreadcount">0</span>
</a>
</div>
<div id="navbar-buttons" {{#if embedded}}class="hide-navbar-buttons-visibility"{{/if}}>
<div id="navbar-buttons" class="no-auto-hide-sidebar-overlays" {{#if embedded}}class="hide-navbar-buttons-visibility"{{/if}}>
</div>
</div>
</nav>

2
web/templates/stream_sidebar_actions.hbs
View File

@ -59,7 +59,7 @@
{{t "Unsubscribe" }}
</a>
</li>
<li class="hidden-for-spectators">
<li class="hidden-for-spectators no-auto-hide-left-sidebar-overlay">
<span class="colorpicker-container"><input stream_id="{{stream.stream_id}}" class="colorpicker" type="text" value="{{stream.color}}" /></span>
<a tabindex="0" class="choose_stream_color">
<i class="fa fa-eyedropper" aria-hidden="true"></i>

4
web/templates/user_card_popover_content.hbs
View File

@ -1,6 +1,6 @@
{{! Contents of the user card popover }}
<div class="popover-title"></div>
<div class="popover-content">
<div class="popover-title no-auto-hide-right-sidebar-overlay"></div>
<div class="popover-content no-auto-hide-right-sidebar-overlay">
<ul class="nav nav-list user-card-popover-actions" id="user_card_popover" data-user-id="{{user_id}}">
<li class="popover_user_name_row">
<b class="user_full_name" data-tippy-content="{{user_full_name}}">{{user_full_name}}</b>