From a930d4fc7bb9a0e138f7dd517e166f46a19c7e9f Mon Sep 17 00:00:00 2001 From: syuilo Date: Thu, 24 May 2018 04:55:29 +0900 Subject: [PATCH] Fix bug --- .../views/components/messaging-room.vue | 55 ++++++++++++------- 1 file 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 7832a331d..5a5708f41 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 @@ @@ -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(); + }, - setTimeout(() => { - n.style.opacity = 0; - setTimeout(() => n.parentNode.removeChild(n), 1000); + notifyNewMessage() { + this.showIndicator = true; + + 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 +