From 9f5d808702d9512e9f906e7d6f9b18d92dbee8e8 Mon Sep 17 00:00:00 2001 From: Andrey Shovkoplyas Date: Thu, 14 Sep 2017 14:19:32 +0300 Subject: [PATCH] fixes Wallet Request screen UI issues --- src/status_im/android/platform.cljs | 4 ++ src/status_im/components/styles.cljs | 1 + src/status_im/ios/platform.cljs | 3 + .../contacts/contact_list_modal/views.cljs | 2 +- src/status_im/ui/screens/views.cljs | 3 +- .../ui/screens/wallet/components/styles.cljs | 21 ++++-- .../ui/screens/wallet/components/views.cljs | 50 ++++++++------ .../ui/screens/wallet/request/styles.cljs | 2 +- .../ui/screens/wallet/request/views.cljs | 69 ++++++++++--------- .../ui/screens/wallet/transactions/views.cljs | 2 +- 10 files changed, 96 insertions(+), 61 deletions(-) diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index cc162cf3ba..49b9b894cb 100644 --- a/src/status_im/android/platform.cljs +++ b/src/status_im/android/platform.cljs @@ -20,6 +20,10 @@ :modal {:height 0 :bar-style "light-content" :color styles/color-black} + ;;TODO because this bug in RN https://github.com/facebook/react-native/issues/7474 + :modal-white {:height 0 + :bar-style "light-content" + :color styles/color-black} :transaction {:height 0 :bar-style "light-content" :color styles/color-dark-blue-2} diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 8ff40b514e..801c00a85b 100644 --- a/src/status_im/components/styles.cljs +++ b/src/status_im/components/styles.cljs @@ -31,6 +31,7 @@ (def color-white-transparent-2 "#fefefe21") (def color-white-transparent-3 "#FFFFFF1A") (def color-white-transparent-4 "#FFFFFF33") +(def color-white-transparent-5 "#FFFFFF8C") (def color-light-blue "#628fe3") (def color-light-blue-transparent "#628fe333") (def color-light-blue2 "#eff3fc") diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index 9c4d829ebe..59ef5893fb 100644 --- a/src/status_im/ios/platform.cljs +++ b/src/status_im/ios/platform.cljs @@ -18,6 +18,9 @@ :modal {:height 20 :bar-style "light-content" :color "#2f3031"} + :modal-white {:height 20 + :bar-style "default" + :color styles/color-white} :transaction {:height 20 :bar-style "light-content" :color styles/color-transparent} diff --git a/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs b/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs index a54dd78f81..4f84e649b9 100644 --- a/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs +++ b/src/status_im/ui/screens/contacts/contact_list_modal/views.cljs @@ -62,7 +62,7 @@ params [:get :contacts/click-params]] [drawer-view [view {:flex 1} - [status-bar] + [status-bar {:type :modal-white}] [contact-list-modal-toolbar] [list-view {:dataSource (lw/to-datasource contacts) :enableEmptySections true diff --git a/src/status_im/ui/screens/views.cljs b/src/status_im/ui/screens/views.cljs index 03cd3b5bd0..1056abd995 100644 --- a/src/status_im/ui/screens/views.cljs +++ b/src/status_im/ui/screens/views.cljs @@ -45,7 +45,8 @@ [status-im.ui.screens.wallet.send.views :refer [send-transaction]] [status-im.ui.screens.wallet.request.views :refer [request-transaction]] [status-im.ui.screens.wallet.wallet-list.views :refer [wallet-list-screen]] - [status-im.ui.screens.wallet.transactions.views :as wallet-transactions])) + [status-im.ui.screens.wallet.transactions.views :as wallet-transactions] + [status-im.components.status-bar :as status-bar])) (defn validate-current-view [current-view signed-up?] diff --git a/src/status_im/ui/screens/wallet/components/styles.cljs b/src/status_im/ui/screens/wallet/components/styles.cljs index 3e2d16a262..5489b2b501 100644 --- a/src/status_im/ui/screens/wallet/components/styles.cljs +++ b/src/status_im/ui/screens/wallet/components/styles.cljs @@ -18,10 +18,12 @@ :line-height 16 :letter-spacing -0.2}) -(defstyle amount-container +(defnstyle amount-container [active?] {:margin-top 8 :height 52 - :background-color styles/color-white-transparent-3 + :background-color (if active? + styles/color-white-transparent-4 + styles/color-white-transparent-3) :ios {:border-radius 8} :android {:border-radius 4}}) @@ -49,15 +51,22 @@ :android {:border-radius 4}}) (defstyle wallet-container - {:margin-top 8 + {:flex-direction :row + :margin-top 8 :height 52 :background-color styles/color-white-transparent-3 - :justify-content :center + :align-items :center :padding 14 :ios {:border-radius 8} :android {:border-radius 4}}) -(def value +(def wallet-name {:color :white :font-size 15 - :letter-spacing -0.2}) \ No newline at end of file + :letter-spacing -0.2}) + +(def wallet-value + {:padding-left 6 + :color styles/color-white-transparent-5 + :font-size 15 + :letter-spacing -0.2}) diff --git a/src/status_im/ui/screens/wallet/components/views.cljs b/src/status_im/ui/screens/wallet/components/views.cljs index 85c4c2f5ba..7eb6a5bdc3 100644 --- a/src/status_im/ui/screens/wallet/components/views.cljs +++ b/src/status_im/ui/screens/wallet/components/views.cljs @@ -1,21 +1,29 @@ (ns status-im.ui.screens.wallet.components.views + (:require-macros [status-im.utils.views :as views]) (:require [status-im.components.react :as react] [status-im.ui.screens.wallet.components.styles :as styles] - [status-im.i18n :as i18n])) + [status-im.i18n :as i18n] + [reagent.core :as reagent])) (defn amount-input [& [{:keys [input-options style]}]] - [react/view {:flex 1} - [react/text {:style styles/label} (i18n/label :t/amount)] - [react/view (merge styles/amount-container style) - [react/text-input - (merge - {:keyboard-type :numeric - :max-length 15 - :placeholder "0.000" - :placeholder-text-color "#ffffff66" - :selection-color :white - :style styles/text-input} - input-options)]]]) + (let [active? (reagent/atom false) + {:keys [on-focus on-blur]} input-options] + (fn [] + [react/view {:flex 1} + [react/text {:style styles/label} (i18n/label :t/amount)] + [react/view (merge (styles/amount-container @active?) style) + [react/text-input + (merge + {:keyboard-type :numeric + :placeholder "0.000" + :placeholder-text-color "#ffffff66" + :selection-color :white + :style styles/text-input + :on-focus #(do (reset! active? true) + (when on-focus (on-focus))) + :on-blur #(do (reset! active? false) + (when on-blur (on-blur)))} + (dissoc input-options :on-focus :on-blur))]]]))) ;;TODO (andrey) this should be choose component with the list of currencies (defn choose-currency [& [style]] @@ -23,15 +31,17 @@ [react/text {:style styles/label} (i18n/label :t/currency)] [react/view (merge styles/currency-container style) - [react/text {:style styles/value} "ETH"]]]) + [react/text {:style styles/wallet-name} "ETH"]]]) ;;TODO (andrey) this should be choose component with the list of wallets -(defn choose-wallet [& [style]] - [react/view - [react/text {:style styles/label} (i18n/label :t/wallet)] - [react/view (merge styles/wallet-container - style) - [react/text {:style styles/value} "Main wallet"]]]) +(views/defview choose-wallet [& [style]] + (views/letsubs [eth-balance [:eth-balance]] + [react/view + [react/text {:style styles/label} (i18n/label :t/wallet)] + [react/view (merge styles/wallet-container + style) + [react/text {:style styles/wallet-name} "Main wallet"] + [react/text {:style styles/wallet-value} (str eth-balance " ETH")]]])) (defn network-label ([n] (network-label [{} n])) diff --git a/src/status_im/ui/screens/wallet/request/styles.cljs b/src/status_im/ui/screens/wallet/request/styles.cljs index 5b0c5ffcbd..e3f16e33f1 100644 --- a/src/status_im/ui/screens/wallet/request/styles.cljs +++ b/src/status_im/ui/screens/wallet/request/styles.cljs @@ -52,6 +52,6 @@ :font-size 15 :letter-spacing -0.2}) -(def send-request-container +(def button-container {:flex-direction :row :align-items :center}) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/request/views.cljs b/src/status_im/ui/screens/wallet/request/views.cljs index dcc6c62595..4db557d677 100644 --- a/src/status_im/ui/screens/wallet/request/views.cljs +++ b/src/status_im/ui/screens/wallet/request/views.cljs @@ -11,6 +11,7 @@ [status-im.components.icons.vector-icons :as vi] [status-im.ui.screens.wallet.components.views :as components] [status-im.ui.screens.wallet.request.styles :as styles] + [status-im.components.styles :as components.styles] [status-im.i18n :as i18n] [status-im.utils.platform :as platform])) @@ -35,35 +36,41 @@ :fgColor "#4360df" :size 256}])) +(defn button-text [label] + [react/text {:style styles/button-text + :font (if platform/android? :medium :default) + :uppercase? (get-in platform/platform-specific [:uppercase?])} label]) + (views/defview request-transaction [] - [react/keyboard-avoiding-view {:style wallet-styles/wallet-modal-container} - [status-bar/status-bar {:type :wallet}] - [toolbar-view] - [react/view styles/main-container - [react/scroll-view - [react/view styles/network-container - ;;TODO (andrey) name of active network should be used - [components/network-label styles/network-label "Testnet"] - [react/view styles/qr-container - [qr-code]]]] - [react/view styles/choose-wallet-container - [components/choose-wallet]] - [react/view styles/amount-container - [components/amount-input - {:input-options {:on-change-text - #(re-frame/dispatch [:set-in [:wallet/request-transaction :amount] %])}}] - [react/view styles/choose-currency-container - [components/choose-currency styles/choose-currency]]]] - [react/view styles/separator] - [react/view styles/buttons-container - [vi/icon :icons/share {:color :white :container-style styles/share-icon-container}] - [react/text {:style styles/button-text - :font (if platform/android? :medium :default) - :uppercase? (get-in platform/platform-specific [:uppercase?])} (i18n/label :t/share)] - [react/view {:flex 1}] - [react/touchable-highlight {:on-press send-request} - [react/view styles/send-request-container - [react/text {:style styles/button-text - :font (if platform/android? :medium :default) - :uppercase? (get-in platform/platform-specific [:uppercase?])} (i18n/label :t/send-request)] - [vi/icon :icons/forward {:color :white :container-style styles/forward-icon-container}]]]]]) \ No newline at end of file + ;;Because input field is in the end of view we will scroll to the end on input focus event + (views/letsubs [scroll (atom nil)] + [react/keyboard-avoiding-view wallet-styles/wallet-modal-container + [status-bar/status-bar {:type :wallet}] + [toolbar-view] + [react/scroll-view {:ref #(reset! scroll %)} + [react/view styles/main-container + [react/view styles/network-container + ;;TODO (andrey) name of active network should be used + [components/network-label styles/network-label "Testnet"] + [react/view styles/qr-container + [qr-code]]] + [react/view styles/choose-wallet-container + [components/choose-wallet]] + [react/view styles/amount-container + [components/amount-input + {:input-options {:on-focus (fn [] (when @scroll (js/setTimeout #(.scrollToEnd @scroll) 100))) + :on-change-text + #(re-frame/dispatch [:set-in [:wallet/request-transaction :amount] %])}}] + [react/view styles/choose-currency-container + [components/choose-currency styles/choose-currency]]]]] + [react/view styles/separator] + [react/view styles/buttons-container + [react/touchable-highlight {:on-press #()} + [react/view styles/button-container + [vi/icon :icons/share {:color :white :container-style styles/share-icon-container}] + [button-text (i18n/label :t/share)]]] + [react/view components.styles/flex] + [react/touchable-highlight {:on-press send-request} + [react/view styles/button-container + [button-text (i18n/label :t/send-request)] + [vi/icon :icons/forward {:color :white :container-style styles/forward-icon-container}]]]]])) \ No newline at end of file diff --git a/src/status_im/ui/screens/wallet/transactions/views.cljs b/src/status_im/ui/screens/wallet/transactions/views.cljs index add041090e..0e692b6b30 100644 --- a/src/status_im/ui/screens/wallet/transactions/views.cljs +++ b/src/status_im/ui/screens/wallet/transactions/views.cljs @@ -189,6 +189,6 @@ default-view (get-in tabs [0 :view-id]) view-id (reagent/atom default-view)] [react/view {:style styles/flex} - [status-bar/status-bar {:type :modal}] + [status-bar/status-bar {:type :modal-white}] [toolbar-view view-id unsigned-transactions] [main-section view-id tabs]]))