From c00bc75346a4fd0b19234ecced560145d707bede Mon Sep 17 00:00:00 2001 From: Adrian Tiberius Date: Fri, 10 Jun 2016 03:03:40 +0300 Subject: [PATCH] updated new contact screen; some code cleaning Former-commit-id: e0ce4217bb27ed4f9015833ad19eb3bb441fc79c --- .../res/drawable-hdpi/icon_back_white.png | Bin 0 -> 202 bytes .../src/main/res/drawable-hdpi/icon_qr.png | Bin 0 -> 800 bytes .../res/drawable-mdpi/icon_back_white.png | Bin 0 -> 174 bytes .../src/main/res/drawable-mdpi/icon_qr.png | Bin 0 -> 422 bytes .../res/drawable-xhdpi/icon_back_white.png | Bin 0 -> 233 bytes .../src/main/res/drawable-xhdpi/icon_qr.png | Bin 0 -> 767 bytes .../res/drawable-xxhdpi/icon_back_white.png | Bin 0 -> 370 bytes .../src/main/res/drawable-xxhdpi/icon_qr.png | Bin 0 -> 1596 bytes .../res/drawable-xxxhdpi/icon_back_white.png | Bin 0 -> 467 bytes .../src/main/res/drawable-xxxhdpi/icon_qr.png | Bin 0 -> 1841 bytes src/status_im/components/styles.cljs | 51 ++++++++++- src/status_im/components/toolbar.cljs | 21 ++--- src/status_im/contacts/screen.cljs | 4 +- src/status_im/contacts/styles.cljs | 31 +++---- src/status_im/contacts/views/new_contact.cljs | 81 +++++++++++------- src/status_im/qr_scanner/screen.cljs | 4 +- src/status_im/qr_scanner/styles.cljs | 79 ++++++++++------- .../qr_scanner/views/import-qr-button.cljs | 23 +++++ src/status_im/translations/en.cljs | 14 ++- 19 files changed, 208 insertions(+), 100 deletions(-) create mode 100644 android/app/src/main/res/drawable-hdpi/icon_back_white.png create mode 100644 android/app/src/main/res/drawable-hdpi/icon_qr.png create mode 100644 android/app/src/main/res/drawable-mdpi/icon_back_white.png create mode 100644 android/app/src/main/res/drawable-mdpi/icon_qr.png create mode 100644 android/app/src/main/res/drawable-xhdpi/icon_back_white.png create mode 100644 android/app/src/main/res/drawable-xhdpi/icon_qr.png create mode 100644 android/app/src/main/res/drawable-xxhdpi/icon_back_white.png create mode 100644 android/app/src/main/res/drawable-xxhdpi/icon_qr.png create mode 100644 android/app/src/main/res/drawable-xxxhdpi/icon_back_white.png create mode 100644 android/app/src/main/res/drawable-xxxhdpi/icon_qr.png create mode 100644 src/status_im/qr_scanner/views/import-qr-button.cljs diff --git a/android/app/src/main/res/drawable-hdpi/icon_back_white.png b/android/app/src/main/res/drawable-hdpi/icon_back_white.png new file mode 100644 index 0000000000000000000000000000000000000000..6bd5aec7c425ed9cca7027d64360ea32ccde6fba GIT binary patch literal 202 zcmeAS@N?(olHy`uVBq!ia0vp^+(0bC!3HFwb&h8MDaPU;cPEB*=VV?2IW3+pjv*SN z$q5P!|Nj4f&w50>p@J`NsRJvc!yoRBgAB`)7U*<2Df~AHI~pMp$I{iApdqKkRonQk zg`Iyw?_Fbs`;4md84Y#@JN&>&;M#IFX)3%@8S@EWmLGkBHt yXZ`qJulMaiW7nc~p}3<8o(tN-6#nrZF=wo`ub7p2<#Q^~Jq(_%elF{r5}E+Qlti%r literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-hdpi/icon_qr.png b/android/app/src/main/res/drawable-hdpi/icon_qr.png new file mode 100644 index 0000000000000000000000000000000000000000..6b2f825374b2b58a610c5ff72ec90c72cc97efec GIT binary patch literal 800 zcmV+*1K<3KP)Px%+DSw~R9Fe^mc43KK@i7tjd&p-Xo?gn_zXb^TKG{}N-CR(T`Jo|5QBxSg*HBb zPau*Yh^P_4BC(1VzCa$pGJ-k&{(E-TxqJ7199-lU4$PgI|IF;p-QBZ0b8}GBH1qH# zybmA2B@!;b;^viCB7A4z=kRy<7%tHd!1wU2GzNx>5ZHwjKU56Z1^BSbK*T-{#h~2p zm}udf>EA>J$7^$TkiUq%tZn(?k{+U;$|sO59G2f`-^T%-hHWdfjW^+*k1-wm4Ezc< zdZG#ZnJ5E2Hb)pBcIX%@Y`ZmmZZ5+J9lU-!tO>0+#*QhSR40000Px$U`a$lR5%gUlrc`jKoCW}2&LlyNgFsq?tqkriUMj7JryS)2LTEynn+X>kvK&} z8A>RqsFwH5PBgK-#E#^Gk$z_O&)@N6?b#y6H~=%S0#y^I+@NsAdIDa-H}Iyl_(>@z z(B^G6v)TxU;B(7{59tbi-ji@@1czag@Y{-5UzcR3af&P~Et|C+eQwSA%MyCoG` zQp{|b<2rwesgM;eeU4LcFW9(S{3gX_Y-rVabwbB=GonC0Bxb<23QbW|~ZfPnkF4uYIA!>R6#cM$ f8YRM#Ef^TCMfKf?kCK`ObS{IZtDnm{r-UW|5sOu5 literal 0 HcmV?d00001 diff --git a/android/app/src/main/res/drawable-xhdpi/icon_qr.png b/android/app/src/main/res/drawable-xhdpi/icon_qr.png new file mode 100644 index 0000000000000000000000000000000000000000..c55551f6873e7f30c9e7cc40de6873dc2c84ed73 GIT binary patch literal 767 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 literal 0 HcmV?d00001 diff --git a/src/status_im/components/styles.cljs b/src/status_im/components/styles.cljs index 7625353a19..70e907c631 100644 --- a/src/status_im/components/styles.cljs +++ b/src/status_im/components/styles.cljs @@ -19,6 +19,7 @@ (def text1-color color-black) (def text2-color color-gray) (def text3-color color-blue) +(def text4-color color-white) (def online-color color-blue) (def new-messages-count-color color-blue-transparent) (def chat-background color-light-gray) @@ -37,7 +38,7 @@ {:width 16 :height 12}) -(def search-icon +(def icon-search {:width 17 :height 17}) @@ -46,11 +47,55 @@ :height 22 :color :white}) -(def import-qr-icon - {:margin 4}) +(def icon-back + {:width 8 + :height 14}) + +(def icon-add + {:width 14 + :height 14}) + +(def icon-ok + {:width 18 + :height 14}) + +(def icon-qr + {:width 23 + :height 22}) + +(def icon-plus + {:width 18 + :height 18}) (def form-text-input {:marginLeft -4 :fontSize 14 :fontFamily font :color text1-color}) + +(def white-form-text-input + {:marginLeft -4 + :fontSize 14 + :fontFamily font + :color color-white}) + +(def toolbar-title-container + {:flex 1 + :alignItems :center + :justifyContent :center}) + +(def toolbar-title-text + {:marginTop -2.5 + :color text1-color + :fontSize 16 + :fontFamily font}) + +(def button-input-container + {:flex 1 + :flexDirection :row + :height 50}) + +(def button-input + {:flex 1 + :flexDirection :column + :height 50}) \ No newline at end of file diff --git a/src/status_im/components/toolbar.cljs b/src/status_im/components/toolbar.cljs index 832fa5811e..a757e56dbd 100644 --- a/src/status_im/components/toolbar.cljs +++ b/src/status_im/components/toolbar.cljs @@ -13,6 +13,9 @@ text1-color text2-color toolbar-background1 + toolbar-title-container + toolbar-title-text + icon-back toolbar-height]] [status-im.components.realm :refer [list-view]] [reagent.core :as r])) @@ -34,20 +37,14 @@ [image (:image nav-action)]]] [touchable-highlight {:on-press #(dispatch [:navigate-back])} [view {:width 56 - :height 56} + :height 56 + :alignItems :center + :justifyContent :center} [image {:source {:uri :icon_back} - :style {:marginTop 21 - :marginLeft 23 - :width 8 - :height 14}}]]])) + :style icon-back}]]])) (or custom-content - [view {:style {:flex 1 - :alignItems :center - :justifyContent :center}} - [text {:style {:marginTop -2.5 - :color text1-color - :fontSize 16 - :fontFamily font}} + [view {:style toolbar-title-container} + [text {:style toolbar-title-text} title]]) custom-action (when action diff --git a/src/status_im/contacts/screen.cljs b/src/status_im/contacts/screen.cljs index e1502b171a..a763c2ea50 100644 --- a/src/status_im/contacts/screen.cljs +++ b/src/status_im/contacts/screen.cljs @@ -15,7 +15,7 @@ [status-im.components.icons.ionicons :refer [icon]] [status-im.components.styles :refer [color-blue hamburger-icon - search-icon + icon-search create-icon toolbar-background2]] [status-im.contacts.styles :as st] @@ -32,7 +32,7 @@ :title (label :t/contacts) :background-color toolbar-background2 :action {:image {:source {:uri :icon_search} - :style search-icon} + :style icon-search} :handler (fn [])}}]) (defview contact-list [] diff --git a/src/status_im/contacts/styles.cljs b/src/status_im/contacts/styles.cljs index 4c066ffa7c..4b64148fc9 100644 --- a/src/status_im/contacts/styles.cljs +++ b/src/status_im/contacts/styles.cljs @@ -67,22 +67,19 @@ :fontFamily font :color text1-color}) -(def import-qr-button - {:flex 1 - :height 50 - :alignItems :center - :backgroundColor "#EFF4F6"}) - -(def import-qr-button-content - {:flex 1 - :flexDirection :row - :height 50 - :alignItems :center - :alignSelf :center}) - -(def import-qr-text - {:flexDirection :column}) +; new contact (def contact-form-container - {:flex 1 - :backgroundColor :white}) \ No newline at end of file + {:flex 1 + :color :white}) + +(def gradient-background + {:position :absolute + :top 0 + :right 0 + :bottom 0 + :left 0}) + +(def form-container + {:marginLeft 16 + :margin-top 50}) \ No newline at end of file diff --git a/src/status_im/contacts/views/new_contact.cljs b/src/status_im/contacts/views/new_contact.cljs index d14c4f8dd8..469ed6b914 100644 --- a/src/status_im/contacts/views/new_contact.cljs +++ b/src/status_im/contacts/views/new_contact.cljs @@ -4,56 +4,75 @@ [status-im.components.react :refer [view text text-input + image + linear-gradient touchable-highlight]] [status-im.components.toolbar :refer [toolbar]] [status-im.components.drawer.view :refer [drawer-view open-drawer]] - [status-im.components.icons.ionicons :refer [icon]] [status-im.components.styles :refer [color-purple - search-icon - import-qr-icon + color-white + icon-search + icon-back + icon-qr toolbar-background1 - form-text-input]] + toolbar-title-container + toolbar-title-text + button-input-container + button-input + white-form-text-input]] + [status-im.qr-scanner.views.import-button :refer [import-button]] [status-im.i18n :refer [label]] [status-im.contacts.styles :as st])) -(defn import-qr-button [] - [touchable-highlight - {:on-press #(dispatch [:scan-qr-code {:toolbar-title (label :t/new-contact)} :set-new-contact-from-qr])} - [view st/import-qr-button - [view st/import-qr-button-content - [icon {:name :qr-scanner - :style import-qr-icon}] - [text {:style st/import-qr-text} (label :t/import-qr)]]]]) + + +(def toolbar-title + [view toolbar-title-container + [text {:style (merge toolbar-title-text {:color color-white})} + (label :t/new-contact)]]) (defview contact-name-input [name] [] [text-input - {:underlineColorAndroid color-purple - :style form-text-input + {:underlineColorAndroid color-white + :placeholderTextColor color-white + :style white-form-text-input :autoFocus true :placeholder (label :t/contact-name) :onChangeText #(dispatch [:set-in [:new-contact :name] %])} name]) -(defview contact-address-input [address] - [text-input - {:underlineColorAndroid color-purple - :style form-text-input - :autoFocus true - :placeholder (label :t/contact-address) - :onChangeText #(dispatch [:set-in [:new-contact :address] %])} - address]) +(defview contact-whisper-id-input [whisper-identity] + [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/whisper-identity) + :onChangeText #(dispatch [:set-in [:new-contact :whisper-identity] %])} + whisper-identity] + [import-button #(dispatch [:scan-qr-code {:toolbar-title (label :t/new-contact)} :set-new-contact-from-qr])]]) (defview new-contact [] - [{:keys [name address whisper-identity phone-number] :as new-contact} [:get :new-contact]] + [{:keys [name whisper-identity phone-number] :as new-contact} [:get :new-contact]] [drawer-view [view st/contact-form-container - [toolbar {:title (label :t/new-contact) - :background-color toolbar-background1 - :action {:image {:source {:uri :icon_add_gray} - :style search-icon} + [linear-gradient {:colors ["rgba(182, 116, 241, 1)" "rgba(107, 147, 231, 1)" "rgba(43, 171, 238, 1)"] + :start [0, 0] + :end [0.5, 1] + :locations [0, 0.8 ,1] + :style st/gradient-background}] + + [toolbar {:background-color :transparent + :nav-action {:image {:source {:uri :icon_back_white} + :style icon-back} + :handler #(dispatch [:navigate-back])} + :custom-content toolbar-title + :action {:image {:source {:uri :icon_add} + :style icon-search} :handler #(dispatch [:add-new-contact new-contact])}}] - [import-qr-button] - [contact-name-input name] - [contact-address-input address] - [text (str "Whisper identity: " whisper-identity)]]]) + [view st/form-container + [contact-whisper-id-input whisper-identity] + [contact-name-input name] + ]]]) diff --git a/src/status_im/qr_scanner/screen.cljs b/src/status_im/qr_scanner/screen.cljs index dd2742a04b..2f27d30b9f 100644 --- a/src/status_im/qr_scanner/screen.cljs +++ b/src/status_im/qr_scanner/screen.cljs @@ -5,7 +5,7 @@ image]] [status-im.components.camera :refer [camera]] [status-im.components.styles :refer [toolbar-background1 - search-icon]] + icon-search]] [status-im.components.toolbar :refer [toolbar]] [status-im.qr-scanner.styles :as st] [status-im.utils.types :refer [json->clj]])) @@ -14,7 +14,7 @@ [toolbar {:title title :background-color toolbar-background1 :action {:image {:source {:uri :icon_lock_white} - :style search-icon} + :style icon-search} :handler #()}}]) (defview qr-scanner [] diff --git a/src/status_im/qr_scanner/styles.cljs b/src/status_im/qr_scanner/styles.cljs index 687854a3d8..05198031b1 100644 --- a/src/status_im/qr_scanner/styles.cljs +++ b/src/status_im/qr_scanner/styles.cljs @@ -1,59 +1,76 @@ (ns status-im.qr-scanner.styles - (:require [status-im.components.styles :refer [toolbar-height]])) + (:require [status-im.components.styles :refer [toolbar-height + color-white]])) (def barcode-scanner-container {:flex 1 :backgroundColor :white}) (def barcode-scanner - {:flex 1 + {:flex 1 :justifyContent :flex-end - :alignItems :center}) + :alignItems :center}) (def rectangle-container - {:position :absolute - :left 0 - :top toolbar-height - :bottom 0 - :right 0 - :flex 1 - :alignItems :center - :justifyContent :center + {:position :absolute + :left 0 + :top toolbar-height + :bottom 0 + :right 0 + :flex 1 + :alignItems :center + :justifyContent :center :backgroundColor :transparent}) (def rectangle - {:height 250 - :width 250 + {:height 250 + :width 250 :backgroundColor :transparent}) (def corner-left-top {:position :absolute - :left 0 - :top 0 - :width 56 - :height 56}) + :left 0 + :top 0 + :width 56 + :height 56}) (def corner-right-top {:position :absolute - :right 0 - :top 0 - :width 56 - :height 56}) + :right 0 + :top 0 + :width 56 + :height 56}) (def corner-right-bottom {:position :absolute - :right 0 - :bottom 0 - :width 56 - :height 56}) + :right 0 + :bottom 0 + :width 56 + :height 56}) (def corner-left-bottom {:position :absolute - :left 0 - :bottom 0 - :width 56 - :height 56}) + :left 0 + :bottom 0 + :width 56 + :height 56}) +(def import-button + {:position :absolute + :right 16 + :flex 1 + :height 50 + :alignItems :center}) -;:width 56 -;:height 56 \ No newline at end of file +(def import-button-content + {:flex 1 + :flexDirection :row + :height 50 + :alignItems :center + :alignSelf :center}) + +(def import-text + {:flex 1 + :flexDirection :column + :color color-white + :margin-left 8}) diff --git a/src/status_im/qr_scanner/views/import-qr-button.cljs b/src/status_im/qr_scanner/views/import-qr-button.cljs new file mode 100644 index 0000000000..99b7dbc7b7 --- /dev/null +++ b/src/status_im/qr_scanner/views/import-qr-button.cljs @@ -0,0 +1,23 @@ +(ns status-im.qr-scanner.views.import-button + (:require-macros [status-im.utils.views :refer [defview]]) + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [status-im.components.react :refer [view + text + image + touchable-highlight]] + [status-im.components.toolbar :refer [toolbar]] + [status-im.components.drawer.view :refer [drawer-view open-drawer]] + [status-im.components.styles :refer [icon-qr]] + [status-im.i18n :refer [label]] + [status-im.qr-scanner.styles :as st])) + + +(defview import-button [handler] + [] + [view st/import-button + [touchable-highlight + {:on-press handler} + [view st/import-button-content + [image {:source {:uri :icon_qr} + :style icon-qr}] + [text {:style st/import-text} (label :t/import-qr)]]]]) \ No newline at end of file diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index cf3424d440..37fac291a0 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -115,8 +115,18 @@ :You "You" ;new-contact - :import-qr "Import from QR" + :import-qr "Import" :contact-name "Contact Name" - :contact-address "Contact Address" + :whisper-identity "Whisper Identity" + + ;login + :recover-from-passphrase "Recover from passphrase" + :connect "Connect" + :address "Address" + :password "Password" + :login "Login" + + ;users + :add-account "Add account" }) \ No newline at end of file