mti
/
discord-client
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[vue.auth.channel] added auto-scroll to bottom message stack when stack have 1+ more element

This commit is contained in:
xdrm-brackets 2018-04-03 17:13:11 +02:00
parent e0a662a410
commit a99d82cae2
1 changed files with 24 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
webpack/vue/auth/channel.vue
View File

@ -8,7 +8,7 @@
<div class='body'> <div class='body'>
<section class='message-stack'> <section class='message-stack' ref='stack'>
<div class='message' v-for='m in gs.content.messages'> <div class='message' v-for='m in gs.content.messages'>
<div class='icon' :style='`background-image: url("https://picsum.photos/150/?random&nonce=${m.uid}");`'></div> <div class='icon' :style='`background-image: url("https://picsum.photos/150/?random&nonce=${m.uid}");`'></div>
@ -39,7 +39,8 @@ export default {
message: '', // message text message: '', // message text
pressed: { pressed: {
16: false // SHIFT key 16: false // SHIFT key
} },
stack_length: 0
}; }, }; },
@ -99,6 +100,27 @@ export default {
} }
},
updated(){
let stack_length = this.$refs.stack.children.length;
/* (1) If new messages -> scroll to bottom */
if( stack_length > this.stack_length ){
this.$refs.stack.scrollTop = 10000;
// manage overriding css animation
setTimeout( () => { this.$refs.stack.scrollTop = 10000 }, 300 );
}
/* (2) If new messages -> update stack length */
if( stack_length != this.stack_length )
this.stack_length = stack_length;
} }
} }