Improve tabs bar animation

Former-commit-id: 8622859c3a

src/status_im/chats_list/screen.cljs

@@ -4,6 +4,7 @@
             [status-im.components.react :refer [list-view
                                                 list-item
                                                 view
+                                                animated-view
                                                 text
                                                 image
                                                 touchable-highlight]]
@@ -38,7 +39,9 @@
 
 (defn chats-list []
   (let [chats (subscribe [:get :chats])
-        chat-scrolled? (subscribe [:get :chats-scrolled?])
+        chats-scrolled? (subscribe [:get :chats-scrolled?])
+        animation? (subscribe [:animations :tabs-bar-animation?])
+        tabs-bar-value (subscribe [:animations :tabs-bar-value])
         container-height (r/atom 0)
         content-height (r/atom 0)]
     (dispatch [:set :chats-scrolled? false])
@@ -53,7 +56,7 @@
                     ;;; if "maximazing" chat list will make scroll to 0,
                     ;;; then disable maximazing
                     :onLayout            (fn [event]
-                                           (when-not @chat-scrolled?
+                                           (when-not @chats-scrolled?
                                              (let [height (.. event -nativeEvent -layout -height)]
                                                (reset! container-height height))))
                     :onContentSizeChange (fn [width height]
@@ -62,7 +65,10 @@
                                            (let [offset (.. e -nativeEvent -contentOffset -y)
                                                  min-content-height (+ @container-height tabs-height)
                                                  scrolled? (and (< 0 offset) (< min-content-height @content-height))]
-                                             (dispatch [:set :chats-scrolled? scrolled?])))}]
+                                             (dispatch [:set :chats-scrolled? scrolled?])
+                                             (dispatch [:set-animation :tabs-bar-animation? true])))}]
+        [animated-view {:style         (st/action-buttons-container @animation? (or @tabs-bar-value 0))
+                        :pointerEvents :box-none}
          [action-button {:buttonColor color-blue
                          :offsetY     16
                          :offsetX     16}
@@ -77,4 +83,4 @@
             :buttonColor :#1abc9c
             :onPress     #(dispatch [:show-group-new])}
            [icon {:name  :person-stalker
-                 :style st/person-stalker-icon}]]]]])))
+                  :style st/person-stalker-icon}]]]]]])))

src/status_im/chats_list/styles.cljs

@@ -6,7 +6,8 @@
                                                online-color
                                                text1-color
                                                text2-color
-                                               new-messages-count-color]]))
+                                               new-messages-count-color]]
+            [status-im.components.tabs.styles :refer [tabs-height]]))
 
 (def chat-container
   {:flexDirection     :row
@@ -113,3 +114,11 @@
   {:fontSize 20
    :height   22
    :color    :white})
+
+(defn action-buttons-container [animation? offset-y]
+  {:position     :absolute
+   :left         0
+   :right        0
+   :top          0
+   :bottom       0
+   :transform    [{:translateY (if animation? offset-y 1)}]})

src/status_im/components/tabs/styles.cljs

@@ -13,10 +13,12 @@
 (def tabs-height 59)
 (def tab-height 56)
 
-(defn tabs-container [offset-y]
+(defn tabs-container [hidden? animation? offset-y]
   {:height          tabs-height
    :backgroundColor color-white
-   :marginBottom    offset-y})
+   :marginBottom    (if (or hidden? animation?)
+                      (- tabs-height) 0)
+   :transform       [{:translateY (if animation? offset-y 1)}]})
 
 (def top-gradient
   {:flexDirection :row

src/status_im/components/tabs/tabs.cljs

@@ -20,21 +20,27 @@
     [tab data]))
 
 (defn animation-logic [{:keys [hidden? val]}]
+  (let [was-hidden? (atom (not @hidden?))]
     (fn [_]
-    (let [to-value (if @hidden? (- st/tab-height) 0)]
+      (when (not= @was-hidden? @hidden?)
+        (let [to-value (if @hidden? 0 (- st/tabs-height))]
+          (swap! was-hidden? not)
           (anim/start
             (anim/timing val {:toValue  to-value
                               :duration 300})
             (fn [e]
-          (when-not (.-finished e)
+              ;; if to-value was changed, then new animation has started
-            nil))))))
+              (when (= to-value (if @hidden? 0 (- st/tabs-height)))
+                (dispatch [:set-animation :tabs-bar-animation? false])))))))))
 
 (defn tabs-container [& children]
   (let [chats-scrolled? (subscribe [:get :chats-scrolled?])
-        anim-value (anim/create-value 0)
+        animation? (subscribe [:animations :tabs-bar-animation?])
+        tabs-bar-value (subscribe [:animations :tabs-bar-value])
         context {:hidden?    chats-scrolled?
-                 :val     anim-value}
+                 :val        @tabs-bar-value}
         on-update (animation-logic context)]
+    (anim/set-value @tabs-bar-value 0)
     (r/create-class
       {:component-did-mount
        on-update
@@ -43,7 +49,7 @@
        :reagent-render
        (fn [& children]
          @chats-scrolled?
-         (into [animated-view {:style         (st/tabs-container anim-value)
+         (into [animated-view {:style         (st/tabs-container @chats-scrolled? @animation? @tabs-bar-value)
                                :pointerEvents (if @chats-scrolled? :none :auto)}]
                children))})))
 

src/status_im/db.cljs

@@ -44,7 +44,8 @@
                                       :message-input-buttons-scale  1
                                       :messages-offset              0
                                       :commands-input-is-switching? false
-                                      :response-resize?             false}})
+                                      :response-resize?             false
+                                      :tabs-bar-value               (anim/create-value 0)}})
 
 (def protocol-initialized-path [:protocol-initialized])
 (defn chat-input-text-path [chat-id]