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 (ns status-im.components.button.styles
(:require-macros [status-im.utils.styles :refer [defstyle]]) (:require-macros [status-im.utils.styles :refer [defstyle defnstyle]])
(:require [status-im.components.styles :as styles])) (: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 (def buttons-container {:flex-direction :row})
{:background-color border-color
:android {:border-radius 4}
:ios {:border-radius 8}})
(def action-buttons-container
(merge
button-borders
{:flex-direction :row}))
(def button-container styles/flex) (def button-container styles/flex)
(def action-button (defnstyle button [disabled?]
{:flex-direction :row {:flex-direction :row
:justify-content :center :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 (defn- border [position]
(merge action-button (let [radius (if platform/ios? 8 4)]
{:border-color border-color (case position
:border-left-width 1 :first {:border-bottom-left-radius radius
:border-right-width 1})) :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-size 15
:font-weight "normal" :font-weight "normal"
:color styles/color-white :color styles/color-white
:padding-horizontal 16 :padding-horizontal 16
:android {:padding-vertical 10 :android (merge
:letter-spacing 0.2} {:padding-vertical 10
:ios {:padding-vertical 9}}) :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 (def primary-button
(merge (merge
action-button
button-borders button-borders
{:background-color styles/color-blue4})) {:background-color styles/color-blue4}))
(def primary-button-text (def primary-button-text {:color styles/color-white})
(merge
action-button-text
{:color styles/color-white}))
(def secondary-button (def secondary-button
(merge (merge
action-button
button-borders button-borders
{:background-color styles/color-blue4-transparent})) {:background-color styles/color-blue4-transparent}))
(def secondary-button-text (def secondary-button-text {:color styles/color-blue4})
(merge
action-button-text
{:color styles/color-blue4}))
(def action-button-text-disabled {:opacity 0.4})

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

@ -1,16 +1,16 @@
(ns status-im.components.button.view (ns status-im.components.button.view
(:require [status-im.components.button.styles :as button.styles] (:require [status-im.components.button.styles :as button.styles]
[status-im.components.react :as rn] [status-im.components.react :as react]
[status-im.utils.platform :as p])) [status-im.utils.platform :as platform]))
(defn- button [{:keys [on-press style text text-style disabled?]}] (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})) [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}))
[rn/view {:style (merge style button.styles/action-button)} [react/view {:style (merge (button.styles/button disabled?)
[rn/text {:style (merge button.styles/action-button-text style)}
text-style [react/text {:style (merge (button.styles/button-text disabled?)
(if disabled? button.styles/action-button-text-disabled)) text-style)
:font :medium :font :medium
:uppercase? p/android?} :uppercase? platform/android?}
text]]]) text]]])
(defn primary-button [m] (defn primary-button [m]
@ -19,18 +19,17 @@
(defn secondary-button [m] (defn secondary-button [m]
(button (merge {:style button.styles/secondary-button :text-style button.styles/secondary-button-text} 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- position [i v]
(cond
(defn- button-style [i v] (zero? i) :first
(if (first-or-last i v) (= i (dec (count v))) :last
button.styles/action-button :else :other))
button.styles/action-button-center))
(defn buttons (defn buttons
([v] (buttons nil v)) ([v] (buttons nil v))
([{:keys [style button-text-style]} 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 (doall
(map-indexed (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))])) v))]))

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

@ -44,16 +44,17 @@
(def base-separator (def base-separator
{:height 1 {:height 1
:background-color styles/color-gray5 :background-color styles/color-gray5
:opacity 0.5 :opacity 0.5})
:margin-top 12
:margin-bottom 16})
(def separator (def separator
(merge (merge
base-separator base-separator
{:margin-left 70})) {: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 (defstyle section-header
{:font-size 14 {: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-3 "#FFFFFF1A")
(def color-white-transparent-4 "#FFFFFF33") (def color-white-transparent-4 "#FFFFFF33")
(def color-white-transparent-5 "#FFFFFF8C") (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 "#628fe3")
(def color-light-blue-transparent "#628fe333") (def color-light-blue-transparent "#628fe333")
(def color-light-blue2 "#eff3fc") (def color-light-blue2 "#eff3fc")

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

@ -43,11 +43,11 @@
;;;;;;;;;;;;;;;;;; ;;;;;;;;;;;;;;;;;;
(def main-section (def main-section
{:padding-vertical 24 {:background-color styles/color-blue4})
:background-color styles/color-blue4})
(def total-balance-container (def total-balance-container
{:margin-top 18 {:padding-top 20
:padding-bottom 24
:align-items :center :align-items :center
:justify-content :center}) :justify-content :center})
@ -58,20 +58,22 @@
{:font-size 37 {:font-size 37
:color styles/color-white}) :color styles/color-white})
(def total-balance-currency (defstyle total-balance-currency
{:font-size 37 {:font-size 37
:margin-left 9 :margin-left 9
:color styles/color-white :color styles/color-white-transparent-5
:opacity 0.4}) :android {:letter-spacing 1.5}
:ios {:letter-spacing 1.16}})
(def value-variation (def value-variation
{:flex-direction :row {:flex-direction :row
:align-items :center}) :align-items :center})
(def value-variation-title (defstyle value-variation-title
{:font-size 14 {:font-size 14
:color styles/color-white :color styles/color-white-transparent-6
:opacity 0.6}) :android {:letter-spacing -0.18}
:ios {:letter-spacing -0.2}})
(def today-variation-container (def today-variation-container
{:border-radius 100 {:border-radius 100
@ -159,4 +161,4 @@
:width 4 :width 4
:height 4 :height 4
:border-radius 2 :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.components.toolbar-new.actions :as act]
[status-im.i18n :as i18n] [status-im.i18n :as i18n]
[status-im.react-native.resources :as resources] [status-im.react-native.resources :as resources]
[status-im.utils.config :as config]
[status-im.utils.utils :as utils] [status-im.utils.utils :as utils]
[status-im.ui.screens.wallet.main.styles :as wallet.styles] [status-im.ui.screens.wallet.main.styles :as wallet.styles]
[status-im.ui.screens.wallet.views :as wallet.views])) [status-im.ui.screens.wallet.views :as wallet.views]))
@ -69,12 +68,10 @@
(i18n/label :t/wallet-total-value)] (i18n/label :t/wallet-total-value)]
[change-display change]] [change-display change]]
[btn/buttons {:style wallet.styles/buttons :button-text-style wallet.styles/main-button-text} [btn/buttons {:style wallet.styles/buttons :button-text-style wallet.styles/main-button-text}
[{:text (i18n/label :t/wallet-send) [{:text (i18n/label :t/wallet-send)
:on-press show-not-implemented! ;; #(rf/dispatch [:navigate-to :wallet-send-transaction]) :on-press show-not-implemented!}
:disabled? (not config/wallet-wip-enabled?)} {:text (i18n/label :t/wallet-request)
{:text (i18n/label :t/wallet-request) :on-press show-not-implemented!}
:on-press #(rf/dispatch [:navigate-to :wallet-request-transaction])
:disabled? (not config/wallet-wip-enabled?)}
{:text (i18n/label :t/wallet-exchange) {:text (i18n/label :t/wallet-exchange)
:disabled? true}]]]]) :disabled? true}]]]])
@ -82,7 +79,16 @@
(case id (case id
"eth" {:source (:ethereum resources/assets) :style (wallet.styles/asset-border styles/color-gray-transparent-light)})) "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 ;; TODO(jeluard) Navigate to asset details screen
#_ #_
[list/touchable-item show-not-implemented! [list/touchable-item show-not-implemented!
@ -95,39 +101,27 @@
:uppercase? true} :uppercase? true}
id]] id]]
[list/item-icon {:icon :icons/forward}]]]] [list/item-icon {:icon :icons/forward}]]]]
[react/view (if id
[list/item [react/view
(let [{:keys [source style]} (token->image id)] [list/item
[list/item-image source style]) (let [{:keys [source style]} (token->image id)]
[react/view {:style wallet.styles/asset-item-value-container} [list/item-image source style])
[react/text {:style wallet.styles/asset-item-value} (str amount)] [react/view {:style wallet.styles/asset-item-value-container}
[react/text {:style wallet.styles/asset-item-currency [react/text {:style wallet.styles/asset-item-value} (str amount)]
:uppercase? true} [react/text {:style wallet.styles/asset-item-currency
id]]]]) :uppercase? true}
id]]]]
(defn render-add-asset-fn [{:keys [id currency amount]}] [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 asset-section [eth prices-loading? balance-loading?] (defn asset-section [eth prices-loading? balance-loading?]
(let [assets [{:id "eth" :currency :eth :amount eth}]] (let [assets [{:id "eth" :currency :eth :amount eth}]]
[react/view {:style wallet.styles/asset-section} [react/view {:style wallet.styles/asset-section}
[react/text {:style wallet.styles/asset-section-title} (i18n/label :t/wallet-assets)] [react/text {:style wallet.styles/asset-section-title} (i18n/label :t/wallet-assets)]
[list/section-list [list/flat-list
{:sections [{:key :assets {:data (conj assets {}) ;; Extra map triggers rendering for add-asset
:data assets :render-fn render-asset
:renderItem (list/wrap-render-fn render-assets-fn)} :on-refresh #(rf/dispatch [:update-wallet])
{:key :add-asset :refreshing (or prices-loading? balance-loading?)}]]))
: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?))}]]))
(defview wallet [] (defview wallet []
(letsubs [eth-balance [:eth-balance] (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
[list/item-icon (transaction-type->icon "pending")] ;; TODO(jeluard) add proper token data [list/item-icon (transaction-type->icon "pending")] ;; TODO(jeluard) add proper token data
[list/item-content label symbol] [list/item-content label symbol]
[checkbox/checkbox {:checked? true #_checked?}]]) [checkbox/checkbox {:checked? true #_checked?}]])
(defn- item-type [{:keys [id label checked?]}] (defn- item-type [{:keys [id label checked?]}]
[list/item [list/item