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

39
web/src/sidebar_ui.ts
View File

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

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"> <div class="popover-menu" id="stream-actions-menu-popover" data-simplebar data-simplebar-tab-index="-1">
<ul role="menu" class="popover-menu-list"> <ul role="menu" class="popover-menu-list">
<li role="none" class="link-item"> <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> <i class="popover-menu-icon zulip-icon zulip-icon-user-plus" aria-hidden="true"></i>
<span class="popover-menu-label"> <span class="popover-menu-label">
{{t 'Invite users to organization' }} {{t 'Invite users to organization' }}