diff --git a/help/keyboard-shortcuts.md b/help/keyboard-shortcuts.md
index 3d739cce62..0ce318c4ea 100644
--- a/help/keyboard-shortcuts.md
+++ b/help/keyboard-shortcuts.md
@@ -203,6 +203,8 @@ Keyboard navigation (e.g. arrow keys) works as expected.
* **Open personal menu**: G + →
+* **Open help menu**: G + ←
+
### For a selected message (outlined in blue)
* **Toggle emoji reactions menu**: :
diff --git a/tools/test-js-with-node b/tools/test-js-with-node
index 77f780908e..6a788d1ee0 100755
--- a/tools/test-js-with-node
+++ b/tools/test-js-with-node
@@ -152,6 +152,7 @@ EXEMPT_FILES = make_set(
"web/src/narrow_history.js",
"web/src/narrow_title.js",
"web/src/navbar_alerts.js",
+ "web/src/navbar_help_menu.js",
"web/src/navbar_menus.js",
"web/src/navigate.js",
"web/src/overlay_util.ts",
diff --git a/web/src/navbar_help_menu.js b/web/src/navbar_help_menu.js
new file mode 100644
index 0000000000..ee9fe2d5dd
--- /dev/null
+++ b/web/src/navbar_help_menu.js
@@ -0,0 +1,52 @@
+import $ from "jquery";
+
+import render_navbar_help_menu from "../templates/navbar_help_menu.hbs";
+
+import {page_params} from "./page_params";
+import * as popover_menus from "./popover_menus";
+import {parse_html} from "./ui_util";
+
+export function initialize() {
+ popover_menus.register_popover_menu("#help-menu", {
+ theme: "navbar-dropdown-menu",
+ placement: "bottom",
+ offset: [-50, 0],
+ // The strategy: "fixed"; and eventlisteners modifier option
+ // ensure that the personal menu does not modify its position
+ // or disappear when user zooms the page.
+ popperOptions: {
+ strategy: "fixed",
+ modifiers: [
+ {
+ name: "eventListeners",
+ options: {
+ scroll: false,
+ },
+ },
+ ],
+ },
+ onMount(instance) {
+ popover_menus.popover_instances.help_menu = instance;
+ },
+ onShow(instance) {
+ instance.setContent(
+ parse_html(
+ render_navbar_help_menu({
+ corporate_enabled: page_params.corporate_enabled,
+ }),
+ ),
+ );
+ },
+ onHidden(instance) {
+ instance.destroy();
+ popover_menus.popover_instances.help_menu = undefined;
+ },
+ });
+}
+
+export function toggle() {
+ // NOTE: Since to open help menu, you need to click on help navbar icon (which calls
+ // tippyjs.hideAll()), or go via gear menu if using hotkeys, we don't need to
+ // call tippyjs.hideAll() for it.
+ $("#help-menu").trigger("click");
+}
diff --git a/web/src/navbar_menus.js b/web/src/navbar_menus.js
index 4494b5497b..c9843cae70 100644
--- a/web/src/navbar_menus.js
+++ b/web/src/navbar_menus.js
@@ -1,4 +1,5 @@
import * as gear_menu from "./gear_menu";
+import * as navbar_help_menu from "./navbar_help_menu";
import {page_params} from "./page_params";
import * as personal_menu_popover from "./personal_menu_popover";
import * as popover_menus from "./popover_menus";
@@ -6,7 +7,8 @@ import * as popover_menus from "./popover_menus";
export function is_navbar_menus_displayed() {
return (
popover_menus.is_personal_menu_popover_displayed() ||
- popover_menus.is_gear_menu_popover_displayed()
+ popover_menus.is_gear_menu_popover_displayed() ||
+ popover_menus.is_help_menu_popover_displayed()
);
}
@@ -24,6 +26,16 @@ export function handle_keyboard_events(event_name) {
return true;
}
+ if (
+ popover_menus.is_help_menu_popover_displayed() &&
+ (event_name === "right_arrow" || event_name === "gear_menu")
+ ) {
+ // Open gear menu popover on right arrow.
+ navbar_help_menu.toggle();
+ gear_menu.toggle();
+ return true;
+ }
+
if (popover_menus.is_gear_menu_popover_displayed()) {
if (event_name === "gear_menu") {
gear_menu.toggle();
@@ -33,6 +45,11 @@ export function handle_keyboard_events(event_name) {
gear_menu.toggle();
personal_menu_popover.toggle();
return true;
+ } else if (event_name === "left_arrow") {
+ // Open help menu popover on g + left arrow.
+ gear_menu.toggle();
+ navbar_help_menu.toggle();
+ return true;
}
}
diff --git a/web/src/popover_menus.js b/web/src/popover_menus.js
index fc5025f3d9..69a0e03a50 100644
--- a/web/src/popover_menus.js
+++ b/web/src/popover_menus.js
@@ -37,6 +37,7 @@ export const popover_instances = {
change_visibility_policy: null,
personal_menu: null,
gear_menu: null,
+ help_menu: null,
};
/* Keyboard UI functions */
@@ -111,6 +112,10 @@ export function get_gear_menu_instance() {
return popover_instances.gear_menu;
}
+export function is_help_menu_popover_displayed() {
+ return popover_instances.help_menu?.state.isVisible;
+}
+
export function is_message_actions_popover_displayed() {
return popover_instances.message_actions?.state.isVisible;
}
diff --git a/web/src/popover_menus_data.js b/web/src/popover_menus_data.js
index 4cb7f149db..fd8ce63bd6 100644
--- a/web/src/popover_menus_data.js
+++ b/web/src/popover_menus_data.js
@@ -202,7 +202,6 @@ export function get_gear_menu_content_context() {
apps_page_url: page_params.apps_page_url,
can_create_multiuse_invite: settings_data.user_can_create_multiuse_invite(),
can_invite_users_by_email: settings_data.user_can_invite_users_by_email(),
- corporate_enabled: page_params.corporate_enabled,
is_guest: page_params.is_guest,
login_link: page_params.development_environment ? "/devlogin/" : "/login/",
promote_sponsoring_zulip: page_params.promote_sponsoring_zulip,
diff --git a/web/src/ui_init.js b/web/src/ui_init.js
index b51f6ce9a6..e4631d1c94 100644
--- a/web/src/ui_init.js
+++ b/web/src/ui_init.js
@@ -75,6 +75,7 @@ import * as narrow_history from "./narrow_history";
import * as narrow_state from "./narrow_state";
import * as narrow_title from "./narrow_title";
import * as navbar_alerts from "./navbar_alerts";
+import * as navbar_help_menu from "./navbar_help_menu";
import * as navigate from "./navigate";
import * as overlays from "./overlays";
import {page_params} from "./page_params";
@@ -696,6 +697,7 @@ export function initialize_everything() {
});
unread_ops.initialize();
gear_menu.initialize();
+ navbar_help_menu.initialize();
giphy.initialize();
presence.initialize(presence_params);
settings_display.initialize();
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index c0e948148d..60fb7ec844 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -1310,6 +1310,10 @@ ul {
}
}
+#help-menu-dropdown {
+ padding-bottom: 5px;
+}
+
ul.navbar-dropdown-menu-outer-list {
list-style: none;
margin: 0;
diff --git a/web/styles/search.css b/web/styles/search.css
index 75cd044e7e..5d5b14e911 100644
--- a/web/styles/search.css
+++ b/web/styles/search.css
@@ -185,14 +185,6 @@
height: var(--search-box-height);
}
- @media ($md_min <= width < $xl_min) {
- /* Add some space between the search input and the userlist toggle
- in this width range so that hover state of userlist-toggle looks good. */
- .navbar-search:not(.expanded) {
- right: 2px;
- }
- }
-
@media (width >= $md_min) {
.navbar-search {
background: var(--color-background-search);
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index bc0e3409b9..986a9f165c 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -837,10 +837,11 @@ body.has-overlay-scrollbar {
display: flex;
justify-content: space-evenly;
position: absolute;
- top: 10px;
- right: 40px;
- /* width of right column - width of gear icon - right margin of column-right (250px - 40px -7px) */
- width: 203px;
+ top: 8px;
+ /* gear menu + help menu width (40px * 2) */
+ right: 80px;
+ /* width of right column - width of gear icon - right margin of column-right (250px - 40px - 40px -7px) */
+ width: 163px;
& a {
font-size: calc(16em / 14);
@@ -2990,9 +2991,11 @@ select.invite-as {
.spectator-view {
#navbar-middle {
- margin-right: 85px;
+ /* = 40px (width of button) * 3 (number of buttons) + 10px extra margin. */
+ margin-right: 130px;
}
+ #help-menu,
#gear-menu {
position: relative;
right: 40px;
@@ -3039,7 +3042,8 @@ select.invite-as {
}
#navbar-middle {
- margin-right: 127px;
+ /* = 40px (width of button) * 4 (number of buttons) + 10px extra margin. */
+ margin-right: 170px;
}
}
@@ -3143,16 +3147,19 @@ select.invite-as {
.spectator-view {
#navbar-middle {
- margin-right: 65px;
+ /* = 30px (width of button) * 3 (number of buttons) + 10px extra margin. */
+ margin-right: 100px;
}
+ #help-menu,
#gear-menu {
- right: 35px;
+ right: 30px;
}
}
#navbar-middle {
- margin-right: 97px;
+ /* = 30px (width of button) * 4 (number of buttons) + 10px extra margin. */
+ margin-right: 130px;
}
.nav .dropdown-menu {
@@ -3412,9 +3419,6 @@ select.invite-as {
display: flex;
justify-content: center;
align-items: center;
- position: relative;
- top: 0;
- right: 0;
&:hover,
&:focus {
@@ -3442,9 +3446,16 @@ select.invite-as {
font-size: 18px;
}
+ .zulip-icon-help,
.zulip-icon-triple-users {
font-size: 20px;
}
+
+ .zulip-icon-help {
+ position: relative;
+ top: 0.5px;
+ right: -0.5px;
+ }
}
#personal-menu {
diff --git a/web/templates/gear_menu_popover.hbs b/web/templates/gear_menu_popover.hbs
index 8c4a0d166e..c1834eddfe 100644
--- a/web/templates/gear_menu_popover.hbs
+++ b/web/templates/gear_menu_popover.hbs
@@ -85,43 +85,6 @@
-