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

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

@ -16,11 +16,16 @@
:align-self :flex-end
:height 64})
(def view-button-container
(merge button-container {:margin-bottom 34}))
(defn view-button-container
[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
(merge button-container (when platform/android? {:padding-bottom 12})))
(merge button-container
(when platform/android? {:padding-bottom 12})))
(def page-container
{:position :absolute
@ -44,13 +49,10 @@
:margin-bottom 16})
(def content-container
{:flex 1
:padding-horizontal 20})
{:padding-horizontal 20})
(def input-container
{:flex 1
:align-items :flex-start
:margin-bottom 24})
{:align-items :flex-start})
(def profile-input-container
{:flex-direction :row

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

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