From a930d4fc7bb9a0e138f7dd517e166f46a19c7e9f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
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 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();
+ },
- 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
+
</style>