From c31ab1bcb5e70fb80f4abe84eae1cf41e30697a3 Mon Sep 17 00:00:00 2001
From: NerdyLucifer <ashwat.kumarsingh.met20@itbhu.ac.in>
Date: Fri, 22 Apr 2022 04:19:05 +0530
Subject: [PATCH] recent-topics: Mark as read using unread counters in Recent
 topics.

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
---
 static/styles/recent_topics.css       | 1 +
 static/styles/zulip.css               | 2 +-
 static/templates/recent_topic_row.hbs | 5 +----
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/static/styles/recent_topics.css b/static/styles/recent_topics.css
index ee5aab467f..a44a99acf3 100644
--- a/static/styles/recent_topics.css
+++ b/static/styles/recent_topics.css
@@ -144,6 +144,7 @@
             margin-right: 10px;
             margin-left: 10px;
             align-self: center;
+            background-color: hsl(105, 2%, 50%);
         }
 
         .unread_hidden {
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 38750ae4d5..578101f0cb 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -1374,6 +1374,7 @@ td.pointer {
 }
 
 .always_visible_topic_edit,
+.on_hover_topic_read,
 .on_hover_topic_unmute {
     opacity: 0.7;
 
@@ -1384,7 +1385,6 @@ td.pointer {
 }
 
 .on_hover_topic_edit,
-.on_hover_topic_read,
 .on_hover_topic_unresolve,
 .on_hover_topic_resolve,
 .on_hover_topic_mute {
diff --git a/static/templates/recent_topic_row.hbs b/static/templates/recent_topic_row.hbs
index a7a6676ced..10819feced 100644
--- a/static/templates/recent_topic_row.hbs
+++ b/static/templates/recent_topic_row.hbs
@@ -13,7 +13,7 @@
                 <a href="{{topic_url}}">{{topic}}</a>
             </div>
             <div class="right_part">
-                <span class="unread_count {{#unless unread_count}}unread_hidden{{/unless}}">{{unread_count}}</span>
+                <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">
                         {{#if topic_muted}}
@@ -22,9 +22,6 @@
                         <i class="fa fa-bell-slash on_hover_topic_mute recipient_bar_icon tippy-zulip-tooltip" data-stream-id="{{stream_id}}" data-topic-name="{{topic}}" data-tippy-content="{{t 'Mute topic' }}" role="button" tabindex="0" aria-label="{{t 'Mute topic' }}"></i>
                         {{/if}}
                     </div>
-                    <div class="recent_topics_focusable hidden-for-spectators">
-                        <i class="fa fa-check-circle on_hover_topic_read recipient_bar_icon tippy-zulip-tooltip" 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' }}"></i>
-                    </div>
                 </div>
             </div>
         </div>