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

help_menu: Extract help items from gear menu into a separate popover. 

Fixes #27202
This commit is contained in:
Aman Agrawal 2023-10-21 11:57:36 +00:00 committed by Tim Abbott
parent 2b9dc1f398
commit 8f716cd64a
15 changed files with 162 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
help/keyboard-shortcuts.md
View File

@ -203,6 +203,8 @@ Keyboard navigation (e.g. arrow keys) works as expected.
* **Open personal menu**: <kbd>G</kbd> + <kbd class="arrow-key">→</kbd>
* **Open help menu**: <kbd>G</kbd> + <kbd class="arrow-key">←</kbd>
### For a selected message (outlined in blue)
* **Toggle emoji reactions menu**: <kbd>:</kbd>

1
tools/test-js-with-node
View File

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

52
web/src/navbar_help_menu.js Normal file
View File

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

19
web/src/navbar_menus.js
View File

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

5
web/src/popover_menus.js
View File

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

1
web/src/popover_menus_data.js
View File

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

2
web/src/ui_init.js
View File

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

4
web/styles/popovers.css
View File

@ -1310,6 +1310,10 @@ ul {
}
}
#help-menu-dropdown {
padding-bottom: 5px;
}
ul.navbar-dropdown-menu-outer-list {
list-style: none;
margin: 0;

8
web/styles/search.css
View File

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

35
web/styles/zulip.css
View File

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

37
web/templates/gear_menu_popover.hbs
View File

@ -85,43 +85,6 @@
</li>
</ul>
</li>
<li class="navbar-dropdown-menu-outer-list-item">
<ul class="navbar-dropdown-menu-inner-list">
<li class="link-item navbar-dropdown-menu-inner-list-item">
<a href="/help/" target="_blank" rel="noopener noreferrer" class="navigate-link-on-enter navbar-dropdown-menu-link">
<i class="navbar-dropdown-icon zulip-icon zulip-icon-help" aria-hidden="true"></i> {{t 'Help center' }}
</a>
</li>
<li class="link-item navbar-dropdown-menu-inner-list-item">
<a tabindex="0" class="navigate-link-on-enter navbar-dropdown-menu-link" data-overlay-trigger="keyboard-shortcuts">
<i class="navbar-dropdown-icon zulip-icon zulip-icon-keyboard" aria-hidden="true"></i> {{t 'Keyboard shortcuts' }} <span class="hotkey-hint">(?)</span>
</a>
</li>
<li class="link-item navbar-dropdown-menu-inner-list-item hidden-for-spectators">
<a tabindex="0" class="navigate-link-on-enter navbar-dropdown-menu-link" data-overlay-trigger="message-formatting">
<i class="navbar-dropdown-icon zulip-icon zulip-icon-edit" aria-hidden="true"></i> {{t 'Message formatting' }}
</a>
</li>
<li class="link-item navbar-dropdown-menu-inner-list-item">
<a tabindex="0" class="navigate-link-on-enter navbar-dropdown-menu-link" data-overlay-trigger="search-operators">
<i class="navbar-dropdown-icon zulip-icon zulip-icon-manage-search" aria-hidden="true"></i> {{t 'Search filters' }}
</a>
</li>
<li class="link-item navbar-dropdown-menu-inner-list-item" id="gear_menu_about_zulip">
<a href="#about-zulip" class="navigate-link-on-enter navbar-dropdown-menu-link">
<i class="navbar-dropdown-icon zulip-icon zulip-icon-info"></i>
{{t "About Zulip" }}
</a>
</li>
{{#if corporate_enabled}}
<li class="link-item navbar-dropdown-menu-inner-list-item">
<a href="/help/contact-support" target="_blank" rel="noopener noreferrer" class="navigate-link-on-enter navbar-dropdown-menu-link">
<i class="navbar-dropdown-icon zulip-icon zulip-icon-life-buoy" aria-hidden="true"></i> {{t 'Contact support' }}
</a>
</li>
{{/if}}
</ul>
</li>
<li class="hidden-for-spectators navbar-dropdown-menu-outer-list-item">
<ul class="navbar-dropdown-menu-inner-list">
<li class="link-item navbar-dropdown-menu-inner-list-item">

4
web/templates/keyboard_shortcuts.hbs
View File

@ -317,6 +317,10 @@
<td class="definition">{{t 'Open personal menu' }}</td>
<td><span class="hotkey"><kbd>G</kbd><kbd class="arrow-key">→</kbd></span></td>
</tr>
<tr>
<td class="definition">{{t 'Open help menu' }}</td>
<td><span class="hotkey"><kbd>G</kbd><kbd class="arrow-key">←</kbd></span></td>
</tr>
<tr>
<td class="definition">{{t 'Open message menu' }}</td>
<td><span class="hotkey"><kbd>I</kbd></span></td>

6
web/templates/navbar.hbs
View File

@ -51,6 +51,12 @@
<span id="userlist-toggle-unreadcount">0</span>
</a>
</div>
<div id="help-menu">
<a class="header-button tippy-zulip-delayed-tooltip" tabindex="0" role="button" data-tooltip-template-id="help-menu-tooltip-template">
<i class="zulip-icon zulip-icon-help" aria-hidden="true"></i>
</a>
<span tabindex="0" class="focus-dropdown"></span>
</div>
<div id="gear-menu" class="{{#if embedded}}hide-navbar-buttons-visibility{{/if}}">
<a id="settings-dropdown" tabindex="0" role="button" class="header-button tippy-zulip-delayed-tooltip" data-tooltip-template-id="gear-menu-tooltip-template">
<i class="zulip-icon zulip-icon-gear" aria-hidden="true"></i>

41
web/templates/navbar_help_menu.hbs Normal file
View File

@ -0,0 +1,41 @@
<div class="navbar-dropdown-menu" id="help-menu-dropdown" aria-labelledby="help-menu" data-simplebar>
<ul class="navbar-dropdown-menu-outer-list">
<li class="navbar-dropdown-menu-outer-list-item">
<ul class="navbar-dropdown-menu-inner-list">
<li class="link-item navbar-dropdown-menu-inner-list-item">
<a href="/help/" target="_blank" rel="noopener noreferrer" class="navigate-link-on-enter navbar-dropdown-menu-link">
<i class="navbar-dropdown-icon zulip-icon zulip-icon-help" aria-hidden="true"></i> {{t 'Help center' }}
</a>
</li>
<li class="link-item navbar-dropdown-menu-inner-list-item">
<a tabindex="0" class="navigate-link-on-enter navbar-dropdown-menu-link" data-overlay-trigger="keyboard-shortcuts">
<i class="navbar-dropdown-icon zulip-icon zulip-icon-keyboard" aria-hidden="true"></i> {{t 'Keyboard shortcuts' }} <span class="hotkey-hint">(?)</span>
</a>
</li>
<li class="link-item navbar-dropdown-menu-inner-list-item hidden-for-spectators">
<a tabindex="0" class="navigate-link-on-enter navbar-dropdown-menu-link" data-overlay-trigger="message-formatting">
<i class="navbar-dropdown-icon zulip-icon zulip-icon-edit" aria-hidden="true"></i> {{t 'Message formatting' }}
</a>
</li>
<li class="link-item navbar-dropdown-menu-inner-list-item">
<a tabindex="0" class="navigate-link-on-enter navbar-dropdown-menu-link" data-overlay-trigger="search-operators">
<i class="navbar-dropdown-icon zulip-icon zulip-icon-manage-search" aria-hidden="true"></i> {{t 'Search filters' }}
</a>
</li>
<li class="link-item navbar-dropdown-menu-inner-list-item" id="gear_menu_about_zulip">
<a href="#about-zulip" class="navigate-link-on-enter navbar-dropdown-menu-link">
<i class="navbar-dropdown-icon zulip-icon zulip-icon-info"></i>
{{t "About Zulip" }}
</a>
</li>
{{#if corporate_enabled}}
<li class="link-item navbar-dropdown-menu-inner-list-item">
<a href="/help/contact-support" target="_blank" rel="noopener noreferrer" class="navigate-link-on-enter navbar-dropdown-menu-link">
<i class="navbar-dropdown-icon zulip-icon zulip-icon-life-buoy" aria-hidden="true"></i> {{t 'Contact support' }}
</a>
</li>
{{/if}}
</ul>
</li>
</ul>
</div>

4
web/templates/tooltip_templates.hbs
View File

@ -75,6 +75,10 @@
{{t 'Personal menu' }}
{{tooltip_hotkey_hints "G" "→"}}
</template>
<template id="help-menu-tooltip-template">
{{t 'Help menu' }}
{{tooltip_hotkey_hints "G" "←"}}
</template>
<template id="all-message-tooltip-template">
{{t 'All messages' }}
{{tooltip_hotkey_hints "A"}}