mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #566 from vector-im/composer-improvements

Browse source 
Support for multiline messages
This commit is contained in:
Bruno Windels 2021-11-05 18:20:02 +01:00 committed by GitHub
parent 4c5fe824c2 8ffd98162c
commit 365c8d0953
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/platform/web/ui/css/themes/element/theme.css
View file

@ -536,14 +536,18 @@ a {
margin-left: 12px; margin-left: 12px;
} }
.MessageComposer_input > input { .MessageComposer_input > textarea {
padding: 0 16px;
border: none; border: none;
border-radius: 24px; border-radius: 24px;
background: #F6F6F6; background: #F6F6F6;
height: 48px;
font-size: 14px; font-size: 14px;
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
resize: none;
flex: 1;
padding: 14px;
box-sizing: border-box;
overflow: hidden;
max-height: 113px;
} }
.MessageComposer_input > button.send { .MessageComposer_input > button.send {

26
src/platform/web/ui/session/room/MessageComposer.js
View file

@ -25,14 +25,19 @@ export class MessageComposer extends TemplateView {
this._input = null; this._input = null;
this._attachmentPopup = null; this._attachmentPopup = null;
this._focusInput = null; this._focusInput = null;
this._rafResizeHandle = undefined;
} }
render(t, vm) { render(t, vm) {
this._input = t.input({ this._input = t.textarea({
placeholder: vm.isEncrypted ? "Send an encrypted message…" : "Send a message…",
enterkeyhint: 'send', enterkeyhint: 'send',
onKeydown: e => this._onKeyDown(e), onKeydown: e => this._onKeyDown(e),
onInput: () => vm.setInput(this._input.value), 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._focusInput = () => this._input.focus();
this.value.on("focus", this._focusInput); this.value.on("focus", this._focusInput);
@ -82,11 +87,12 @@ 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();
} }
} }
_onKeyDown(event) { _onKeyDown(event) {
if (event.key === "Enter") { if (event.key === "Enter" && !event.shiftKey) {
this._trySend(); this._trySend();
} }
} }
@ -105,4 +111,16 @@ export class MessageComposer extends TemplateView {
this._attachmentPopup.showRelativeTo(evt.target, 12); this._attachmentPopup.showRelativeTo(evt.target, 12);
} }
} }
_adjustHeight() {
if (this._rafResizeHandle) {
return;
}
this._rafResizeHandle = window.requestAnimationFrame(() => {
const scrollHeight = this._input.scrollHeight;
this._input.style.height = `${scrollHeight}px`;
this._rafResizeHandle = undefined;
});
}
} }