42 lines
847 B
Vue
42 lines
847 B
Vue
|
<template>
|
||
|
|
<transition name='transition-fade'>
|
||
|
|
<div class='user_typing' v-if='typingUsers.length'>
|
||
|
|
<div class='user_typing__users' v-if='users.length > 2'>{{userList}} {{typingUsers.length > 2 ? "are" : "is"}} typing</div>
|
||
|
|
<c-loading-dots>Loading</c-loading-dots>
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'user-typing',
|
||
|
|
props: ['users', 'typing-users'],
|
||
|
|
computed: {
|
||
|
|
userList () {
|
||
|
|
this.typingUsers
|
||
|
|
return this.typingUsers
|
||
|
|
.map(u => u.username)
|
||
|
|
.join(', ')
|
||
|
|
.replace(/, ([^,]*)$/, ' and $1');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang='scss' scoped>
|
||
|
|
@import '../assets/scss/variables.scss';
|
||
|
|
|
||
|
|
.user_typing {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
padding: 0.5rem 0;
|
||
|
|
|
||
|
|
@at-root #{&}__users {
|
||
|
|
color: $text-secondary;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
font-weight: 300;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|