IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Guo Xiang Tan 2019-05-06 15:25:02 +08:00 committed by Guo Xiang Tan
parent bcdf5823a0
commit 8217d5be78
2 changed files with 43 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
app/assets/javascripts/discourse/components/discourse-topic.js.es6
View File

@ -39,6 +39,7 @@ export default Ember.Component.extend(
_lastShowTopic: null, _lastShowTopic: null,
mobileScrollDirection: null, mobileScrollDirection: null,
pauseHeaderTopicUpdate: false,
@observes("enteredAt") @observes("enteredAt")
_enteredTopic() { _enteredTopic() {
@ -57,20 +58,41 @@ export default Ember.Component.extend(
Ember.run.scheduleOnce("afterRender", null, highlight, postNumber); Ember.run.scheduleOnce("afterRender", null, highlight, postNumber);
}, },
_updateTopic(topic) { _hideTopicInHeader() {
if (topic === null) {
this._lastShowTopic = false;
this.appEvents.trigger("header:hide-topic"); 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._hideTopicInHeader();
if (debounceDuration && !this.pauseHeaderTopicUpdate) {
this.pauseHeaderTopicUpdate = true;
this._lastShowTopic = true;
Ember.run.later(() => {
this._lastShowTopic = false;
this.pauseHeaderTopicUpdate = false;
}, debounceDuration);
}
return; return;
} }
const offset = window.pageYOffset || $("html").scrollTop(); const offset = window.pageYOffset || $("html").scrollTop();
this._lastShowTopic = this.showTopicInHeader(topic, offset); this._lastShowTopic = this.shouldShowTopicInHeader(topic, offset);
if (this._lastShowTopic) { if (this._lastShowTopic) {
this.appEvents.trigger("header:show-topic", topic); this._showTopicInHeader(topic);
} else { } 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("post:highlight", this, "_highlightPost");
this.appEvents.on("header:update-topic", this, "_updateTopic"); this.appEvents.on("header:update-topic", this, "_updateTopic");
}, },
@ -104,7 +125,7 @@ export default Ember.Component.extend(
this.resetExamineDockCache(); this.resetExamineDockCache();
// this happens after route exit, stuff could have trickled in // 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("post:highlight", this, "_highlightPost");
this.appEvents.off("header:update-topic", this, "_updateTopic"); this.appEvents.off("header:update-topic", this, "_updateTopic");
}, },
@ -120,7 +141,7 @@ export default Ember.Component.extend(
this.set("dockAt", 0); 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 // On mobile, we show the header topic if the user has scrolled past the topic
// title and the current scroll direction is down // title and the current scroll direction is down
// On desktop the user only needs to scroll past the topic title. // 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); this.set("hasScrolled", offset > 0);
const topic = this.get("topic"); const topic = this.get("topic");
const showTopic = this.showTopicInHeader(topic, offset); const showTopic = this.shouldShowTopicInHeader(topic, offset);
if (showTopic !== this._lastShowTopic) { if (showTopic !== this._lastShowTopic) {
if (showTopic) { if (showTopic) {
this.appEvents.trigger("header:show-topic", topic); this._showTopicInHeader(topic);
this._lastShowTopic = true;
} else { } else {
if (!DiscourseURL.isJumpScheduled()) { if (!DiscourseURL.isJumpScheduled()) {
const loadingNear = topic.get("postStream.loadingNearPost") || 1; const loadingNear = topic.get("postStream.loadingNearPost") || 1;
if (loadingNear === 1) { if (loadingNear === 1) {
this.appEvents.trigger("header:hide-topic"); this._hideTopicInHeader();
this._lastShowTopic = false;
} }
} }
} }

9
app/assets/javascripts/discourse/initializers/subscribe-user-notifications.js.es6
View File

@ -24,6 +24,7 @@ export default {
bus.subscribe("/reviewable_counts", data => { bus.subscribe("/reviewable_counts", data => {
user.set("reviewable_count", data.reviewable_count); user.set("reviewable_count", data.reviewable_count);
}); });
bus.subscribe( bus.subscribe(
`/notification/${user.get("id")}`, `/notification/${user.get("id")}`,
data => { data => {
@ -42,6 +43,14 @@ export default {
oldPM !== data.unread_private_messages oldPM !== data.unread_private_messages
) { ) {
appEvents.trigger("notifications:changed"); 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( const stale = store.findStale(