status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

reworked main tabs using svg icons [#1748

This commit is contained in:
Andrey Shovkoplyas 2017-09-06 12:30:09 +03:00 committed by Roman Volosovskyi
parent 1a6bfd06a6
commit f88c3feaf6
12 changed files with 173 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/icons/bottom/chats_gray.svg
View File

@ -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>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 987 B

After

Width:  |  Height:  |  Size: 940 B

12
src/status_im/chat/views/input/animations/expandable.cljs
View File

@ -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)]
(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)))}])))
[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)

6
src/status_im/components/icons/vector_icons.cljs
View File

@ -81,6 +81,8 @@
(concat
[svg (merge default-viewbox style)]
(icon-fn
(cond
(keyword? color)
(case color
:dark st/icon-dark-color
:gray st/icon-gray-color
@ -88,6 +90,10 @@
: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))))]))

119
src/status_im/components/main_tabs.cljs
View File

@ -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])]]]])})))

2
src/status_im/components/styles.cljs
View File

@ -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")

12
src/status_im/components/tabs/bottom_shadow.cljs
View File

@ -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]))}]))

30
src/status_im/components/tabs/styles.cljs
View File

@ -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

48
src/status_im/components/tabs/views.cljs
View File

@ -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]}]
(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
[react/touchable-highlight {:style styles/tab
:disabled active?
:on-press #(dispatch [:navigate-to-tab view-id])}
[view {:style st/tab-container}
[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))])

113
src/status_im/ui/screens/main_tabs/views.cljs Normal file
View File

@ -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}]]]]]))

7
src/status_im/ui/screens/views.cljs
View File

@ -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

2
src/status_im/utils/views.clj
View File

@ -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)

2
test/cljs/status_im/test/components/main_tabs.cljs
View File

@ -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))