From b65ac2ab14bdaf0f4cdcf6e751f683a1d4dc468e Mon Sep 17 00:00:00 2001 From: Parvesh Monu Date: Mon, 29 Apr 2024 21:56:41 +0530 Subject: [PATCH] fix alert banner issues (#19773) --- .env | 1 + .env.e2e | 1 + .env.jenkins | 1 + .env.nightly | 1 + src/legacy/status_im/events.cljs | 3 +- src/legacy/status_im/ui/components/react.cljs | 15 +++--- .../ui/screens/profile/user/edit_picture.cljs | 14 ++++-- src/react_native/image_crop_picker.cljs | 15 +++--- src/status_im/common/alert_banner/events.cljs | 12 +++++ src/status_im/common/alert_banner/view.cljs | 48 ++++++++++--------- .../floating_button_page/component_spec.cljs | 5 ++ .../common/floating_button_page/view.cljs | 20 ++++---- .../common/image_crop_picker/events.cljs | 15 +++++- src/status_im/common/lightbox/view.cljs | 8 ++-- src/status_im/config.cljs | 4 ++ .../chat/messenger/composer/actions/view.cljs | 2 + .../chat/messenger/composer/keyboard.cljs | 12 +++-- .../chat/messenger/composer/utils.cljs | 19 ++++---- .../chat/messenger/composer/view.cljs | 6 +++ .../chat/messenger/messages/view.cljs | 45 +++++++---------- .../contexts/profile/edit/bio/view.cljs | 39 ++++++++------- .../contexts/profile/edit/name/view.cljs | 39 ++++++++------- .../contexts/profile/login/events.cljs | 3 +- .../contexts/shell/jump_to/shared_values.cljs | 5 +- .../contexts/shell/jump_to/view.cljs | 4 +- .../add_address_to_watch/component_spec.cljs | 1 + .../confirm_address/component_spec.cljs | 1 + src/status_im/subs/alert_banner.cljs | 8 ++-- src/status_im/subs/alert_banner_test.cljs | 12 ++--- src/status_im/subs/root.cljs | 1 + 30 files changed, 216 insertions(+), 144 deletions(-) diff --git a/.env b/.env index 47d294f460..9567ef53f9 100644 --- a/.env +++ b/.env @@ -36,3 +36,4 @@ TEST_STATEOFUS=1 FAST_CREATE_COMMUNITY_ENABLED=1 TEST_NETWORKS_ENABLED=1 SHOW_NOT_IMPLEMENTED_FEATURES=0 +ENABLE_ALERT_BANNER=0 diff --git a/.env.e2e b/.env.e2e index ed270643dc..768448fa2a 100644 --- a/.env.e2e +++ b/.env.e2e @@ -37,3 +37,4 @@ TEST_NETWORKS_ENABLED=1 SHOW_NOT_IMPLEMENTED_FEATURES=1 DELETE_MESSAGE_FOR_ME_UNDO_TIME_LIMIT=10000 DELETE_MESSAGE_UNDO_TIME_LIMIT=10000 +ENABLE_ALERT_BANNER=0 diff --git a/.env.jenkins b/.env.jenkins index dcac82ffe7..e98f262a8a 100644 --- a/.env.jenkins +++ b/.env.jenkins @@ -37,3 +37,4 @@ LOCAL_PAIRING_ENABLED=1 FAST_CREATE_COMMUNITY_ENABLED=1 TEST_NETWORKS_ENABLED=1 SHOW_NOT_IMPLEMENTED_FEATURES=1 +ENABLE_ALERT_BANNER=1 diff --git a/.env.nightly b/.env.nightly index 867fb262a1..fdeacd4f4d 100644 --- a/.env.nightly +++ b/.env.nightly @@ -23,3 +23,4 @@ DATABASE_MANAGEMENT_ENABLED=1 DELETE_MESSAGE_ENABLED=1 FAST_CREATE_COMMUNITY_ENABLED=0 TEST_NETWORKS_ENABLED=0 +ENABLE_ALERT_BANNER=1 diff --git a/src/legacy/status_im/events.cljs b/src/legacy/status_im/events.cljs index beef15d244..b8b030c3a3 100644 --- a/src/legacy/status_im/events.cljs +++ b/src/legacy/status_im/events.cljs @@ -185,7 +185,8 @@ (= :chat view-id) {:effects.async-storage/set {:chat-id (get-in cofx [:db :current-chat-id]) :key-uid (get-in cofx [:db :profile/profile :key-uid])} - :db (assoc db :screens/was-focused-once? true)} + :db (assoc db :screens/was-focused-once? true) + :dispatch [:alert-banners/unhide]} (not (get db :screens/was-focused-once?)) {:db (assoc db :screens/was-focused-once? true)}))) diff --git a/src/legacy/status_im/ui/components/react.cljs b/src/legacy/status_im/ui/components/react.cljs index 024fcfce37..43f9dc7bbe 100644 --- a/src/legacy/status_im/ui/components/react.cljs +++ b/src/legacy/status_im/ui/components/react.cljs @@ -223,25 +223,28 @@ (defn show-image-picker ([images-fn] - (show-image-picker images-fn nil)) + (show-image-picker images-fn nil nil)) ([images-fn {:keys [media-type] :or {media-type "any"} - :as props}] + :as props} + finally-callback] (-> ^js image-picker (.openPicker (clj->js (merge {:mediaType media-type} props))) (.then images-fn) - (.catch show-access-error)))) + (.catch show-access-error) + (.finally finally-callback)))) (defn show-image-picker-camera ([images-fn] - (show-image-picker-camera images-fn nil)) - ([images-fn props] + (show-image-picker-camera images-fn nil nil)) + ([images-fn props finally-callback] (-> ^js image-picker (.openCamera (clj->js props)) (.then images-fn) - (.catch show-access-error)))) + (.catch show-access-error) + (.finally finally-callback)))) ;; Clipboard diff --git a/src/legacy/status_im/ui/screens/profile/user/edit_picture.cljs b/src/legacy/status_im/ui/screens/profile/user/edit_picture.cljs index 500aacb826..d065b21ccf 100644 --- a/src/legacy/status_im/ui/screens/profile/user/edit_picture.cljs +++ b/src/legacy/status_im/ui/screens/profile/user/edit_picture.cljs @@ -3,9 +3,11 @@ [legacy.status-im.ui.components.list.item :as list.item] [legacy.status-im.ui.components.react :as react] [re-frame.core :as re-frame] + [react-native.platform :as platform] [status-im.config :as config] [status-im.contexts.profile.settings.events] - [utils.i18n :as i18n])) + [utils.i18n :as i18n] + [utils.re-frame :as rf])) (def crop-size 1000) (def crop-opts @@ -17,16 +19,22 @@ (defn pick-pic [] (re-frame/dispatch [:bottom-sheet/hide-old]) + (when platform/ios? + (rf/dispatch [:alert-banners/hide])) (react/show-image-picker #(re-frame/dispatch [:profile.settings/save-profile-picture (.-path ^js %) 0 0 crop-size crop-size]) - crop-opts)) + crop-opts + #(rf/dispatch [:alert-banners/unhide]))) (defn take-pic [] (re-frame/dispatch [:bottom-sheet/hide-old]) + (when platform/ios? + (rf/dispatch [:alert-banners/hide])) (react/show-image-picker-camera #(re-frame/dispatch [:profile.settings/save-profile-picture (.-path ^js %) 0 0 crop-size crop-size]) - crop-opts)) + crop-opts + #(rf/dispatch [:alert-banners/unhide]))) (defn bottom-sheet [has-picture] diff --git a/src/react_native/image_crop_picker.cljs b/src/react_native/image_crop_picker.cljs index 1fc1b4ed8d..31cf65b78d 100644 --- a/src/react_native/image_crop_picker.cljs +++ b/src/react_native/image_crop_picker.cljs @@ -7,21 +7,24 @@ (defn show-image-picker ([callback] - (show-image-picker callback nil)) + (show-image-picker callback nil nil)) ([callback {:keys [media-type] :or {media-type "any"} - :as props}] + :as props} + finally-callback] (-> ^js image-picker (.openPicker (clj->js (merge {:mediaType media-type} props))) (.then #(callback (.-path ^js %))) - (.catch show-access-error)))) + (.catch show-access-error) + (.finally finally-callback)))) (defn show-image-picker-camera ([callback] - (show-image-picker-camera callback nil)) - ([callback props] + (show-image-picker-camera callback nil nil)) + ([callback props finally-callback] (-> ^js image-picker (.openCamera (clj->js props)) (.then #(callback (.-path ^js %))) - (.catch show-access-error)))) + (.catch show-access-error) + (.finally finally-callback)))) diff --git a/src/status_im/common/alert_banner/events.cljs b/src/status_im/common/alert_banner/events.cljs index 56fc0f62e4..46e55fd206 100644 --- a/src/status_im/common/alert_banner/events.cljs +++ b/src/status_im/common/alert_banner/events.cljs @@ -22,6 +22,18 @@ {:db (dissoc db :alert-banners) :hide-alert-banner [(:view-id db) (:theme db)]}) +;; Hide/Unhide will only toggle the visibility of alert banners without removing them. +;; Required for ios image picker, which doesn't allow top margin +(defn hide-alert-banners + [{:keys [db]}] + {:db (assoc db :alert-banners/hide? true)}) + +(defn unhide-alert-banners + [{:keys [db]}] + {:db (dissoc db :alert-banners/hide?)}) + (re-frame/reg-event-fx :alert-banners/add add-alert-banner) (re-frame/reg-event-fx :alert-banners/remove remove-alert-banner) (re-frame/reg-event-fx :alert-banners/remove-all remove-all-alert-banners) +(re-frame/reg-event-fx :alert-banners/hide hide-alert-banners) +(re-frame/reg-event-fx :alert-banners/unhide unhide-alert-banners) diff --git a/src/status_im/common/alert_banner/view.cljs b/src/status_im/common/alert_banner/view.cljs index 4f34e4e2bb..dd6371fe81 100644 --- a/src/status_im/common/alert_banner/view.cljs +++ b/src/status_im/common/alert_banner/view.cljs @@ -39,32 +39,34 @@ (defn view [] (let [banners (rf/sub [:alert-banners]) + hide-banners? (rf/sub [:alert-banners/hide?]) theme (quo.theme/use-theme) banners-count (count banners) alert-banner (:alert banners) error-banner (:error banners) safe-area-top (safe-area/get-top) colors-map (get-colors-map theme)] - [hole-view/hole-view - ;; required for fix flicker issue https://github.com/status-im/status-mobile/issues/19490 - {:style {:padding-bottom 1} - :holes [{:x 0 - :y (+ safe-area-top (* constants/alert-banner-height banners-count)) - :width (:width (rn/get-window)) - :height constants/alert-banner-height - :borderRadius style/border-radius}]} - [rn/view {:style {:background-color colors/neutral-100}} - [rn/view - {:style {:height safe-area-top - :background-color (get-in colors-map - [(if error-banner :error :alert) :background-color])}}] - (when error-banner - [banner - (assoc error-banner - :colors-map colors-map - :second-banner? false)]) - (when alert-banner - [banner - (assoc alert-banner - :colors-map colors-map - :second-banner? (= 2 banners-count))])]])) + (when-not hide-banners? + [hole-view/hole-view + ;; required for fix flicker issue https://github.com/status-im/status-mobile/issues/19490 + {:style {:padding-bottom 0.5} + :holes [{:x 0 + :y (+ safe-area-top (* constants/alert-banner-height banners-count)) + :width (:width (rn/get-window)) + :height constants/alert-banner-height + :borderRadius style/border-radius}]} + [rn/view {:style {:background-color colors/neutral-100}} + [rn/view + {:style {:height safe-area-top + :background-color (get-in colors-map + [(if error-banner :error :alert) :background-color])}}] + (when error-banner + [banner + (assoc error-banner + :colors-map colors-map + :second-banner? false)]) + (when alert-banner + [banner + (assoc alert-banner + :colors-map colors-map + :second-banner? (= 2 banners-count))])]]))) diff --git a/src/status_im/common/floating_button_page/component_spec.cljs b/src/status_im/common/floating_button_page/component_spec.cljs index aa7ff9951f..960399cfc5 100644 --- a/src/status_im/common/floating_button_page/component_spec.cljs +++ b/src/status_im/common/floating_button_page/component_spec.cljs @@ -3,8 +3,12 @@ [status-im.common.floating-button-page.view :as floating-button-page] [test-helpers.component :as h])) + +(def sub-mocks {:alert-banners/top-margin 0}) + (h/describe "floating button page" (h/test "renders with a header and standard button" + (h/setup-subs sub-mocks) (h/render [floating-button-page/view {:header [quo/page-nav {:type :title-description @@ -18,6 +22,7 @@ (h/is-truthy (h/get-by-text "floating button page"))) (h/test "renders with a header and a slide button" + (h/setup-subs sub-mocks) (h/render [floating-button-page/view {:header [quo/page-nav {:type :title-description diff --git a/src/status_im/common/floating_button_page/view.cljs b/src/status_im/common/floating_button_page/view.cljs index 6e9df14010..7daf089991 100644 --- a/src/status_im/common/floating_button_page/view.cljs +++ b/src/status_im/common/floating_button_page/view.cljs @@ -8,7 +8,8 @@ [react-native.safe-area :as safe-area] [reagent.core :as reagent] [status-im.common.floating-button-page.floating-container.view :as floating-container] - [status-im.common.floating-button-page.style :as style])) + [status-im.common.floating-button-page.style :as style] + [utils.re-frame :as rf])) (defn- show-background [{:keys [window-height keyboard-height footer-container-height content-scroll-y @@ -82,14 +83,15 @@ set-content-y-scroll (fn [event] (reset! content-scroll-y (oops/oget event "nativeEvent.contentOffset.y")))] - (let [keyboard-shown? (if platform/ios? @keyboard-will-show? @keyboard-did-show?) - show-background? (show-background {:window-height window-height - :footer-container-height @footer-container-height - :keyboard-height @keyboard-height - :content-scroll-y @content-scroll-y - :content-container-height @content-container-height - :header-height @header-height - :keyboard-shown? keyboard-shown?})] + (let [keyboard-shown? (if platform/ios? @keyboard-will-show? @keyboard-did-show?) + footer-container-padding (+ footer-container-padding (rf/sub [:alert-banners/top-margin])) + show-background? (show-background {:window-height window-height + :footer-container-height @footer-container-height + :keyboard-height @keyboard-height + :content-scroll-y @content-scroll-y + :content-container-height @content-container-height + :header-height @header-height + :keyboard-shown? keyboard-shown?})] [:<> (when gradient-cover? [quo/gradient-cover {:customization-color customization-color}]) diff --git a/src/status_im/common/image_crop_picker/events.cljs b/src/status_im/common/image_crop_picker/events.cljs index b480f4b91c..cdad5b31e3 100644 --- a/src/status_im/common/image_crop_picker/events.cljs +++ b/src/status_im/common/image_crop_picker/events.cljs @@ -1,14 +1,25 @@ (ns status-im.common.image-crop-picker.events (:require [react-native.image-crop-picker :as image-crop-picker] + [react-native.platform :as platform] [utils.re-frame :as rf])) (rf/reg-fx :effect.image-crop-picker/show (fn [[callback crop-opts]] - (image-crop-picker/show-image-picker callback crop-opts))) + (when platform/ios? + (rf/dispatch [:alert-banners/hide])) + (image-crop-picker/show-image-picker + callback + crop-opts + #(rf/dispatch [:alert-banners/unhide])))) (rf/reg-fx :effect.image-crop-picker/show-camera (fn [[callback crop-opts]] - (image-crop-picker/show-image-picker-camera callback crop-opts))) + (when platform/ios? + (rf/dispatch [:alert-banners/hide])) + (image-crop-picker/show-image-picker-camera + callback + crop-opts + #(rf/dispatch [:alert-banners/unhide])))) (rf/reg-event-fx :image-crop-picker/show diff --git a/src/status_im/common/lightbox/view.cljs b/src/status_im/common/lightbox/view.cljs index 2e109b4290..b561857c36 100644 --- a/src/status_im/common/lightbox/view.cljs +++ b/src/status_im/common/lightbox/view.cljs @@ -51,9 +51,11 @@ insets (safe-area/get-insets) window (rn/get-window) window-width (:width window) - window-height (if platform/android? - (+ (:height window) (:top insets)) - (:height window)) + alert-banners-top-margin (rf/sub [:alert-banners/top-margin]) + window-height (- (if platform/android? + (+ (:height window) (:top insets)) + (:height window)) + alert-banners-top-margin) curr-orientation (or (rf/sub [:lightbox/orientation]) orientation/portrait) landscape? (string/includes? curr-orientation orientation/landscape) horizontal? (or platform/android? (not landscape?)) diff --git a/src/status_im/config.cljs b/src/status_im/config.cljs index f01a973bb1..3afd224a9d 100644 --- a/src/status_im/config.cljs +++ b/src/status_im/config.cljs @@ -136,3 +136,7 @@ (def community-accounts-selection-enabled? true) (def fetch-messages-enabled? (enabled? (get-config :FETCH_MESSAGES_ENABLED "1"))) (def test-networks-enabled? (enabled? (get-config :TEST_NETWORKS_ENABLED "0"))) + +;; Alert banners are disabled for debug builds because alert banners overlay +;; interfere with react-native debug tools, such as inspector and Perf monitor +(def enable-alert-banner? (enabled? (get-config :ENABLE_ALERT_BANNER "0"))) diff --git a/src/status_im/contexts/chat/messenger/composer/actions/view.cljs b/src/status_im/contexts/chat/messenger/composer/actions/view.cljs index e5b52f48ca..e54ed3b30b 100644 --- a/src/status_im/contexts/chat/messenger/composer/actions/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/actions/view.cljs @@ -186,6 +186,8 @@ :on-allowed (fn [] (when (and platform/android? @input-ref) (.blur ^js @input-ref)) + (when platform/ios? + (rf/dispatch [:alert-banners/hide])) (rf/dispatch [:chat.ui/set-input-content-height (reanimated/get-shared-value height)]) (rf/dispatch [:photo-selector/navigate-to-photo-selector])) diff --git a/src/status_im/contexts/chat/messenger/composer/keyboard.cljs b/src/status_im/contexts/chat/messenger/composer/keyboard.cljs index 3339287893..6b412226e2 100644 --- a/src/status_im/contexts/chat/messenger/composer/keyboard.cljs +++ b/src/status_im/contexts/chat/messenger/composer/keyboard.cljs @@ -14,8 +14,9 @@ curr-height)) (defn store-kb-height - [event {:keys [kb-default-height kb-height]} {:keys [window-height]}] - (let [height (- window-height (oops/oget event "endCoordinates.screenY"))] + [event {:keys [kb-default-height kb-height]}] + (let [height (- (:height (rn/get-window)) + (oops/oget event "endCoordinates.screenY"))] (reset! kb-height height) (when (zero? @kb-default-height) (async-storage/set-item! :kb-default-height (str height))))) @@ -56,9 +57,10 @@ (defn add-kb-listeners [{:keys [keyboard-show-listener keyboard-frame-listener keyboard-hide-listener input-ref] :as props} state animations dimensions] - (reset! keyboard-show-listener (.addListener rn/keyboard - "keyboardDidShow" - #(store-kb-height % state dimensions))) + (reset! keyboard-show-listener (.addListener + rn/keyboard + "keyboardDidShow" + #(store-kb-height % state))) (reset! keyboard-frame-listener (.addListener rn/keyboard "keyboardWillChangeFrame" diff --git a/src/status_im/contexts/chat/messenger/composer/utils.cljs b/src/status_im/contexts/chat/messenger/composer/utils.cljs index ac5d11dbe0..86e4d2f3d9 100644 --- a/src/status_im/contexts/chat/messenger/composer/utils.cljs +++ b/src/status_im/contexts/chat/messenger/composer/utils.cljs @@ -191,15 +191,16 @@ (defn init-subs [] (let [chat-input (rf/sub [:chats/current-chat-input])] - {:images (seq (rf/sub [:chats/sending-image])) - :link-previews? (or (rf/sub [:chats/link-previews?]) - (rf/sub [:chats/status-link-previews?])) - :audio (rf/sub [:chats/sending-audio]) - :reply (rf/sub [:chats/reply-message]) - :edit (rf/sub [:chats/edit-message]) - :input-with-mentions (rf/sub [:chat/input-with-mentions]) - :input-text (:input-text chat-input) - :input-content-height (:input-content-height chat-input)})) + {:images (seq (rf/sub [:chats/sending-image])) + :link-previews? (or (rf/sub [:chats/link-previews?]) + (rf/sub [:chats/status-link-previews?])) + :audio (rf/sub [:chats/sending-audio]) + :reply (rf/sub [:chats/reply-message]) + :edit (rf/sub [:chats/edit-message]) + :input-with-mentions (rf/sub [:chat/input-with-mentions]) + :input-text (:input-text chat-input) + :alert-banners-top-margin (rf/sub [:alert-banners/top-margin]) + :input-content-height (:input-content-height chat-input)})) (defn init-shared-values [] diff --git a/src/status_im/contexts/chat/messenger/composer/view.cljs b/src/status_im/contexts/chat/messenger/composer/view.cljs index edacf98ce9..d190c9e31a 100644 --- a/src/status_im/contexts/chat/messenger/composer/view.cljs +++ b/src/status_im/contexts/chat/messenger/composer/view.cljs @@ -39,6 +39,12 @@ theme window-height]} props state shared-values] (let [subscriptions (utils/init-subs) + top-margin (if (pos? (:alert-banners-top-margin subscriptions)) + ;; top margin increased to avoid composer overlapping with the + ;; alert banner + (+ (:alert-banners-top-margin subscriptions) 12) + 0) + window-height (- window-height top-margin) content-height (reagent/atom (or (:input-content-height ; Actual text height subscriptions) constants/input-height)) diff --git a/src/status_im/contexts/chat/messenger/messages/view.cljs b/src/status_im/contexts/chat/messenger/messages/view.cljs index c7126c54c9..a98d1602e8 100644 --- a/src/status_im/contexts/chat/messenger/messages/view.cljs +++ b/src/status_im/contexts/chat/messenger/messages/view.cljs @@ -1,6 +1,7 @@ (ns status-im.contexts.chat.messenger.messages.view (:require [react-native.core :as rn] + [react-native.platform :as platform] [react-native.reanimated :as reanimated] [react-native.safe-area :as safe-area] [status-im.contexts.chat.messenger.composer.view :as composer.view] @@ -10,43 +11,31 @@ [status-im.contexts.chat.messenger.placeholder.view :as placeholder.view] [utils.re-frame :as rf])) -;; NOTE(parvesh) - I am working on refactoring/optimization of the chat screen for performance -;; improvement. Please avoid refactoring these files. Also if you are not already working on bug -;; fixes related to the composer, please skip them. And ping me, so I can address them while refactoring (defn- chat-screen - [chat-screen-layout-calculations-complete?] - (let [insets (safe-area/get-insets) - content-height (atom 0) - layout-height (atom 0) - distance-atom (atom 0) - distance-from-list-top (reanimated/use-shared-value 0) - chat-list-scroll-y (reanimated/use-shared-value 0)] + [{:keys [insets] :as props}] + (let [alert-banners-top-margin (rf/sub [:alert-banners/top-margin])] [rn/keyboard-avoiding-view {:style style/keyboard-avoiding-container - :keyboard-vertical-offset (- (:bottom insets))} - [list.view/messages-list-content - {:insets insets - :layout-height layout-height - :content-height content-height - :distance-atom distance-atom - :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete? - :distance-from-list-top distance-from-list-top - :chat-list-scroll-y chat-list-scroll-y}] - [messages.navigation/view - {:distance-from-list-top distance-from-list-top - :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?}] - [composer.view/composer - {:insets insets - :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete? - :chat-list-scroll-y chat-list-scroll-y}]])) + :keyboard-vertical-offset (- (if platform/ios? alert-banners-top-margin 0) (:bottom insets))} + [list.view/messages-list-content props] + [messages.navigation/view props] + [composer.view/composer props]])) (defn lazy-chat-screen [chat-screen-layout-calculations-complete?] - (let [screen-loaded? (rf/sub [:shell/chat-screen-loaded?])] + (let [screen-loaded? (rf/sub [:shell/chat-screen-loaded?]) + props {:insets (safe-area/get-insets) + :content-height (atom 0) + :layout-height (atom 0) + :distance-atom (atom 0) + :distance-from-list-top (reanimated/use-shared-value 0) + :chat-list-scroll-y (reanimated/use-shared-value 0) + :chat-screen-layout-calculations-complete? + chat-screen-layout-calculations-complete?}] (when-not screen-loaded? (reanimated/set-shared-value chat-screen-layout-calculations-complete? false)) (when screen-loaded? - [chat-screen chat-screen-layout-calculations-complete?]))) + [chat-screen props]))) (defn chat [] diff --git a/src/status_im/contexts/profile/edit/bio/view.cljs b/src/status_im/contexts/profile/edit/bio/view.cljs index cc7ce9336d..94d0ae45a1 100644 --- a/src/status_im/contexts/profile/edit/bio/view.cljs +++ b/src/status_im/contexts/profile/edit/bio/view.cljs @@ -2,6 +2,7 @@ (:require [clojure.string :as string] [quo.core :as quo] [react-native.core :as rn] + [react-native.platform :as platform] [react-native.safe-area :as safe-area] [reagent.core :as reagent] [status-im.common.validation.profile :as profile-validator] @@ -13,22 +14,23 @@ (defn view [] - (let [insets (safe-area/get-insets) - profile (rf/sub [:profile/profile-with-image]) - customization-color (rf/sub [:profile/customization-color]) - profile-bio (:bio profile) - unsaved-bio (reagent/atom profile-bio) - error-msg (reagent/atom nil) - typing? (reagent/atom false) - validate-bio (debounce/debounce (fn [bio] - (reset! error-msg - (profile-validator/validation-bio bio)) - (reset! typing? false)) - 300) - on-change-text (fn [s] - (reset! typing? true) - (reset! unsaved-bio s) - (validate-bio s))] + (let [insets (safe-area/get-insets) + profile (rf/sub [:profile/profile-with-image]) + customization-color (rf/sub [:profile/customization-color]) + alert-banners-top-margin (rf/sub [:alert-banners/top-margin]) + profile-bio (:bio profile) + unsaved-bio (reagent/atom profile-bio) + error-msg (reagent/atom nil) + typing? (reagent/atom false) + validate-bio (debounce/debounce (fn [bio] + (reset! error-msg + (profile-validator/validation-bio bio)) + (reset! typing? false)) + 300) + on-change-text (fn [s] + (reset! typing? true) + (reset! unsaved-bio s) + (validate-bio s))] (fn [] [quo/overlay {:type :shell @@ -39,8 +41,9 @@ :icon-name :i/arrow-left :on-press #(rf/dispatch [:navigate-back])}] [rn/keyboard-avoiding-view - {:key :content - :style style/screen-container} + {:key :content + :keyboard-vertical-offset (if platform/ios? alert-banners-top-margin 0) + :style style/screen-container} [rn/view {:style {:gap 22}} [quo/text-combinations {:title (i18n/label :t/bio)}] [quo/input diff --git a/src/status_im/contexts/profile/edit/name/view.cljs b/src/status_im/contexts/profile/edit/name/view.cljs index 0a1295f9c6..c12cf4c0a5 100644 --- a/src/status_im/contexts/profile/edit/name/view.cljs +++ b/src/status_im/contexts/profile/edit/name/view.cljs @@ -2,6 +2,7 @@ (:require [clojure.string :as string] [quo.core :as quo] [react-native.core :as rn] + [react-native.platform :as platform] [react-native.safe-area :as safe-area] [reagent.core :as reagent] [status-im.common.validation.profile :as profile-validator] @@ -14,22 +15,23 @@ (defn view [] - (let [insets (safe-area/get-insets) - profile (rf/sub [:profile/profile-with-image]) - customization-color (rf/sub [:profile/customization-color]) - display-name (profile.utils/displayed-name profile) - full-name (reagent/atom display-name) - error-msg (reagent/atom nil) - typing? (reagent/atom false) - validate-name (debounce/debounce (fn [name] - (reset! error-msg - (profile-validator/validation-name name)) - (reset! typing? false)) - 300) - on-change-text (fn [s] - (reset! typing? true) - (reset! full-name s) - (validate-name s))] + (let [insets (safe-area/get-insets) + profile (rf/sub [:profile/profile-with-image]) + customization-color (rf/sub [:profile/customization-color]) + display-name (profile.utils/displayed-name profile) + alert-banners-top-margin (rf/sub [:alert-banners/top-margin]) + full-name (reagent/atom display-name) + error-msg (reagent/atom nil) + typing? (reagent/atom false) + validate-name (debounce/debounce (fn [name] + (reset! error-msg + (profile-validator/validation-name name)) + (reset! typing? false)) + 300) + on-change-text (fn [s] + (reset! typing? true) + (reset! full-name s) + (validate-name s))] (fn [] [quo/overlay {:type :shell @@ -40,8 +42,9 @@ :icon-name :i/arrow-left :on-press #(rf/dispatch [:navigate-back])}] [rn/keyboard-avoiding-view - {:key :content - :style style/screen-container} + {:key :content + :keyboard-vertical-offset (if platform/ios? alert-banners-top-margin 0) + :style style/screen-container} [rn/view {:style {:gap 22}} [quo/text-combinations {:title (i18n/label :t/name)}] [quo/input diff --git a/src/status_im/contexts/profile/login/events.cljs b/src/status_im/contexts/profile/login/events.cljs index 7af92c2584..444bad8753 100644 --- a/src/status_im/contexts/profile/login/events.cljs +++ b/src/status_im/contexts/profile/login/events.cljs @@ -231,7 +231,8 @@ (rf/reg-event-fx :profile/show-testnet-mode-banner-if-enabled (fn [{:keys [db]}] - (when (get-in db [:profile/profile :test-networks-enabled?]) + (when (and (get-in db [:profile/profile :test-networks-enabled?]) + config/enable-alert-banner?) {:fx [[:dispatch [:alert-banners/add {:type :alert diff --git a/src/status_im/contexts/shell/jump_to/shared_values.cljs b/src/status_im/contexts/shell/jump_to/shared_values.cljs index 0f5b0abc90..2a3495d515 100644 --- a/src/status_im/contexts/shell/jump_to/shared_values.cljs +++ b/src/status_im/contexts/shell/jump_to/shared_values.cljs @@ -102,8 +102,9 @@ shell.constants/switcher-card-size)})) (defn calculate-and-set-shared-values - [] - (let [{:keys [width] :as dimensions} (utils/dimensions) + [alert-banners-top-margin] + (let [{:keys [width height] :as dimensions} (utils/dimensions) + dimensions (assoc dimensions :height (- height alert-banners-top-margin)) switcher-card-left-position (/ (- width (* 2 shell.constants/switcher-card-size)) 3) switcher-card-top-position (+ (safe-area/get-top) 120) shared-values diff --git a/src/status_im/contexts/shell/jump_to/view.cljs b/src/status_im/contexts/shell/jump_to/view.cljs index 717f0a591a..3b7d4a5e55 100644 --- a/src/status_im/contexts/shell/jump_to/view.cljs +++ b/src/status_im/contexts/shell/jump_to/view.cljs @@ -34,7 +34,9 @@ (defn f-shell-stack [] - (let [shared-values (shared-values/calculate-and-set-shared-values)] + (let [alert-banners-top-margin (rf/sub [:alert-banners/top-margin]) + shared-values (shared-values/calculate-and-set-shared-values + alert-banners-top-margin)] (rn/use-mount (fn [] (rn/hw-back-add-listener navigate-back-handler) diff --git a/src/status_im/contexts/wallet/add_account/add_address_to_watch/component_spec.cljs b/src/status_im/contexts/wallet/add_account/add_address_to_watch/component_spec.cljs index a833efc927..a6463a3a57 100644 --- a/src/status_im/contexts/wallet/add_account/add_address_to_watch/component_spec.cljs +++ b/src/status_im/contexts/wallet/add_account/add_address_to_watch/component_spec.cljs @@ -12,6 +12,7 @@ (h/setup-subs {:wallet/scanned-address nil :wallet/addresses #{"0x12E838Ae1f769147b12956485dc56e57138f3AC8" "0x22E838Ae1f769147b12956485dc56e57138f3AC8"} + :alert-banners/top-margin 0 :wallet/watch-address-activity-state nil :profile/customization-color :blue}))) diff --git a/src/status_im/contexts/wallet/add_account/add_address_to_watch/confirm_address/component_spec.cljs b/src/status_im/contexts/wallet/add_account/add_address_to_watch/confirm_address/component_spec.cljs index fe06b24e06..953abce02c 100644 --- a/src/status_im/contexts/wallet/add_account/add_address_to_watch/confirm_address/component_spec.cljs +++ b/src/status_im/contexts/wallet/add_account/add_address_to_watch/confirm_address/component_spec.cljs @@ -8,6 +8,7 @@ (h/test "Create Account button is disabled while no account name exists" (h/setup-subs {:wallet/watch-only-accounts [] + :alert-banners/top-margin 0 :get-screen-params {:address "0xmock-address"}}) (h/render [confirm-address/view]) (h/is-truthy (h/get-by-text "0xmock-address")) diff --git a/src/status_im/subs/alert_banner.cljs b/src/status_im/subs/alert_banner.cljs index 0628242311..0dfe27eb2d 100644 --- a/src/status_im/subs/alert_banner.cljs +++ b/src/status_im/subs/alert_banner.cljs @@ -6,7 +6,9 @@ (re-frame/reg-sub :alert-banners/top-margin :<- [:alert-banners] - (fn [banners] + :<- [:alert-banners/hide?] + (fn [[banners hide-banners?]] (let [banners-count (count banners)] - (when (pos? banners-count) - (+ (* constants/alert-banner-height banners-count) 8))))) + (if (and (pos? banners-count) (not hide-banners?)) + (+ (* constants/alert-banner-height banners-count) 10) + 0)))) diff --git a/src/status_im/subs/alert_banner_test.cljs b/src/status_im/subs/alert_banner_test.cljs index 0e213afeb5..a7f3f4f77f 100644 --- a/src/status_im/subs/alert_banner_test.cljs +++ b/src/status_im/subs/alert_banner_test.cljs @@ -8,25 +8,25 @@ (h/deftest-sub :alert-banners/top-margin [sub-name] - (testing "returns 48 when only alert banner" + (testing "returns 50 when only alert banner" (swap! rf-db/app-db assoc :alert-banners {:alert {:text "Alert" :type :alert}}) - (is (= (rf/sub [sub-name]) 48))) + (is (= (rf/sub [sub-name]) 50))) - (testing "returns 48 when only error banner" + (testing "returns 50 when only error banner" (swap! rf-db/app-db assoc :alert-banners {:error {:text "Error" :type :error}}) - (is (= (rf/sub [sub-name]) 48))) + (is (= (rf/sub [sub-name]) 50))) - (testing "returns 88 when both alert and error banner" + (testing "returns 90 when both alert and error banner" (swap! rf-db/app-db assoc :alert-banners {:alert {:text "Alert" :type :alert} :error {:text "Error" :type :error}}) - (is (= (rf/sub [sub-name]) 88)))) + (is (= (rf/sub [sub-name]) 90)))) diff --git a/src/status_im/subs/root.cljs b/src/status_im/subs/root.cljs index f562301acc..1917e09b6f 100644 --- a/src/status_im/subs/root.cljs +++ b/src/status_im/subs/root.cljs @@ -64,6 +64,7 @@ (reg-root-key-sub :password-authentication :password-authentication) (reg-root-key-sub :initials-avatar-font-file :initials-avatar-font-file) (reg-root-key-sub :alert-banners :alert-banners) +(reg-root-key-sub :alert-banners/hide? :alert-banners/hide?) ;;onboarding (reg-root-key-sub :onboarding/generated-keys? :onboarding/generated-keys?)