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

fixes Wallet Request screen UI issues

This commit is contained in:
Andrey Shovkoplyas 2017-09-14 14:19:32 +03:00 committed by Eric Dvorsak
parent 66dd3a2e82
commit 9f5d808702
10 changed files with 96 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/status_im/android/platform.cljs
View File

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

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

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

3
src/status_im/ios/platform.cljs
View File

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

2
src/status_im/ui/screens/contacts/contact_list_modal/views.cljs
View File

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

3
src/status_im/ui/screens/views.cljs
View File

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

19
src/status_im/ui/screens/wallet/components/styles.cljs
View File

@ -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})
(def wallet-value
{:padding-left 6
:color styles/color-white-transparent-5
:font-size 15
:letter-spacing -0.2})

50
src/status_im/ui/screens/wallet/components/views.cljs
View File

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

2
src/status_im/ui/screens/wallet/request/styles.cljs
View File

@ -52,6 +52,6 @@
:font-size 15
:letter-spacing -0.2})
(def send-request-container
(def button-container
{:flex-direction :row
:align-items :center})

69
src/status_im/ui/screens/wallet/request/views.cljs
View File

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

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

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