From dc2f8a8751f353c9eedc753db36680ef6050092f Mon Sep 17 00:00:00 2001 From: Ulises M Date: Tue, 6 Jun 2023 13:29:46 +0100 Subject: [PATCH] WIP: fixing create profile screen --- ios/Podfile.lock | 6 +- .../components/inputs/title_input/view.cljs | 2 +- .../onboarding/create_profile/style.cljs | 13 +- .../onboarding/create_profile/view.cljs | 190 +++++++++--------- 4 files changed, 110 insertions(+), 101 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 273f9f79f5..5f79f971dd 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -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 diff --git a/src/quo2/components/inputs/title_input/view.cljs b/src/quo2/components/inputs/title_input/view.cljs index 61bc2f95f0..db38056606 100644 --- a/src/quo2/components/inputs/title_input/view.cljs +++ b/src/quo2/components/inputs/title_input/view.cljs @@ -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) diff --git a/src/status_im2/contexts/onboarding/create_profile/style.cljs b/src/status_im2/contexts/onboarding/create_profile/style.cljs index e986d77743..572bc85d87 100644 --- a/src/status_im2/contexts/onboarding/create_profile/style.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/style.cljs @@ -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}) diff --git a/src/status_im2/contexts/onboarding/create_profile/view.cljs b/src/status_im2/contexts/onboarding/create_profile/view.cljs index 37b9094bf5..5e21e26a5b 100644 --- a/src/status_im2/contexts/onboarding/create_profile/view.cljs +++ b/src/status_im2/contexts/onboarding/create_profile/view.cljs @@ -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 []