Compare commits

...
Author SHA1 Message Date
Ulises M dc2f8a8751 WIP: fixing create profile screen 2023-06-06 13:29:46 +01:00
Erik Seppanen 4f5d2f502f Design note fixes (#15781) 2023-06-02 11:39:50 -04:00
6 changed files with 129 additions and 116 deletions
+3 -3
View File
@@ -682,11 +682,11 @@ SPEC CHECKSUMS:
boost: a7c83b31436843459a1961bfd74b96033dc77234
BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
CryptoSwift: c4f2debceb38bf44c80659afe009f71e23e4a082
DoubleConversion: cde416483dac037923206447da6e1454df403714
DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
FBLazyVector: d2db9d00883282819d03bbd401b2ad4360d47580
FBReactNativeSpec: 94da4d84ba3b1acf459103320882daa481a2b62d
fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
glog: 997518ea2aa2d8cd5df9797b641b758d52ecf2bc
glog: 9e3310013355e9221591364060e841c28041dfe3
HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
@@ -763,4 +763,4 @@ SPEC CHECKSUMS:
PODFILE CHECKSUM: c29de3b14e3275299c51aa95520622f09d084bcb
COCOAPODS: 1.12.1
COCOAPODS: 1.12.0
+15 -16
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]]))
@@ -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?)
@@ -9,12 +9,18 @@
:margin-right :auto})
(def button-container
{:width "100%"
{;:position :absolute
;:flex 1
:width "100%"
:padding-left 20
:padding-right 20
:padding-top (if platform/android? 0 12)
:align-self :flex-end
:height 64})
:height 64
;:bottom 0
;:left 0
;:right 0
})
(def blur-button-container
(merge button-container
@@ -28,7 +34,8 @@
:top 0
:bottom 0
:left 0
:right 0})
:right 0
:z-index 100})
(def info-message
{:margin-top 8})
@@ -48,103 +48,107 @@
(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
[]
+1 -1
View File
@@ -1527,7 +1527,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",