tabs bar UI refresh

ios/StatusIm/Images.xcassets/icon_chats.imageset/Contents.json

@@ -2,7 +2,7 @@
   "images" : [
     {
       "idiom" : "universal",
-      "filename" : "icon_tab_chats.png",
+      "filename" : "icon_chats.png",
       "scale" : "1x"
     },
     {

ios/StatusIm/Images.xcassets/icon_chats_active.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_chats_active.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/StatusIm/Images.xcassets/icon_contacts.imageset/Contents.json

@@ -2,7 +2,7 @@
   "images" : [
     {
       "idiom" : "universal",
-      "filename" : "icon_tab_contacts.png",
+      "filename" : "icon_contacts.png",
       "scale" : "1x"
     },
     {

ios/StatusIm/Images.xcassets/icon_contacts_active.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_contacts_active.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/StatusIm/Images.xcassets/icon_discover.imageset/Contents.json

@@ -2,7 +2,7 @@
   "images" : [
     {
       "idiom" : "universal",
-      "filename" : "icon_tab_discover.png",
+      "filename" : "icon_discover.png",
       "scale" : "1x"
     },
     {

ios/StatusIm/Images.xcassets/icon_discover_active.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "icon_discover_active.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

src/status_im/chats_list/screen.cljs

@@ -91,7 +91,8 @@
 (defview chats-list []
   [chats        [:filtered-chats]
    edit?        [:get-in [:chat-list-ui-props :edit?]]
-   search? [:get-in [:toolbar-search :show]]]
+   search?      [:get-in [:toolbar-search :show]]
+   tabs-hidden? [:tabs-hidden?]]
   [view st/chats-container
    (cond
      edit?   [toolbar-edit]
@@ -104,7 +105,7 @@
                :renderFooter    #(when (seq chats) (list-item [chat-shadow-item]))
                :renderSeparator (when (get-in platform-specific [:chats :render-separator?])
                                   (render-separator-fn chats))
-               :style           st/list-container}]
+               :style           (st/list-container tabs-hidden?)}]
    (when (and (not edit?)
               (not search?)
               (get-in platform-specific [:chats :action-button?]))

src/status_im/chats_list/styles.cljs

@@ -1,4 +1,5 @@
 (ns status-im.chats-list.styles
+  (:require-macros [status-im.utils.styles :refer [defnstyle]])
   (:require [status-im.components.styles :refer [color-white
                                                  color-light-gray
                                                  color-blue
@@ -8,7 +9,7 @@
                                                  text4-color
                                                  separator-color
                                                  new-messages-count-color]]
-            [status-im.components.tabs.styles :refer [tabs-height]]
+            [status-im.components.tabs.styles :as tabs-st]
             [status-im.components.toolbar.styles :refer [toolbar-background1
                                                          toolbar-background2]]
             [status-im.utils.platform :as p]))
@@ -136,9 +137,12 @@
 (def chats-container
   {:flex 1})
 
-(def list-container
+(defnstyle list-container [tabs-hidden?]
-  (merge (get-in p/platform-specific [:component-styles :main-tab-list])
+  {:android {:background-color color-light-gray
-         (get-in p/platform-specific [:component-styles :chat-list :list-container])))
+             :margin-bottom    20}
+
+   :ios     {:background-color color-white
+             :margin-bottom    (if tabs-hidden? 20 (+ 16 tabs-st/tabs-height))}})
 
 (def toolbar-actions
   {:flex-direction :row

src/status_im/components/main_tabs.cljs

@@ -4,16 +4,9 @@
                    [cljs.core.async.macros :as am])
   (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]]
             [reagent.core :as r]
-            [status-im.components.react :refer [view
+            [status-im.components.react :refer [view swiper]]
-                                                animated-view
-                                                text
-                                                image
-                                                touchable-highlight
-                                                get-dimensions
-                                                swiper]]
             [status-im.components.status-bar :refer [status-bar]]
             [status-im.components.drawer.view :refer [drawer-view]]
-            [status-im.components.animation :as anim]
             [status-im.components.tabs.bottom-shadow :refer [bottom-shadow-view]]
             [status-im.chats-list.screen :refer [chats-list]]
             [status-im.discover.screen :refer [discover]]
@@ -28,35 +21,22 @@
   [{:view-id       :chat-list
     :title         (label :t/chats)
     :screen        chats-list
-    :icon    :icon_tab_chats
+    :icon-inactive :icon_chats
+    :icon-active   :icon_chats_active
     :index         0}
    {:view-id       :discover
     :title         (label :t/discover)
     :screen        discover
-    :icon    :icon_tab_discover
+    :icon-inactive :icon_discover
+    :icon-active   :icon_discover_active
     :index         1}
    {:view-id       :contact-list
     :title         (label :t/contacts)
     :screen        contact-list
-    :icon    :icon_tab_contacts
+    :icon-inactive :icon_contacts
+    :icon-active   :icon_contacts_active
     :index         2}])
 
-(defn animation-logic [{:keys [offsets val tab-id to-tab-id]}]
-  (fn [_]
-    (when-let [offsets @offsets]
-      (let [from-value (:from offsets)
-            to-value   (:to offsets)
-            to-tab-id  @to-tab-id]
-        (anim/set-value val from-value)
-        (when to-value
-          (anim/start
-            (anim/timing val {:toValue  to-value
-                              :duration 300})
-            (when (= tab-id to-tab-id)
-              (fn [arg]
-                (when (.-finished arg)
-                  (dispatch [:on-navigated-to-tab]))))))))))
-
 (def tab->index {:chat-list    0
                  :discover     1
                  :contact-list 2})
@@ -98,10 +78,12 @@
 (defn main-tabs []
   (let [view-id           (subscribe [:get :view-id])
         prev-view-id      (subscribe [:get :prev-view-id])
+        tabs-hidden?      (subscribe [:tabs-hidden?])
         main-swiper       (r/atom nil)
         swiped?           (r/atom false)
         scroll-start      (a/chan 10)
-        scroll-ended (a/chan 10)]
+        scroll-ended      (a/chan 10)
+        tabs-were-hidden? (atom @tabs-hidden?)]
     (r/create-class
       {:component-did-mount
        #(start-scrolling-loop scroll-start scroll-ended)
@@ -109,9 +91,10 @@
        (fn []
          (if @swiped?
            (reset! swiped? false)
-           (when @main-swiper
+           (when (and (= @tabs-were-hidden? @tabs-hidden?) @main-swiper)
              (let [to (scroll-to @prev-view-id @view-id)]
-               (a/put! scroll-start [@main-swiper to])))))
+               (a/put! scroll-start [@main-swiper to]))))
+         (reset! tabs-were-hidden? @tabs-hidden?))
        :reagent-render
        (fn []
          [view common-st/flex
@@ -120,7 +103,7 @@
            [drawer-view
             [view {:style common-st/flex}
              [swiper (merge
-                       st/main-swiper
+                      (st/main-swiper @tabs-hidden?)
                        {:index                  (get-tab-index @view-id)
                         :loop                   false
                         :ref                    #(reset! main-swiper %)
@@ -131,4 +114,5 @@
              [tabs {:selected-view-id @view-id
                     :prev-view-id     @prev-view-id
                     :tab-list         tab-list}]
-             [bottom-shadow-view]]]]])})))
+             (when-not @tabs-hidden?
+               [bottom-shadow-view])]]]])})))

src/status_im/components/tabs/bottom_shadow.cljs

@@ -4,8 +4,8 @@
             [status-im.utils.platform :refer [platform-specific]]))
 
 (defn bottom-shadow-view []
-  (if (get-in platform-specific [:tabs :tab-shadows?])
+  (when (get-in platform-specific [:tabs :tab-shadows?])
-    [linear-gradient {:locations [0 0.8 1]
+    [linear-gradient {:locations [0 0.98 1]
                       :colors    ["rgba(24, 52, 76, 0)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"]
                       :style     (merge
                                    st/bottom-gradient

src/status_im/components/tabs/styles.cljs

@@ -1,7 +1,9 @@
 (ns status-im.components.tabs.styles
-  (:require [status-im.components.styles :refer [color-white]]))
+  (:require [status-im.components.styles :as st]
+            [status-im.utils.platform :as p]))
 
-(def tabs-height 56)
+
+(def tabs-height (if p/ios? 62 56))
 (def tab-height (dec tabs-height))
 
 (def bottom-gradient
@@ -12,12 +14,11 @@
 
 (defn tabs-container [hidden?]
   {:position         :absolute
-   :bottom           0
+   :bottom           (if hidden? (- tabs-height) 0)
    :left             0
    :right            0
    :height           tabs-height
-   :background-color color-white
+   :background-color st/color-white
-   :margin-bottom    (if hidden? (- tabs-height) 0)
    :transform        [{:translateY 1}]})
 
 (def tabs-container-line
@@ -37,12 +38,12 @@
    :justifyContent :center
    :alignItems     :center})
 
-(def tab-title
+(defn tab-title [active?]
-  {:font-size  12
+  {:font-size  (if-not (or active? p/ios?) 12 14)
    :height     16
    :min-width  60
    :text-align :center
-   :color      "#6e93d8"})
+   :color      (if active? st/color-light-blue st/color-gray4)})
 
 (def tab-icon
   {:width        24
@@ -50,22 +51,16 @@
    :marginBottom 1
    :align-self   :center})
 
-(defn tab-container [active?]
+(def tab-container
   {:flex             1
    :height           tab-height
-   :justifyContent   :center
-   :alignItems       :center
-   :padding-top      (if active? 0 16)})
-
-(defn animated-offset [value]
-  {:top value
    :justifyContent   :center
    :alignItems       :center})
 
-(def main-swiper
+(defn main-swiper [tabs-hidden?]
   {:position         :absolute
    :top              0
    :left             0
    :right            0
-   :bottom           tabs-height
+   :bottom           (if tabs-hidden? 0 tabs-height)
    :shows-pagination false})

src/status_im/components/tabs/tab.cljs

@@ -1,58 +1,23 @@
 (ns status-im.components.tabs.tab
-  (: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
                                                 image
                                                 touchable-highlight]]
-            [reagent.core :as r]
+            [status-im.utils.platform :as p]
-            [status-im.components.tabs.styles :as st]
+            [status-im.components.tabs.styles :as st]))
-            [status-im.components.animation :as anim]))
 
-(defn animation-logic [val to-value]
+(defn tab [{:keys [view-id title icon-active icon-inactive selected-view-id prev-view-id]}]
-  (fn []
+  (let [active?   (= view-id selected-view-id)
-    (anim/start (anim/spring val {:toValue to-value
+        previous? (= view-id prev-view-id)]
-                                  :tension 40}))))
-
-(defview tab [_]
-  (let [icon-anim-value         (anim/create-value 0)
-        text-anim-value         (anim/create-value 0)
-        icon-reverse-anim-value (anim/create-value 0)
-        text-reverse-anim-value (anim/create-value 0)
-        on-update               (comp (animation-logic icon-anim-value 0)
-                                      (animation-logic text-anim-value 0)
-                                      (animation-logic icon-reverse-anim-value 0)
-                                      (animation-logic text-reverse-anim-value 30))]
-    (r/create-class
-      {:component-did-mount
-       on-update
-       :component-did-update
-       on-update
-       :component-will-receive-props
-       (fn []
-         (anim/set-value icon-anim-value 8)
-         (anim/set-value text-anim-value 30)
-         (anim/set-value icon-reverse-anim-value -8)
-         (anim/set-value text-reverse-anim-value -8))
-       :reagent-render
-       (fn [{:keys [view-id title icon selected-view-id prev-view-id]}]
     [touchable-highlight {:style    st/tab
-                               :disabled (= view-id selected-view-id)
+                          :disabled active?
                           :onPress  #(dispatch [:navigate-to-tab view-id])}
-          [view {:style (st/tab-container (= selected-view-id view-id))}
+     [view {:style st/tab-container}
-           [animated-view {:style (st/animated-offset (cond
+      [view
-                                                        (= selected-view-id view-id) icon-anim-value
+       [image {:source {:uri (if active? icon-active icon-inactive)}
-                                                        (= prev-view-id view-id) icon-reverse-anim-value
-                                                        :else 0))}
-            [image {:source {:uri icon}
                :style  st/tab-icon}]]
-           [animated-view {:style (st/animated-offset (cond
+      [view
-                                                        (= selected-view-id view-id) text-anim-value
+       [text {:style (st/tab-title active?)
-                                                        (= prev-view-id view-id) text-reverse-anim-value
+              :font  (if (and p/ios? active?) :medium :regular)}
-                                                        :else 0))}
+        title]]]]))
-            [text {:style st/tab-title}
-             (if (or (= selected-view-id view-id)
-                     (= prev-view-id view-id))
-               title
-               " ")]]]])})))

src/status_im/components/tabs/tabs.cljs

@@ -21,36 +21,13 @@
                           :prev-view-id     prev-view-id})]
     [tab data]))
 
-(defn animation-logic [{:keys [hidden? val]}]
+(defn tabs-container [& children]
-  (let [was-hidden? (atom (not @hidden?))]
+  (let [tabs-hidden?    (subscribe [:tabs-hidden?])
-    (fn [_]
+        shadows?        (get-in platform-specific [:tabs :tab-shadows?])]
-      (when (not= @was-hidden? @hidden?)
+    (into [animated-view {:style         (merge (st/tabs-container @tabs-hidden?)
-        (let [to-value (if @hidden? 0 (- st/tabs-height))]
-          (swap! was-hidden? not)
-          (anim/start
-            (anim/timing val {:toValue  to-value
-                              :duration 300})))))))
-
-(defn tabs-container [& _]
-  (let [chats-scrolled? (subscribe [:get :chats-scrolled?])
-        tabs-bar-value  (subscribe [:animations :tabs-bar-value])
-        shadows?        (get-in platform-specific [:tabs :tab-shadows?])
-        context         {:hidden? chats-scrolled?
-                         :val     @tabs-bar-value}
-        on-update       (animation-logic context)]
-    (anim/set-value @tabs-bar-value 0)
-    (r/create-class
-      {:component-did-mount
-       on-update
-       :component-did-update
-       on-update
-       :reagent-render
-       (fn [& children]
-         @chats-scrolled?
-         (into [animated-view {:style         (merge (st/tabs-container @chats-scrolled?)
                                                 (if-not shadows? st/tabs-container-line))
-                               :pointerEvents (if @chats-scrolled? :none :auto)}]
+                          :pointerEvents (if @tabs-hidden? :none :auto)}]
-               children))})))
+          children)))
 
 (defn tabs [{:keys [tab-list selected-view-id prev-view-id]}]
   [tabs-container

src/status_im/components/toolbar_new/styles.cljs

@@ -1,5 +1,5 @@
 (ns status-im.components.toolbar-new.styles
-  (:require-macros [status-im.utils.styles :refer [defnstyles]])
+  (:require-macros [status-im.utils.styles :refer [defnstyle]])
   (:require [status-im.components.styles :refer [text1-color
                                                  color-white
                                                  color-light-gray
@@ -25,7 +25,7 @@
   (merge {:flex-direction :row}
          (get-in p/platform-specific [:component-styles :toolbar-new])))
 
-(defnstyles toolbar-nav-actions-container
+(defnstyle toolbar-nav-actions-container
   [actions]
   {:flex-direction :row
    :ios            {:width (when (and actions (pos? (count actions)))

src/status_im/contacts/screen.cljs

@@ -152,8 +152,9 @@
    contacts-count       [:added-contacts-count]
    click-handler        [:get :contacts-click-handler]
    edit?                [:get-in [:contacts-ui-props :edit?]]
-   groups               [:all-added-groups]]
+   groups               [:all-added-groups]
-  [view st/contacts-list-container
+   tabs-hidden?         [:tabs-hidden?]]
+  [view (st/contacts-list-container tabs-hidden?)
    (if edit?
      [toolbar-edit]
      [toolbar-view])

src/status_im/contacts/styles.cljs

@@ -1,5 +1,5 @@
 (ns status-im.contacts.styles
-  (:require-macros [status-im.utils.styles :refer [defstyles]])
+  (:require-macros [status-im.utils.styles :refer [defnstyle]])
   (:require [status-im.components.styles :refer [text1-color
                                                  text2-color
                                                  text3-color
@@ -11,6 +11,7 @@
                                                  color-light-red
                                                  color-gray]]
             [status-im.components.toolbar.styles :refer [toolbar-background1 toolbar-background2]]
+            [status-im.components.tabs.styles :as tabs-st]
             [status-im.utils.platform :as p]))
 
 ;; Contacts list
@@ -22,10 +23,10 @@
   {:flex             1
    :background-color toolbar-background2})
 
-(defstyles contacts-list-container
+(defnstyle contacts-list-container [tabs-hidden?]
   {:flex    1
    :android {:margin-bottom 20}
-   :ios     {:margin-bottom 72}})
+   :ios     {:margin-bottom (if tabs-hidden? 20 (+ 16 tabs-st/tabs-height))}})
 
 (def contacts-list
   {:background-color color-white})

src/status_im/db.cljs

@@ -42,7 +42,7 @@
              :qr-codes                   {}
              :keyboard-height            0
              :animations                 {;; todo clear this
-                                          :tabs-bar-value (anim/create-value 0)}
+                                          }
              :loading-allowed            true
 
              :sync-state                 :done

src/status_im/discover/screen.cljs

@@ -78,12 +78,13 @@
    search-text [:get-in [:toolbar-search :text]]
    contacts [:get :contacts]
    current-account [:get-current-account]
-   discoveries [:get-recent-discoveries]]
+   discoveries [:get-recent-discoveries]
+   tabs-hidden? [:tabs-hidden?]]
   [view st/discover-container
    [toolbar-view (and current-view?
                       (= show-search :discover)) search-text]
    (if discoveries
-     [scroll-view {:style (get-in platform-specific [:component-styles :main-tab-list])}
+     [scroll-view (st/list-container tabs-hidden?)
       [discover-popular {:contacts        contacts
                          :current-account current-account}]
       [discover-recent {:current-account current-account}]]

src/status_im/discover/styles.cljs

@@ -1,8 +1,11 @@
 (ns status-im.discover.styles
+  (:require-macros [status-im.utils.styles :refer [defnstyle]])
   (:require [status-im.components.styles :refer [color-white
                                                  color-light-gray
                                                  color-blue]]
-            [status-im.components.toolbar.styles :refer [toolbar-background2]]))
+            [status-im.components.toolbar.styles :refer [toolbar-background2]]
+            [status-im.components.tabs.styles :as tabs-st]
+            [status-im.utils.platform :as p]))
 
 ;; Common
 
@@ -138,6 +141,10 @@
   {:flex            1
    :backgroundColor color-white})
 
+(defnstyle list-container [tabs-hidden?]
+  {:android {:margin-bottom 20}
+   :ios     {:margin-bottom (if tabs-hidden? 20 (+ 16 tabs-st/tabs-height))}})
+
 (def search-icon
   {:width  17
    :height 17})

src/status_im/subs.cljs

@@ -33,3 +33,13 @@
           accounts (subscribe [:get :accounts])]
       (reaction (when (and @accounts @account-id)
                   (get-in @accounts [@account-id :signed-up?]))))))
+
+(register-sub :tabs-hidden?
+  (fn []
+    (let [search-mode?        (subscribe [:get-in [:toolbar-search :show]])
+          chats-edit-mode?    (subscribe [:get-in [:chat-list-ui-props :edit?]])
+          contacts-edit-mode? (subscribe [:get-in [:contacts-ui-props :edit?]])
+          view-id             (subscribe [:get :view-id])]
+      (reaction (or @search-mode?
+                    (and (= @view-id :chat-list) @chats-edit-mode?)
+                    (and (= @view-id :contact-list) @contacts-edit-mode?))))))

src/status_im/utils/styles.clj

@@ -1,51 +1,51 @@
 (ns status-im.utils.styles)
 
-(defn body [styles]
+(defn body [style]
-  `(let [styles#            ~styles
+  `(let [style#            ~style
-         common#            (dissoc styles# :android :ios)
+         common#            (dissoc style# :android :ios)
          platform#          (keyword status-im.utils.platform/platform)
-         platform-specific# (get styles# platform#)]
+         platform-specific# (get style# platform#)]
      (if platform-specific#
        (merge common# platform-specific#)
        common#)))
 
-(defmacro defstyles
+(defmacro defstyle
-  "Defines styles symbol.
+  "Defines style symbol.
-   Styles parameter may contain plaform specific styles:
+   Style parameter may contain plaform specific style:
    {:width   100
     :height  125
     :ios     {:height 20}
     :android {:margin-top 3}}
 
-    Reuslting styles for Android:
+    Reuslting style for Android:
     {:width 100
      :height 125
      :margin-top 3}
 
-    Resulting styles for iOS:
+    Resulting style for iOS:
     {:width  100
      :height 20}"
-  [style-name styles]
+  [style-name style]
   `(def ~style-name
-     ~(body styles)))
+     ~(body style)))
 
-(defmacro defnstyles
+(defmacro defnstyle
-  "Defines styles function.
+  "Defines style function.
-   Styles parameter may contain plaform specific styles:
+   Style parameter may contain plaform specific style:
    {:width   100
     :height  (* a 2)
     :ios     {:height (/ a 2)}
     :android {:margin-top 3}}
 
-    Resulting styles for Android (with (= a 10)):
+    Resulting style for Android (with (= a 10)):
     {:width 100
      :height 20
      :margin-top 3}
 
-    Resulting styles for iOS (with (= a 10)):
+    Resulting style for iOS (with (= a 10)):
     {:width  100
      :height 5}"
-  [style-name params styles]
+  [style-name params style]
   `(defn ~style-name
      [~@params]
-     ~(body styles)))
+     ~(body style)))