add send button to composer

This commit is contained in:
Bruno Windels 2020-08-13 18:00:19 +02:00
parent bf35cfc9fd
commit 61801ee2cd
5 changed files with 70 additions and 9 deletions

View File

@ -115,12 +115,28 @@ export class RoomViewModel extends ViewModel {
}
}
class ComposerViewModel {
class ComposerViewModel extends ViewModel {
constructor(roomVM) {
super();
this._roomVM = roomVM;
this._isEmpty = true;
}
sendMessage(message) {
return this._roomVM._sendMessage(message);
const success = this._roomVM._sendMessage(message);
if (success) {
this._isEmpty = true;
this.emitChange("canSend");
}
return success;
}
get canSend() {
return !this._isEmpty;
}
setInput(text) {
this._isEmpty = text.length === 0;
this.emitChange("canSend");
}
}

View File

@ -64,8 +64,12 @@ limitations under the License.
margin: 0;
}
.MessageComposer {
display: flex;
}
.MessageComposer > input {
display: block;
width: 100%;
flex: 1;
box-sizing: border-box;
}

View File

@ -0,0 +1,3 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.7372 8.96458L1.89656 15.8816C0.963879 16.3478 -0.00645849 15.3477 0.449387 14.4353C0.449387 14.4353 2.16481 10.9711 2.63665 10.0637C3.10849 9.15633 3.64864 8.99926 8.6646 8.35098C8.85021 8.32697 9.00215 8.1869 9.00215 7.99982C9.00215 7.81307 8.85021 7.67301 8.6646 7.649C3.64864 7.00071 3.10849 6.84364 2.63665 5.93624C2.16481 5.02918 0.449387 1.56465 0.449387 1.56465C-0.00645849 0.65258 0.963879 -0.347862 1.89656 0.118344L15.7372 7.03573C16.5319 7.43257 16.5319 8.5674 15.7372 8.96458Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 621 B

View File

@ -138,11 +138,36 @@ a {
color: red;
}
.MessageComposer {
border-top: 1px solid rgba(245, 245, 245, 0.90);
}
.MessageComposer > input {
padding: 0.8em;
border: none;
}
.MessageComposer > button.send {
margin: 8px;
width: 32px;
height: 32px;
display: block;
border-radius: 100%;
border: none;
text-indent: 200%;
overflow: hidden;
background-color: #03B381;
background-image: url('icons/send.svg');
background-repeat: no-repeat;
background-position: center;
}
.MessageComposer > button.send:disabled {
background-color: #E3E8F0;
}
.message-container {
padding: 2px 10px;
margin: 5px 10px 0 10px;

View File

@ -22,19 +22,32 @@ export class MessageComposer extends TemplateView {
this._input = null;
}
render(t) {
render(t, vm) {
this._input = t.input({
placeholder: "Send a message ...",
onKeydown: e => this._onKeyDown(e)
onKeydown: e => this._onKeyDown(e),
onInput: () => vm.setInput(this._input.value),
});
return t.div({className: "MessageComposer"}, [this._input]);
return t.div({className: "MessageComposer"}, [
this._input,
t.button({
className: "send",
title: vm.i18n`Send`,
disabled: vm => !vm.canSend,
onClick: () => this._trySend(),
}, vm.i18n`Send`),
]);
}
_trySend() {
if (this.value.sendMessage(this._input.value)) {
this._input.value = "";
}
}
_onKeyDown(event) {
if (event.key === "Enter") {
if (this.value.sendMessage(this._input.value)) {
this._input.value = "";
}
this._trySend();
}
}
}