From 16aad189fb50527e87e7b4ea2af993b41d175d56 Mon Sep 17 00:00:00 2001
From: Rafael dos Santos Silva <xfalcox@gmail.com>
Date: Tue, 30 Aug 2016 23:32:39 -0300
Subject: [PATCH] UX: Add text to new messages line

---
 .../components/topic-list-item.js.es6         |  9 +++---
 .../discourse/components/topic-list.js.es6    | 20 ++++++++----
 .../templates/components/topic-list.hbs       | 10 ++++++
 .../stylesheets/common/base/_topic-list.scss  | 32 ++++++++++++-------
 config/locales/client.en.yml                  |  1 +
 5 files changed, 50 insertions(+), 22 deletions(-)

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 b555383ffb3..06f9b4bfa66 100644
--- a/app/assets/javascripts/discourse/components/topic-list-item.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-list-item.js.es6
@@ -1,4 +1,5 @@
 import StringBuffer from 'discourse/mixins/string-buffer';
+import computed from 'ember-addons/ember-computed-decorators';
 
 export function showEntrance(e) {
   let target = $(e.target);
@@ -29,9 +30,9 @@ export default Ember.Component.extend(StringBuffer, {
     }
   },
 
-  unboundClassNames: function() {
+  @computed('topic', 'lastVisitedTopic')
+  unboundClassNames(topic, lastVisitedTopic) {
     let classes = [];
-    const topic = this.get('topic');
 
     if (topic.get('category')) {
       classes.push("category-" + topic.get('category.fullSlug'));
@@ -47,12 +48,12 @@ export default Ember.Component.extend(StringBuffer, {
       }
     });
 
-    if (topic === this.get('lastVisitedTopic')) {
+    if (topic === lastVisitedTopic) {
       classes.push('last-visit');
     }
 
     return classes.join(' ');
-  }.property(),
+  },
 
   titleColSpan: function() {
     return (!this.get('hideCategory') &&
diff --git a/app/assets/javascripts/discourse/components/topic-list.js.es6 b/app/assets/javascripts/discourse/components/topic-list.js.es6
index 4991090001b..c38ff124c93 100644
--- a/app/assets/javascripts/discourse/components/topic-list.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-list.js.es6
@@ -1,4 +1,4 @@
-import {default as computed, observes} from 'ember-addons/ember-computed-decorators';
+import { default as computed, observes, on } from 'ember-addons/ember-computed-decorators';
 
 export default Ember.Component.extend({
   tagName: 'table',
@@ -31,12 +31,6 @@ export default Ember.Component.extend({
     return this.get('order') === "op_likes";
   }.property('order'),
 
-  @observes('category')
-  categoryChanged: function(){
-    this.set('prevTopic', null);
-  },
-
-
   @computed('topics.@each', 'order', 'ascending')
   lastVisitedTopic(topics, order, ascending) {
     if (!this.get('highlightLastVisited')) { return; }
@@ -84,11 +78,23 @@ export default Ember.Component.extend({
       return;
     }
 
+    prevTopic.set('isLastVisited', true);
     this.set('prevTopic', prevTopic);
 
     return prevTopic;
   },
 
+  @observes('category')
+  @on('willDestroyElement')
+  _cleanLastVisitedTopic() {
+    const prevTopic = this.get('prevTopic');
+
+    if (prevTopic) {
+      prevTopic.set('isLastVisited', false);
+      this.set('prevTopic', null);
+    }
+  },
+
   click(e) {
     var self = this;
     var on = function(sel, callback){
diff --git a/app/assets/javascripts/discourse/templates/components/topic-list.hbs b/app/assets/javascripts/discourse/templates/components/topic-list.hbs
index d4be464b799..9c3d6623073 100644
--- a/app/assets/javascripts/discourse/templates/components/topic-list.hbs
+++ b/app/assets/javascripts/discourse/templates/components/topic-list.hbs
@@ -28,5 +28,15 @@
                       expandAllPinned=expandAllPinned
                       lastVisitedTopic=lastVisitedTopic
                       selected=selected}}
+
+    {{#if topic.isLastVisited}}
+      <tr class='topic-list-item-separator'>
+        <td colspan="6">
+          <span>
+            {{i18n 'topics.new_messages_marker'}}
+          </span>
+        </td>
+      </tr>
+    {{/if}}
   {{/each}}
 </tbody>
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 5e43005e9ac..2759be46200 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -23,8 +23,6 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: dark-ligh
   width: 100%;
   border-collapse: collapse;
 
-
-
   > tbody > tr {
     &.has-excerpt .star {
       vertical-align: top;
@@ -33,16 +31,28 @@ html.anon .topic-list a.title:visited:not(.badge-notification) {color: dark-ligh
     border-bottom: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
 
     &.last-visit {
+      border-bottom: none;
+    }
+
+    .topic-list-separator {
+      text-align: center;
+    }
+  }
+
+  .topic-list-item-separator {
+    border: none;
+
+    td {
       border-bottom: 1px solid scale-color($danger, $lightness: 60%);
-      + tr::after {
-        content: attr(data-last-visit-text);
-        color: scale-color($danger, $lightness: 50%);
-        position: absolute;
-        left: 50%;
-        margin-top: -10px;
-        padding: 0 10px;
-        background: $secondary;
-      }
+      line-height: 0.1em;
+      padding: 0px;
+      text-align: center;
+    }
+
+    td span {
+      background-color: $secondary;
+      color: scale-color($danger, $lightness: 60%);
+      padding: 0px 10px;
     }
   }
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index cb25065a0fd..b2797aba7ed 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1224,6 +1224,7 @@ en:
     current_user: 'go to your user page'
 
     topics:
+      new_messages_marker: "Last Visit"
       bulk:
         unlist_topics: "Unlist Topics"
         reset_read: "Reset Read"