add send button to composer

src/domain/session/room/RoomViewModel.js

@@ -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");
     }
 }

src/ui/web/css/room.css

@@ -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;
 }

src/ui/web/css/themes/element/icons/send.svg

@@ -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>

src/ui/web/css/themes/element/theme.css

@@ -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;

src/ui/web/session/room/MessageComposer.js

@@ -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();
         }
     }
 }