reworked main tabs using svg icons [#1748

2017-09-06 12:30:09 +03:00 · 2017-09-06 12:30:09 +03:00 · f88c3feaf6
parent 1a6bfd06a6
commit f88c3feaf6
12 changed files with 173 additions and 206 deletions
--- a/resources/icons/bottom/chats_gray.svg
+++ b/resources/icons/bottom/chats_gray.svg
@ -1,5 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-  <g fill="none" fill-rule="evenodd">
-    <path fill="#939BA1" fill-rule="nonzero" d="M6,5.99539757 L6,14.0046024 C6,14.5443356 6.44661595,15 6.99754465,15 L15,15 L19,18 L19,5.99539757 C19,5.4556644 18.5529553,5 18.0014977,5 L6.99850233,5 C6.44748943,5 6,5.44565467 6,5.99539757 Z M6.99754465,17 C5.34334703,17 4,15.6502334 4,14.0046024 L4,5.99539757 C4,4.33970333 5.34429545,3 6.99850233,3 L18.0014977,3 C19.6557893,3 21,4.34933905 21,5.99539757 L21,18 C21,19.7818097 18.8457162,20.6741433 17.5857864,19.4142136 L14.1715729,17 L6.99754465,17 Z M10,11.5 C10.8284271,11.5 11.5,10.8284271 11.5,10 C11.5,9.17157288 10.8284271,8.5 10,8.5 C9.17157288,8.5 8.5,9.17157288 8.5,10 C8.5,10.8284271 9.17157288,11.5 10,11.5 Z M15,11.5 C15.8284271,11.5 16.5,10.8284271 16.5,10 C16.5,9.17157288 15.8284271,8.5 15,8.5 C14.1715729,8.5 13.5,9.17157288 13.5,10 C13.5,10.8284271 14.1715729,11.5 15,11.5 Z"/>
-  </g>
+  <path fill="#939BA1" fill-rule="nonzero" d="M6,5.99539757 L6,14.0046024 C6,14.5443356 6.44661595,15 6.99754465,15 L15,15 L19,18 L19,5.99539757 C19,5.4556644 18.5529553,5 18.0014977,5 L6.99850233,5 C6.44748943,5 6,5.44565467 6,5.99539757 Z M6.99754465,17 C5.34334703,17 4,15.6502334 4,14.0046024 L4,5.99539757 C4,4.33970333 5.34429545,3 6.99850233,3 L18.0014977,3 C19.6557893,3 21,4.34933905 21,5.99539757 L21,18 C21,19.7818097 18.8457162,20.6741433 17.5857864,19.4142136 L14.1715729,17 L6.99754465,17 Z M10,11.5 C10.8284271,11.5 11.5,10.8284271 11.5,10 C11.5,9.17157288 10.8284271,8.5 10,8.5 C9.17157288,8.5 8.5,9.17157288 8.5,10 C8.5,10.8284271 9.17157288,11.5 10,11.5 Z M15,11.5 C15.8284271,11.5 16.5,10.8284271 16.5,10 C16.5,9.17157288 15.8284271,8.5 15,8.5 C14.1715729,8.5 13.5,9.17157288 13.5,10 C13.5,10.8284271 14.1715729,11.5 15,11.5 Z"/>
 </svg>
--- a/src/status_im/chat/views/input/animations/expandable.cljs
+++ b/src/status_im/chat/views/input/animations/expandable.cljs
@ -1,5 +1,5 @@
 (ns status-im.chat.views.input.animations.expandable
-  (:require-macros [status-im.utils.views :refer [defview]])
+  (:require-macros [status-im.utils.views :refer [defview letsubs]])
  (:require [reagent.core :as r]
            [reagent.impl.component :as rc]
            [re-frame.core :refer [dispatch subscribe]]
@ -45,12 +45,12 @@
                                   :tension  60}))))))

 (defview overlay-view []
-  [max-height     (subscribe [:get-max-container-area-height])
-   layout-height  (subscribe [:get :layout-height])
-   view-height-to (subscribe [:get :expandable-view-height-to-value])]
-  (let [related-height (/ @view-height-to @max-height)]
-    (when (> related-height 0.6)
-      [animated-view {:style (style/result-box-overlay @layout-height (- related-height (/ 0.4 related-height)))}])))
+  (letsubs [max-height     [:get-max-container-area-height]
+            layout-height  [:get :layout-height]
+            view-height-to [:get :expandable-view-height-to-value]]
+    (let [related-height (/ view-height-to max-height)]
+      (when (> related-height 0.6)
+        [animated-view {:style (style/result-box-overlay layout-height (- related-height (/ 0.4 related-height)))}]))))

 (defn expandable-view [{:keys [key height hide-overlay?]} & _]
  (let [anim-value         (anim/create-value 0)
--- a/src/status_im/components/icons/vector_icons.cljs
+++ b/src/status_im/components/icons/vector_icons.cljs
@ -81,13 +81,19 @@
            (concat
              [svg (merge default-viewbox style)]
              (icon-fn
-                (case color
-                  :dark st/icon-dark-color
-                  :gray st/icon-gray-color
-                  :blue st/color-light-blue
-                  :active st/color-blue4
-                  :white st/color-white
-                  :red st/icon-red-color
+                (cond
+                  (keyword? color)
+                  (case color
+                    :dark st/icon-dark-color
+                    :gray st/icon-gray-color
+                    :blue st/color-light-blue
+                    :active st/color-blue4
+                    :white st/color-white
+                    :red st/icon-red-color
+                    st/icon-dark-color)
+                  (string? color)
+                  color
+                  :else
                  st/icon-dark-color))))
      (throw (js/Error. (str "Unknown icon: " name))))]))

--- a/src/status_im/components/main_tabs.cljs
+++ b/src/status_im/components/main_tabs.cljs
@ -1,119 +0,0 @@
-(ns status-im.components.main-tabs
-  (:require-macros [status-im.utils.views :refer [defview]]
-                   [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 swiper]]
-            [status-im.components.status-bar :refer [status-bar]]
-            [status-im.components.drawer.view :refer [drawer-view]]
-            [status-im.components.tabs.bottom-shadow :refer [bottom-shadow-view]]
-            [status-im.ui.screens.chats-list.views :refer [chats-list]]
-            [status-im.ui.screens.discover.views :refer [discover]]
-            [status-im.ui.screens.contacts.views :refer [contact-groups-list]]
-            [status-im.ui.screens.wallet.main.views :refer [wallet]]
-            [status-im.components.tabs.views :refer [tabs]]
-            [status-im.components.tabs.styles :as st]
-            [status-im.components.styles :as common-st]
-            [status-im.i18n :refer [label]]
-            [cljs.core.async :as a]))
-
-(def tab-list
-  [{:view-id       :wallet
-    :title         (label :t/wallet)
-    :screen        wallet
-    :icon-inactive :icon_wallet_gray
-    :icon-active   :icon_wallet_active}
-   {:view-id       :chat-list
-    :title         (label :t/chats)
-    :screen        chats-list
-    :icon-inactive :icon_chats
-    :icon-active   :icon_chats_active}
-   {:view-id       :discover
-    :title         (label :t/discover)
-    :screen        discover
-    :icon-inactive :icon_discover
-    :icon-active   :icon_discover_active}
-   {:view-id       :contact-list
-    :title         (label :t/contacts)
-    :screen        contact-groups-list
-    :icon-inactive :icon_contacts
-    :icon-active   :icon_contacts_active}])
-
-(def tab->index (reduce #(assoc %1 (:view-id %2) (count %1)) {} tab-list))
-
-(def index->tab (clojure.set/map-invert tab->index))
-
-(defn get-tab-index [view-id]
-  (get tab->index view-id 0))
-
-(defn scroll-to [prev-view-id view-id]
-  (let [p (get-tab-index prev-view-id)
-        n (get-tab-index view-id)]
-    (- n p)))
-
-(defonce scrolling? (atom false))
-
-(defn on-scroll-end [swiped? scroll-ended view-id]
-  (fn [_ state]
-    (when @scrolling?
-      (a/put! scroll-ended true))
-    (let [{:strs [index]} (js->clj state)
-          new-view-id (index->tab index)]
-      (when-not (= view-id new-view-id)
-        (reset! swiped? true)
-        (dispatch [:navigate-to-tab new-view-id])))))
-
-(defn start-scrolling-loop
-  "Loop that synchronizes tabs scrolling to avoid an inconsistent state."
-  [scroll-start scroll-ended]
-  (am/go-loop [[swiper to] (a/<! scroll-start)]
-    ;; start scrolling
-    (reset! scrolling? true)
-    (.scrollBy swiper to)
-    ;; lock loop until scroll ends
-    (a/alts! [scroll-ended (a/timeout 2000)])
-    (reset! scrolling? false)
-    (recur (a/<! scroll-start))))
-
-(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)
-        tabs-were-hidden? (atom @tabs-hidden?)]
-    (r/create-class
-      {:component-did-mount
-       #(start-scrolling-loop scroll-start scroll-ended)
-       :component-will-update
-       (fn []
-         (if @swiped?
-           (reset! swiped? false)
-           (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]))))
-         (reset! tabs-were-hidden? @tabs-hidden?))
-       :display-name "main-tabs"
-       :reagent-render
-       (fn []
-         [view common-st/flex
-          [status-bar {:type (if (= @view-id :wallet) :wallet :main)}]
-          [view common-st/flex
-           [drawer-view
-            [view {:style common-st/flex}
-             [swiper (merge
-                      (st/main-swiper @tabs-hidden?)
-                      {:index                  (get-tab-index @view-id)
-                       :loop                   false
-                       :ref                    #(reset! main-swiper %)
-                       :on-momentum-scroll-end (on-scroll-end swiped? scroll-ended @view-id)})
-              (doall
-                (map-indexed (fn [index {vid :view-id screen :screen}]
-                               ^{:key index} [screen (= @view-id vid)]) tab-list))]
-             [tabs {:style (st/tabs-container @tabs-hidden?)
-                    :selected-view-id @view-id
-                    :tab-list         tab-list}]
-             (when-not @tabs-hidden?
-               [bottom-shadow-view])]]]])})))
--- a/src/status_im/components/styles.cljs
+++ b/src/status_im/components/styles.cljs
@ -19,6 +19,7 @@
 (def color-gray5 "#d9dae1")
 (def color-gray6 "#212121")
 (def color-gray7 "#9fa3b4")
+(def color-gray8 "#6E777E")
 (def color-dark "#49545d")
 (def color-steel "#838b91")
 (def color-white "white")
@ -35,6 +36,7 @@
 (def color-dark-blue-3 "#191f37")
 (def color-light-gray "#EEF2F5")
 (def color-light-gray2 "#ececf0")
+(def color-light-gray3 "#e8ebec")
 (def color-red "red")
 (def color-red-2 "#d84b4b")
 (def color-red-3 "#FFC1BD")
--- a/src/status_im/components/tabs/bottom_shadow.cljs
+++ b/src/status_im/components/tabs/bottom_shadow.cljs
@ -1,12 +0,0 @@
-(ns status-im.components.tabs.bottom-shadow
-  (:require [status-im.components.tabs.styles :as st]
-            [status-im.components.react :refer [linear-gradient]]
-            [status-im.utils.platform :refer [platform-specific]]))
-
-(defn bottom-shadow-view []
-  (when (get-in platform-specific [:tabs :tab-shadows?])
-    [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
-                                   (get-in platform-specific [:component-styles :bottom-gradient]))}]))
--- a/src/status_im/components/tabs/styles.cljs
+++ b/src/status_im/components/tabs/styles.cljs
@ -1,29 +1,24 @@
 (ns status-im.components.tabs.styles
-  (:require [status-im.components.styles :as st]
+  (:require-macros [status-im.utils.styles :refer [defnstyle defstyle]])
+  (:require [status-im.components.styles :as styles]
            [status-im.utils.platform :as p]))


-(def tabs-height (if p/ios? 62 56))
+(def tabs-height (if p/ios? 52 56))
 (def tab-height (dec tabs-height))

-(def bottom-gradient
-  {:position :absolute
-   :bottom   55
-   :left     0
-   :right    0})
-
 (defn tabs-container [hidden?]
  {:position         :absolute
   :bottom           (if hidden? (- tabs-height) 0)
   :left             0
   :right            0
   :height           tabs-height
-   :background-color st/color-white
+   :background-color styles/color-white
   :transform        [{:translateY 1}]})

 (def tabs-container-line
  {:border-top-width 1
-   :border-top-color "#D7D7D7"})
+   :border-top-color styles/color-light-gray3})

 (def tabs-inner-container
  {:flexDirection   :row
@ -38,17 +33,16 @@
   :justifyContent :center
   :alignItems     :center})

-(defn tab-title [active?]
-  {:font-size  (if-not (or active? p/ios?) 12 14)
+(defnstyle tab-title [active?]
+  {:ios        {:font-size 11}
+   :android    {:font-size 12}
+   :margin-top 3
   :min-width  60
   :text-align :center
-   :color      (if active? st/color-light-blue st/color-gray4)})
+   :color      (if active? styles/color-blue4 styles/color-gray8)})

-(def tab-icon
-  {:width        24
-   :height       24
-   :marginBottom 1
-   :align-self   :center})
+(defn tab-icon [active?]
+  {:color (if active? styles/color-blue4 styles/color-gray4)})

 (def tab-container
  {:flex           1
--- a/src/status_im/components/tabs/views.cljs
+++ b/src/status_im/components/tabs/views.cljs
@ -1,32 +1,21 @@
 (ns status-im.components.tabs.views
-  (: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
-                                                touchable-highlight]]
-            [reagent.core :as r]
-            [status-im.components.tabs.styles :as st]
-            [status-im.components.animation :as anim]
-            [status-im.utils.platform :as p]))
+  (:require-macros [status-im.utils.views :refer [defview letsubs]])
+  (:require [re-frame.core :refer [dispatch]]
+            [status-im.components.react :as react]
+            [status-im.components.icons.vector-icons :as vi]
+            [status-im.components.tabs.styles :as styles]))

-(defn tab [{:keys [view-id title icon-active icon-inactive selected-view-id]}]
-  (let [active?   (= view-id selected-view-id)]
-    [touchable-highlight {:style    st/tab
-                          :disabled active?
-                          :on-press  #(dispatch [:navigate-to-tab view-id])}
-     [view {:style st/tab-container}
+(defn- tab [{:keys [view-id title icon-active icon-inactive selected-view-id]}]
+  (let [active? (= view-id selected-view-id)]
+    [react/touchable-highlight {:style    styles/tab
+                                :disabled active?
+                                :on-press  #(dispatch [:navigate-to-tab view-id])}
+     [react/view {:style styles/tab-container}
      (when-let [icon (if active? icon-active icon-inactive)]
-        [view
-         [image {:source {:uri icon}
-                 :style  st/tab-icon}]])
-      [view
-       [text (merge
-               (if-not icon-active {:uppercase? (get-in p/platform-specific [:uppercase?])})
-               {:style (st/tab-title active?)
-                :font  (if (and p/ios? active?) :medium :regular)})
+        [react/view
+         [vi/icon icon (styles/tab-icon active?)]])
+      [react/view
+       [react/text {:style (styles/tab-title active?)}
        title]]]]))

 (defn- create-tab [index data selected-view-id]
@ -35,16 +24,15 @@
                          :selected-view-id selected-view-id})]
    [tab data]))

-(defn- tabs-container [style children]
-  (let [tabs-hidden?    (subscribe [:tabs-hidden?])
-        shadows?        (get-in p/platform-specific [:tabs :tab-shadows?])]
-    [animated-view {:style         (merge style
-                                          (when-not shadows? st/tabs-container-line))
-                    :pointerEvents (if @tabs-hidden? :none :auto)}
+(defview tabs-container [style children]
+  (letsubs [tabs-hidden? [:tabs-hidden?]]
+    [react/animated-view {:style         (merge style
+                                                styles/tabs-container-line)
+                          :pointer-events (if tabs-hidden? :none :auto)}
     children]))

 (defn tabs [{:keys [style tab-list selected-view-id]}]
  [tabs-container style
   (into
-     [view st/tabs-inner-container]
+     [react/view styles/tabs-inner-container]
     (map-indexed #(create-tab %1 %2 selected-view-id) tab-list))])
--- a/src/status_im/ui/screens/main_tabs/views.cljs
+++ b/src/status_im/ui/screens/main_tabs/views.cljs
@ -0,0 +1,113 @@
+(ns status-im.ui.screens.main-tabs.views
+  (:require-macros [status-im.utils.views :as views]
+                   [cljs.core.async.macros :as async-macros])
+  (:require [re-frame.core :as re-frame]
+            [status-im.components.react :as react]
+            [status-im.components.tabs.styles :as styles]
+            [status-im.components.styles :as common-styles]
+            [status-im.i18n :as i18n]
+            [cljs.core.async :as async]
+            [status-im.components.status-bar :refer [status-bar]]
+            [status-im.components.drawer.view :refer [drawer-view]]
+            [status-im.ui.screens.chats-list.views :refer [chats-list]]
+            [status-im.ui.screens.discover.views :refer [discover]]
+            [status-im.ui.screens.contacts.views :refer [contact-groups-list]]
+            [status-im.ui.screens.wallet.main.views :refer [wallet]]
+            [status-im.components.tabs.views :refer [tabs]]))
+
+(def tab-list
+  [{:view-id       :wallet
+    :title         (i18n/label :t/wallet)
+    :screen        wallet
+    :icon-inactive :icons/wallet
+    :icon-active   :icons/wallet-active}
+   {:view-id       :chat-list
+    :title         (i18n/label :t/chats)
+    :screen        chats-list
+    :icon-inactive :icons/chats
+    :icon-active   :icons/chats-active}
+   {:view-id       :discover
+    :title         (i18n/label :t/discover)
+    :screen        discover
+    :icon-inactive :icons/discover
+    :icon-active   :icons/discover-active}
+   {:view-id       :contact-list
+    :title         (i18n/label :t/contacts)
+    :screen        contact-groups-list
+    :icon-inactive :icons/contacts
+    :icon-active   :icons/contacts-active}])
+
+(def tab->index (reduce #(assoc %1 (:view-id %2) (count %1)) {} tab-list))
+
+(def index->tab (clojure.set/map-invert tab->index))
+
+(defn get-tab-index [view-id]
+  (get tab->index view-id 0))
+
+(defn scroll-to [prev-view-id view-id]
+  (let [p (get-tab-index prev-view-id)
+        n (get-tab-index view-id)]
+    (- n p)))
+
+(defonce scrolling? (atom false))
+
+(defn on-scroll-end [swiped? scroll-ended view-id]
+  (fn [_ state]
+    (when @scrolling?
+      (async/put! scroll-ended true))
+    (let [{:strs [index]} (js->clj state)
+          new-view-id (index->tab index)]
+      (when-not (= view-id new-view-id)
+        (reset! swiped? true)
+        (re-frame/dispatch [:navigate-to-tab new-view-id])))))
+
+(defn start-scrolling-loop
+  "Loop that synchronizes tabs scrolling to avoid an inconsistent state."
+  [scroll-start scroll-ended]
+  (async-macros/go-loop [[swiper to] (async/<! scroll-start)]
+    ;; start scrolling
+    (reset! scrolling? true)
+    (.scrollBy swiper to)
+    ;; lock loop until scroll ends
+    (async/alts! [scroll-ended (async/timeout 2000)])
+    (reset! scrolling? false)
+    (recur (async/<! scroll-start))))
+
+(views/defview main-tabs []
+  (views/letsubs [view-id           [:get :view-id]
+                  prev-view-id      [:get :prev-view-id]
+                  tabs-hidden?      [:tabs-hidden?]
+                  main-swiper       (atom nil)
+                  swiped?           (atom false)
+                  scroll-start      (async/chan 10)
+                  scroll-ended      (async/chan 10)
+                  tabs-were-hidden? (atom @tabs-hidden?)]
+    {:component-did-mount
+     (fn []
+       (start-scrolling-loop scroll-start scroll-ended))
+     :component-will-update
+     (fn []
+       (if @swiped?
+         (reset! swiped? false)
+         (when (and (= @tabs-were-hidden? tabs-hidden?) @main-swiper)
+           (let [to (scroll-to prev-view-id view-id)]
+             (async/put! scroll-start [@main-swiper to]))))
+       (reset! tabs-were-hidden? tabs-hidden?))}
+    [react/view common-styles/flex
+     [status-bar {:type (if (= view-id :wallet) :wallet :main)}]
+     [react/view common-styles/flex
+      [drawer-view
+       [react/view {:style common-styles/flex}
+        [react/swiper
+         (merge
+           (styles/main-swiper tabs-hidden?)
+           {:index                  (get-tab-index view-id)
+            :loop                   false
+            :ref                    #(reset! main-swiper %)
+            :on-momentum-scroll-end (on-scroll-end swiped? scroll-ended view-id)})
+         (doall
+           (map-indexed (fn [index {vid :view-id screen :screen}]
+                          ^{:key index} [screen (= view-id vid)]) tab-list))]
+        [tabs {:style (styles/tabs-container tabs-hidden?)
+               :selected-view-id view-id
+               :tab-list         tab-list}]]]]]))
--- a/src/status_im/ui/screens/views.cljs
+++ b/src/status_im/ui/screens/views.cljs
@ -4,7 +4,7 @@
            [status-im.utils.platform :refer [android?]]
            [status-im.components.react :refer [view modal]]
            [status-im.components.styles :as common-styles]
-            [status-im.components.main-tabs :refer [main-tabs]]
+            [status-im.ui.screens.main-tabs.views :refer [main-tabs]]
            [status-im.components.context-menu :refer [menu-context]]

            [status-im.ui.screens.accounts.login.views :refer [login]]
@ -60,12 +60,10 @@
    (when view-id
      (let [current-view (validate-current-view view-id signed-up?)]
        (let [component (case current-view
-                          :wallet main-tabs
+                          (:wallet :chat-list :discover :contact-list) main-tabs
                          :wallet-list wallet-list-screen
                          :wallet-send-transaction send-transaction
-                          :discover main-tabs
                          :discover-search-results discover-search-results
-                          :chat-list main-tabs
                          :new-chat new-chat
                          :new-group new-group
                          :edit-contact-group edit-contact-group
@ -75,7 +73,6 @@
                          :edit-group-contact-list edit-contact-group-contact-list
                          :edit-chat-group-contact-list edit-chat-group-contact-list
                          :new-public-chat new-public-chat
-                          :contact-list main-tabs
                          :contact-toggle-list contact-toggle-list
                          :group-contacts contact-list
                          :reorder-groups reorder-groups
--- a/src/status_im/utils/views.clj
+++ b/src/status_im/utils/views.clj
@ -4,7 +4,7 @@
 (defn atom? [sub]
  (or (vector? sub)
      (and (seq sub)
-           (#{'atom `reagent.core/atom} (first sub)))))
+           (#{`reagent.core/atom} (first sub)))))

 (defn walk-sub [sub form->sym]
  (if (coll? sub)
--- a/test/cljs/status_im/test/components/main_tabs.cljs
+++ b/test/cljs/status_im/test/components/main_tabs.cljs
@ -1,6 +1,6 @@
 (ns status-im.test.components.main-tabs
  (:require [cljs.test :refer-macros [deftest is testing]]
-            [status-im.components.main-tabs :as tabs]))
+            [status-im.ui.screens.main-tabs.views :as tabs]))

 (deftest tab->index
  (is (contains? tabs/tab->index :chat-list))