Invert colors for the read vs unread partially read threads overview

Signed-off-by: Kai Wagner <kai.wagner@percona.com>

Author: ImTheKai

app/assets/stylesheets/components/topics.css

@@ -303,6 +303,14 @@ a.topic-icon {
   }
 }
 
+.topic-row.topic-reading.has-new-replies {
+  background: var(--color-bg-unread);
+
+  &:hover {
+    background: var(--color-bg-unread-hover);
+  }
+}
+
 .topic-row.topic-read {
   color: var(--color-text-muted);
   background: var(--color-bg-read);
@@ -329,7 +337,7 @@ a.topic-icon {
   top: 0;
   bottom: 0;
   width: var(--topic-new-replies-strip-width, 260px);
-  background: var(--color-bg-unread);
+  background: var(--color-bg-read);
   clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
   z-index: 0;
 }

app/views/topics/_topic_row_user.html.slim

@@ -3,12 +3,20 @@
 - participation = participation || {}
 - team_readers = team_readers || []
 - star_data = star_data || {}
+- status = state[:status] || "new"
+- reading_unread_count = nil
+- if status.to_s == "reading"
+  - read_count = state[:read_count].to_i
+  - total_count = topic.message_count
+  - reading_unread_count = [total_count - read_count, 0].max
+- row_class = ["topic-row", "topic-#{status}"]
+- row_class << "has-new-replies" if status.to_s == "reading" && reading_unread_count.to_i.positive?
 - topic_participants_map ||= @topic_participants_map || {}
 - tp_data = topic_participants_map[topic.id] || {}
 - top_participants = tp_data[:top] || []
 - contributor_participants = tp_data[:contributors] || []
 
-tr id=dom_id(topic) class="topic-row topic-#{state[:status] || 'new'}" data-topic-id=topic.id data-last-message-id=topic.last_message_id
+tr id=dom_id(topic) class=row_class.join(" ") data-topic-id=topic.id data-last-message-id=topic.last_message_id
   = render partial: "topics/status_cell", locals: { topic: topic, state: state, note_count: note_count, team_readers: team_readers, star_data: star_data }
   td.topic-activity data-label="Activity"
     - replies_count = [topic.message_count - 1, 0].max