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

navbar_menu: Refactor `change_active_navbar_menu` to use target menu. 

This commit introduces `navbar-item` class for each navbar menus and
`active-navbar-menu` class to indicate active navbar menu. Also
introduces new function `get_target_navbar_menu` to return target
navbar menu from keyboard event. `change_active_navbar_menu` uses target
menu to switch between navbar items.
This commit is contained in:
Pratik Chanda 2024-11-22 03:09:51 +05:30 committed by Tim Abbott
parent 566e5e688b
commit d4bcf5bae3
5 changed files with 50 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/gear_menu.js
View File

@ -89,6 +89,7 @@ function render(instance) {
popover_menus_data.get_gear_menu_content_context(),
);
instance.setContent(parse_html(rendered_gear_menu));
$("#gear-menu").addClass("active-navbar-menu");
}
export function initialize() {
@ -165,6 +166,7 @@ export function initialize() {
},
onShow: render,
onHidden(instance) {
$("#gear-menu").removeClass("active-navbar-menu");
instance.destroy();
popover_menus.popover_instances.gear_menu = undefined;
},

2
web/src/navbar_help_menu.ts
View File

@ -36,10 +36,12 @@ export function initialize(): void {
}),
),
);
$("#help-menu").addClass("active-navbar-menu");
},
onHidden(instance) {
instance.destroy();
popover_menus.popover_instances.help_menu = null;
$("#help-menu").removeClass("active-navbar-menu");
},
});
}

51
web/src/navbar_menus.js
View File

@ -1,3 +1,5 @@
import $ from "jquery";
import * as gear_menu from "./gear_menu.js";
import * as navbar_help_menu from "./navbar_help_menu.ts";
import {page_params} from "./page_params.ts";
@ -17,15 +19,26 @@ export function handle_keyboard_events(event_name) {
if (!allowed_events.has(event_name)) {
return false;
}
return change_active_navbar_menu(event_name);
if (event_name === "gear_menu") {
gear_menu.toggle();
return true;
}
const $current_navbar_menu = $(".navbar-item:visible").filter(".active-navbar-menu");
const target_menu = get_target_navbar_menu(event_name, $current_navbar_menu);
if (!target_menu) {
return false;
}
return change_active_navbar_menu(target_menu);
}
function change_active_navbar_menu(event_name) {
function change_active_navbar_menu(target_menu) {
// We don't need to process arrow keys in navbar menus for spectators
// since they only have gear menu present.
if (
popover_menus.is_personal_menu_popover_displayed() &&
(event_name === "left_arrow" || event_name === "gear_menu") &&
target_menu === "gear-menu" &&
!page_params.is_spectator
) {
// Open gear menu popover on left arrow.
@ -34,10 +47,7 @@ function change_active_navbar_menu(event_name) {
return true;
}
if (
popover_menus.is_help_menu_popover_displayed() &&
(event_name === "right_arrow" || event_name === "gear_menu")
) {
if (popover_menus.is_help_menu_popover_displayed() && target_menu === "gear-menu") {
// Open gear menu popover on right arrow.
navbar_help_menu.toggle();
gear_menu.toggle();
@ -45,15 +55,15 @@ function change_active_navbar_menu(event_name) {
}
if (popover_menus.is_gear_menu_popover_displayed()) {
if (event_name === "gear_menu") {
if (target_menu === "gear-menu") {
gear_menu.toggle();
return true;
} else if (event_name === "right_arrow" && !page_params.is_spectator) {
} else if (target_menu === "personal-menu" && !page_params.is_spectator) {
// Open personal menu popover on g + right arrow.
gear_menu.toggle();
personal_menu_popover.toggle();
return true;
} else if (event_name === "left_arrow") {
} else if (target_menu === "help-menu") {
// Open help menu popover on g + left arrow.
gear_menu.toggle();
navbar_help_menu.toggle();
@ -63,3 +73,24 @@ function change_active_navbar_menu(event_name) {
return false;
}
function get_target_navbar_menu(event_name, $current_navbar_menu) {
const $visible_navbar_menus = $(".navbar-item:visible");
const index = $visible_navbar_menus.index($current_navbar_menu);
let $target_navbar_menu;
if (event_name === "left_arrow" && index === 0) {
return undefined;
} else if (event_name === "right_arrow" && index === $visible_navbar_menus.length - 1) {
return undefined;
}
if (event_name === "left_arrow") {
$target_navbar_menu = $visible_navbar_menus.eq(index - 1);
return $target_navbar_menu.attr("id");
} else if (event_name === "right_arrow") {
$target_navbar_menu = $visible_navbar_menus.eq(index + 1);
return $target_navbar_menu.attr("id");
}
return undefined;
}

2
web/src/personal_menu_popover.ts
View File

@ -110,10 +110,12 @@ export function initialize(): void {
onShow(instance) {
const args = popover_menus_data.get_personal_menu_content_context();
instance.setContent(parse_html(render_navbar_personal_menu_popover(args)));
$("#personal-menu").addClass("active-navbar-menu");
},
onHidden(instance) {
instance.destroy();
popover_menus.popover_instances.personal_menu = null;
$("#personal-menu").removeClass("active-navbar-menu");
},
});
}

6
web/templates/navbar.hbs
View File

@ -46,17 +46,17 @@
<i class="zulip-icon zulip-icon-user-list"></i>
</a>
</div>
<div id="help-menu">
<div id="help-menu" class="navbar-item">
<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-bigger" aria-hidden="true"></i>
</a>
</div>
<div id="gear-menu" class="{{#if embedded}}hide-navbar-buttons-visibility{{/if}}">
<div id="gear-menu" class="{{#if embedded}}hide-navbar-buttons-visibility{{/if}} navbar-item">
<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>
</a>
</div>
<div id="personal-menu" class="hidden-for-spectators">
<div id="personal-menu" class="hidden-for-spectators navbar-item">
<a class="header-button tippy-zulip-delayed-tooltip" tabindex="0" role="button" data-tooltip-template-id="personal-menu-tooltip-template">
<img class="header-button-avatar" src="{{user_avatar}}"/>
</a>