From 04f4945aafa4a043f99ba82440e20baa1f53cbb9 Mon Sep 17 00:00:00 2001 From: Adrian Tiberius Date: Tue, 5 Jul 2016 21:19:12 +0300 Subject: [PATCH] updated design for login input fields Former-commit-id: af3f21629b64f4de4e4c4fca4543537d44ea99d4 --- .../res/drawable-hdpi/icon_scan_white.png | Bin 0 -> 284 bytes .../res/drawable-mdpi/icon_scan_white.png | Bin 0 -> 188 bytes .../res/drawable-xhdpi/icon_scan_white.png | Bin 0 -> 314 bytes .../res/drawable-xxhdpi/icon_scan_white.png | Bin 0 -> 479 bytes .../res/drawable-xxxhdpi/icon_scan_white.png | Bin 0 -> 668 bytes src/status_im/components/text_field/view.cljs | 2 +- src/status_im/contacts/views/new_contact.cljs | 3 +- src/status_im/login/screen.cljs | 40 +++++++++--------- src/status_im/login/styles.cljs | 12 +++++- .../qr_scanner/views/scan-button.cljs | 19 +++++---- 10 files changed, 45 insertions(+), 31 deletions(-) create mode 100644 android/app/src/main/res/drawable-hdpi/icon_scan_white.png create mode 100644 android/app/src/main/res/drawable-mdpi/icon_scan_white.png create mode 100644 android/app/src/main/res/drawable-xhdpi/icon_scan_white.png create mode 100644 android/app/src/main/res/drawable-xxhdpi/icon_scan_white.png create mode 100644 android/app/src/main/res/drawable-xxxhdpi/icon_scan_white.png diff --git a/android/app/src/main/res/drawable-hdpi/icon_scan_white.png b/android/app/src/main/res/drawable-hdpi/icon_scan_white.png new file mode 100644 index 0000000000000000000000000000000000000000..a9496cb1857881193e088326efefa39b6ecd11cf GIT binary patch literal 284 zcmV+%0ptFOP)Px#)=5M`R7ef&R&5T0APmJ_WjoOB;u+kp?Jm2IUPS-kduB~oq!u@DSwfQnw)OQR zKylvt8+Zh7Q4i(WMTl}R^;<;z&S9_|2}m39#s6C|Fy@iQDfDe-i;sq*MBIR6oof#9 zPq{!-aH_MEDw#HimvMN7B(oXeP6NRmc+PkO@L)!7h@HSI^V0Y$hgI;$6)3%1-th4u zjju0JvkcrKz>zplv8ifL}w4M<&X{V isi09V4N@^#@b5D#tQlVMT{3zJOO2d=|knqyo< z4Sw(>G5*TdZmnA!V&8g=U-s<+7EZ1;{||h5;oP_R;jcu^Vw2RzJZ=?n%&nqQ3af0I lX7U(yOi}4uz2YVpgPln=ZPx#^hrcPR9Fe^SYZx^APCj(9Ce^B@*TXqhe4Z-Xbx;zf1aBY0f9XoDk0~*P~WI~ z8|yB?Xsknh^%^C;!)|1PY)^)LElx4USu^GQsoftLX$?mD?M+V{P-|mE|BgkhlN@>% z72dKeIkXi~&PUVQ{}Y6U#)yC{c!3ZQvJkN3e1>H5lC-t9mt6Wxff7@>TwRxDuPBP0 zul<)eFaiM}00d41zD`Ux|HP1Ap!JOOB|`hho7w^%FGe6_Az;aIhMEzgL}fMCQO(rfTVm7-mHDXpP|&}QivQQxmtTjqRYlHaI&Vo&-jij0Z9I;`4o>5$XwU|?GXMYp M07*qoM6N<$f)fpc8UO$Q literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_scan_white.png b/android/app/src/main/res/drawable-xxhdpi/icon_scan_white.png new file mode 100644 index 0000000000000000000000000000000000000000..9aeeecba40d601b143edba702742a9417132510c GIT binary patch literal 479 zcmV<50U-W~P)Px$nMp)JRA>e5T0xG3Fbsq}^bhTeyWgO1D?Ees?9xhg9oiv5c2|xRi6nMBo&l5) zx_O=tQqNLHsWs&)&Y0)Wkp(`BFXpHz$l(vea#1sx_C1q%b$ejwWztcA99b|c_EX>Y zrYP2pNg@J zdE2LA-U_hsQ!$n?Z~IitTLCtHQ8B$Lexu#umm~Ur#bUy50A@|-Esq4SwjONU2m9jc zzR1Mufe8OAcDNO%*H}N!VnSj=W7u2fvkvcSU=8}<@8Lcr8!cWQ)^3=A0sr4`Ha|~S VhXTcCNt^%x002ovPDHLkV1l--%i90| literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_scan_white.png b/android/app/src/main/res/drawable-xxxhdpi/icon_scan_white.png new file mode 100644 index 0000000000000000000000000000000000000000..8011c4a64d1af599ef76d5bb5578c79b2489e80b GIT binary patch literal 668 zcmeAS@N?(olHy`uVBq!ia0vp^9w5xY1|&n@ZgvM!jKx9jP7LeL$-HD>U<&heaSW+o zd^;yF?~ntJ3#a=F`Bv)-#g~d1u6y)fuon5Dx!37c=cT#@SA@6h_6zS>IyGa@$6NZs z6Xv9eb8lYv+RTj4?3`KA?UPJO-`KLB8gy@!OHwM!V{X1*BmJAXbN}s%Qxo?HKR#V^ zds(L49Lp=BbKhSwx^+{7m%TN)H@wDU%ZZxufD1Q;;#Adazkcb~d{O!8$;QfyKb;%{ z3y!_|`~G+sgGgp>+tGVQM`p+{ZI3XoEW34N_1u3!7pIrR=e9I`kS#yK$S%p>u>IS| z4Cam9QlS%6uZWyYc=q58Usu3|GaQ$ui7OoPZ(!*VP{`BtXy9OcG_46YM~&grEWdgE zE$fcGy;{-M6t#THg@5ZOyL(QL-(Py=L&(>zbGLdQMr>QYP*vNfvsWtj$5;NzA9jfL z#~SuoOxsl8`+QNDG=Frx?{%-8T@4%^n8<;nabaSM+D-q%JZBfXXV2)pZht^B+p=y} zzHCuzT1?BeeBlMt_UG6qzf<&%epvU{>|piM7b26M_H=Lf^|k(z+lk$FRhwR2G@Q@C zDWK?ZCujnLAkz_DRsx(5$7_0?TZ4YHztuHdf74tu|4_Q4behfq*?+gb@xSt3%(aV| zVRqE*e~z`b6S)pGZG9_$rCdb+%_aK{|C^%M@Ul!uUVGxZd(@qzz}b7QZmSRYzj)K0 zoBhj=yluPQ%V##pJiO^r{wLQrci7l&%wBPS<9lf@K5>gr2@>VNgTe~DWM4f D5Yj3X literal 0 HcmV?d00001 diff --git a/src/status_im/components/text_field/view.cljs b/src/status_im/components/text_field/view.cljs index f3757ac1bc..21ca793111 100644 --- a/src/status_im/components/text_field/view.cljs +++ b/src/status_im/components/text_field/view.cljs @@ -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 {} diff --git a/src/status_im/contacts/views/new_contact.cljs b/src/status_im/contacts/views/new_contact.cljs index 2dbe6abc82..c0158168d1 100644 --- a/src/status_im/contacts/views/new_contact.cljs +++ b/src/status_im/contacts/views/new_contact.cljs @@ -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]] diff --git a/src/status_im/login/screen.cljs b/src/status_im/login/screen.cljs index eef2ff99cc..c9de6ac25a 100644 --- a/src/status_im/login/screen.cljs +++ b/src/status_im/login/screen.cljs @@ -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]] diff --git a/src/status_im/login/styles.cljs b/src/status_im/login/styles.cljs index 677c3e7799..8278790c11 100644 --- a/src/status_im/login/styles.cljs +++ b/src/status_im/login/styles.cljs @@ -51,4 +51,14 @@ (def connect-button-text {:color "#7099e6" - :fontSize 16}) \ No newline at end of file + :fontSize 16}) + +(def input-style + {:color :white + :font-size 12}) + +(def scan-label + {:color :white}) + +(def address-input-wrapper + {}) \ No newline at end of file diff --git a/src/status_im/qr_scanner/views/scan-button.cljs b/src/status_im/qr_scanner/views/scan-button.cljs index 9ed1fd39e5..81dae39990 100644 --- a/src/status_im/qr_scanner/views/scan-button.cljs +++ b/src/status_im/qr_scanner/views/scan-button.cljs @@ -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)]]]]) \ No newline at end of file +(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)])]]])) \ No newline at end of file