UX: Read indicator improvements. (#8049)

UX: Read indicator improvements. (#8049)

  • The read indicator now shows up when no member has read the last post of the topic (written by a non-member)
  • The read indicator works on mobile and receives live updates from message bus
  • The icon we display in the topic list was changed
  • Added a title to the indicator to indicate its purpose when hovering over it
diff --git a/app/assets/javascripts/discourse/components/basic-topic-list.js.es6 b/app/assets/javascripts/discourse/components/basic-topic-list.js.es6
index e08bf9d..e8af6ac 100644
--- a/app/assets/javascripts/discourse/components/basic-topic-list.js.es6
+++ b/app/assets/javascripts/discourse/components/basic-topic-list.js.es6
@@ -33,6 +33,51 @@ export default Ember.Component.extend({
     }
   },
 
+  didInsertElement() {
+    this._super(...arguments);
+
+    this.topics.forEach(topic => {
+      const includeUnreadIndicator =
+        typeof topic.unread_by_group_member !== "undefined";
+
+      if (includeUnreadIndicator) {
+        const unreadIndicatorChannel = `/private-messages/unread-indicator/${topic.id}`;
+        this.messageBus.subscribe(unreadIndicatorChannel, data => {
+          const nodeClassList = document.querySelector(
+            `.indicator-topic-${data.topic_id}`
+          ).classList;
+
+          if (data.show_indicator) {
+            nodeClassList.remove("read");
+          } else {
+            nodeClassList.add("read");
+          }
+        });
+      }
+    });
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+
+    this.topics.forEach(topic => {
+      const includeUnreadIndicator =
+        typeof topic.unread_by_group_member !== "undefined";
+
+      if (includeUnreadIndicator) {
+        const unreadIndicatorChannel = `/private-messages/unread-indicator/${topic.id}`;
+        this.messageBus.unsubscribe(unreadIndicatorChannel);
+      }
+    });
+  },
+
+  @computed("topics")
+  showUnreadIndicator(topics) {
+    return topics.some(
+      topic => typeof topic.unread_by_group_member !== "undefined"
+    );
+  },
+
   click(e) {
     // Mobile basic-topic-list doesn't use the `topic-list-item` view so
     // the event for the topic entrance is never wired up.
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 e7ed618..1116d97 100644
--- a/app/assets/javascripts/discourse/components/topic-list-item.js.es6
+++ b/app/assets/javascripts/discourse/components/topic-list-item.js.es6
@@ -38,16 +38,16 @@ export const ListItemDefaults = {
   didInsertElement() {
     this._super(...arguments);
 
-    if (this.includeReadIndicator) {
-      this.messageBus.subscribe(this.readIndicatorChannel, data => {
+    if (this.includeUnreadIndicator) {
+      this.messageBus.subscribe(this.unreadIndicatorChannel, data => {
         const nodeClassList = document.querySelector(
           `.indicator-topic-${data.topic_id}`
         ).classList;
 
         if (data.show_indicator) {
-          nodeClassList.remove("unread");
+          nodeClassList.remove("read");
         } else {
-          nodeClassList.add("unread");
+          nodeClassList.add("read");
         }
       });
     }
@@ -56,24 +56,24 @@ export const ListItemDefaults = {
   willDestroyElement() {
     this._super(...arguments);
 
-    if (this.includeReadIndicator) {
-      this.messageBus.unsubscribe(this.readIndicatorChannel);
+    if (this.includeUnreadIndicator) {
+      this.messageBus.unsubscribe(this.unreadIndicatorChannel);
     }
   },
 
   @computed("topic.id")
-  readIndicatorChannel(topicId) {
-    return `/private-messages/read-indicator/${topicId}`;
+  unreadIndicatorChannel(topicId) {
+    return `/private-messages/unread-indicator/${topicId}`;
   },
 
-  @computed("topic.read_by_group_member")
-  unreadClass(readByGroupMember) {
-    return readByGroupMember ? "" : "unread";
+  @computed("topic.unread_by_group_member")
+  unreadClass(unreadByGroupMember) {
+    return unreadByGroupMember ? "" : "read";
   },
 
-  @computed("topic.read_by_group_member")
-  includeReadIndicator(readByGroupMember) {
-    return typeof readByGroupMember !== "undefined";
+  @computed("topic.unread_by_group_member")
+  includeUnreadIndicator(unreadByGroupMember) {
+    return typeof unreadByGroupMember !== "undefined";
   },
 
   @computed
diff --git a/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs b/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs
index f6d2ddf..db3ca30 100644
--- a/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs
+++ b/app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs
@@ -20,14 +20,10 @@
     {{~topic-featured-link topic}}
     {{~/if}}
     {{~raw-plugin-outlet name="topic-list-after-title"}}
+    {{~raw "list/unread-indicator" includeUnreadIndicator=topic.unread_by_group_member topicId=topic.id ~}}
     {{~#if showTopicPostBadges}}
     {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
     {{~/if}}
-    {{~#if includeReadIndicator}}
-      <span class='read-indicator indicator-topic-{{topic.id}} {{unreadClass}}'>
-        {{~d-icon "book-reader"}}
-      </span>
-    {{~/if}}
   </span>
   <div class="link-bottom-line">
     {{#unless hideCategory}}
diff --git a/app/assets/javascripts/discourse/templates/list/unread-indicator.raw.hbs b/app/assets/javascripts/discourse/templates/list/unread-indicator.raw.hbs
new file mode 100644
index 0000000..d951dd4
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/list/unread-indicator.raw.hbs
@@ -0,0 +1,5 @@
+{{~#if includeUnreadIndicator~}}
+  &nbsp;<span class='badge badge-notification unread-indicator indicator-topic-{{topicId}} {{unreadClass}}' title='{{i18n "topic.unread_indicator"}}'>
+    {{~d-icon "asterisk"}}
+  </span>
+{{~/if}}
diff --git a/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.hbs b/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.hbs
index 2c5eb2f..a344ce8 100644
--- a/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.hbs
+++ b/app/assets/javascripts/discourse/templates/mobile/components/basic-topic-list.hbs
@@ -16,6 +16,9 @@
             <div class='main-link'>
               {{topic-status topic=t}}
               {{topic-link t}}
+              {{raw "list/unread-indicator" includeUnreadIndicator=showUnreadIndicator
+                                            topicId=t.id 
+                                            unreadClass=(if t.unread_by_group_member "" "read")}}
               {{#if t.unseen}}
                 <span class="badge-notification new-topic"></span>
               {{/if}}
diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 0fd6593..59e8731 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -133,11 +133,15 @@
     .raw-topic-link > * {
       pointer-events: none;
     }
+  }
 
-    .read-indicator {
-      &.unread {
-        display: none;
-      }
+  .unread-indicator {
+    &.read {
+      display: none;
+    }
+    .d-icon {
+      vertical-align: 0em;
+      font-size: $font-down-5;
     }
   }
 
diff --git a/app/models/topic_tracking_state.rb b/app/models/topic_tracking_state.rb
index 7f46f2c..ed8f347 100644
--- a/app/models/topic_tracking_state.rb
+++ b/app/models/topic_tracking_state.rb
@@ -347,7 +347,7 @@ SQL
 
     if topic.private_message?
       groups = read_allowed_groups_of(topic)
-      update_topic_list_read_indicator(topic, groups, topic.highest_post_number, user_id, false)
+      update_topic_list_read_indicator(topic, groups, topic.highest_post_number, user_id, true)
     end
   end
 
@@ -358,7 +358,7 @@ SQL
       groups = read_allowed_groups_of(topic)
       post = Post.find_by(topic_id: topic.id, post_number: last_read_post_number)
       trigger_post_read_count_update(post, groups)
-      update_topic_list_read_indicator(topic, groups, last_read_post_number, user_id, true)
+      update_topic_list_read_indicator(topic, groups, last_read_post_number, user_id, false)
     end
   end
 
@@ -370,23 +370,23 @@ SQL

[... diff too long, it was truncated ...]

GitHub sha: ebb389ef

1 Like