Show QR in profile (#422)
After Width: | Height: | Size: 2.7 KiB |
Before Width: | Height: | Size: 422 B After Width: | Height: | Size: 826 B |
After Width: | Height: | Size: 1.9 KiB |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 5.1 KiB |
After Width: | Height: | Size: 917 B |
|
@ -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"
|
||||
}
|
||||
}
|
After Width: | Height: | Size: 5.1 KiB |
|
@ -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]))
|
||||
|
||||
|
|
|
@ -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"}))
|
|
@ -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}])
|
|
@ -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
|
||||
|
|
|
@ -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 []
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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]]]))
|
||||
|
|
|
@ -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"})
|
||||
|
|
|
@ -74,25 +74,3 @@
|
|||
: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})
|
|
@ -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)]]]])
|
|
@ -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)])]]]))
|
|
@ -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"
|
||||
|
|