Improved desktop chat UI

Signed-off-by: Volodymyr Kozieiev <vkjr.sp@gmail.com>

src/status_im/ui/screens/desktop/main/chat/styles.cljs

@@ -1,6 +1,12 @@
 (ns status-im.ui.screens.desktop.main.chat.styles
   (:require [status-im.ui.components.colors :as colors]))
 
+(def min-input-container-height 68)
+(def max-input-container-height 180)
+(def chat-vertical-padding 16)
+(def min-input-area-height 20)
+(def max-input-area-height (- max-input-container-height (* 2 chat-vertical-padding)))
+
 (defn message-box [{:keys [outgoing] :as message}]
   (let [align (if outgoing :flex-end :flex-start)
         color (if outgoing colors/hawkes-blue colors/white)]
@@ -44,19 +50,22 @@
    :margin-left   48
    :margin-bottom 4})
 
-(def chat-box
+(defn chat-box [height]
-  {:height            68
+  {:height            (+ height (* 2 chat-vertical-padding))
-   :background-color  :white
+   :min-height        min-input-container-height
-   :border-radius     12
+   :max-height        max-input-container-height
-   :margin-horizontal 24
+   :padding-vertical  chat-vertical-padding
-   :padding-vertical  15})
+   :flex-direction    :row
+   :overflow          :hidden})
 
-(def chat-box-inner
+(defn chat-text-input [container-height]
-  {:flex-direction  :row
+  {:height            container-height
-   :flex            1})
+   :min-height        min-input-area-height
-
+   :max-height        max-input-area-height
-(def chat-text-input
+   :margin-left       20
-  {:flex 1})
+   :margin-right      22
+   :flex              1
+   :align-self       :center})
 
 (def messages-view
   {:flex             1
@@ -121,16 +130,26 @@
 (def not-first-in-group-wrapper
   {:flex-direction :row})
 
-(def send-icon
+(def send-button
-  {:margin-left      16
+  {:height           34
-   :width            30
+   :width            34
-   :height           30
+   :margin-right     24
-   :border-radius    15
+   :justify-content  :center
-   :background-color colors/gray-lighter
+   :align-items      :center
+   :align-self       :flex-end})
+
+(defn send-icon [not-active?]
+  {:height           34
+   :width            34
+   :border-radius    17
+   :background-color (if not-active? colors/gray-lighter colors/blue)
    :align-items      :center
    :justify-content  :center
    :transform        [{:rotate "90deg"}]})
 
+(defn send-icon-arrow [not-active?]
+  {:tint-color (if not-active? :gray :white)})
+
 (def chat-view
   {:flex             1
    :background-color :white})

src/status_im/ui/screens/desktop/main/chat/views.cljs

@@ -7,6 +7,7 @@
             [status-im.chat.views.message.message :as message]
             [status-im.utils.gfycat.core :as gfycat.core]
             [taoensso.timbre :as log]
+            [reagent.core :as reagent]
             [status-im.utils.gfycat.core :as gfycat]
             [status-im.constants :as constants]
             [status-im.utils.identicon :as identicon]
@@ -155,8 +156,7 @@
           scroll-timer (atom nil)
           scroll-height (atom nil)
           _ (when (or (not @chat-id*) (not= @chat-id* chat-id))
-              (reset! chat-id* chat-id)
+              (reset! chat-id* chat-id))]
-              #_(js/setTimeout #(when @scroll-ref (.scrollToEnd @scroll-ref)) 400))]
       [react/view {:style styles/messages-view}
        [react/scroll-view {:scrollEventThrottle    16
                            :headerHeight styles/messages-list-vertical-padding
@@ -182,16 +182,18 @@
 
 (views/defview chat-text-input []
   (views/letsubs [inp-ref (atom nil)]
-    [react/view {:style styles/chat-box}
+    (let [component              (reagent/current-component)
-     [react/view {:style styles/chat-box-inner}
+          set-container-height-fn #(reagent/set-state component {:container-height %})
-      [react/view {:style {:flex 1}}
+          {:keys [container-height empty?] :or {empty? true}} (reagent/state component)]
+      [react/view {:style (styles/chat-box container-height)}
        [react/text-input {:placeholder    (i18n/label :t/type-a-message)
                           :auto-focus     true
                           :multiline      true
                           :blur-on-submit true
-                          :style          styles/chat-text-input
+                          :style          (styles/chat-text-input container-height)
                           :font           :default
                           :ref            #(reset! inp-ref %)
+                          :on-content-size-change #(set-container-height-fn (.-height (.-contentSize (.-nativeEvent %))))
                           :on-key-press   (fn [e]
                                             (let [native-event (.-nativeEvent e)
                                                   key (.-key native-event)
@@ -204,13 +206,15 @@
                           :on-change      (fn [e]
                                             (let [native-event (.-nativeEvent e)
                                                   text (.-text native-event)]
-                                              (re-frame/dispatch [:set-chat-input-text text])))}]]
+                                              (reagent/set-state component {:empty? (= "" text)})
-      [react/touchable-highlight {:on-press (fn []
+                                              (re-frame/dispatch [:set-chat-input-text text])))}]
+       [react/touchable-highlight {:style styles/send-button
+                                   :on-press (fn []
                                                (.clear @inp-ref)
                                                (.focus @inp-ref)
                                                (re-frame/dispatch [:send-current-message]))}
-       [react/view {:style styles/send-icon}
+        [react/view {:style (styles/send-icon empty?)}
-        [icons/icon :icons/arrow-left]]]]]))
+         [icons/icon :icons/arrow-left {:style (styles/send-icon-arrow empty?)}]]]])))
 
 (views/defview chat-view []
   (views/letsubs [current-chat [:get-current-chat]]

src/status_im/ui/screens/desktop/main/tabs/home/styles.cljs

@@ -62,7 +62,8 @@
 
 (def chat-last-message
   {:color      colors/gray
-   :font-size 14})
+   :font-size  14
+   :max-height 20})
 
 (def timestamp
   {:justify-content :flex-start