diff --git a/src/components/app/RightPanel.vue b/src/components/app/RightPanel.vue index 66da7c3..23ec36b 100644 --- a/src/components/app/RightPanel.vue +++ b/src/components/app/RightPanel.vue @@ -19,7 +19,17 @@
- +
@@ -131,16 +141,32 @@ export default { await typingService.post(this.selectedChannelID); }, 2000); }, + resize(event) { + let input = this.$refs["input-box"] + + if(input.scrollHeight < 50) { + input.style.height = '1em' + } else { + input.style.height = 'auto'; + input.style.height = `calc(${input.scrollHeight}px - 1em)`; + } + }, + delayedResize(event) { + this.resize(event) + }, async onInput(event){ + this.delayedResize(event) + this.messageLength = this.message.length; const value = event.target.value.trim(); if (value && this.postTimerID == null) { - // Post typing status this.postTimer() await typingService.post(this.selectedChannelID); } }, chatInput(event) { + this.delayedResize(event) + // when enter is press if (event.keyCode == 13) { // and the shift key is not held @@ -316,6 +342,9 @@ export default { outline: none; padding-left: 10px; transition: 0.3s; + height: 1em; + overflow: hidden; + max-height: 30vh; } .chat-input:hover{