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}} + + + + {{i18n 'topics.new_messages_marker'}} + + + + {{/if}} {{/each}} 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"