status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

show continue button background on scroll 

This pr. add blur background on continue button on create profile screen should the button container cover the profile color picker when the keyboard is shown

* show button background on scroll

* fix show button on scroll different platforms

* fix: button container loading

* fix: button container background delay
This commit is contained in:
John Ngei 2023-08-09 00:19:01 +03:00 committed by GitHub
parent 79bf4bb8d5
commit 11c798817e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 79 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ios/Podfile.lock
View File

@ -707,7 +707,7 @@ SPEC CHECKSUMS:
FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991 FBLazyVector: a8af91c2b5a0029d12ff6b32e428863d63c48991
FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8 FBReactNativeSpec: 1b2309b096448a1dc9d0c43999216f8fda809ae8
fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
glog: 166d178815c300e8126de9a7900101814eb16253 glog: d93527a855523adb8c113837db4be68fb00e230d
HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352 HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8 Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef libwebp: f62cb61d0a484ba548448a4bd52aabf150ff6eef
@ -772,7 +772,7 @@ SPEC CHECKSUMS:
RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467 RNPermissions: ad71dd4f767ec254f2cd57592fbee02afee75467
RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071 RNReactNativeHapticFeedback: 2566b468cc8d0e7bb2f84b23adc0f4614594d071
RNReanimated: 3e375fc41870cc66c5152a38514c450f7adbc3e1 RNReanimated: d0db0ee059c33381bca787a2193c27e52750ccaf
RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c RNShare: d82e10f6b7677f4b0048c23709bd04098d5aee6c
RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8 RNStaticSafeAreaInsets: 055ddbf5e476321720457cdaeec0ff2ba40ec1b8
RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9 RNSVG: 80584470ff1ffc7994923ea135a3e5ad825546b9

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

@ -16,11 +16,16 @@
:align-self :flex-end :align-self :flex-end
:height 64}) :height 64})
(def view-button-container (defn view-button-container
(merge button-container {:margin-bottom 34})) [keyboard-shown?]
(merge button-container
(if platform/ios?
{:margin-bottom (if keyboard-shown? 0 34)}
{:margin-bottom (if keyboard-shown? 12 34)})))
(def blur-button-container (def blur-button-container
(merge button-container (when platform/android? {:padding-bottom 12}))) (merge button-container
(when platform/android? {:padding-bottom 12})))
(def page-container (def page-container
{:position :absolute {:position :absolute
@ -44,13 +49,10 @@
:margin-bottom 16}) :margin-bottom 16})
(def content-container (def content-container
{:flex 1 {:padding-horizontal 20})
:padding-horizontal 20})
(def input-container (def input-container
{:flex 1 {:align-items :flex-start})
:align-items :flex-start
:margin-bottom 24})
(def profile-input-container (def profile-input-container
{:flex-direction :row {:flex-direction :row

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

@ -6,6 +6,7 @@
[utils.i18n :as i18n] [utils.i18n :as i18n]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.safe-area :as safe-area] [react-native.safe-area :as safe-area]
[react-native.hooks :as hooks]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar] [status-im2.contexts.onboarding.common.navigation-bar.view :as navigation-bar]
[status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu] [status-im2.contexts.onboarding.select-photo.method-menu.view :as method-menu]
@ -30,6 +31,8 @@
(defn has-special-characters [s] (not (re-find status-regex s))) (defn has-special-characters [s] (not (re-find status-regex s)))
(def min-length 5) (def min-length 5)
(defn length-not-valid [s] (< (count (string/trim (str s))) min-length)) (defn length-not-valid [s] (< (count (string/trim (str s))) min-length))
(def scroll-view-height (reagent/atom 0))
(def content-container-height (reagent/atom 0))
(defn validation-message (defn validation-message
[s] [s]
@ -46,35 +49,62 @@
(has-emojis s) (i18n/label :t/are-not-allowed {:check (i18n/label :t/emojis)}) (has-emojis s) (i18n/label :t/are-not-allowed {:check (i18n/label :t/emojis)})
:else nil)) :else nil))
(defn show-button-background
[keyboard-height keyboard-shown]
(let [button-container-height 64
keyboard-view-height (+ keyboard-height button-container-height)]
(when keyboard-shown
(cond
platform/android?
(< (- @scroll-view-height button-container-height) @content-container-height)
platform/ios?
(< (- @scroll-view-height keyboard-view-height) @content-container-height)
:else
false))))
(defn button-container (defn button-container
[keyboard-shown? children] [show-keyboard? keyboard-shown show-background? keyboard-height children]
[rn/view {:style {:margin-top :auto}} (let [height (reagent/atom 0)]
(if keyboard-shown? (reset! height (if show-keyboard? (if keyboard-shown keyboard-height 0) 0))
[blur/ios-view [rn/view {:style {:margin-top :auto}}
{:blur-amount 34 (cond
:blur-type :transparent (and (> @height 0) show-background?)
:overlay-color :transparent [blur/ios-view
:background-color (if platform/android? colors/neutral-100 colors/neutral-80-opa-1-blur) (when keyboard-shown
:style style/blur-button-container} {:blur-amount 34
children] :blur-type :transparent
[rn/view {:style style/view-button-container} :overlay-color :transparent
children])]) :background-color (if platform/android? colors/neutral-100 colors/neutral-80-opa-1-blur)
:style style/blur-button-container})
children]
(and (> @height 0) (not show-background?))
[rn/view {:style (style/view-button-container true)}
children]
(not show-keyboard?)
[rn/view {:style (style/view-button-container false)}
children])]))
(defn- f-page (defn- f-page
[{:keys [onboarding-profile-data navigation-bar-top]}] [{:keys [onboarding-profile-data navigation-bar-top]}]
(reagent/with-let [keyboard-shown? (reagent/atom false) (reagent/with-let [show-keyboard? (reagent/atom false)
show-listener (oops/ocall rn/keyboard show-listener (oops/ocall rn/keyboard
"addListener" "addListener"
(if platform/android? (if platform/android?
"keyboardDidShow" "keyboardDidShow"
"keyboardWillShow") "keyboardWillShow")
#(reset! keyboard-shown? true)) #(reset! show-keyboard? true))
hide-listener (oops/ocall rn/keyboard hide-listener (oops/ocall rn/keyboard
"addListener" "addListener"
(if platform/android? (if platform/android?
"keyboardDidHide" "keyboardDidHide"
"keyboardWillHide") "keyboardWillHide")
#(reset! keyboard-shown? false)) #(reset! show-keyboard? false))
{:keys [image-path display-name color]} onboarding-profile-data {:keys [image-path display-name color]} onboarding-profile-data
full-name (reagent/atom display-name) full-name (reagent/atom display-name)
validation-msg (reagent/atom (validation-message validation-msg (reagent/atom (validation-message
@ -88,22 +118,31 @@
profile-pic (reagent/atom image-path) profile-pic (reagent/atom image-path)
on-change-profile-pic #(reset! profile-pic %) on-change-profile-pic #(reset! profile-pic %)
on-change #(reset! custom-color %)] on-change #(reset! custom-color %)]
(let [name-too-short? (length-not-valid @full-name) (let [name-too-short? (length-not-valid @full-name)
valid-name? (and (not @validation-msg) (not name-too-short?)) valid-name? (and (not @validation-msg) (not name-too-short?))
info-message (if @validation-msg info-message (if @validation-msg
@validation-msg @validation-msg
(i18n/label :t/minimum-characters (i18n/label :t/minimum-characters
{:min-chars min-length})) {:min-chars min-length}))
info-type (cond @validation-msg :error info-type (cond @validation-msg :error
name-too-short? :default name-too-short? :default
:else :success)] :else :success)
{:keys [keyboard-shown keyboard-height]} (hooks/use-keyboard)
show-background? (show-button-background keyboard-height
keyboard-shown)]
[rn/view {:style style/page-container} [rn/view {:style style/page-container}
[navigation-bar/navigation-bar [navigation-bar/navigation-bar
{:stack-id :new-to-status {:stack-id :new-to-status
:top navigation-bar-top}] :top navigation-bar-top}]
[rn/scroll-view [rn/scroll-view
{:content-container-style {:flexGrow 1}} {:on-layout (fn [event]
[rn/view {:style style/page-container} (let [height (oops/oget event "nativeEvent.layout.height")]
(reset! scroll-view-height height)))
:content-container-style {:flexGrow 1}}
[rn/view
{:on-layout (fn [event]
(let [height (oops/oget event "nativeEvent.layout.height")]
(reset! content-container-height height)))}
[rn/view [rn/view
{:style style/content-container} {:style style/content-container}
[quo/text [quo/text
@ -153,6 +192,7 @@
:default-selected? :blue :default-selected? :blue
:selected @custom-color :selected @custom-color
:on-change on-change}]]]]] :on-change on-change}]]]]]
[rn/keyboard-avoiding-view [rn/keyboard-avoiding-view
{:style {:position :absolute {:style {:position :absolute
:top 0 :top 0
@ -160,7 +200,7 @@
:left 0 :left 0
:right 0} :right 0}
:pointer-events :box-none} :pointer-events :box-none}
[button-container @keyboard-shown? [button-container @show-keyboard? keyboard-shown show-background? keyboard-height
[quo/button [quo/button
{:accessibility-label :submit-create-profile-button {:accessibility-label :submit-create-profile-button
:type :primary :type :primary