status-im/status-react
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP: fixing create profile screen

Browse Source
This commit is contained in:
Ulises M
2023-06-06 13:29:46 +01:00
parent 4f5d2f502f
commit dc2f8a8751
4 changed files with 110 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ios/Podfile.lock
+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
src/quo2/components/inputs/title_input/view.cljs
+1 -1
View File
@@ -23,7 +23,7 @@
: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)
src/status_im2/contexts/onboarding/create_profile/style.cljs
+10 -3
View File
@@ -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})
src/status_im2/contexts/onboarding/create_profile/view.cljs
+96 -94
View File
@@ -48,105 +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
: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 {}
[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
[]