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

New bottom nav design

This commit is contained in:
Roman Volosovskyi 2019-02-22 12:00:59 +02:00
parent 99cf679a4e
commit 82493e2742
No known key found for this signature in database
GPG Key ID: 0238A4B5ECEE70DE
6 changed files with 118 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/status_im/ui/components/bottom_bar/core.cljs
View File

@ -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
:content {:title (i18n/label :t/home)
:icon :main-icons/home}
[{:nav-stack :chat-stack
:content {:title (i18n/label :t/chats)
: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]}]
(fn [active? count]
[react/view {:style tabs.styles/tab-container}
[react/view
[vector-icons/icon icon (tabs.styles/tab-icon active?)]]
[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]]
(defn new-tab
[{:keys [icon label active? nav-stack
accessibility-label count-subscription]}]
(let [count (when count-subscription
(re-frame/subscribe [count-subscription]))]
[react/touchable-highlight
(cond-> {:style common.styles/flex
:disabled active?
:on-press #(re-frame/dispatch [:navigate-to-tab view-id])}
accessibility-label
(assoc :accessibility-label accessibility-label))
{:style tabs.styles/touchable-container
:disabled active?
:on-press #(re-frame/dispatch [:navigate-to nav-stack])
: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}
(for [{:keys [content view-id accessibility-label count-subscription]} tabs-list]
^{:key view-id} [tab view-id content (= view-id current-view-id) accessibility-label count-subscription])])
[react/view
{:style tabs.styles/new-tabs-container}
[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
: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]})}]}}
{:style (tabs.styles/animated-container visible? keyboard-shown?)}
[react/safe-area-view [tabs tab]]])
(def disappearance-duration 150)

91
src/status_im/ui/components/bottom_bar/styles.cljs
View File

@ -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
{:position :absolute
:width 20
:height 20
:border-radius 20
:left 18
:top 10
:justify-content :center
:align-items :center
:background-color colors/blue})
(def touchable-container
{:flex 1
:height tabs-height})
(defn unread-messages-text [large?]
{:color colors/white
:font-size (if large? 10 10.9)})
(def new-tab-container
{:flex 1
: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]})}]})

2
src/status_im/ui/components/common/common.cljs
View File

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

4
src/status_im/ui/components/common/styles.cljs
View File

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

13
src/status_im/ui/screens/chat/actions.cljs
View File

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

7
src/status_im/ui/screens/wallet/actions.cljs
View File

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