From 8217d5be78422c6fd85dfe87c279efe9c32d12c2 Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Mon, 6 May 2019 15:25:02 +0800
Subject: [PATCH] UX: Switch mobile header back for 5s when notification comes
 in.

---
 .../components/discourse-topic.js.es6         | 48 +++++++++++++------
 .../subscribe-user-notifications.js.es6       |  9 ++++
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/discourse-topic.js.es6 b/app/assets/javascripts/discourse/components/discourse-topic.js.es6
index 8d657ff8a71..114f52df908 100644
--- 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
index 3730e583c47..44f40254089 100644
--- 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(