Messages animation

Former-commit-id: 7f7ab514ca

src/status_im/chat/handlers.cljs

@@ -5,7 +5,7 @@
             [status-im.components.drag-drop :as drag]
             [status-im.components.animation :as anim]
             [status-im.components.styles :refer [default-chat-color]]
-            [status-im.chat.styles.response :as response-styles]
+            [status-im.chat.styles.response :refer [request-info-height response-height-normal]]
             [status-im.chat.styles.response-suggestions :as response-suggestions-styles]
             [status-im.chat.suggestions :as suggestions]
             [status-im.protocol.api :as api]
@@ -52,7 +52,8 @@
 
 (defn animate-cancel-command! [{{:keys [response-height-anim-value
                                         message-input-buttons-scale
-                                        message-input-offset]} :animations}]
+                                        message-input-offset
+                                        messages-offset-anim-value]} :animations}]
   (let [height-to-value 1]
     (anim/add-listener response-height-anim-value
                        (fn [val]
@@ -66,7 +67,8 @@
     (anim/start (anim/timing message-input-buttons-scale {:toValue  1
                                                           :duration response-input-hiding-duration}))
     (anim/start (anim/timing message-input-offset {:toValue  0
-                                                   :duration response-input-hiding-duration}))))
+                                                   :duration response-input-hiding-duration}))
+    (anim/start (anim/spring messages-offset-anim-value {:toValue 0}))))
 
 (register-handler :start-cancel-command
   (after animate-cancel-command!)
@@ -86,7 +88,7 @@
                                                      response-suggestions-styles/header-height
                                                      response-suggestions-styles/suggestion-height)
                                                    suggestions)))
-          height (+ suggestions-height response-styles/request-info-height)
+          height (+ suggestions-height request-info-height)
           anim-value (get-in db [:animations :response-height-anim-value])]
       (anim/start
         (anim/spring anim-value {:toValue    height
@@ -119,7 +121,8 @@
     (assoc-in db [:animations :commands-input-is-switching?] false)))
 
 (defn animate-show-response! [{{scale-anim-value           :message-input-buttons-scale
-                                offset-anim-value :message-input-offset} :animations}]
+                                input-offset-anim-value    :message-input-offset
+                                messages-offset-anim-value :messages-offset-anim-value} :animations}]
   (let [to-value 0.1
         delta 0.02]
     (anim/add-listener scale-anim-value
@@ -129,8 +132,9 @@
                            (dispatch [:finish-show-response!]))))
     (anim/start (anim/timing scale-anim-value {:toValue  to-value
                                                :duration response-input-hiding-duration}))
-    (anim/start (anim/timing offset-anim-value {:toValue  -40
+    (anim/start (anim/timing input-offset-anim-value {:toValue  -40
-                                                :duration response-input-hiding-duration}))))
+                                                      :duration response-input-hiding-duration}))
+    (anim/start (anim/spring messages-offset-anim-value {:toValue request-info-height}))))
 
 (defn set-response-chat-command [db [_ to-msg-id command-key]]
   (-> db
@@ -360,11 +364,11 @@
   (after animate-fix-response-height!)
   (fn [db _]
     (let [current (get-in db [:animations :response-height])
-          normal-height response-styles/response-height-normal
+          normal-height response-height-normal
           max-height (get-in db [:animations :response-height-max])
           delta (/ normal-height 2)
           new-fixed (cond
-                      (<= current delta) response-styles/request-info-height
+                      (<= current delta) request-info-height
                       (<= current (+ normal-height delta)) normal-height
                       :else max-height)]
       (-> db

src/status_im/chat/screen.cljs

@@ -3,6 +3,7 @@
   (:require [re-frame.core :refer [subscribe dispatch]]
             [clojure.string :as s]
             [status-im.components.react :refer [view
+                                                animated-view
                                                 text
                                                 image
                                                 icon
@@ -221,14 +222,16 @@
 
 (defview messages-view [group-chat]
   [messages [:chat :messages]
-   contacts [:chat :contacts]]
+   contacts [:chat :contacts]
+   messages-offset [:get-in [:animations :messages-offset-anim-value]]]
   (let [contacts' (contacts-by-identity contacts)]
+    [animated-view {:style (st/messages-container messages-offset)}
      [list-view {:renderRow                 (message-row contacts' group-chat)
                  :renderScrollComponent     #(invertible-scroll-view (js->clj %))
                  :onEndReached              #(dispatch [:load-more-messages])
                  :enableEmptySections       true
                  :keyboardShouldPersistTaps true
-                :dataSource                (to-datasource messages)}]))
+                 :dataSource                (to-datasource messages)}]]))
 
 (defview chat []
   [group-chat [:chat :group-chat]

src/status_im/chat/styles/screen.cljs

@@ -14,6 +14,10 @@
   {:flex            1
    :backgroundColor chat-background})
 
+(defn messages-container [bottom]
+  {:flex   1
+   :bottom bottom})
+
 (def toolbar-view
   {:flexDirection   :row
    :height          56

src/status_im/db.cljs

@@ -40,6 +40,7 @@
                                       :message-input-buttons-scale  (anim/create-value 1)
                                       :commands-input-is-switching? false
                                       :response-height-anim-value   (anim/create-value 0)
+                                      :messages-offset-anim-value   (anim/create-value 0)
                                       :response-resize?             false}})
 
 (def protocol-initialized-path [:protocol-initialized])