yume/yumechi-no-kuni
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix bug

Browse source
This commit is contained in:
syuilo 2018-05-24 04:55:29 +09:00
parent d42197fc2e
commit a930d4fc7b
1 changed files with 35 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
src/client/app/common/views/components/messaging-room.vue
View file

@ -18,7 +18,11 @@
</template> </template>
</div> </div>
<footer> <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"/> <x-form :user="user" ref="form"/>
</footer> </footer>
</div> </div>
@ -45,7 +49,9 @@ export default Vue.extend({
fetchingMoreMessages: false, fetchingMoreMessages: false,
messages: [], messages: [],
existMoreMessages: false, 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) { } else if (message.userId != (this as any).os.i.id) {
// Notify // Notify
this.notify('%i18n:@new-message%'); this.notifyNewMessage();
} }
}, },
@ -205,18 +211,18 @@ export default Vue.extend({
} }
}, },
notify(message) { onIndicatorClick() {
const n = document.createElement('p') as any; this.showIndicator = false;
n.innerHTML = '%fa:arrow-circle-down%' + message;
n.onclick = () => {
this.scrollToBottom(); this.scrollToBottom();
n.parentNode.removeChild(n); },
};
(this.$refs.notifications as any).appendChild(n);
setTimeout(() => { notifyNewMessage() {
n.style.opacity = 0; this.showIndicator = true;
setTimeout(() => n.parentNode.removeChild(n), 1000);
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.showIndicator = false;
}, 4000); }, 4000);
}, },
@ -345,17 +351,14 @@ export default Vue.extend({
background rgba(255, 255, 255, 0.95) background rgba(255, 255, 255, 0.95)
background-clip content-box background-clip content-box
> .notifications > .new-message
position absolute position absolute
top -48px top -48px
width 100% width 100%
padding 8px 0 padding 8px 0
text-align center text-align center
&:empty > button
display none
> p
display inline-block display inline-block
margin 0 margin 0
padding 0 12px 0 28px padding 0 12px 0 28px
@ -365,7 +368,12 @@ export default Vue.extend({
color $theme-color-foreground color $theme-color-foreground
background $theme-color background $theme-color
border-radius 16px border-radius 16px
transition opacity 1s ease
&:hover
background lighten($theme-color, 10%)
&:active
background darken($theme-color, 10%)
> [data-fa] > [data-fa]
position absolute position absolute
@ -374,4 +382,11 @@ export default Vue.extend({
line-height 32px line-height 32px
font-size 16px 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> </style>