Arsharth/hydrogen-web
1
0
Fork 0
forked from mystiq/hydrogen-web
Code Issues Pull requests Projects Releases Packages 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
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;
}
.MessageComposer_input > input {
padding: 0 16px;
.MessageComposer_input > textarea {
border: none;
border-radius: 24px;
background: #F6F6F6;
height: 48px;
font-size: 14px;
font-family: "Inter", sans-serif;
resize: none;
flex: 1;
padding: 14px;
box-sizing: border-box;
overflow: hidden;
max-height: 113px;
}
.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._attachmentPopup = null;
this._focusInput = null;
this._rafResizeHandle = undefined;
}
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),
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,11 +87,12 @@ export class MessageComposer extends TemplateView {
this._input.focus();
if (await this.value.sendMessage(this._input.value)) {
this._input.value = "";
this._adjustHeight();
}
}
_onKeyDown(event) {
if (event.key === "Enter") {
if (event.key === "Enter" && !event.shiftKey) {
this._trySend();
}
}
@ -105,4 +111,16 @@ export class MessageComposer extends TemplateView {
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;
});
}
}