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

buddy_list: Refactor menu popover to support keyboard navigation.

This commit is contained in:
evykassirer 2024-10-11 12:57:56 -07:00 committed by Tim Abbott
parent 88ae87c10f
commit 478cd9220c
3 changed files with 17 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/popover_menus.ts
View File

@ -28,7 +28,8 @@ type PopoverName =
| "change_visibility_policy"
| "personal_menu"
| "gear_menu"
| "help_menu";
| "help_menu"
| "buddy_list";
export const popover_instances: Record<PopoverName, tippy.Instance | null> = {
compose_control_buttons: null,
@ -47,6 +48,7 @@ export const popover_instances: Record<PopoverName, tippy.Instance | null> = {
personal_menu: null,
gear_menu: null,
help_menu: null,
buddy_list: null,
};
/* Keyboard UI functions */

39
web/src/sidebar_ui.ts
View File

@ -1,5 +1,4 @@
import $ from "jquery";
import type * as tippy from "tippy.js";
import render_left_sidebar from "../templates/left_sidebar.hbs";
import render_buddy_list_popover from "../templates/popovers/buddy_list_popover.hbs";
@ -21,8 +20,6 @@ import {current_user} from "./state_data";
import * as ui_util from "./ui_util";
import {user_settings} from "./user_settings";
let buddy_list_popover_instance: tippy.Instance | undefined;
function save_sidebar_toggle_status(): void {
const ls = localstorage();
ls.set("left-sidebar", $("body").hasClass("hide-left-sidebar"));
@ -286,28 +283,18 @@ export function initialize_right_sidebar(): void {
buddy_list.toggle_other_users_section();
});
$("#user-list").on("click", "#buddy-list-menu-icon", (e) => {
e.stopPropagation();
popover_menus.toggle_popover_menu(
$("#buddy-list-menu-icon")[0]!,
{
theme: "popover-menu",
placement: "right",
onCreate(instance) {
buddy_list_popover_instance = instance;
instance.setContent(ui_util.parse_html(render_buddy_list_popover()));
},
onHidden() {
if (buddy_list_popover_instance !== undefined) {
buddy_list_popover_instance.destroy();
buddy_list_popover_instance = undefined;
}
},
},
{
show_as_overlay_on_mobile: true,
show_as_overlay_always: false,
},
);
popover_menus.register_popover_menu("#buddy-list-menu-icon", {
theme: "popover-menu",
placement: "right",
onCreate(instance) {
popover_menus.popover_instances.buddy_list = instance;
instance.setContent(ui_util.parse_html(render_buddy_list_popover()));
},
onHidden() {
if (popover_menus.popover_instances.buddy_list !== null) {
popover_menus.popover_instances.buddy_list.destroy();
popover_menus.popover_instances.buddy_list = null;
}
},
});
}

2
web/templates/popovers/buddy_list_popover.hbs
View File

@ -1,7 +1,7 @@
<div class="popover-menu" id="stream-actions-menu-popover" data-simplebar data-simplebar-tab-index="-1">
<ul role="menu" class="popover-menu-list">
<li role="none" class="link-item">
<a class="invite-user-link popover-menu-link" role="button">
<a class="invite-user-link popover-menu-link" role="menuitem" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-user-plus" aria-hidden="true"></i>
<span class="popover-menu-label">
{{t 'Invite users to organization' }}