Merge pull request #420 from status-im/bug/multiline-input-#397

Fix for multiline message input (#397)

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)

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

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

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])]

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]]]])})))