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

popovers: Add keyboard support for topic popovers in left sidebar. 

This commit adds arrow, vim_up/vim_down and enter hotkey support for
navigating the popover menu.
This commit is contained in:
Mohit Gupta 2020-07-09 06:48:27 +05:30 committed by Tim Abbott
parent 2579781a0a
commit 5cef548708
4 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend_tests/node_tests/hotkey.js
View File

@ -212,6 +212,7 @@ run_test("basic_chars", () => {
});
set_global("stream_popover", {
stream_popped: return_false,
topic_popped: return_false,
});
set_global("emoji_picker", {
reactions_popped: return_false,

10
static/js/hotkey.js
View File

@ -306,6 +306,11 @@ exports.process_enter_key = function (e) {
return true;
}
if (stream_popover.topic_popped()) {
stream_popover.topic_sidebar_menu_handle_keyboard("enter");
return true;
}
if (overlays.settings_open()) {
// On the settings page just let the browser handle
// the Enter key for things like submitting forms.
@ -563,6 +568,11 @@ exports.process_hotkey = function (e, hotkey) {
stream_popover.stream_sidebar_menu_handle_keyboard(event_name);
return true;
}
if (stream_popover.topic_popped()) {
stream_popover.topic_sidebar_menu_handle_keyboard(event_name);
return true;
}
}
// The next two sections date back to 00445c84 and are Mac/Chrome-specific,

5
static/js/stream_popover.js
View File

@ -34,6 +34,11 @@ exports.stream_sidebar_menu_handle_keyboard = (key) => {
popovers.popover_items_handle_keyboard(key, items);
};
exports.topic_sidebar_menu_handle_keyboard = (key) => {
const items = get_popover_menu_items(current_topic_sidebar_elem);
popovers.popover_items_handle_keyboard(key, items);
};
function elem_to_stream_id(elem) {
const stream_id = parseInt(elem.attr("data-stream-id"), 10);

13
static/templates/topic_sidebar_actions.hbs
View File

@ -8,8 +8,9 @@
<hr>
{{! tabindex="0" Makes anchor tag focusable. Needed for keyboard support. }}
<li>
<a class="narrow_to_topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<a tabindex="0" class="narrow_to_topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="fa fa-bullhorn" aria-hidden="true"></i>
{{t "Narrow to topic"}}
</a>
@ -18,7 +19,7 @@
{{#if can_mute_topic}}
<li>
<a href="#" class="sidebar-popover-mute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<a tabindex="0" class="sidebar-popover-mute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="fa fa-bell-slash" aria-hidden="true"></i>
{{t "Mute topic"}}
</a>
@ -27,14 +28,14 @@
{{#if can_unmute_topic}}
<li>
<a href="#" class="sidebar-popover-unmute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<a tabindex="0" class="sidebar-popover-unmute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="fa fa-bell" aria-hidden="true"></i>
{{t "Unmute topic"}}
</a>
</li>
{{/if}}
<li>
<a class="sidebar-popover-mark-topic-read" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<a tabindex="0" class="sidebar-popover-mark-topic-read" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="fa fa-book" aria-hidden="true"></i>
{{t "Mark all messages as read"}}
</a>
@ -45,7 +46,7 @@
<div class="admin-separator">{{#tr this}}ADMIN ACTIONS{{/tr}}</div>
<li>
<a class="sidebar-popover-delete-topic-messages" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<a tabindex="0" class="sidebar-popover-delete-topic-messages" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="fa fa-trash" aria-hidden="true"></i>
{{t "Delete all messages in topic"}}
</a>
@ -54,7 +55,7 @@
{{#if is_admin}}
<li>
<a class="sidebar-popover-move-topic-messages" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<a tabindex="0" class="sidebar-popover-move-topic-messages" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="fa fa-arrows" aria-hidden="true"></i>
{{t "Move topic"}}
</a>