From 1dcfdfc1d8096f2d85d7b8996557d7a474e42735 Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Thu, 22 Jul 2021 13:37:35 -0700
Subject: [PATCH] Split composer into preview and input

---
 .../web/ui/session/room/MessageComposer.js    | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/platform/web/ui/session/room/MessageComposer.js b/src/platform/web/ui/session/room/MessageComposer.js
index 6f8ed542..1191dea6 100644
--- a/src/platform/web/ui/session/room/MessageComposer.js
+++ b/src/platform/web/ui/session/room/MessageComposer.js
@@ -33,17 +33,17 @@ export class MessageComposer extends TemplateView {
             onKeydown: e => this._onKeyDown(e),
             onInput: () => vm.setInput(this._input.value),
         });
-        return t.div({className: "MessageComposer"}, [
-            t.map(vm => vm.replyViewModel, (rvm, t) => !rvm ? null :
-                t.div({
-                    className: "replyBox"
-                }, [
-                    t.span('Replying'),
-                    t.span({onClick: () => this._clearReplyingTo()}, 'Close'),
-                    // TODO need proper view, not just assumed TextMessageView
-                    t.view(new TextMessageView(vm.replyViewModel, true, "div"))
-                ])
-            ),
+        const replyPreview = t.map(vm => vm.replyViewModel, (rvm, t) => !rvm ? null :
+            t.div({
+                className: "MessageComposer_replyPreview"
+            }, [
+                t.span('Replying'),
+                t.span({onClick: () => this._clearReplyingTo()}, 'Close'),
+                // TODO need proper view, not just assumed TextMessageView
+                t.view(new TextMessageView(vm.replyViewModel, true, "div"))
+            ])
+        );
+        const input = t.div({className: "MessageComposer_input"}, [
             this._input,
             t.button({
                 className: "sendFile",
@@ -57,6 +57,7 @@ export class MessageComposer extends TemplateView {
                 onClick: () => this._trySend(),
             }, vm.i18n`Send`),
         ]);
+        return t.div({ className: "MessageComposer" }, [replyPreview, input]);
     }
 
     _clearReplyingTo() {