UX: Switch mobile header back for 5s when notification comes in.

discourse · May 6, 2019 · 8217d5b · 8217d5b
1 parent bcdf582
commit 8217d5b
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 14 deletions.
diff --git a/app/assets/javascripts/discourse/components/discourse-topic.js.es6 b/app/assets/javascripts/discourse/components/discourse-topic.js.es6
@@ -39,6 +39,7 @@ export default Ember.Component.extend(
     _lastShowTopic: null,
 
     mobileScrollDirection: null,
+    pauseHeaderTopicUpdate: false,
 
     @observes("enteredAt")
     _enteredTopic() {
@@ -57,20 +58,41 @@ export default Ember.Component.extend(
       Ember.run.scheduleOnce("afterRender", null, highlight, postNumber);
     },
 
-    _updateTopic(topic) {
+    _hideTopicInHeader() {
+      this.appEvents.trigger("header:hide-topic");
+      this._lastShowTopic = false;
+    },
+
+    _showTopicInHeader(topic) {
+      if (this.pauseHeaderTopicUpdate) return;
+      this.appEvents.trigger("header:show-topic", topic);
+      this._lastShowTopic = true;
+    },
+
+    _updateTopic(topic, debounceDuration) {
       if (topic === null) {
-        this._lastShowTopic = false;
-        this.appEvents.trigger("header:hide-topic");
+        this._hideTopicInHeader();
+
+        if (debounceDuration && !this.pauseHeaderTopicUpdate) {
+          this.pauseHeaderTopicUpdate = true;
+          this._lastShowTopic = true;
+
+          Ember.run.later(() => {
+            this._lastShowTopic = false;
+            this.pauseHeaderTopicUpdate = false;
+          }, debounceDuration);
+        }
+
         return;
       }
 
       const offset = window.pageYOffset || $("html").scrollTop();
-      this._lastShowTopic = this.showTopicInHeader(topic, offset);
+      this._lastShowTopic = this.shouldShowTopicInHeader(topic, offset);
 
       if (this._lastShowTopic) {
-        this.appEvents.trigger("header:show-topic", topic);
+        this._showTopicInHeader(topic);
       } else {
-        this.appEvents.trigger("header:hide-topic");
+        this._hideTopicInHeader();
       }
     },
 
@@ -89,7 +111,6 @@ export default Ember.Component.extend(
       );
 
       this.appEvents.on("post:highlight", this, "_highlightPost");
-
       this.appEvents.on("header:update-topic", this, "_updateTopic");
     },
 
@@ -104,7 +125,7 @@ export default Ember.Component.extend(
       this.resetExamineDockCache();
 
       // this happens after route exit, stuff could have trickled in
-      this.appEvents.trigger("header:hide-topic");
+      this._hideTopicInHeader();
       this.appEvents.off("post:highlight", this, "_highlightPost");
       this.appEvents.off("header:update-topic", this, "_updateTopic");
     },
@@ -120,7 +141,7 @@ export default Ember.Component.extend(
       this.set("dockAt", 0);
     },
 
-    showTopicInHeader(topic, offset) {
+    shouldShowTopicInHeader(topic, offset) {
       // On mobile, we show the header topic if the user has scrolled past the topic
       // title and the current scroll direction is down
       // On desktop the user only needs to scroll past the topic title.
@@ -146,17 +167,16 @@ export default Ember.Component.extend(
       this.set("hasScrolled", offset > 0);
 
       const topic = this.get("topic");
-      const showTopic = this.showTopicInHeader(topic, offset);
+      const showTopic = this.shouldShowTopicInHeader(topic, offset);
+
       if (showTopic !== this._lastShowTopic) {
         if (showTopic) {
-          this.appEvents.trigger("header:show-topic", topic);
-          this._lastShowTopic = true;
+          this._showTopicInHeader(topic);
         } else {
           if (!DiscourseURL.isJumpScheduled()) {
             const loadingNear = topic.get("postStream.loadingNearPost") || 1;
             if (loadingNear === 1) {
-              this.appEvents.trigger("header:hide-topic");
-              this._lastShowTopic = false;
+              this._hideTopicInHeader();
             }
           }
         }

diff --git a/app/assets/javascripts/discourse/initializers/subscribe-user-notifications.js.es6 b/app/assets/javascripts/discourse/initializers/subscribe-user-notifications.js.es6
@@ -24,6 +24,7 @@ export default {
       bus.subscribe("/reviewable_counts", data => {
         user.set("reviewable_count", data.reviewable_count);
       });
+
       bus.subscribe(
         `/notification/${user.get("id")}`,
         data => {
@@ -42,6 +43,14 @@ export default {
             oldPM !== data.unread_private_messages
           ) {
             appEvents.trigger("notifications:changed");
+
+            if (
+              site.mobileView &&
+              (data.unread_notifications - oldUnread > 0 ||
+                data.unread_private_messages - oldPM > 0)
+            ) {
+              appEvents.trigger("header:update-topic", null, 5000);
+            }
           }
 
           const stale = store.findStale(