user groups: Add overlay for user group settings.

Dedicated overlay for user group settings is added as part of
addressing zulip#19526.

The newely added overlay is currently empty and more UI
related to settings is to be added in further commits.

static/js/hash_util.js

@@ -195,6 +195,7 @@ export function is_overlay_hash(hash) {
     const overlay_list = [
         "streams",
         "drafts",
+        "groups",
         "settings",
         "organization",
         "invite",

static/js/hashchange.js

@@ -27,6 +27,7 @@ import * as stream_settings_ui from "./stream_settings_ui";
 import * as top_left_corner from "./top_left_corner";
 import * as ui_report from "./ui_report";
 import * as ui_util from "./ui_util";
+import * as user_groups_settings_ui from "./user_groups_settings_ui";
 import {user_settings} from "./user_settings";
 
 // Read https://zulip.readthedocs.io/en/latest/subsystems/hashchange-system.html
@@ -302,6 +303,11 @@ function do_hashchange_overlay(old_hash) {
         return;
     }
 
+    if (base === "groups") {
+        user_groups_settings_ui.launch();
+        return;
+    }
+
     if (base === "drafts") {
         drafts.launch();
         return;

static/js/user_groups_settings_ui.js

@@ -0,0 +1,35 @@
+import $ from "jquery";
+
+import render_user_group_settings_overlay from "../templates/user_group_settings/user_group_settings_overlay.hbs";
+
+import * as browser_history from "./browser_history";
+import * as overlays from "./overlays";
+import * as ui from "./ui";
+
+export function setup_page(callback) {
+    function populate_and_fill() {
+        const rendered = render_user_group_settings_overlay();
+
+        const $manage_groups_container = ui.get_content_element($("#manage_groups_container"));
+        $manage_groups_container.empty();
+        $manage_groups_container.append(rendered);
+
+        if (callback) {
+            callback();
+        }
+    }
+
+    populate_and_fill();
+}
+
+export function launch() {
+    setup_page(() => {
+        overlays.open_overlay({
+            name: "group_subscriptions",
+            $overlay: $("#groups_overlay"),
+            on_close() {
+                browser_history.exit_overlay();
+            },
+        });
+    });
+}

static/styles/dark_theme.css

@@ -634,6 +634,7 @@ body.dark-theme {
     .nav > li > a:focus,
     .nav > li > a:hover,
     .subscriptions-container .subscriptions-header,
+    .user-groups-container .user-groups-header,
     .grey-box,
     .white-box,
     .stream-email,

static/styles/subscriptions.css

@@ -255,6 +255,7 @@ h4.stream_setting_subsection_title {
 }
 
 .subscriptions-container .subscriptions-header .fa-chevron-left,
+.user-groups-container .user-groups-header .fa-chevron-left,
 #settings_overlay_container .settings-header.mobile .fa-chevron-left {
     position: relative;
     transform: translate(-50px, 0);
@@ -277,6 +278,7 @@ h4.stream_setting_subsection_title {
     opacity: 1;
 }
 
+.user-groups-container,
 .subscriptions-container {
     position: relative;
     height: 95%;
@@ -291,6 +293,7 @@ h4.stream_setting_subsection_title {
         width: auto;
     }
 
+    .user-groups-header,
     .subscriptions-header {
         padding: 12px;
         text-align: center;
@@ -302,6 +305,7 @@ h4.stream_setting_subsection_title {
             display: none;
         }
 
+        .user-groups-title,
         .subscriptions-title {
             display: inline-block;
             transition: all 0.3s ease;
@@ -970,6 +974,7 @@ h4.stream_setting_subsection_title {
 }
 
 @media (width < $lg_min) {
+    .user-groups-container,
     .subscriptions-container {
         max-width: 95%;
     }
@@ -1005,6 +1010,7 @@ h4.stream_setting_subsection_title {
    Longer-term we should extract this logic two-column-overlay class
    to read more naturally. */
 @media (width < $md_min) {
+    .user-groups-container,
     .subscriptions-container {
         position: relative;
         overflow: hidden;
@@ -1013,6 +1019,7 @@ h4.stream_setting_subsection_title {
             text-align: left;
         }
 
+        .user-groups-header .fa-chevron-left,
         .subscriptions-header .fa-chevron-left {
             display: block;
         }
@@ -1048,11 +1055,13 @@ h4.stream_setting_subsection_title {
         }
     }
 
-    #subscription_overlay {
+    #subscription_overlay,
+    #groups_overlay {
         .display-type {
             display: none;
         }
 
+        .user-groups-container,
         .subscriptions-container {
             height: 95%;
         }

static/templates/user_group_settings/user_group_settings_overlay.hbs

@@ -0,0 +1,13 @@
+<div id="groups_overlay" class="overlay new-style" data-overlay="group_subscriptions">
+    <div class="flex overlay-content">
+        <div class="user-groups-container modal-bg">
+            <div class="user-groups-header">
+                <div class="fa fa-chevron-left"></div>
+                <span class="user-groups-title">{{t 'User groups' }}</span>
+                <div class="exit">
+                    <span class="exit-sign">&times;</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

templates/zerver/app/index.html

@@ -87,6 +87,7 @@
 </div>
 
 <div id="manage_streams_container"></div>
+<div id="manage_groups_container"></div>
 <div id="drafts_table"></div>
 <div id="settings_overlay_container" class="overlay" data-overlay="settings" aria-hidden="true">
 </div>

tools/test-js-with-node

@@ -200,6 +200,7 @@ EXEMPT_FILES = make_set(
         "static/js/unread_ops.js",
         "static/js/unread_ui.js",
         "static/js/upload_widget.ts",
+        "static/js/user_groups_settings_ui.js",
         "static/js/user_profile.js",
         "static/js/user_settings.ts",
         "static/js/user_status_ui.js",