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

[FIX #1851] Improved iOS wallet UI

This commit is contained in:
Julien Eluard 2017-09-14 18:07:11 +02:00 committed by Eric Dvorsak
parent 9f5d808702
commit 7c82f3f0c3
7 changed files with 109 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/status_im/components/button/styles.cljs
View File

@ -1,61 +1,68 @@
(ns status-im.components.button.styles
(:require-macros [status-im.utils.styles :refer [defstyle]])
(:require [status-im.components.styles :as styles]))
(:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.components.styles :as styles]
[status-im.utils.platform :as platform]))
(def border-color styles/color-white-transparent-2)
(def border-color styles/color-white-transparent-3)
(def border-color-high styles/color-white-transparent-4)
(defstyle button-borders
{:background-color border-color
:android {:border-radius 4}
:ios {:border-radius 8}})
(def action-buttons-container
(merge
button-borders
{:flex-direction :row}))
(def buttons-container {:flex-direction :row})
(def button-container styles/flex)
(def action-button
(defnstyle button [disabled?]
{:flex-direction :row
:justify-content :center
:align-items :center})
:align-items :center
:android {:background-color border-color}
:ios (when-not disabled?
{:background-color border-color})})
(def action-button-center
(merge action-button
{:border-color border-color
:border-left-width 1
:border-right-width 1}))
(defn- border [position]
(let [radius (if platform/ios? 8 4)]
(case position
:first {:border-bottom-left-radius radius
:border-top-left-radius radius
:ios {:border-width 1}}
:last {:border-bottom-right-radius radius
:border-top-right-radius radius
:ios {:border-width 1}}
{:android {:border-left-width 1
:border-right-width 1}
:ios {:border-width 1}})))
(defstyle action-button-text
(defnstyle button-bar [position]
(merge {:border-color border-color}
(border position)))
(defnstyle button-text [disabled?]
{:font-size 15
:font-weight "normal"
:color styles/color-white
:padding-horizontal 16
:android {:padding-vertical 10
:letter-spacing 0.2}
:ios {:padding-vertical 9}})
:android (merge
{:padding-vertical 10
:letter-spacing 0.2}
(when disabled? {:opacity 0.4}))
:ios (merge
{:padding-vertical 13
:letter-spacing -0.2}
(when disabled? {:opacity 0.6}))})
(defstyle button-borders
{:android {:border-radius 4}
:ios {:border-radius 8}})
(def primary-button
(merge
action-button
button-borders
{:background-color styles/color-blue4}))
(def primary-button-text
(merge
action-button-text
{:color styles/color-white}))
(def primary-button-text {:color styles/color-white})
(def secondary-button
(merge
action-button
button-borders
{:background-color styles/color-blue4-transparent}))
(def secondary-button-text
(merge
action-button-text
{:color styles/color-blue4}))
(def action-button-text-disabled {:opacity 0.4})
(def secondary-button-text {:color styles/color-blue4})

31
src/status_im/components/button/view.cljs
View File

@ -1,16 +1,16 @@
(ns status-im.components.button.view
(:require [status-im.components.button.styles :as button.styles]
[status-im.components.react :as rn]
[status-im.utils.platform :as p]))
[status-im.components.react :as react]
[status-im.utils.platform :as platform]))
(defn- button [{:keys [on-press style text text-style disabled?]}]
[rn/touchable-highlight (merge {:style button.styles/button-container} (when (and on-press (not disabled?)) {:on-press on-press}))
[rn/view {:style (merge style button.styles/action-button)}
[rn/text {:style (merge button.styles/action-button-text
text-style
(if disabled? button.styles/action-button-text-disabled))
[react/touchable-highlight (merge {:style button.styles/button-container :underlay-color button.styles/border-color-high} (when (and on-press (not disabled?)) {:on-press on-press}))
[react/view {:style (merge (button.styles/button disabled?)
style)}
[react/text {:style (merge (button.styles/button-text disabled?)
text-style)
:font :medium
:uppercase? p/android?}
:uppercase? platform/android?}
text]]])
(defn primary-button [m]
@ -19,18 +19,17 @@
(defn secondary-button [m]
(button (merge {:style button.styles/secondary-button :text-style button.styles/secondary-button-text} m)))
(defn- first-or-last [i v] (or (zero? i) (= i (dec (count v)))))
(defn- button-style [i v]
(if (first-or-last i v)
button.styles/action-button
button.styles/action-button-center))
(defn- position [i v]
(cond
(zero? i) :first
(= i (dec (count v))) :last
:else :other))
(defn buttons
([v] (buttons nil v))
([{:keys [style button-text-style]} v]
[rn/view {:style (merge button.styles/action-buttons-container style)}
[react/view {:style (merge button.styles/buttons-container style)}
(doall
(map-indexed
(fn [i m] ^{:key i} [button (merge m {:style (button-style i v) :text-style button-text-style})])
(fn [i m] ^{:key i} [button (merge m {:style (button.styles/button-bar (position i v)) :text-style button-text-style})])
v))]))

9
src/status_im/components/list/styles.cljs
View File

@ -44,16 +44,17 @@
(def base-separator
{:height 1
:background-color styles/color-gray5
:opacity 0.5
:margin-top 12
:margin-bottom 16})
:opacity 0.5})
(def separator
(merge
base-separator
{:margin-left 70}))
(def section-separator base-separator)
(defstyle section-separator
(merge base-separator
{:android {:margin-top 12}
:ios {:margin-top 16}}))
(defstyle section-header
{:font-size 14

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

@ -32,6 +32,7 @@
(def color-white-transparent-3 "#FFFFFF1A")
(def color-white-transparent-4 "#FFFFFF33")
(def color-white-transparent-5 "#FFFFFF8C")
(def color-white-transparent-6 "rgba(255, 255, 255, 0.6)")
(def color-light-blue "#628fe3")
(def color-light-blue-transparent "#628fe333")
(def color-light-blue2 "#eff3fc")

28
src/status_im/ui/screens/wallet/main/styles.cljs
View File

@ -43,11 +43,11 @@
;;;;;;;;;;;;;;;;;;
(def main-section
{:padding-vertical 24
:background-color styles/color-blue4})
{:background-color styles/color-blue4})
(def total-balance-container
{:margin-top 18
{:padding-top 20
:padding-bottom 24
:align-items :center
:justify-content :center})
@ -58,20 +58,22 @@
{:font-size 37
:color styles/color-white})
(def total-balance-currency
{:font-size 37
:margin-left 9
:color styles/color-white
:opacity 0.4})
(defstyle total-balance-currency
{:font-size 37
:margin-left 9
:color styles/color-white-transparent-5
:android {:letter-spacing 1.5}
:ios {:letter-spacing 1.16}})
(def value-variation
{:flex-direction :row
:align-items :center})
(def value-variation-title
{:font-size 14
:color styles/color-white
:opacity 0.6})
(defstyle value-variation-title
{:font-size 14
:color styles/color-white-transparent-6
:android {:letter-spacing -0.18}
:ios {:letter-spacing -0.2}})
(def today-variation-container
{:border-radius 100
@ -159,4 +161,4 @@
:width 4
:height 4
:border-radius 2
:background-color styles/color-cyan})
:background-color styles/color-cyan})

66
src/status_im/ui/screens/wallet/main/views.cljs
View File

@ -12,7 +12,6 @@
[status-im.components.toolbar-new.actions :as act]
[status-im.i18n :as i18n]
[status-im.react-native.resources :as resources]
[status-im.utils.config :as config]
[status-im.utils.utils :as utils]
[status-im.ui.screens.wallet.main.styles :as wallet.styles]
[status-im.ui.screens.wallet.views :as wallet.views]))
@ -69,12 +68,10 @@
(i18n/label :t/wallet-total-value)]
[change-display change]]
[btn/buttons {:style wallet.styles/buttons :button-text-style wallet.styles/main-button-text}
[{:text (i18n/label :t/wallet-send)
:on-press show-not-implemented! ;; #(rf/dispatch [:navigate-to :wallet-send-transaction])
:disabled? (not config/wallet-wip-enabled?)}
{:text (i18n/label :t/wallet-request)
:on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])
:disabled? (not config/wallet-wip-enabled?)}
[{:text (i18n/label :t/wallet-send)
:on-press show-not-implemented!}
{:text (i18n/label :t/wallet-request)
:on-press show-not-implemented!}
{:text (i18n/label :t/wallet-exchange)
:disabled? true}]]]])
@ -82,7 +79,16 @@
(case id
"eth" {:source (:ethereum resources/assets) :style (wallet.styles/asset-border styles/color-gray-transparent-light)}))
(defn render-assets-fn [{:keys [id currency amount]}]
(defn add-asset []
[list/touchable-item show-not-implemented!
[react/view
[list/item
[list/item-icon {:icon :icons/add :style wallet.styles/add-asset-icon :icon-opts {:color :blue}}]
[react/view {:style wallet.styles/asset-item-value-container}
[react/text {:style wallet.styles/add-asset-text}
(i18n/label :t/wallet-add-asset)]]]]])
(defn render-asset [{:keys [id currency amount]}]
;; TODO(jeluard) Navigate to asset details screen
#_
[list/touchable-item show-not-implemented!
@ -95,39 +101,27 @@
:uppercase? true}
id]]
[list/item-icon {:icon :icons/forward}]]]]
[react/view
[list/item
(let [{:keys [source style]} (token->image id)]
[list/item-image source style])
[react/view {:style wallet.styles/asset-item-value-container}
[react/text {:style wallet.styles/asset-item-value} (str amount)]
[react/text {:style wallet.styles/asset-item-currency
:uppercase? true}
id]]]])
(defn render-add-asset-fn [{:keys [id currency amount]}]
[list/touchable-item show-not-implemented!
[react/view
[list/item
[list/item-icon {:icon :icons/add :style wallet.styles/add-asset-icon :icon-opts {:color :blue}}]
[react/view {:style wallet.styles/asset-item-value-container}
[react/text {:style wallet.styles/add-asset-text}
(i18n/label :t/wallet-add-asset)]]]]])
(if id
[react/view
[list/item
(let [{:keys [source style]} (token->image id)]
[list/item-image source style])
[react/view {:style wallet.styles/asset-item-value-container}
[react/text {:style wallet.styles/asset-item-value} (str amount)]
[react/text {:style wallet.styles/asset-item-currency
:uppercase? true}
id]]]]
[add-asset]))
(defn asset-section [eth prices-loading? balance-loading?]
(let [assets [{:id "eth" :currency :eth :amount eth}]]
[react/view {:style wallet.styles/asset-section}
[react/text {:style wallet.styles/asset-section-title} (i18n/label :t/wallet-assets)]
[list/section-list
{:sections [{:key :assets
:data assets
:renderItem (list/wrap-render-fn render-assets-fn)}
{:key :add-asset
:data [{}]
:renderItem (list/wrap-render-fn render-add-asset-fn)}]
:render-section-header-fn #()
:on-refresh #(rf/dispatch [:update-wallet])
:refreshing (boolean (or prices-loading? balance-loading?))}]]))
[list/flat-list
{:data (conj assets {}) ;; Extra map triggers rendering for add-asset
:render-fn render-asset
:on-refresh #(rf/dispatch [:update-wallet])
:refreshing (or prices-loading? balance-loading?)}]]))
(defview wallet []
(letsubs [eth-balance [:eth-balance]

2
src/status_im/ui/screens/wallet/transactions/views.cljs
View File

@ -137,7 +137,7 @@
[list/item
[list/item-icon (transaction-type->icon "pending")] ;; TODO(jeluard) add proper token data
[list/item-content label symbol]
[checkbox/checkbox {:checked? true #_checked?}]])
[checkbox/checkbox {:checked? true #_checked?}]])
(defn- item-type [{:keys [id label checked?]}]
[list/item