UX: Move `.visited` to entire row, not just the link to a topic

This commit is contained in:
Robin Ward 2017-09-08 13:54:41 -04:00
parent 717ed75fc4
commit f13776e550
4 changed files with 15 additions and 7 deletions

View File

@ -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;
},
});

View File

@ -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 = [];

View File

@ -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));
}

View File

@ -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;