From cdfa395b34e556ce8e4e19fb2154acd8732e88e7 Mon Sep 17 00:00:00 2001 From: Alexander Pantyuhov Date: Thu, 17 Nov 2016 15:02:55 +0300 Subject: [PATCH] Updated QR code layout and #462 fix --- src/status_im/accounts/handlers.cljs | 10 ++- src/status_im/accounts/styles.cljs | 29 +++++---- src/status_im/accounts/views/qr_code.cljs | 64 +++++++++++++++++++ .../accounts/views/wallet_qr_code.cljs | 44 ------------- src/status_im/android/core.cljs | 4 +- src/status_im/android/platform.cljs | 5 +- .../chat/handlers/webview_bridge.cljs | 7 +- src/status_im/contacts/screen.cljs | 5 +- src/status_im/contacts/views/contact.cljs | 6 +- .../contacts/views/contact_list.cljs | 3 +- src/status_im/ios/core.cljs | 4 +- src/status_im/ios/platform.cljs | 5 +- src/status_im/profile/screen.cljs | 33 +++------- 13 files changed, 120 insertions(+), 99 deletions(-) create mode 100644 src/status_im/accounts/views/qr_code.cljs delete mode 100644 src/status_im/accounts/views/wallet_qr_code.cljs diff --git a/src/status_im/accounts/handlers.cljs b/src/status_im/accounts/handlers.cljs index 51ab478c95..cbace9d4d4 100644 --- a/src/status_im/accounts/handlers.cljs +++ b/src/status_im/accounts/handlers.cljs @@ -17,7 +17,8 @@ [status-im.accounts.statuses :as statuses] [status-im.utils.gfycat.core :refer [generate-gfy]] [status-im.constants :refer [console-chat-id]] - [status-im.utils.scheduler :as s])) + [status-im.utils.scheduler :as s] + [status-im.navigation.handlers :as nav])) (defn save-account [_ [_ account]] @@ -140,3 +141,10 @@ db)) (register-handler :console-create-account console-create-account) + +(defmethod nav/preload-data! :qr-code-view + [{:keys [current-account-id] :as db} [_ _ {:keys [contact qr-source amount?]}]] + (assoc db :qr-modal {:contact (or contact + (get-in db [:accounts current-account-id])) + :qr-source qr-source + :amount? amount?})) diff --git a/src/status_im/accounts/styles.cljs b/src/status_im/accounts/styles.cljs index 50725db89a..ddda65d485 100644 --- a/src/status_im/accounts/styles.cljs +++ b/src/status_im/accounts/styles.cljs @@ -49,6 +49,11 @@ :alignItems :center :justifyContent :center}) +(def qr-photo-container + (merge photo-container + {:margin-left 8 + :margin-right 4})) + (def photo-image {:width 36 :height 36 @@ -121,8 +126,7 @@ :flex-direction :column}) (def account-toolbar - {:background-color "#2f3031" - :padding-bottom 45}) + {:background-color "#2f3031"}) (def wallet-account-container {:flex 1 @@ -132,21 +136,18 @@ :justifyContent :center}) (def qr-code - {:align-items :center - :padding-vertical 40}) + {:background-color "#2f3031" + :flex 1 + :align-items :center + :justify-content :center}) (def footer - {:position :absolute - :left 0 - :right 0 - :bottom 0 - :height 166 - :background-color "#2f3031"}) + {:background-color "#2f3031"}) (def wallet-info {:align-items :center - :padding-top 42 - :padding-bottom 20}) + :padding-bottom 20 + :padding-top 20}) (def wallet-name-text {:color color-white @@ -160,8 +161,8 @@ {:flex 1 :flex-direction :column :align-items :center - :height 60 - :padding-top 20 + :justify-content :center + :height 51 :background-color "#7597e4"}) (def done-button-text diff --git a/src/status_im/accounts/views/qr_code.cljs b/src/status_im/accounts/views/qr_code.cljs new file mode 100644 index 0000000000..a48b96ab7e --- /dev/null +++ b/src/status_im/accounts/views/qr_code.cljs @@ -0,0 +1,64 @@ +(ns status-im.accounts.views.qr-code + (:require-macros [status-im.utils.views :refer [defview]]) + (:require [status-im.components.react :refer [view + text + image + touchable-highlight + get-dimensions]] + [status-im.components.status-bar :refer [status-bar]] + [status-im.components.styles :refer [icon-close]] + [status-im.components.qr-code :refer [qr-code]] + [re-frame.core :refer [dispatch subscribe]] + [status-im.accounts.styles :as st] + [status-im.i18n :refer [label]] + [clojure.string :as s] + [reagent.core :as r])) + +(defview qr-code-view [] + [{:keys [photo-path address name] :as contact} [:get-in [:qr-modal :contact]] + {:keys [qr-source amount? dimensions]} [:get :qr-modal] + {:keys [amount]} [:get :contacts-click-params]] + [view st/wallet-qr-code + [status-bar {:type :modal}] + + [view st/account-toolbar + [view st/wallet-account-container + [view st/qr-photo-container + [view st/account-photo-container + [image {:source {:uri (if (s/blank? photo-path) :avatar photo-path)} + :style st/photo-image}]]] + [view st/name-container + [text {:style st/name-text + :number-of-lines 1} name]] + [view st/online-container + [touchable-highlight {:onPress #(dispatch [:navigate-back])} + [image {:source {:uri :icon_close_white} + :style icon-close}]]]]] + + [view {:style st/qr-code + :on-layout #(let [layout (.. % -nativeEvent -layout)] + (dispatch [:set-in [:qr-modal :dimensions] {:width (.-width layout) + :height (.-height layout)}]))} + (when (:width dimensions) + [view {:style {:background-color "white" + :width (:width dimensions) + :align-items :center + :justify-content :center + :padding 40}} + [qr-code {:value (if amount? + (prn-str {:address (get contact qr-source) + :amount amount}) + (str "ethereum:" (get contact qr-source))) + :size (- (min (:width dimensions) + (:height dimensions)) + 80)}]])] + + [view st/footer + [view st/wallet-info + [text {:style st/wallet-name-text} (label :t/main-wallet)] + [text {:style st/wallet-address-text} address]] + + [touchable-highlight {:onPress #(dispatch [:navigate-back])} + [view st/done-button + [text {:style st/done-button-text} (label :t/done)]]]]]) + diff --git a/src/status_im/accounts/views/wallet_qr_code.cljs b/src/status_im/accounts/views/wallet_qr_code.cljs deleted file mode 100644 index 8fad10fc0c..0000000000 --- a/src/status_im/accounts/views/wallet_qr_code.cljs +++ /dev/null @@ -1,44 +0,0 @@ -(ns status-im.accounts.views.wallet-qr-code - (:require-macros [status-im.utils.views :refer [defview]]) - (:require [status-im.components.react :refer [view - text - image - touchable-highlight]] - [status-im.components.styles :refer [icon-close]] - [status-im.components.qr-code :refer [qr-code]] - [re-frame.core :refer [dispatch subscribe]] - [status-im.accounts.styles :as st] - [status-im.i18n :refer [label]] - [clojure.string :as s])) - - -(defview wallet-qr-code [] - [{:keys [address photo-path name] :as account} [:get-current-account] - {:keys [amount]} [:get :contacts-click-params]] - [view st/wallet-qr-code - [view st/account-toolbar - [view st/wallet-account-container - [view st/photo-container - [view st/account-photo-container - [image {:source {:uri (if (s/blank? photo-path) :avatar photo-path)} - :style st/photo-image}]]] - [view st/name-container - [text {:style st/name-text - :number-of-lines 1} name]] - [view st/online-container - [touchable-highlight {:onPress #(dispatch [:navigate-back])} - [image {:source {:uri :icon-close-white} - :style icon-close}]]]]] - [view st/qr-code - [qr-code {:value (prn-str {:address address - :amount amount}) - :size 200}]] - [view st/footer - [view st/wallet-info - [text {:style st/wallet-name-text} (label :t/main-wallet)] - [text {:style st/wallet-address-text} address]] - - [touchable-highlight {:onPress #(dispatch [:navigate-back])} - [view st/done-button - [text {:style st/done-button-text} (label :t/done)]]]]]) - diff --git a/src/status_im/android/core.cljs b/src/status_im/android/core.cljs index a41dbcde48..0e8832d811 100644 --- a/src/status_im/android/core.cljs +++ b/src/status_im/android/core.cljs @@ -32,7 +32,7 @@ [taoensso.timbre :as log] [status-im.components.status :as status] [status-im.chat.styles.screen :as st] - [status-im.accounts.views.wallet-qr-code :refer [wallet-qr-code]])) + [status-im.accounts.views.qr-code :refer [qr-code-view]])) (defn init-back-button-handler! [] (let [new-listener (fn [] @@ -117,7 +117,7 @@ :on-request-close #(dispatch [:navigate-back])} (let [component (case @modal-view :qr-scanner qr-scanner - :wallet-qr-code wallet-qr-code + :qr-code-view qr-code-view :confirm confirm :contact-list-modal contact-list)] [component])]])]))))}))) diff --git a/src/status_im/android/platform.cljs b/src/status_im/android/platform.cljs index b145dd6885..7be79f89fd 100644 --- a/src/status_im/android/platform.cljs +++ b/src/status_im/android/platform.cljs @@ -13,7 +13,10 @@ :transparent {:height 20 :bar-style "light-content" :translucent? true - :color styles/color-transparent}} + :color styles/color-transparent} + :modal {:height 0 + :bar-style "light-content" + :color styles/color-black}} :sized-text {:margin-top 0 :additional-height 0} :chat {:new-message {:border-top-color styles/color-transparent diff --git a/src/status_im/chat/handlers/webview_bridge.cljs b/src/status_im/chat/handlers/webview_bridge.cljs index 5af7dcd26f..d9e8be2a28 100644 --- a/src/status_im/chat/handlers/webview_bridge.cljs +++ b/src/status_im/chat/handlers/webview_bridge.cljs @@ -38,13 +38,14 @@ (fn [db [_ bridge]] (assoc db :webview-bridge bridge))) -(defn contacts-click-handler [whisper-identity action params] +(defn contacts-click-handler [{:keys [whisper-identity] :as contact} action params] (dispatch [:navigate-back]) (when action - (if (= whisper-identity :qr-scan) + (if (= contact :qr-scan) (if (= action :send) (dispatch [:show-scan-qr :webview-address-from-qr]) - (dispatch [:navigate-to-modal :wallet-qr-code])) + (dispatch [:navigate-to-modal :qr-code-view {:qr-source :whisper-identity + :amount? true}])) (dispatch [:chat-with-command whisper-identity action params])))) (register-handler ::send-command diff --git a/src/status_im/contacts/screen.cljs b/src/status_im/contacts/screen.cljs index f13b3d49e7..f050da9a15 100644 --- a/src/status_im/contacts/screen.cljs +++ b/src/status_im/contacts/screen.cljs @@ -82,10 +82,9 @@ [view (doall (map (fn [contact] - (let [whisper-identity (:whisper-identity contact) - click-handler (or click-handler on-press)] + (let [click-handler (or click-handler on-press)] ^{:key contact} - [contact-extended-view contact nil (click-handler whisper-identity) nil])) + [contact-extended-view contact nil (click-handler contact) nil])) contacts))] (when (<= contacts-limit (count contacts)) [view st/show-all diff --git a/src/status_im/contacts/views/contact.cljs b/src/status_im/contacts/views/contact.cljs index 0f1ae659d0..2c1fb16980 100644 --- a/src/status_im/contacts/views/contact.cljs +++ b/src/status_im/contacts/views/contact.cljs @@ -5,7 +5,7 @@ [status-im.contacts.styles :as st] [status-im.contacts.views.contact-inner :refer [contact-inner-view]])) -(defn on-press [whisper-identity] +(defn on-press [{:keys [whisper-identity]}] #(dispatch [:start-chat whisper-identity {} :navigation-replace])) (defn letter-view [letter] @@ -15,7 +15,7 @@ (defview contact-view-with-letter [{:keys [whisper-identity letter] :as contact} click-handler action params] [touchable-highlight - {:onPress #(click-handler whisper-identity action params)} + {:onPress #(click-handler contact action params)} [view st/contact-container [letter-view letter] [contact-inner-view contact]]]) @@ -23,7 +23,7 @@ (defview contact-view [{:keys [whisper-identity] :as contact}] [chat [:get-chat whisper-identity]] [touchable-highlight - {:onPress (on-press whisper-identity)} + {:onPress (on-press contact)} [view st/contact-container [contact-inner-view contact]]]) diff --git a/src/status_im/contacts/views/contact_list.cljs b/src/status_im/contacts/views/contact_list.cljs index 937b934f9f..32dc4d548c 100644 --- a/src/status_im/contacts/views/contact_list.cljs +++ b/src/status_im/contacts/views/contact_list.cljs @@ -40,8 +40,7 @@ [contact-view-with-letter row click-handler action params] [contact-view row (or click-handler - (let [whisper-identity (:whisper-identity row)] - (on-press whisper-identity)))])))) + (on-press row))])))) (defn qr-scan [click-handler action] [touchable-highlight diff --git a/src/status_im/ios/core.cljs b/src/status_im/ios/core.cljs index e21d683103..98cda85611 100644 --- a/src/status_im/ios/core.cljs +++ b/src/status_im/ios/core.cljs @@ -28,7 +28,7 @@ status-im.data-store.core [taoensso.timbre :as log] [status-im.chat.styles.screen :as st] - [status-im.accounts.views.wallet-qr-code :refer [wallet-qr-code]])) + [status-im.accounts.views.qr-code :refer [qr-code-view]])) (defn orientation->keyword [o] (keyword (.toLowerCase o))) @@ -101,7 +101,7 @@ :on-request-close #(dispatch [:navigate-back])} (let [component (case @modal-view :qr-scanner qr-scanner - :wallet-qr-code wallet-qr-code + :qr-code-view qr-code-view :confirm confirm :contact-list-modal contact-list)] [component])]])]))))}))) diff --git a/src/status_im/ios/platform.cljs b/src/status_im/ios/platform.cljs index 91abef0a0d..f394413f27 100644 --- a/src/status_im/ios/platform.cljs +++ b/src/status_im/ios/platform.cljs @@ -12,7 +12,10 @@ :color toolbar-background2} :transparent {:height 20 :bar-style "light-content" - :color styles/color-transparent}} + :color styles/color-transparent} + :modal {:height 20 + :bar-style "light-content" + :color "#2f3031"}} :toolbar {:border-bottom-color styles/color-gray3 :border-bottom-width 0.5} :sized-text {:margin-top -5 diff --git a/src/status_im/profile/screen.cljs b/src/status_im/profile/screen.cljs index 3527d7f187..68fb386de0 100644 --- a/src/status_im/profile/screen.cljs +++ b/src/status_im/profile/screen.cljs @@ -21,7 +21,6 @@ [status-im.components.status-bar :refer [status-bar]] [status-im.components.text-field.view :refer [text-field]] [status-im.components.selectable-field.view :refer [selectable-field]] - [status-im.components.qr-code :refer [qr-code]] [status-im.utils.phone-number :refer [format-phone-number]] [status-im.utils.image-processing :refer [img->base64]] [status-im.utils.platform :refer [platform-specific]] @@ -113,18 +112,6 @@ :on-change-text #(dispatch [:set-in [:profile-edit :status] %]) :default-value status}]])}))) -(defview qr-modal [] - [qr [:get-in [:profile-edit :qr-code]]] - [modal {:transparent true - :visible (not (nil? qr)) - :animationType :fade - :onRequestClose #(log/debug "Nothing happens")} - [touchable-without-feedback {:on-press #(dispatch [:set-in [:profile-edit :qr-code] nil])} - [view st/qr-code-container - [view st/qr-code - [qr-code {:value (str "ethereum:" qr) - :size 220}]]]]]) - (defview profile [] [{whisper-identity :whisper-identity address :address @@ -180,7 +167,8 @@ [selectable-field {:label (label :t/address) :editable? false :value address}]] - [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] address])}]] + [show-qr-button {:handler #(dispatch [:navigate-to-modal :qr-code-view {:contact contact + :qr-source :whisper-identity}])}]] [view st/underline-container]]) [view st/profile-property @@ -189,11 +177,10 @@ [selectable-field {:label (label :t/public-key) :editable? false :value whisper-identity}]] - [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] whisper-identity])}]]] + [show-qr-button {:handler #(dispatch [:navigate-to-modal :qr-code-view {:contact contact + :qr-source :public-key}])}]]] - [view st/underline-container] - - [qr-modal]]]) + [view st/underline-container]]]) (defview my-profile [] [edit? [:get-in [:profile-edit :edit?]] @@ -229,7 +216,8 @@ [selectable-field {:label (label :t/address) :editable? edit? :value address}]] - [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] address])}]] + [show-qr-button {:handler #(dispatch [:navigate-to-modal :qr-code-view {:contact account + :qr-source :address}])}]] [view st/underline-container]] [view st/profile-property @@ -238,8 +226,7 @@ [selectable-field {:label (label :t/public-key) :editable? edit? :value public-key}]] - [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] public-key])}]]] + [show-qr-button {:handler #(dispatch [:navigate-to-modal :qr-code-view {:contact account + :qr-source :public-key}])}]]] - [view st/underline-container] - - [qr-modal]]])) + [view st/underline-container]]]))