Grey action bar. Hide navbar on chat list scroll.

src/status_im/chats_list/screen.cljs

@@ -1,4 +1,5 @@
 (ns status-im.chats-list.screen
+  (:require-macros [status-im.utils.views :refer [defview]])
   (:require [re-frame.core :refer [subscribe dispatch]]
             [status-im.components.react :refer [list-view
                                                 list-item
@@ -13,33 +14,55 @@
                                                         action-button-item]]
             [status-im.components.drawer.view :refer [drawer-view open-drawer]]
             [status-im.components.styles :refer [color-blue
+                                                 toolbar-background1
                                                  toolbar-background2]]
             [status-im.components.toolbar :refer [toolbar]]
             [status-im.components.icons.ionicons :refer [icon]]
             [status-im.i18n :refer [label]]
-            [status-im.chats-list.styles :as st]))
+            [status-im.chats-list.styles :as st]
+            [status-im.components.tabs.styles :refer [tabs-height]]))
 
-(defn chats-list-toolbar []
+(defview chats-list-toolbar []
+  [chats-scrolled? [:get :chats-scrolled?]]
   [toolbar {:nav-action {:image   {:source {:uri :icon_hamburger}
                                    :style  st/hamburger-icon}
                          :handler open-drawer}
             :title      (label :t/chats)
-            :background-color toolbar-background2
+            :background-color (if chats-scrolled?
+                                toolbar-background1
+                                toolbar-background2)
             ;; TODO implement search
             :action     {:image   {:source {:uri :icon_search}
                                    :style  st/search-icon}
                          :handler (fn [])}}])
 
 (defn chats-list []
-  (let [chats (subscribe [:get :chats])]
+  (let [chats (subscribe [:get :chats])
+        chat-scrolled? (subscribe [:get :chats-scrolled?])
+        container-height (r/atom 0)
+        content-height (r/atom 0)]
+    (dispatch [:set :chats-scrolled? false])
     (fn []
       [drawer-view
        [view st/chats-container
         [chats-list-toolbar]
-        [list-view {:dataSource (to-datasource @chats)
+        [list-view {:dataSource          (to-datasource @chats)
-                    :renderRow  (fn [row _ _]
+                    :renderRow           (fn [row _ _]
-                                  (list-item [chat-list-item row]))
+                                           (list-item [chat-list-item row]))
-                    :style      st/list-container}]
+                    :style               st/list-container
+                    ;;; if "maximazing" chat list will make scroll to 0,
+                    ;;; then disable maximazing
+                    :onLayout            (fn [event]
+                                           (when-not @chat-scrolled?
+                                             (let [height (.. event -nativeEvent -layout -height)]
+                                               (reset! container-height height))))
+                    :onContentSizeChange (fn [width height]
+                                           (reset! content-height height))
+                    :onScroll            (fn [e]
+                                           (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?])))}]
         [action-button {:buttonColor color-blue
                         :offsetY     16
                         :offsetX     16}

src/status_im/components/tabs/styles.cljs

@@ -10,21 +10,19 @@
                                                  text2-color
                                                  toolbar-background1]]))
 
+(def tabs-height 59)
 (def tab-height 56)
 
-(def tabs
+(defn tabs-container [offset-y]
-  {:flex     1
+  {:height          tabs-height
-   :position :absolute
+   :backgroundColor color-white
-   :bottom   0
+   :marginBottom    offset-y})
-   :right    0
-   :left     0
-   })
 
 (def top-gradient
   {:flexDirection :row
    :height        3})
 
-(def tabs-container
+(def tabs-inner-container
   {:flexDirection   :row
    :height          tab-height
    :opacity         1
@@ -55,10 +53,9 @@
    :alignItems     :center})
 
 (defn tab-view-container [offset-x]
-  {:flex      1
+  {:position  :absolute
-   :position  :absolute
    :top       0
    :left      0
    :right     0
-   :bottom    tab-height
+   :bottom    0
    :transform [{:translateX offset-x}]})

src/status_im/components/tabs/tabs.cljs

@@ -2,6 +2,7 @@
   (:require-macros [status-im.utils.views :refer [defview]])
   (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
             [status-im.components.react :refer [view
+                                                animated-view
                                                 text-input
                                                 text
                                                 image
@@ -9,7 +10,8 @@
                                                 linear-gradient]]
             [reagent.core :as r]
             [status-im.components.tabs.styles :as st]
-            [status-im.components.tabs.tab :refer [tab]]))
+            [status-im.components.tabs.tab :refer [tab]]
+            [status-im.components.animation :as anim]))
 
 (defn create-tab [index data selected-view-id]
   (let [data (merge data {:key              index
@@ -17,10 +19,37 @@
                           :selected-view-id selected-view-id})]
     [tab data]))
 
-(defview tabs [{:keys [style tab-list selected-view-id]}]
+(defn animation-logic [{:keys [hidden? val]}]
-  (let [style (merge st/tabs style)]
+  (fn [_]
-    [view {:style style}
+    (let [to-value (if @hidden? (- st/tab-height) 0)]
-     [linear-gradient {:colors ["rgba(24, 52, 76, 0.01)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"]
+      (anim/start
-                       :style  st/top-gradient}]
+        (anim/timing val {:toValue  to-value
-     [view st/tabs-container
+                          :duration 300})
-      (doall (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))]]))
+        (fn [e]
+          (when-not (.-finished e)
+            nil))))))
+
+(defn tabs-container [& children]
+  (let [chats-scrolled? (subscribe [:get :chats-scrolled?])
+        anim-value (anim/create-value 0)
+        context {:hidden? chats-scrolled?
+                 :val     anim-value}
+        on-update (animation-logic context)]
+    (r/create-class
+      {:component-did-mount
+       on-update
+       :component-did-update
+       on-update
+       :reagent-render
+       (fn [& children]
+         @chats-scrolled?
+         (into [animated-view {:style         (st/tabs-container anim-value)
+                               :pointerEvents (if @chats-scrolled? :none :auto)}]
+               children))})))
+
+(defn tabs [{:keys [tab-list selected-view-id]}]
+  [tabs-container
+   [linear-gradient {:colors ["rgba(24, 52, 76, 0.01)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"]
+                     :style  st/top-gradient}]
+   [view st/tabs-inner-container
+    (doall (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))]])