From f13776e550a2103538ac7b85637fddebec424c9e Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Fri, 8 Sep 2017 13:54:41 -0400
Subject: [PATCH] UX: Move `.visited` to entire row, not just the link to a
 topic

---
 .../discourse/components/latest-topic-list-item.js.es6    | 8 +++++++-
 .../discourse/components/topic-list-item.js.es6           | 7 ++++++-
 .../javascripts/discourse/helpers/topic-link.js.es6       | 4 ----
 app/assets/stylesheets/common/base/_topic-list.scss       | 3 ++-
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/latest-topic-list-item.js.es6 b/app/assets/javascripts/discourse/components/latest-topic-list-item.js.es6
index f92992e6f18..276a6e5f9c9 100644
--- a/app/assets/javascripts/discourse/components/latest-topic-list-item.js.es6
+++ b/app/assets/javascripts/discourse/components/latest-topic-list-item.js.es6
@@ -1,7 +1,13 @@
 import { showEntrance } from "discourse/components/topic-list-item";
+import computed from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Component.extend({
   click: showEntrance,
   attributeBindings: ['topic.id:data-topic-id'],
-  classNameBindings: [':latest-topic-list-item', 'topic.archived']
+  classNameBindings: [':latest-topic-list-item', 'topic.archived', 'visited'],
+
+  @computed('topic.last_read_post_number', 'topic.highest_post_number')
+  visited(lastReadPost, highestPostNumber) {
+    return lastReadPost === highestPostNumber;
+  },
 });
diff --git a/app/assets/javascripts/discourse/components/topic-list-item.js.es6 b/app/assets/javascripts/discourse/components/topic-list-item.js.es6
index f4227cca1e7..245560214fe 100644
--- a/app/assets/javascripts/discourse/components/topic-list-item.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-list-item.js.es6
@@ -23,7 +23,7 @@ export function showEntrance(e) {
 export default Ember.Component.extend(bufferedRender({
   rerenderTriggers: ['bulkSelectEnabled', 'topic.pinned'],
   tagName: 'tr',
-  classNameBindings: [':topic-list-item', 'unboundClassNames'],
+  classNameBindings: [':topic-list-item', 'unboundClassNames', 'visited'],
   attributeBindings: ['data-topic-id'],
   'data-topic-id': Em.computed.alias('topic.id'),
 
@@ -40,6 +40,11 @@ export default Ember.Component.extend(bufferedRender({
     }
   },
 
+  @computed('topic.last_read_post_number', 'topic.highest_post_number')
+  visited(lastReadPost, highestPostNumber) {
+    return lastReadPost === highestPostNumber;
+  },
+
   @computed('topic', 'lastVisitedTopic')
   unboundClassNames(topic, lastVisitedTopic) {
     let classes = [];
diff --git a/app/assets/javascripts/discourse/helpers/topic-link.js.es6 b/app/assets/javascripts/discourse/helpers/topic-link.js.es6
index b71649495bc..ac85252c618 100644
--- a/app/assets/javascripts/discourse/helpers/topic-link.js.es6
+++ b/app/assets/javascripts/discourse/helpers/topic-link.js.es6
@@ -7,10 +7,6 @@ registerUnbound('topic-link', (topic, args) => {
     topic.get('lastUnreadUrl');
 
   const classes = ['title'];
-  if (topic.get('last_read_post_number') === topic.get('highest_post_number')) {
-    classes.push('visited');
-  }
-
   if (args.class) {
     args.class.split(" ").forEach(c => classes.push(c));
   }
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index ccd2ff1c072..78c1858084c 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -17,7 +17,8 @@
 }
 
 html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-medium; }
-.topic-list a.title.visited:not(.badge-notification) {color: $primary-medium; }
+.topic-list-item.visited a.title:not(.badge-notification) {color: $primary-medium; }
+.latest-topic-list-item.visited a.title:not(.badge-notification) {color: $primary-medium; }
 
 .topic-list-main-link {
   font-size: 1.143em;