paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 05:23:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

recent_topics: Improve keyboard navigation around unread count.

Browse Source 
Following c31ab1bcb5, the keyboard
navigation in Recent Topics has been buggy, because the number of
columns with actionable elements now varies with whether the topic
has any unreads.

Fix the keyboard dead reckoning logic to understand that there's a
different number of columns depending on whether the unread count is
present.

This does not fully make the experience nice, but it's enough to tide
us over for now.

Fixes: #21654.
This commit is contained in:
madrix01
2022-07-22 20:02:51 +05:30
committed by Tim Abbott
parent 7767ed217d
commit 45743ea195
2 changed files with 33 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
static/js/recent_topics_ui.js
View File

@@ -707,6 +707,12 @@ function is_focus_at_last_table_row() {
return row_focus === $topic_rows.length - 1;
}
function has_unread(row) {
const last_msg_id = topics_widget.get_current_list()[row].last_msg_id;
const last_msg = message_store.get(last_msg_id);
return unread.num_unread_for_topic(last_msg.stream_id, last_msg.topic) > 0;
}
export function focus_clicked_element(topic_row_index, col, topic_key) {
$current_focus_elem = "table";
col_focus = col;
@@ -720,7 +726,10 @@ export function focus_clicked_element(topic_row_index, col, topic_key) {
set_table_focus(row_focus, col_focus);
}
function left_arrow_navigation() {
function left_arrow_navigation(row, col) {
if (col === MAX_SELECTABLE_COLS - 1 && !has_unread(row)) {
col_focus -= 1;
}
col_focus -= 1;
if (col_focus < 0) {
@@ -728,7 +737,10 @@ function left_arrow_navigation() {
}
}
function right_arrow_navigation() {
function right_arrow_navigation(row, col) {
if (col === 1 && !has_unread(row)) {
col_focus += 1;
}
col_focus += 1;
if (col_focus >= MAX_SELECTABLE_COLS) {
@@ -736,11 +748,17 @@ function right_arrow_navigation() {
}
}
function up_arrow_navigation() {
function up_arrow_navigation(row, col) {
if (col === 2 && row - 1 >= 0 && !has_unread(row - 1)) {
col_focus = 1;
}
row_focus -= 1;
}
function down_arrow_navigation() {
function down_arrow_navigation(row, col) {
if (col === 2 && !has_unread(row + 1)) {
col_focus = 1;
}
row_focus += 1;
}
@@ -857,12 +875,12 @@ export function change_focused_element($elt, input_key) {
case "shift_tab":
case "vim_left":
case "left_arrow":
left_arrow_navigation();
left_arrow_navigation(row_focus, col_focus);
break;
case "tab":
case "vim_right":
case "right_arrow":
right_arrow_navigation();
right_arrow_navigation(row_focus, col_focus);
break;
case "vim_down":
// We stop user at last table row
@@ -875,10 +893,10 @@ export function change_focused_element($elt, input_key) {
if (is_focus_at_last_table_row()) {
return true;
}
down_arrow_navigation();
down_arrow_navigation(row_focus, col_focus);
break;
case "down_arrow":
down_arrow_navigation();
down_arrow_navigation(row_focus, col_focus);
break;
case "vim_up":
// See comment on vim_down.
@@ -888,10 +906,10 @@ export function change_focused_element($elt, input_key) {
if (row_focus === 0) {
return true;
}
up_arrow_navigation();
up_arrow_navigation(row_focus, col_focus);
break;
case "up_arrow":
up_arrow_navigation();
up_arrow_navigation(row_focus, col_focus);
}
set_table_focus(row_focus, col_focus, true);
return true;

6
static/templates/recent_topic_row.hbs
View File

@@ -13,7 +13,11 @@
<a href="{{topic_url}}">{{topic}}</a>
</div>
<div class="right_part">
<span class="unread_count {{#unless unread_count}}unread_hidden{{/unless}} tippy-zulip-tooltip on_hover_topic_read" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mark as read' }}" role="button" tabindex="0" aria-label="{{t 'Mark as read' }}">{{unread_count}}</span>
<div class="recent_topic_actions">
<div class="recent_topics_focusable hidden-for-spectators">
<span class="unread_count {{#unless unread_count}}unread_hidden{{/unless}} tippy-zulip-tooltip on_hover_topic_read" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mark as read' }}" role="button" tabindex="0" aria-label="{{t 'Mark as read' }}">{{unread_count}}</span>
</div>
</div>
<div class="recent_topic_actions">
<div class="recent_topics_focusable hidden-for-spectators">
{{#if topic_muted}}