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.
The PR changes the following behaviors and UI:
1. Removes the checkmark button to mark the topic as read in
"Recent Topics".
2. Make the unread messages counter be the button for marking
all messages in the topic as read. The unread messages counter
is made clickable and tooltip is set to "Mark as read".
In "recent_topic_row.hbs", remove the checkmark button and add
classes and attributes to ".unread_counter" to give it desirable
behaviour on clicking.
In "zulip.css" set "opacity: 0.7" for ".on_hover_topic_read".
In "recent_topics.css" we set the background-color of unread counter to
hsl(105, 2%, 50%) to decrease fading of unread counter.
Fixes: #21654
Previously, when there were no unread messages in a topic, the topic
name was allowed to expand into the space allocated to the unread
count. This matched the behavior of the left sidebar. However, the
left sidebar has extremely limited horizontal space, and being able to
display a few extra characters is useful; recent topics does not have
this constraint. Further, recent topics wraps long topic names on
overflow, which looks ugly when using use the unread count's space.
So we switch to having the unread count element consume space even
when there is no count, using `visiblity:hidden`.
Fixes a part of #19449
An attacker could maliciously craft a full name for their account and
send messages to a topic with several participants; a victim who then
opens an overflow tooltip including this full name on the recent
topics page could trigger execution of JavaScript code controlled by
the attacker.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
Generally, tooltips placed at top look good. If the tooltip cannot
fit at top, it will by default be placed at opposite side.
Removed the unnecessary top placement definitions.
We use styling same as that of the number shown for overflow
(e.g "+3") which has a gray background.
To keep these avatars up-to-date, we need to rerender the
recent topics view after receiving a `muted_users` event.
Also update the user documentation to mention this detail.
We deliberately avoid mentioning "recent topics" because
this applies to mobile too.
We remove the action column and show action buttons next to topic
after unread count (if present). This save us a lot of extra space
on small window sizes.
This deduplication helps with readability.
Pass get_topic_key in recent_topic_row instead of
computing it in DOM.
Fix broken test_update_unread_count
after this change. This was a regression
which went unnoticed.
We store the relevant data to hide/show a topic in the row itself,
and use jquery to hide/show it on filter change.
This also fixes search breaking the set filters.
We reuse the existing logic for displaying and updating stream color
from the stream left sidebar.
Tests fixtures were extracted and updated for this commit.
* Add action to mute topics.
* We don't need to store muted data per topic as previously planned.
* Moved launch topic test to the top so that they run on non-modified
data.