diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/app/common/views/components/messaging-room.vue | 55 |
1 files changed, 35 insertions, 20 deletions
diff --git a/src/client/app/common/views/components/messaging-room.vue b/src/client/app/common/views/components/messaging-room.vue index 7832a331df..5a5708f41a 100644 --- a/src/client/app/common/views/components/messaging-room.vue +++ b/src/client/app/common/views/components/messaging-room.vue @@ -18,7 +18,11 @@ </template> </div> <footer> - <div ref="notifications" class="notifications"></div> + <transition name="fade"> + <div class="new-message" v-show="showIndicator"> + <button @click="onIndicatorClick">%fa:arrow-circle-down%%i18n:@new-message%</button> + </div> + </transition> <x-form :user="user" ref="form"/> </footer> </div> @@ -45,7 +49,9 @@ export default Vue.extend({ fetchingMoreMessages: false, messages: [], existMoreMessages: false, - connection: null + connection: null, + showIndicator: false, + timer: null }; }, @@ -172,7 +178,7 @@ export default Vue.extend({ }); } else if (message.userId != (this as any).os.i.id) { // Notify - this.notify('%i18n:@new-message%'); + this.notifyNewMessage(); } }, @@ -205,18 +211,18 @@ export default Vue.extend({ } }, - notify(message) { - const n = document.createElement('p') as any; - n.innerHTML = '%fa:arrow-circle-down%' + message; - n.onclick = () => { - this.scrollToBottom(); - n.parentNode.removeChild(n); - }; - (this.$refs.notifications as any).appendChild(n); + onIndicatorClick() { + this.showIndicator = false; + this.scrollToBottom(); + }, + + notifyNewMessage() { + this.showIndicator = true; - setTimeout(() => { - n.style.opacity = 0; - setTimeout(() => n.parentNode.removeChild(n), 1000); + if (this.timer) clearTimeout(this.timer); + + this.timer = setTimeout(() => { + this.showIndicator = false; }, 4000); }, @@ -345,17 +351,14 @@ export default Vue.extend({ background rgba(255, 255, 255, 0.95) background-clip content-box - > .notifications + > .new-message position absolute top -48px width 100% padding 8px 0 text-align center - &:empty - display none - - > p + > button display inline-block margin 0 padding 0 12px 0 28px @@ -365,7 +368,12 @@ export default Vue.extend({ color $theme-color-foreground background $theme-color border-radius 16px - transition opacity 1s ease + + &:hover + background lighten($theme-color, 10%) + + &:active + background darken($theme-color, 10%) > [data-fa] position absolute @@ -374,4 +382,11 @@ export default Vue.extend({ line-height 32px font-size 16px +.fade-enter-active, .fade-leave-active + transition opacity 0.1s + +.fade-enter, .fade-leave-to + transition opacity 0.5s + opacity 0 + </style> |