From a289653d448279da1742c8c4faa714c6c2b0d951 Mon Sep 17 00:00:00 2001
From: Alexander Pantyuhov <alwxndr@gmail.com>
Date: Fri, 4 Nov 2016 13:53:29 +0300
Subject: [PATCH] Fix for multiline message input (#397)

---
 src/status_im/chat/constants.cljs            |  2 +-
 src/status_im/chat/styles/message_input.cljs | 24 +++++++++++---------
 src/status_im/chat/styles/plain_message.cljs |  2 +-
 src/status_im/chat/views/message_input.cljs  |  4 ++--
 src/status_im/chat/views/plain_message.cljs  |  2 +-
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/status_im/chat/constants.cljs b/src/status_im/chat/constants.cljs
index ee4fff2019..8a7499dd48 100644
--- a/src/status_im/chat/constants.cljs
+++ b/src/status_im/chat/constants.cljs
@@ -4,7 +4,7 @@
 (def max-input-height 66)
 (def min-input-height 22)
 (def input-spacing-top 16)
-(def input-spacing-bottom 16)
+(def input-spacing-bottom 18)
 
 (def request-info-height 61)
 (def response-height-normal 211)
diff --git a/src/status_im/chat/styles/message_input.cljs b/src/status_im/chat/styles/message_input.cljs
index a7cb57913a..711480f515 100644
--- a/src/status_im/chat/styles/message_input.cljs
+++ b/src/status_im/chat/styles/message_input.cljs
@@ -10,29 +10,31 @@
 (def input-container
   {:flex-direction :column})
 
-(def input-view
+(defn input-view [content-height]
   {:flex-direction   :row
    :align-items      :center
    :justify-content  :center
-   :height           56
+   :height           (+ (min (max min-input-height content-height) max-input-height)
+                        input-spacing-top
+                        input-spacing-bottom)
    :background-color color-white})
 
-(def message-input-container
-  {:height         16.5
-   :margin-top     20
-   :margin-bottom  19.5
-   :flex           1
-   :flex-direction :column
-   :margin-right   0})
+(defn message-input-container [content-height]
+  {:height           (min (max min-input-height content-height) max-input-height)
+   :margin-top       input-spacing-top
+   :margin-bottom    input-spacing-bottom
+   :flex             1
+   :flex-direction   "column"
+   :margin-right     0})
 
 (def send-wrapper
-  {:margin-bottom   10
+  {:margin-top      10
    :margin-right    10
    :width           36
    :flex            1
    :flex-direction  "column"
    :align-items     :center
-   :justify-content :flex-end})
+   :justify-content :flex-start})
 
 (def send-container
   {:width            36
diff --git a/src/status_im/chat/styles/plain_message.cljs b/src/status_im/chat/styles/plain_message.cljs
index bd80860850..4d44152937 100644
--- a/src/status_im/chat/styles/plain_message.cljs
+++ b/src/status_im/chat/styles/plain_message.cljs
@@ -51,7 +51,7 @@
    :font-size   14
    :line-height 20
    :color       text1-color
-   :padding-top (when p/ios? -6)})
+   :padding-top 0})
 
 (def smile-icon
   {:width  20
diff --git a/src/status_im/chat/views/message_input.cljs b/src/status_im/chat/views/message_input.cljs
index 3ea0fb05c9..9460afa57b 100644
--- a/src/status_im/chat/views/message_input.cljs
+++ b/src/status_im/chat/views/message_input.cljs
@@ -93,9 +93,9 @@
        (fn [{:keys [input-options]}]
          (let [{:keys [height]} (r/state component)]
            [view st/input-container
-            [view st/input-view
+            [view (st/input-view height)
              [plain-message/commands-button height #(set-layout-size 0)]
-             [view st/message-input-container
+             [view (st/message-input-container height)
               (if @command?
                 [command-input input-options @command]
                 [message-input input-options set-layout-size])]
diff --git a/src/status_im/chat/views/plain_message.cljs b/src/status_im/chat/views/plain_message.cljs
index a8a3b770dc..699d02e531 100644
--- a/src/status_im/chat/views/plain_message.cljs
+++ b/src/status_im/chat/views/plain_message.cljs
@@ -102,5 +102,5 @@
                                            )
                                :disabled @command?}
           [animated-view {:style (st/message-input-button-touchable container-width height)}
-           [animated-view {:style (st/message-input-button buttons-scale 15)}
+           [animated-view {:style (st/message-input-button buttons-scale 16)}
             [icon :smile st/smile-icon]]]])})))