sidebar_ui: Hide sidebars when user clicks outside them.

web/src/click_handlers.js

@@ -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();
         });

web/src/hashchange.js

@@ -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);

web/src/hotkey.js

@@ -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;
     }

web/src/popovers.js

@@ -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,
     });

web/src/resize.js

@@ -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();
     }
 

web/src/sidebar_ui.js

@@ -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) {
-        if (!right_sidebar_expanded_as_overlay) {
+            hide_userlist_sidebar();
-            show_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) {
-        if (!left_sidebar_expanded_as_overlay) {
+            hide_streamlist_sidebar();
-            show_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},
+    );
 }

web/templates/navbar.hbs

@@ -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>

web/templates/stream_sidebar_actions.hbs

@@ -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>

web/templates/user_card_popover_content.hbs

@@ -1,6 +1,6 @@
 {{! Contents of the user card popover }}
-<div class="popover-title"></div>
+<div class="popover-title no-auto-hide-right-sidebar-overlay"></div>
-<div class="popover-content">
+<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>