updated design for login input fields

Former-commit-id: af3f21629b
This commit is contained in:
Adrian Tiberius 2016-07-05 21:19:12 +03:00
parent 28e9a3c766
commit 04f4945aaf
10 changed files with 45 additions and 31 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 314 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 479 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 668 B

View File

@ -18,7 +18,7 @@
(def config {:label-top 16
:label-bottom 37
:label-font-large 16
:label-font-small 12
:label-font-small 13
:label-animation-duration 200})
(def default-props {:wrapperStyle {}

View File

@ -57,7 +57,8 @@
:wrapperStyle (merge button-input)
:label (label :t/address)
:onChangeText #(dispatch [:set-in [:new-contact :whisper-identity] %])}]
[scan-button #(dispatch [:scan-qr-code {:toolbar-title (label :t/new-contact)} :set-new-contact-from-qr])]]))
[scan-button {:showLabel (zero? (count whisper-identity))
:handler #(dispatch [:scan-qr-code {:toolbar-title (label :t/new-contact)} :set-new-contact-from-qr])}]]))
(defview new-contact []
[{:keys [name whisper-identity phone-number] :as new-contact} [:get :new-contact]]

View File

@ -8,6 +8,7 @@
linear-gradient
touchable-highlight]]
[status-im.components.toolbar :refer [toolbar]]
[status-im.components.text-field.view :refer [text-field]]
[status-im.components.styles :refer [color-purple
color-white
icon-search
@ -19,7 +20,7 @@
button-input-container
button-input
white-form-text-input]]
[status-im.qr-scanner.views.import-button :refer [import-button]]
[status-im.qr-scanner.views.scan-button :refer [scan-button]]
[status-im.i18n :refer [label]]
[status-im.login.styles :as st]))
@ -30,26 +31,27 @@
(defview address-input [address]
[view button-input-container
[text-input
{:underlineColorAndroid color-white
:placeholderTextColor color-white
:style (merge white-form-text-input button-input)
:autoFocus true
:placeholder (label :t/address)
:onChangeText #(dispatch [:set-in [:login :address] %])}
address]
[import-button #(dispatch [:scan-qr-code {:toolbar-title (label :t/login)} :set-address-from-qr])]])
[text-field
{:value address
:label (label :t/address)
:labelColor "#ffffff80"
:lineColor :white
:inputStyle st/input-style
:wrapperStyle (merge button-input st/address-input-wrapper)
:onChangeText #(dispatch [:set-in [:login :address] %])}]
[scan-button {:labelStyle st/scan-label
:icon :icon_scan_white
:showLabel (zero? (count address))
:handler #(dispatch [:scan-qr-code {:toolbar-title (label :t/login)} :set-address-from-qr])}]])
(defview password-input []
[]
[text-input
{:underlineColorAndroid color-white
:placeholderTextColor color-white
:style white-form-text-input
:autoFocus true
:placeholder (label :t/password)
:onChangeText #(dispatch [:set-in [:login :password] %])}
""])
[text-field
{:value ""
:label (label :t/password)
:labelColor "#ffffff80"
:lineColor :white
:inputStyle st/input-style
:onChangeText #(dispatch [:set-in [:login :password] %])}])
(defview login []
[{:keys [address password]} [:get :login]]

View File

@ -52,3 +52,13 @@
(def connect-button-text
{:color "#7099e6"
:fontSize 16})
(def input-style
{:color :white
:font-size 12})
(def scan-label
{:color :white})
(def address-input-wrapper
{})

View File

@ -12,12 +12,13 @@
[status-im.qr-scanner.styles :as st]))
(defview scan-button [handler]
[]
[view st/scan-button
[touchable-highlight
{:on-press handler}
[view st/scan-button-content
[image {:source {:uri :scan_blue}
:style icon-scan}]
[text {:style st/scan-text} (label :t/scan-qr)]]]])
(defview scan-button [{:keys [showLabel icon labelStyle handler]}]
(let [showLabel (if (nil? showLabel) true showLabel)]
[view st/scan-button
[touchable-highlight
{:on-press handler}
[view st/scan-button-content
[image {:source {:uri (or icon :scan_blue)}
:style icon-scan}]
(when showLabel [text {:style (merge st/scan-text labelStyle)}
(label :t/scan-qr)])]]]))