diff --git a/android/app/src/main/res/drawable-hdpi/icon_qr_gray.png b/android/app/src/main/res/drawable-hdpi/icon_qr_gray.png new file mode 100644 index 0000000000..ce7a826d0d Binary files /dev/null and b/android/app/src/main/res/drawable-hdpi/icon_qr_gray.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_qr.png b/android/app/src/main/res/drawable-mdpi/icon_qr.png index c8b6ef10fd..cde09052fb 100644 Binary files a/android/app/src/main/res/drawable-mdpi/icon_qr.png and b/android/app/src/main/res/drawable-mdpi/icon_qr.png differ diff --git a/android/app/src/main/res/drawable-mdpi/icon_qr_gray.png b/android/app/src/main/res/drawable-mdpi/icon_qr_gray.png new file mode 100644 index 0000000000..cb73ad1e04 Binary files /dev/null and b/android/app/src/main/res/drawable-mdpi/icon_qr_gray.png differ diff --git a/android/app/src/main/res/drawable-xhdpi/icon_qr_gray.png b/android/app/src/main/res/drawable-xhdpi/icon_qr_gray.png new file mode 100644 index 0000000000..71c6fd567d Binary files /dev/null and b/android/app/src/main/res/drawable-xhdpi/icon_qr_gray.png differ diff --git a/android/app/src/main/res/drawable-xxhdpi/icon_qr_gray.png b/android/app/src/main/res/drawable-xxhdpi/icon_qr_gray.png new file mode 100644 index 0000000000..9100f6d22b Binary files /dev/null and b/android/app/src/main/res/drawable-xxhdpi/icon_qr_gray.png differ diff --git a/android/app/src/main/res/drawable-xxxhdpi/icon_qr_gray.png b/android/app/src/main/res/drawable-xxxhdpi/icon_qr_gray.png new file mode 100644 index 0000000000..cd5d3df69a Binary files /dev/null and b/android/app/src/main/res/drawable-xxxhdpi/icon_qr_gray.png differ diff --git a/ios/StatusIm/Images.xcassets/icon_qr_gray.imageset/Contents.json b/ios/StatusIm/Images.xcassets/icon_qr_gray.imageset/Contents.json new file mode 100644 index 0000000000..1738a7c226 --- /dev/null +++ b/ios/StatusIm/Images.xcassets/icon_qr_gray.imageset/Contents.json @@ -0,0 +1,21 @@ +{ + "images" : [ + { + "idiom" : "universal", + "filename" : "icon_qr_gray.png", + "scale" : "1x" + }, + { + "idiom" : "universal", + "scale" : "2x" + }, + { + "idiom" : "universal", + "scale" : "3x" + } + ], + "info" : { + "version" : 1, + "author" : "xcode" + } +} \ No newline at end of file diff --git a/ios/StatusIm/Images.xcassets/icon_qr_gray.imageset/icon_qr_gray.png b/ios/StatusIm/Images.xcassets/icon_qr_gray.imageset/icon_qr_gray.png new file mode 100644 index 0000000000..9100f6d22b Binary files /dev/null and b/ios/StatusIm/Images.xcassets/icon_qr_gray.imageset/icon_qr_gray.png differ diff --git a/src/status_im/accounts/login/screen.cljs b/src/status_im/accounts/login/screen.cljs index 532dfdd88d..1e500fb54c 100644 --- a/src/status_im/accounts/login/screen.cljs +++ b/src/status_im/accounts/login/screen.cljs @@ -20,7 +20,6 @@ icon-qr button-input white-form-text-input]] - [status-im.qr-scanner.views.scan-button :refer [scan-button]] [status-im.i18n :refer [label]] [status-im.accounts.login.styles :as st])) diff --git a/src/status_im/components/image_button/styles.cljs b/src/status_im/components/image_button/styles.cljs new file mode 100644 index 0000000000..75782a54aa --- /dev/null +++ b/src/status_im/components/image_button/styles.cljs @@ -0,0 +1,28 @@ +(ns status-im.components.image-button.styles) + +(def image-button + {:position :absolute + :bottom 2 + :right 16 + :flex 1 + :height 50 + :alignItems :center}) + +(def image-button-content + {:flex 1 + :flexDirection :row + :height 50 + :alignItems :center + :alignSelf :center}) + +(def image-button-text + {:flex 1 + :flexDirection :column + :letter-spacing -0.3 + :margin-left 8}) + +(def scan-button-text + (merge image-button-text {:color "#7099e6"})) + +(def show-qr-button-text + (merge image-button-text {:color "#838c93"})) \ No newline at end of file diff --git a/src/status_im/components/image_button/view.cljs b/src/status_im/components/image_button/view.cljs new file mode 100644 index 0000000000..d95f9a3b17 --- /dev/null +++ b/src/status_im/components/image_button/view.cljs @@ -0,0 +1,31 @@ +(ns status-im.components.image-button.view + (:require [re-frame.core :refer [subscribe dispatch dispatch-sync]] + [status-im.components.react :refer [view + text + image + touchable-highlight]] + [status-im.components.styles :refer [icon-scan]] + [status-im.i18n :refer [label]] + [status-im.components.image-button.styles :as st])) + +(defn image-button [{:keys [value style icon handler]}] + [view st/image-button + [touchable-highlight {:on-press handler} + [view st/image-button-content + [image {:source {:uri (or icon :scan_blue)} + :style icon-scan}] + (when text + [text {:style style} value])]]]) + +(defn scan-button [{:keys [show-label? handler]}] + [image-button {:icon :scan_blue + :value (if show-label? + (label :t/scan-qr)) + :style st/scan-button-text + :handler handler}]) + +(defn show-qr-button [{:keys [handler]}] + [image-button {:icon :icon_qr_gray + :value (label :t/show-qr) + :style st/show-qr-button-text + :handler handler}]) \ No newline at end of file diff --git a/src/status_im/components/selectable_field/styles.cljs b/src/status_im/components/selectable_field/styles.cljs index f121e04ca7..88774a9594 100644 --- a/src/status_im/components/selectable_field/styles.cljs +++ b/src/status_im/components/selectable_field/styles.cljs @@ -14,9 +14,9 @@ :font-size 14}) (def text-container - {:padding 0 - :margin-bottom 18 - :margin 0}) + {:padding 0 + :margin-bottom 18 + :margin 0}) (def text {:font-size 16 diff --git a/src/status_im/contacts/views/new_contact.cljs b/src/status_im/contacts/views/new_contact.cljs index 59535c26a0..9891097bdb 100644 --- a/src/status_im/contacts/views/new_contact.cljs +++ b/src/status_im/contacts/views/new_contact.cljs @@ -20,7 +20,7 @@ icon-back button-input-container button-input]] - [status-im.qr-scanner.views.scan-button :refer [scan-button]] + [status-im.components.image-button.view :refer [scan-button]] [status-im.i18n :refer [label]] [cljs.spec :as s] [status-im.contacts.validations :as v] @@ -90,10 +90,10 @@ :on-change-text #(do (dispatch [:set-in [:new-contact-identity] %]) (dispatch [:set :new-contact-address-error nil]))}] - [scan-button {:showLabel (zero? (count whisper-identity)) - :handler #(dispatch [:scan-qr-code - {:toolbar-title (label :t/new-contact)} - :set-contact-identity-from-qr])}]])) + [scan-button {:show-label? (zero? (count whisper-identity)) + :handler #(dispatch [:scan-qr-code + {:toolbar-title (label :t/new-contact)} + :set-contact-identity-from-qr])}]])) (defview new-contact [] diff --git a/src/status_im/group_settings/screen.cljs b/src/status_im/group_settings/screen.cljs index 71c89efaf1..68d82a9f87 100644 --- a/src/status_im/group_settings/screen.cljs +++ b/src/status_im/group_settings/screen.cljs @@ -29,7 +29,7 @@ (defview member-menu [] [{:keys [name] :as participant} [:selected-participant]] (when participant - [modal {:animated false + [modal {:animationType :none :transparent false :onRequestClose close-member-menu} [touchable-highlight {:style st/modal-container diff --git a/src/status_im/profile/screen.cljs b/src/status_im/profile/screen.cljs index fd066e59b9..9d1a454492 100644 --- a/src/status_im/profile/screen.cljs +++ b/src/status_im/profile/screen.cljs @@ -9,9 +9,11 @@ text-input image icon + modal scroll-view touchable-highlight touchable-opacity + touchable-without-feedback show-image-picker dismiss-keyboard!]] [status-im.components.icons.custom-icons :refer [oct-icon]] @@ -27,6 +29,7 @@ [status-im.profile.validations :as v] [status-im.profile.styles :as st] [status-im.utils.random :refer [id]] + [status-im.components.image-button.view :refer [show-qr-button]] [status-im.i18n :refer [label]])) (defn toolbar [{:keys [account edit?]}] @@ -161,8 +164,20 @@ )} [view [text {:style st/report-user-text} (label :t/report-user)]]]]]]) +(defview qr-modal [] + [qr [:get-in [:profile-edit :qr-code]]] + [modal {:transparent true + :visible (not (nil? qr)) + :animationType :fade} + [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 my-profile [] [edit? [:get-in [:profile-edit :edit?]] + qr [:get-in [:profile-edit :qr-code]] current-account [:get-current-account] changed-account [:get :profile-edit]] (let [{:keys [phone @@ -171,6 +186,7 @@ changed-account current-account)] [scroll-view {:style st/profile + :bounces false :keyboardShouldPersistTaps true} [status-bar] [toolbar {:account account @@ -188,16 +204,20 @@ [view st/underline-container]] [view st/profile-property - [selectable-field {:label (label :t/address) - :value address}] + [view st/profile-property-row + [view st/profile-property-field + [selectable-field {:label (label :t/address) + :value address}]] + [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] address])}]] [view st/underline-container]] [view st/profile-property - [selectable-field {:label (label :t/public-key) - :value public-key}]] + [view st/profile-property-row + [view st/profile-property-field + [selectable-field {:label (label :t/public-key) + :value public-key}]] + [show-qr-button {:handler #(dispatch [:set-in [:profile-edit :qr-code] public-key])}]]] [view st/underline-container] - [view st/qr-code-container - [qr-code {:value (str "ethereum:" public-key) - :size 220}]]]])) + [qr-modal]]])) diff --git a/src/status_im/profile/styles.cljs b/src/status_im/profile/styles.cljs index 932ce7f98b..5c51c35879 100644 --- a/src/status_im/profile/styles.cljs +++ b/src/status_im/profile/styles.cljs @@ -121,6 +121,14 @@ (def profile-property {:margin-left 16}) +(def profile-property-row + {:flex 1 + :flex-direction :row}) + +(def profile-property-field + {:margin-right 90 + :flex 1}) + (def profile-input-wrapper {:margin-bottom 16}) @@ -143,9 +151,19 @@ :letter-spacing 0.5}) (def qr-code-container - {:flex 1 - :alignItems :center - :margin 32}) + {:flex 1 + :alignItems :center + :justify-content :center + :background-color "#000000aa"}) + +(def qr-code + {:width 250 + :height 250 + :background-color "white" + :border-radius 4 + :align-items :center + :padding-top 15 + :elevation 4}) (def hashtag {:color "#7099e6"}) diff --git a/src/status_im/qr_scanner/styles.cljs b/src/status_im/qr_scanner/styles.cljs index 607f5b7a33..7e92540003 100644 --- a/src/status_im/qr_scanner/styles.cljs +++ b/src/status_im/qr_scanner/styles.cljs @@ -73,26 +73,4 @@ {:flex 1 :flexDirection :column :color color-white - :margin-left 8}) - - -(def scan-button - {:position :absolute - :bottom 0 - :right 16 - :flex 1 - :height 50 - :alignItems :center}) - -(def scan-button-content - {:flex 1 - :flexDirection :row - :height 50 - :alignItems :center - :alignSelf :center}) - -(def scan-text - {:flex 1 - :flexDirection :column - :color "#7099e6" :margin-left 8}) \ No newline at end of file diff --git a/src/status_im/qr_scanner/views/import_button.cljs b/src/status_im/qr_scanner/views/import_button.cljs deleted file mode 100644 index 3fd20640b7..0000000000 --- a/src/status_im/qr_scanner/views/import_button.cljs +++ /dev/null @@ -1,21 +0,0 @@ -(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.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/qr_scanner/views/scan_button.cljs b/src/status_im/qr_scanner/views/scan_button.cljs deleted file mode 100644 index 07c15be14f..0000000000 --- a/src/status_im/qr_scanner/views/scan_button.cljs +++ /dev/null @@ -1,22 +0,0 @@ -(ns status-im.qr-scanner.views.scan-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.styles :refer [icon-scan]] - [status-im.i18n :refer [label]] - [status-im.qr-scanner.styles :as st])) - - -(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 diff --git a/src/status_im/translations/en.cljs b/src/status_im/translations/en.cljs index 59a8ca8979..a98bb58865 100644 --- a/src/status_im/translations/en.cljs +++ b/src/status_im/translations/en.cljs @@ -117,6 +117,7 @@ :contacts-group-people "People" :contacts-group-new-chat "Start new chat" :no-contacts "No contacts yet" + :show-qr "Show QR" ;group-settings :remove "Remove"