diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue index 30143b4f1d..1de41855df 100644 --- a/src/client/app/common/views/components/messaging-room.vue +++ b/src/client/app/common/views/components/messaging-room.vue @@ -3,7 +3,7 @@ @dragover.prevent.stop="onDragover" @drop.prevent.stop="onDrop" > -
%fa:spinner .spin%%i18n:common.loading%
%fa:info-circle%%i18n:@empty%
%fa:flag%%i18n:@no-history%
@@ -77,6 +77,12 @@ export default Vue.extend({ this.connection.on('message', this.onMessage); this.connection.on('read', this.onRead); + if (this.isNaked) { + window.addEventListener('scroll', this.onScroll, { passive: true }); + } else { + this.$el.addEventListener('scroll', this.onScroll, { passive: true }); + } + document.addEventListener('visibilitychange', this.onVisibilitychange); this.fetchMessages().then(() => { @@ -90,6 +96,12 @@ export default Vue.extend({ this.connection.off('read', this.onRead); this.connection.close(); + if (this.isNaked) { + window.removeEventListener('scroll', this.onScroll); + } else { + this.$el.removeEventListener('scroll', this.onScroll); + } + document.removeEventListener('visibilitychange', this.onVisibilitychange); }, @@ -226,6 +238,14 @@ export default Vue.extend({ }, 4000); }, + onScroll() { + const el = this.isNaked ? window.document.documentElement : this.$el; + const current = el.scrollTop + el.clientHeight; + if (current > el.scrollHeight - 1) { + this.showIndicator = false; + } + }, + onVisibilitychange() { if (document.hidden) return; this.messages.forEach(message => { @@ -251,7 +271,7 @@ root(isDark) height 100% background isDark ? #191b22 : #fff - > .stream + > .body width 100% max-width 600px margin 0 auto