sidebar_ui: Allow user to hide right sidebar on any screen width.

web/src/activity_ui.ts

@@ -1,3 +1,4 @@
+import $ from "jquery";
 import _ from "lodash";
 import assert from "minimalistic-assert";
 
@@ -244,6 +245,7 @@ export function set_cursor_and_filter(): void {
 
 export function initiate_search(): void {
     if (user_filter) {
+        $("body").removeClass("hide-right-sidebar");
         popovers.hide_all();
         user_filter.initiate_search();
     }

web/src/sidebar_ui.ts

@@ -4,6 +4,7 @@ import render_left_sidebar from "../templates/left_sidebar.hbs";
 import render_right_sidebar from "../templates/right_sidebar.hbs";
 
 import {buddy_list} from "./buddy_list";
+import {media_breakpoints_num} from "./css_variables";
 import {page_params} from "./page_params";
 import * as rendered_markdown from "./rendered_markdown";
 import * as resize from "./resize";
@@ -69,6 +70,11 @@ export function initialize(): void {
         e.preventDefault();
         e.stopPropagation();
 
+        if (window.innerWidth >= media_breakpoints_num.xl) {
+            $("body").toggleClass("hide-right-sidebar");
+            return;
+        }
+
         if (right_sidebar_expanded_as_overlay) {
             hide_userlist_sidebar();
             return;

web/src/tippyjs.ts

@@ -577,6 +577,24 @@ export function initialize(): void {
         },
     });
 
+    delegate("body", {
+        target: "#userlist-toggle",
+        delay: LONG_HOVER_DELAY,
+        placement: "bottom",
+        appendTo: () => document.body,
+        onShow(instance) {
+            let template = "show-userlist-tooltip-template";
+            if ($("#right-sidebar-container").is(":visible")) {
+                template = "hide-userlist-tooltip-template";
+            }
+            $(instance.reference).attr("data-tooltip-template-id", template);
+            instance.setContent(get_tooltip_content(instance.reference));
+        },
+        onHidden(instance) {
+            instance.destroy();
+        },
+    });
+
     delegate("body", {
         target: "#realm-logo",
         placement: "right",

web/styles/right_sidebar.css

@@ -287,12 +287,13 @@ $user_status_emoji_width: 24px;
 }
 
 #userlist-toggle {
-    display: none;
     text-align: center;
     vertical-align: middle;
 }
 
 #userlist-toggle-button {
+    /* Same color as icon but a bit darker. */
+    box-shadow: inset 0 -2px 0 hsl(241.36deg 27.48% 37.73%);
     text-decoration: none;
     color: hsl(0deg 0% 60%);
 

web/styles/zulip.css

@@ -2427,8 +2427,7 @@ select.invite-as {
     }
 }
 
-@media (width < $xl_min) {
+%hide-right-sidebar {
-    .default-sidebar-behaviour {
     .app-main .column-right {
         display: none;
 
@@ -2455,6 +2454,19 @@ select.invite-as {
         }
     }
 
+    #userlist-toggle-button {
+        box-shadow: none;
+    }
+}
+
+.hide-right-sidebar {
+    @extend %hide-right-sidebar;
+}
+
+@media (width < $xl_min) {
+    .default-sidebar-behaviour {
+        @extend %hide-right-sidebar;
+
         .app-main .column-middle {
             margin-right: 7px;
         }
@@ -2469,10 +2481,6 @@ select.invite-as {
         #compose-content {
             margin-right: 7px;
         }
-
-        #userlist-toggle {
-            display: block;
-        }
     }
 }
 

web/templates/navbar.hbs

@@ -37,7 +37,7 @@
                     {{t 'Log in' }}
                 </a>
             </div>
-            <div id="userlist-toggle" class="hidden-for-spectators tippy-zulip-delayed-tooltip" data-tooltip-template-id="userlist-tooltip-template">
+            <div id="userlist-toggle" class="hidden-for-spectators">
                 <a id="userlist-toggle-button" role="button" class="header-button" tabindex="0">
                     <i class="zulip-icon zulip-icon-triple-users"></i>
                 </a>

web/templates/tooltip_templates.hbs

@@ -174,10 +174,13 @@
     {{t 'View streams' }}
     {{tooltip_hotkey_hints "Q"}}
 </template>
-<template id="userlist-tooltip-template">
+<template id="show-userlist-tooltip-template">
-    {{t 'User list' }}
+    {{t 'Show user list' }}
     {{tooltip_hotkey_hints "W"}}
 </template>
+<template id="hide-userlist-tooltip-template">
+    {{t 'Hide user list' }}
+</template>
 <template id="topic-unmute-tooltip-template">
     {{t "Unmute topic" }}
     {{tooltip_hotkey_hints "Shift" "M"}}