mirrors/vector-im-hydrogen-web
1
0
Fork 0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2025-01-11 12:37:22 +01:00
Code Issues Projects Releases Wiki Activity

Resize composer with text

Browse Source 
Signed-off-by: RMidhunSuresh <hi@midhun.dev>
This commit is contained in:
RMidhunSuresh 2021-10-29 17:00:02 +05:30
parent 3a6e74ae1c
commit 6863fef7e5
2 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/platform/web/ui/css/themes/element/theme.css
View File

@ -537,7 +537,6 @@ a {
} }
.MessageComposer_input > textarea { .MessageComposer_input > textarea {
padding: 0 16px;
border: none; border: none;
border-radius: 24px; border-radius: 24px;
background: #F6F6F6; background: #F6F6F6;
@ -548,6 +547,8 @@ a {
flex: 1; flex: 1;
padding: 14px; padding: 14px;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
max-height: 113px;
} }
.MessageComposer_input > button.send { .MessageComposer_input > button.send {

18
src/platform/web/ui/session/room/MessageComposer.js
View File

@ -31,8 +31,12 @@ export class MessageComposer extends TemplateView {
this._input = t.textarea({ this._input = t.textarea({
enterkeyhint: 'send', enterkeyhint: 'send',
onKeydown: e => this._onKeyDown(e), onKeydown: e => this._onKeyDown(e),
onInput: () => vm.setInput(this._input.value), onInput: () => {
placeholder: vm.isEncrypted ? "Send an encrypted message…" : "Send a message…" 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._focusInput = () => this._input.focus();
this.value.on("focus", this._focusInput); this.value.on("focus", this._focusInput);
@ -82,6 +86,7 @@ export class MessageComposer extends TemplateView {
this._input.focus(); this._input.focus();
if (await this.value.sendMessage(this._input.value)) { if (await this.value.sendMessage(this._input.value)) {
this._input.value = ""; this._input.value = "";
this._adjustHeight();
} }
} }
@ -105,4 +110,13 @@ export class MessageComposer extends TemplateView {
this._attachmentPopup.showRelativeTo(evt.target, 12); 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`;
});
}
} }