Enhancement: Add focus state for reply box in dashboard (#999)

Co-authored-by: Pranav Raj Sreepuram <pranavrajs@gmail.com>
This commit is contained in:
Nithin David Thomas 2020-07-04 13:50:44 +05:30 committed by GitHub
parent c98907db49
commit 36661ea45d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 42 additions and 20 deletions

View file

@ -1,5 +1,5 @@
<template>
<div class="reply-box">
<div class="reply-box" :class="replyBoxClass">
<div class="reply-box__top" :class="{ 'is-private': isPrivate }">
<canned-response
v-if="showCannedResponsesList"
@ -106,6 +106,7 @@ export default {
return {
message: '',
isPrivate: false,
isFocused: false,
showEmojiPicker: false,
showCannedResponsesList: false,
isUploading: {
@ -158,6 +159,11 @@ export default {
}
return this.$t('CONVERSATION.REPLYBOX.SEND');
},
replyBoxClass() {
return {
'is-focused': this.isFocused,
};
},
},
watch: {
message(val) {
@ -262,9 +268,11 @@ export default {
},
onBlur() {
this.isFocused = false;
this.toggleTyping('off');
},
onFocus() {
this.isFocused = true;
this.toggleTyping('on');
},