status-im/status-react
2
0
Fork 0
mirror of https://github.com/status-im/status-react.git synced 2025-02-25 17:16:03 +00:00
Code Issues Projects Releases Wiki Activity

Design notes fixes: generate keys flow > profile name screen (#16000)

Browse Source
This commit is contained in:
erikseppanen 2023-06-06 10:54:29 -04:00 committed by GitHub
parent 33999ad7cb
commit ba4e2f76da
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 123 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/quo2/components/info/info_message.cljs
View File

@ -22,27 +22,26 @@
opts
{:type :default/:success/:error
:size :default/:tiny
:icon :i/info ;; info message icon
:text-color colors/white ;; text color override
:icon-color colors/white ;; icon color override
:no-icon-color? false ;; disable tint color for icon"
:icon :i/info ;; info message icon
:text-color colors/white ;; text color override
:icon-color colors/white ;; icon color override
:no-icon-color? false ;; disable tint color for icon"
[{:keys [type size icon text-color icon-color no-icon-color? style]} message]
(let [weight (if (= size :default) :regular :medium)
icon-size (if (= size :default) 16 12)
icon-margin-top (if (= size :default) 2 3)
size (if (= size :default) :paragraph-2 :label)
text-color (or text-color (get-color type))
icon-color (or icon-color text-color)]
(let [weight (if (= size :default) :regular :medium)
icon-size (if (= size :default) 16 12)
size (if (= size :default) :paragraph-2 :label)
text-color (or text-color (get-color type))
icon-color (or icon-color text-color)]
[rn/view
{:style (merge {:flex-direction :row}
{:style (merge {:flex-direction :row
:align-items :center}
style)}
[quo2.icons/icon icon
{:color icon-color
:no-color no-icon-color?
:size icon-size
:container-style {:margin-top icon-margin-top}}]
{:color icon-color
:no-color no-icon-color?
:size icon-size}]
[text/text
{:size size
:weight weight
:style {:color text-color
:margin-horizontal 8}} message]]))
:margin-horizontal 4}} message]]))

2
src/quo2/components/inputs/profile_input/style.cljs
View File

@ -13,7 +13,7 @@
(def button
{:position :absolute
:top 23
:top 24
:bottom 0
:left 33
:right 0

2
src/quo2/components/inputs/profile_input/view.cljs
View File

@ -22,7 +22,7 @@
(if platform/ios?
[hole-view/hole-view
{:holes [{:x 33
:y 23
:y 24
:width 24
:height 24
:borderRadius 12}]}

5
src/quo2/components/inputs/title_input/view.cljs
View File

@ -15,13 +15,15 @@
(defn title-input
[{:keys [blur?
on-change-text
auto-focus
placeholder
max-length
default-value
override-theme]
:or {max-length 0
auto-focus false
default-value ""}}]
(let [focused? (reagent/atom false)
(let [focused? (reagent/atom auto-focus)
value (reagent/atom default-value)
on-change (fn [v]
(reset! value v)
@ -42,6 +44,7 @@
:keyboard-appearance (theme/theme-value :light :dark override-theme)
:on-focus #(swap! focused? (fn [] true))
:on-blur #(swap! focused? (fn [] false))
:auto-focus auto-focus
:input-mode :text
:on-change-text on-change
:editable (not disabled?)

3
src/status_im2/contexts/onboarding/create_profile/style.cljs
View File

@ -28,7 +28,8 @@
:top 0
:bottom 0
:left 0
:right 0})
:right 0
:z-index 100})
(def info-message
{:margin-top 8})

191
src/status_im2/contexts/onboarding/create_profile/view.cljs
View File

@ -48,103 +48,110 @@
(defn button-container
[keyboard-shown? children]
(if keyboard-shown?
[blur/ios-view
{:style style/blur-button-container}
children]
[rn/view {:style style/view-button-container}
children]))
[rn/view {:style {:margin-top :auto}}
(if keyboard-shown?
[blur/ios-view {:style style/blur-button-container}
children]
[rn/view {:style style/view-button-container}
children])])
(defn- f-page
[{:keys [onboarding-profile-data navigation-bar-top]}]
(let [{:keys [image-path display-name color]} onboarding-profile-data
full-name (reagent/atom display-name)
keyboard-shown? (reagent/atom false)
validation-msg (reagent/atom (validation-message @full-name))
on-change-text (fn [s]
(reset! validation-msg (validation-message s))
(reset! full-name (string/trim s)))
custom-color (reagent/atom (or color c/profile-default-color))
profile-pic (reagent/atom image-path)
on-change-profile-pic #(reset! profile-pic %)
on-change #(reset! custom-color %)]
(fn []
(rn/use-effect
(let [will-show-listener (oops/ocall rn/keyboard
"addListener"
"keyboardWillShow"
#(swap! keyboard-shown? (fn [] true)))
will-hide-listener (oops/ocall rn/keyboard
"addListener"
"keyboardWillHide"
#(swap! keyboard-shown? (fn [] false)))]
(fn []
(fn []
(oops/ocall will-show-listener "remove")
(oops/ocall will-hide-listener "remove"))))
[])
(reagent/with-let [keyboard-shown? (reagent/atom false)
will-show-listener (oops/ocall rn/keyboard
"addListener"
"keyboardWillShow"
#(reset! keyboard-shown? true))
will-hide-listener (oops/ocall rn/keyboard
"addListener"
"keyboardWillHide"
#(reset! keyboard-shown? false))
{:keys [image-path display-name color]} onboarding-profile-data
full-name (reagent/atom display-name)
validation-msg (reagent/atom (validation-message
@full-name))
on-change-text (fn [s]
(reset! validation-msg (validation-message
s))
(reset! full-name (string/trim s)))
custom-color (reagent/atom (or color
c/profile-default-color))
profile-pic (reagent/atom image-path)
on-change-profile-pic #(reset! profile-pic %)
on-change #(reset! custom-color %)]
[rn/view {:style style/page-container}
[navigation-bar/navigation-bar {:top navigation-bar-top}]
[rn/scroll-view
{:keyboard-should-persist-taps :always
:content-container-style {:flex-grow 1}}
[rn/view {:style style/page-container}
[navigation-bar/navigation-bar {:top navigation-bar-top}]
[rn/scroll-view
{:keyboard-should-persist-taps :always
:content-container-style {:flex-grow 1}}
[rn/view {:style style/page-container}
[rn/view
{:style style/content-container}
[quo/text
{:size :heading-1
:weight :semi-bold
:style style/title} (i18n/label :t/create-profile)]
[rn/view
{:style style/input-container}
[rn/view
{:style style/content-container}
[quo/text
{:size :heading-1
:weight :semi-bold
:style style/title} (i18n/label :t/create-profile)]
[rn/view
{:style style/input-container}
[rn/view
{:style style/profile-input-container}
[quo/profile-input
{:customization-color @custom-color
:placeholder (i18n/label :t/your-name)
:on-press (fn []
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch
[:show-bottom-sheet
{:override-theme :dark
:content
(fn []
[method-menu/view on-change-profile-pic])}]))
:image-picker-props {:profile-picture @profile-pic
:full-name @full-name}
:title-input-props {:default-value @full-name
:max-length c/profile-name-max-length
:on-change-text on-change-text}}]]
(when @validation-msg
[quo/info-message
{:type :error
:size :default
:icon :i/info
:style style/info-message}
@validation-msg])
[quo/text
{:size :paragraph-2
:style style/color-title}
(i18n/label :t/accent-colour)]
[quo/color-picker
{:blur? true
:default-selected? :blue
:selected @custom-color
:on-change on-change}]]]]]
[rn/keyboard-avoiding-view {}
[button-container @keyboard-shown?
[quo/button
{:accessibility-label :submit-create-profile-button
:type :primary
:override-background-color (colors/custom-color @custom-color 60)
:on-press (fn []
(rf/dispatch [:onboarding-2/profile-data-set
{:image-path @profile-pic
:display-name @full-name
:color @custom-color}]))
:style style/continue-button
:disabled (or (not (seq @full-name)) @validation-msg)}
(i18n/label :t/continue)]]]])))
{:style style/profile-input-container}
[quo/profile-input
{:customization-color @custom-color
:placeholder (i18n/label :t/your-name)
:on-press (fn []
(rf/dispatch [:dismiss-keyboard])
(rf/dispatch
[:show-bottom-sheet
{:override-theme :dark
:content
(fn []
[method-menu/view on-change-profile-pic])}]))
:image-picker-props {:profile-picture @profile-pic
:full-name @full-name}
:title-input-props {:default-value @full-name
:auto-focus true
:max-length c/profile-name-max-length
:on-change-text on-change-text}}]]
(when @validation-msg
[quo/info-message
{:type :error
:size :default
:icon :i/info
:style style/info-message}
@validation-msg])
[quo/text
{:size :paragraph-2
:weight :medium
:style style/color-title}
(i18n/label :t/accent-colour)]
[quo/color-picker
{:blur? true
:default-selected? :blue
:selected @custom-color
:on-change on-change}]]]]]
[rn/keyboard-avoiding-view
{:style {:position :absolute
:top 0
:bottom 0
:left 0
:right 0}
:pointer-events :box-none}
[button-container @keyboard-shown?
[quo/button
{:accessibility-label :submit-create-profile-button
:type :primary
:override-background-color (colors/custom-color @custom-color 60)
:on-press (fn []
(rf/dispatch [:onboarding-2/profile-data-set
{:image-path @profile-pic
:display-name @full-name
:color @custom-color}]))
:style style/continue-button
:disabled (or (not (seq @full-name)) @validation-msg)}
(i18n/label :t/continue)]]]]
(finally
(oops/ocall will-show-listener "remove")
(oops/ocall will-hide-listener "remove"))))
(defn create-profile
[]

2
translations/en.json
View File

@ -1528,7 +1528,7 @@
"your-data-belongs-to-you": "If you lose your seed phrase you lose your data and funds",
"your-data-belongs-to-you-description": "If you lose access, for example by losing your phone, you can only access your keys with your seed phrase. No one, but you has your seed phrase. Write it down. Keep it safe",
"your-identifiers": "Your identicon ring, chat key and emojihash will help others tell you from impersonators",
"your-name": "Your Name",
"your-name": "Your name",
"your-recovery-phrase": "Your seed phrase",
"your-recovery-phrase-description": "This is your seed phrase. You use it to prove that this is your wallet. You only get to see it once! Write it on paper and keep it in a secure place. You will need it if you lose or reinstall your wallet.",
"custom-seed-phrase": "Invalid seed phrase",