Merge pull request #575 from vector-im/bwindels/composer-layout-improvements

Composer layout improvements

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

@@ -502,7 +502,7 @@ a {
 }
 
 .MessageComposer_input, .MessageComposer_replyPreview {
-    padding: 8px 16px;
+    padding: 8px;
 }
 
 .MessageComposer_replyPreview > .replying {
@@ -547,7 +547,7 @@ a {
     padding: 14px;
     box-sizing: border-box;
     overflow: hidden;
-    max-height: 113px;
+    max-height: 113px; /* 5 lines */
 }
 
 .MessageComposer_input > button.send {
@@ -563,6 +563,8 @@ a {
     background-image: url('icons/send.svg');
     background-repeat: no-repeat;
     background-position: center;
+    align-self: end;
+    margin-bottom: 8px;
 }
 
 .MessageComposer_input > button.sendFile {
@@ -579,8 +581,12 @@ a {
     background-position: center;
 }
 
-.MessageComposer_input > button.send:disabled {
-    background-color: #E3E8F0;
+.MessageComposer.MessageComposer_canSend button.sendFile {
+    display: none;
+}
+
+.MessageComposer:not(.MessageComposer_canSend) button.send {
+    display: none;
 }
 
 .SettingsBody {

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

@@ -69,11 +69,13 @@ export class MessageComposer extends TemplateView {
             t.button({
                 className: "send",
                 title: vm.i18n`Send`,
-                disabled: vm => !vm.canSend,
                 onClick: () => this._trySend(),
             }, vm.i18n`Send`),
         ]);
-        return t.div({ className: "MessageComposer" }, [replyPreview, input]);
+        return t.div({ className: {
+            MessageComposer: true,
+            MessageComposer_canSend: vm => vm.canSend
+        } }, [replyPreview, input]);
     }
 
     unmount() {