From 16bec0a65695f449beabab51b8c7cd1789e29753 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 29 Oct 2021 15:11:12 +0530 Subject: [PATCH 1/6] Convert input to textarea Signed-off-by: RMidhunSuresh --- src/platform/web/ui/session/room/MessageComposer.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/platform/web/ui/session/room/MessageComposer.js b/src/platform/web/ui/session/room/MessageComposer.js index 0e38216f..3b151047 100644 --- a/src/platform/web/ui/session/room/MessageComposer.js +++ b/src/platform/web/ui/session/room/MessageComposer.js @@ -28,11 +28,11 @@ export class MessageComposer extends TemplateView { } render(t, vm) { - this._input = t.input({ - placeholder: vm.isEncrypted ? "Send an encrypted message…" : "Send a message…", + this._input = t.textarea({ enterkeyhint: 'send', onKeydown: e => this._onKeyDown(e), onInput: () => vm.setInput(this._input.value), + placeholder: vm.isEncrypted ? "Send an encrypted message…" : "Send a message…" }); this._focusInput = () => this._input.focus(); this.value.on("focus", this._focusInput); @@ -86,7 +86,7 @@ export class MessageComposer extends TemplateView { } _onKeyDown(event) { - if (event.key === "Enter") { + if (event.key === "Enter" && !event.shiftKey) { this._trySend(); } } From 3a6e74ae1ce993540cc1d167ac96c4d1d232d69f Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 29 Oct 2021 15:11:34 +0530 Subject: [PATCH 2/6] Add css style Signed-off-by: RMidhunSuresh --- src/platform/web/ui/css/themes/element/theme.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 1b0bc9e4..e63b1be6 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -536,7 +536,7 @@ a { margin-left: 12px; } -.MessageComposer_input > input { +.MessageComposer_input > textarea { padding: 0 16px; border: none; border-radius: 24px; @@ -544,6 +544,10 @@ a { height: 48px; font-size: 14px; font-family: "Inter", sans-serif; + resize: none; + flex: 1; + padding: 14px; + box-sizing: border-box; } .MessageComposer_input > button.send { From 6863fef7e51deb31cf1db0ef83e70cd0f7ea5cb1 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Fri, 29 Oct 2021 17:00:02 +0530 Subject: [PATCH 3/6] Resize composer with text Signed-off-by: RMidhunSuresh --- .../web/ui/css/themes/element/theme.css | 3 ++- .../web/ui/session/room/MessageComposer.js | 18 ++++++++++++++++-- 2 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index e63b1be6..f2aa62c0 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -537,7 +537,6 @@ a { } .MessageComposer_input > textarea { - padding: 0 16px; border: none; border-radius: 24px; background: #F6F6F6; @@ -548,6 +547,8 @@ a { flex: 1; padding: 14px; box-sizing: border-box; + overflow: hidden; + max-height: 113px; } .MessageComposer_input > button.send { diff --git a/src/platform/web/ui/session/room/MessageComposer.js b/src/platform/web/ui/session/room/MessageComposer.js index 3b151047..11007b84 100644 --- a/src/platform/web/ui/session/room/MessageComposer.js +++ b/src/platform/web/ui/session/room/MessageComposer.js @@ -31,8 +31,12 @@ export class MessageComposer extends TemplateView { this._input = t.textarea({ enterkeyhint: 'send', onKeydown: e => this._onKeyDown(e), - onInput: () => vm.setInput(this._input.value), - placeholder: vm.isEncrypted ? "Send an encrypted message…" : "Send a message…" + onInput: () => { + vm.setInput(this._input.value); + this._adjustHeight(); + }, + placeholder: vm.isEncrypted ? "Send an encrypted message…" : "Send a message…", + rows: "1" }); this._focusInput = () => this._input.focus(); this.value.on("focus", this._focusInput); @@ -82,6 +86,7 @@ export class MessageComposer extends TemplateView { this._input.focus(); if (await this.value.sendMessage(this._input.value)) { this._input.value = ""; + this._adjustHeight(); } } @@ -105,4 +110,13 @@ export class MessageComposer extends TemplateView { this._attachmentPopup.showRelativeTo(evt.target, 12); } } + + _adjustHeight() { + window.requestAnimationFrame(() => { + this._input.style.height = "auto"; + const scrollHeight = this._input.scrollHeight; + this._input.style.height = `${scrollHeight}px`; + }); + } + } From b22437840daa7e04567ca08d499c2c20aced9c09 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 5 Nov 2021 17:47:20 +0100 Subject: [PATCH 4/6] don't set explicit height, rely on rows=1 for default height --- src/platform/web/ui/css/themes/element/theme.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index f2aa62c0..4815e5a0 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -540,7 +540,6 @@ a { border: none; border-radius: 24px; background: #F6F6F6; - height: 48px; font-size: 14px; font-family: "Inter", sans-serif; resize: none; From c671596c6facba8f778bcfe9a8eb2827fe519821 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 5 Nov 2021 17:48:08 +0100 Subject: [PATCH 5/6] only schedule one resize callback per frame --- src/platform/web/ui/session/room/MessageComposer.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/platform/web/ui/session/room/MessageComposer.js b/src/platform/web/ui/session/room/MessageComposer.js index 11007b84..6fe0d424 100644 --- a/src/platform/web/ui/session/room/MessageComposer.js +++ b/src/platform/web/ui/session/room/MessageComposer.js @@ -25,6 +25,7 @@ export class MessageComposer extends TemplateView { this._input = null; this._attachmentPopup = null; this._focusInput = null; + this._rafResizeHandle = undefined; } render(t, vm) { @@ -112,10 +113,14 @@ export class MessageComposer extends TemplateView { } _adjustHeight() { - window.requestAnimationFrame(() => { + if (this._rafResizeHandle) { + return; + } + this._rafResizeHandle = window.requestAnimationFrame(() => { this._input.style.height = "auto"; const scrollHeight = this._input.scrollHeight; this._input.style.height = `${scrollHeight}px`; + this._rafResizeHandle = undefined; }); } From 8ffd98162cd6c7fcc3be104718861ea61aa0e122 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Fri, 5 Nov 2021 17:48:44 +0100 Subject: [PATCH 6/6] don't make the composer shrink for now, timeline loses scroll position --- src/platform/web/ui/session/room/MessageComposer.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/platform/web/ui/session/room/MessageComposer.js b/src/platform/web/ui/session/room/MessageComposer.js index 6fe0d424..08048b80 100644 --- a/src/platform/web/ui/session/room/MessageComposer.js +++ b/src/platform/web/ui/session/room/MessageComposer.js @@ -117,7 +117,6 @@ export class MessageComposer extends TemplateView { return; } this._rafResizeHandle = window.requestAnimationFrame(() => { - this._input.style.height = "auto"; const scrollHeight = this._input.scrollHeight; this._input.style.height = `${scrollHeight}px`; this._rafResizeHandle = undefined;