KumiSystems/Chatwoot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Adds character count to reply box 😳 (#1634)

Browse source 
* Added characters remaining to reply box

* Changed warning text for character length

* Decreased font size of message
This commit is contained in:
Suhavi Sandhu 2021-01-13 08:46:45 -05:00 committed by GitHub
parent fd181f18a1
commit dad737021f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
app/javascript/dashboard/components/widgets/WootWriter/ReplyTopPanel.vue
View file

@ -19,12 +19,18 @@
{{ $t('CONVERSATION.REPLYBOX.PRIVATE_NOTE') }}
</button>
</div>
<div class="action-wrap"></div>
<div class="action-wrap">
<div v-if="isMessageLengthReachingThreshold" class="tabs-title">
<span :class="charLengthClass">
{{ characterLengthWarning }}
</span>
</div>
</div>
</div>
</template>
<script>
import { REPLY_EDITOR_MODES } from './constants';
import { REPLY_EDITOR_MODES, CHAR_LENGTH_WARNING } from './constants';
import EmojiOrIcon from 'shared/components/EmojiOrIcon';
export default {
name: 'ReplyTopPanel',
@ -40,6 +46,14 @@ export default {
type: Function,
default: () => {},
},
isMessageLengthReachingThreshold: {
type: Boolean,
default: () => false,
},
charactersRemaining: {
type: Number,
default: () => 0,
},
},
computed: {
replyButtonClass() {
@ -52,6 +66,14 @@ export default {
'is-active': this.mode === REPLY_EDITOR_MODES.NOTE,
};
},
charLengthClass() {
return this.charactersRemaining < 0 ? 'message-error' : 'message-length';
},
characterLengthWarning() {
return this.charactersRemaining < 0
? `${-this.charactersRemaining} ${CHAR_LENGTH_WARNING.NEGATIVE}`
: `${this.charactersRemaining} ${CHAR_LENGTH_WARNING.UNDER_50}`;
},
},
methods: {
handleReplyClick() {
@ -113,5 +135,14 @@ export default {
.action-wrap {
display: flex;
align-items: center;
margin: 0 var(--space-normal);
font-size: var(--font-size-mini);
.message-error {
color: var(--r-600);
}
.message-length {
color: var(--s-600);
}
}
</style>

5
app/javascript/dashboard/components/widgets/WootWriter/constants.js
View file

@ -2,3 +2,8 @@ export const REPLY_EDITOR_MODES = {
REPLY: 'REPLY',
NOTE: 'NOTE',
};
export const CHAR_LENGTH_WARNING = {
UNDER_50: 'characters remaining',
NEGATIVE: 'characters over',
};

13
app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue
View file

@ -1,6 +1,11 @@
<template>
<div class="reply-box" :class="replyBoxClass">
<reply-top-panel :mode="replyType" :set-reply-mode="setReplyMode" />
<reply-top-panel
:mode="replyType"
:set-reply-mode="setReplyMode"
:is-message-length-reaching-threshold="isMessageLengthReachingThreshold"
:characters-remaining="charactersRemaining"
/>
<div class="reply-box__top">
<canned-response
v-if="showCannedResponsesList"
@ -111,10 +116,10 @@ export default {
: this.$t('CONVERSATION.FOOTER.MSG_INPUT');
},
isMessageLengthReachingThreshold() {
return this.message.length > this.maxLength - 40;
return this.message.length > this.maxLength - 50;
},
characterCountIndicator() {
return `${this.message.length} / ${this.maxLength}`;
charactersRemaining() {
return this.maxLength - this.message.length;
},
isReplyButtonDisabled() {
const isMessageEmpty = !this.message.trim().replace(/\n/g, '').length;