From 7c82f3f0c3753be97c7161b1575c3c95ba2a7fb4 Mon Sep 17 00:00:00 2001 From: Julien Eluard Date: Thu, 14 Sep 2017 18:07:11 +0200 Subject: [PATCH] [FIX #1851] Improved iOS wallet UI --- src/status_im/components/button/styles.cljs | 77 ++++++++++--------- src/status_im/components/button/view.cljs | 31 ++++---- src/status_im/components/list/styles.cljs | 9 ++- src/status_im/components/styles.cljs | 1 + .../ui/screens/wallet/main/styles.cljs | 28 +++---- .../ui/screens/wallet/main/views.cljs | 66 ++++++++-------- .../ui/screens/wallet/transactions/views.cljs | 2 +- 7 files changed, 109 insertions(+), 105 deletions(-) diff --git a/src/status_im/components/button/styles.cljs b/src/status_im/components/button/styles.cljs index b680130257..2152edd471 100644 --- a/src/status_im/components/button/styles.cljs +++ b/src/status_im/components/button/styles.cljs @@ -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}) \ No newline at end of file +(def secondary-button-text {:color styles/color-blue4}) \ No newline at end of file diff --git a/src/status_im/components/button/view.cljs b/src/status_im/components/button/view.cljs index 32e35a5649..daba665820 100644 --- a/src/status_im/components/button/view.cljs +++ b/src/status_im/components/button/view.cljs @@ -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))])) \ No newline at end of file diff --git a/src/status_im/components/list/styles.cljs b/src/status_im/components/list/styles.cljs index 22431054ef..64eb412451 100644 --- a/src/status_im/components/list/styles.cljs +++ b/src/status_im/components/list/styles.cljs @@ -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 diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 801c00a85b..1bd4382fcd 100644 --- a/src/status_im/components/styles.cljs +++ b/src/status_im/components/styles.cljs @@ -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") diff --git a/src/status_im/ui/screens/wallet/main/styles.cljs b/src/status_im/ui/screens/wallet/main/styles.cljs index 0c6b51b011..30c3024275 100644 --- a/src/status_im/ui/screens/wallet/main/styles.cljs +++ b/src/status_im/ui/screens/wallet/main/styles.cljs @@ -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}) \ No newline at end of file + :background-color styles/color-cyan}) diff --git a/src/status_im/ui/screens/wallet/main/views.cljs b/src/status_im/ui/screens/wallet/main/views.cljs index d4e2f0a74f..40f520b089 100644 --- a/src/status_im/ui/screens/wallet/main/views.cljs +++ b/src/status_im/ui/screens/wallet/main/views.cljs @@ -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] diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index 0e692b6b30..6275c4524c 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -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