New bottom nav design

src/status_im/ui/components/bottom_bar/core.cljs

@@ -1,5 +1,4 @@
 (ns status-im.ui.components.bottom-bar.core
-  (:require-macros [status-im.utils.views :as views])
   (:require
    [status-im.ui.components.animation :as animation]
    [status-im.ui.components.bottom-bar.styles :as tabs.styles]
@@ -9,7 +8,6 @@
    [status-im.ui.components.icons.vector-icons :as vector-icons]
    [status-im.ui.components.common.common :as components.common]
    [status-im.i18n :as i18n]
-   [status-im.ui.components.styles :as common.styles]
    [re-frame.core :as re-frame]))
 
 (defn animate
@@ -24,66 +22,67 @@
     callback)))
 
 (def tabs-list-data
-  [{:view-id             :chat-stack
+  [{:nav-stack           :chat-stack
-    :content             {:title (i18n/label :t/home)
+    :content             {:title (i18n/label :t/chats)
-                          :icon  :main-icons/home}
+                          :icon  :main-icons/message}
     :count-subscription  :chats/unread-messages-number
     :accessibility-label :home-tab-button}
-   {:view-id             :wallet-stack
+   #_{:nav-stack           :dapp-stack
+      :content             {:title (i18n/label :t/dapp)
+                            :icon  :main-icons/dapp}
+      ;;:count-subscription  :chats/unread-messages-number
+      :accessibility-label :dapp-tab-button}
+   {:nav-stack           :wallet-stack
     :content             {:title (i18n/label :t/wallet)
                           :icon  :main-icons/wallet}
     :count-subscription  :get-wallet-unread-messages-number
     :accessibility-label :wallet-tab-button}
-   {:view-id             :profile-stack
+   {:nav-stack           :profile-stack
     :content             {:title (i18n/label :t/profile)
-                          :icon  :main-icons/profile}
+                          :icon  :main-icons/user-profile}
     :count-subscription  :get-profile-unread-messages-number
     :accessibility-label :profile-tab-button}])
 
-(defn- tab-content [{:keys [title icon]}]
+(defn new-tab
-  (fn [active? count]
+  [{:keys [icon label active? nav-stack
-    [react/view {:style tabs.styles/tab-container}
+           accessibility-label count-subscription]}]
-     [react/view
+  (let [count (when count-subscription
-      [vector-icons/icon icon (tabs.styles/tab-icon active?)]]
+                (re-frame/subscribe [count-subscription]))]
-     [react/view
-      [react/text {:style (tabs.styles/tab-title active?)}
-       title]]
-     (when (pos? count)
-       [react/view tabs.styles/counter-container
-        [react/view tabs.styles/counter
-         [components.common/counter count]]])]))
-
-(def tabs-list (map #(update % :content tab-content) tabs-list-data))
-
-(views/defview tab [view-id content active? accessibility-label count-subscription]
-  (views/letsubs [count [count-subscription]]
     [react/touchable-highlight
-     (cond-> {:style    common.styles/flex
+     {:style               tabs.styles/touchable-container
-              :disabled active?
+      :disabled            active?
-              :on-press #(re-frame/dispatch [:navigate-to-tab view-id])}
+      :on-press            #(re-frame/dispatch [:navigate-to nav-stack])
-       accessibility-label
+      :accessibility-label accessibility-label}
-       (assoc :accessibility-label accessibility-label))
      [react/view
-      [content active? count]]]))
+      {:style tabs.styles/new-tab-container}
+      [react/view
+       {:style tabs.styles/icon-container}
+       [vector-icons/icon icon (tabs.styles/icon active?)]
+       (when (pos? (if count @count 0))
+         [react/view tabs.styles/counter
+          [components.common/counter @count]])]
+      [react/view {:style tabs.styles/tab-title-container}
+       [react/text {:style (tabs.styles/new-tab-title active?)}
+        label]]]]))
 
 (defn tabs [current-view-id]
-  [react/view {:style tabs.styles/tabs-container}
+  [react/view
-   (for [{:keys [content view-id accessibility-label count-subscription]} tabs-list]
+   {:style tabs.styles/new-tabs-container}
-     ^{:key view-id} [tab view-id content (= view-id current-view-id) accessibility-label count-subscription])])
+   [react/view {:style tabs.styles/tabs}
+    (for [{:keys                [nav-stack accessibility-label count-subscription]
+           {:keys [icon title]} :content} tabs-list-data]
+      ^{:key nav-stack}
+      [new-tab
+       {:icon                icon
+        :label               title
+        :accessibility-label accessibility-label
+        :count-subscription  count-subscription
+        :active?             (= current-view-id nav-stack)
+        :nav-stack           nav-stack}])]])
 
 (defn tabs-animation-wrapper [visible? keyboard-shown? tab]
   [react/animated-view
-   {:style {:height    tabs.styles/tabs-height
+   {:style (tabs.styles/animated-container visible? keyboard-shown?)}
-            :bottom    0
-            :left      0
-            :right     0
-            :position  (when keyboard-shown? :absolute)
-            :transform [{:translateY
-                         (animation/interpolate
-                          visible?
-                          {:inputRange  [0 1]
-                           :outputRange [tabs.styles/tabs-height
-                                         0]})}]}}
    [react/safe-area-view [tabs tab]]])
 
 (def disappearance-duration 150)

src/status_im/ui/components/bottom_bar/styles.cljs

@@ -1,11 +1,12 @@
 (ns status-im.ui.components.bottom-bar.styles
   (:require [status-im.ui.components.colors :as colors]
-            [status-im.utils.platform :as platform])
+            [status-im.utils.platform :as platform]
+            [status-im.ui.components.animation :as animation])
   (:require-macros [status-im.utils.styles :refer [defnstyle]]))
 
 (def tabs-height
   (cond
-    platform/android? 56
+    platform/android? 52
     platform/ios? 52
     platform/desktop? 68))
 
@@ -26,35 +27,77 @@
 (defnstyle tab-title [active?]
   {:ios        {:font-size 11}
    :android    {:font-size 12}
-   :desktop    {:font-size 12
+   :desktop    {:font-size   12
                 :font-weight (if active? "600" :normal)}
    :text-align :center
    :color      (if active?
                  colors/blue
                  colors/gray)})
 
-(defn tab-icon [active?]
-  {:color (if active? colors/blue colors/gray)})
-
-(def counter-container
-  {:position :absolute
-   :top      4})
-
 (def counter
-  {:margin-left 18})
+  {:right    0
+   :top      0
+   :position :absolute})
 
-(def unread-messages-icon
+(def touchable-container
-  {:position         :absolute
+  {:flex   1
-   :width            20
+   :height tabs-height})
-   :height           20
-   :border-radius    20
-   :left             18
-   :top              10
-   :justify-content  :center
-   :align-items      :center
-   :background-color colors/blue})
 
-(defn unread-messages-text [large?]
+(def new-tab-container
-  {:color     colors/white
+  {:flex            1
-   :font-size (if large? 10 10.9)})
+   :height          tabs-height
+   :align-items     :center
+   :justify-content :space-between
+   :padding-top     6
+   :padding         4})
+
+(def icon-container
+  {:height          24
+   :width           42
+   :align-items     :center
+   :justify-content :center})
+
+(defn icon [active?]
+  {:color  (if active? colors/blue colors/gray)
+   :height 24
+   :width  24})
+
+(def tab-title-container
+  {:align-self      :stretch
+   :height          14
+   :align-items     :center
+   :justify-content :center})
+
+(defn new-tab-title [active?]
+  {:color     (if active? colors/blue colors/gray)
+   :font-size 11})
+
+(def new-tabs-container
+  {:height           tabs-height
+   :align-self       :stretch
+   :background-color :white
+   :shadow-radius    4
+   :shadow-offset    {:width 0 :height -5}
+   :shadow-opacity   0.3
+   :shadow-color     "rgba(0, 9, 26, 0.12)"})
+
+(def tabs
+  {:height         tabs-height
+   :align-self     :stretch
+   :padding-left   8
+   :padding-right  8
+   :flex-direction :row})
+
+(defn animated-container [visible? keyboard-shown?]
+  {:bottom           0
+   :left             0
+   :right            0
+   :background-color :white
+   :elevation        8
+   :position         (when keyboard-shown? :absolute)
+   :transform        [{:translateY
+                       (animation/interpolate
+                        visible?
+                        {:inputRange  [0 1]
+                         :outputRange [tabs-height 0]})}]})
 

src/status_im/ui/components/common/common.cljs

@@ -103,7 +103,7 @@
   ([value] (counter nil value))
   ([{:keys [size accessibility-label] :or {size 18}} value]
    (let [more-than-9 (> value 9)]
-     [react/view {:style (styles/counter-container size more-than-9)}
+     [react/view {:style (styles/counter-container size)}
       [react/text (cond-> {:style (styles/counter-label size)
                            :font  :toolbar-title}
                     accessibility-label

src/status_im/ui/components/common/styles.cljs

@@ -147,8 +147,8 @@
    :text-align     :center
    :color          colors/blue})
 
-(defn counter-container [size more-than-nine]
+(defn counter-container [size]
-  {:width            (if more-than-nine (+ 2 size) size)
+  {:width            size
    :height           size
    :border-radius    (/ size 2)
    :background-color colors/blue

src/status_im/ui/screens/chat/actions.cljs

@@ -4,10 +4,6 @@
             [status-im.ui.components.list-selection :as list-selection]
             [status-im.utils.universal-links.core :as universal-links]))
 
-(def view-my-wallet
-  {:label  (i18n/label :t/view-my-wallet)
-   :action #(re-frame/dispatch [:navigate-to :wallet-modal])})
-
 (defn view-profile [chat-id]
   {:label  (i18n/label :t/view-profile)
    :action #(re-frame/dispatch [:chat.ui/show-profile chat-id])})
@@ -38,22 +34,19 @@
                                 chat-id])})
 
 (defn- chat-actions [chat-id]
-  [view-my-wallet
+  [(view-profile chat-id)
-   (view-profile chat-id)
    (clear-history)
    (fetch-history chat-id)
    (delete-chat chat-id false)])
 
 (defn- group-chat-actions [chat-id]
-  [view-my-wallet
+  [(group-info chat-id)
-   (group-info chat-id)
    (clear-history)
    (fetch-history chat-id)
    (delete-chat chat-id true)])
 
 (defn- public-chat-actions [chat-id]
-  [view-my-wallet
+  [(share-chat chat-id)
-   (share-chat chat-id)
    (clear-history)
    (fetch-history chat-id)
    (delete-chat chat-id false)])

src/status_im/ui/screens/wallet/actions.cljs

@@ -9,14 +9,9 @@
         message (i18n/label :t/share-dapp-text {:link link})]
     (list-selection/open-share {:message message})))
 
-(def open-wallet
-  {:label  (i18n/label :t/view-my-wallet)
-   :action #(re-frame/dispatch  [:navigate-to :wallet-modal])})
-
 (defn share [browser-id]
   {:label  (i18n/label :t/share-link)
    :action #(share-link browser-id)})
 
 (defn actions [browser-id]
-  [open-wallet
+  [(share browser-id)])
-   (share browser-id)])