fix alert banner issues (#19773)
This commit is contained in:
parent
c00eb0d539
commit
b65ac2ab14
1
.env
1
.env
|
@ -36,3 +36,4 @@ TEST_STATEOFUS=1
|
||||||
FAST_CREATE_COMMUNITY_ENABLED=1
|
FAST_CREATE_COMMUNITY_ENABLED=1
|
||||||
TEST_NETWORKS_ENABLED=1
|
TEST_NETWORKS_ENABLED=1
|
||||||
SHOW_NOT_IMPLEMENTED_FEATURES=0
|
SHOW_NOT_IMPLEMENTED_FEATURES=0
|
||||||
|
ENABLE_ALERT_BANNER=0
|
||||||
|
|
1
.env.e2e
1
.env.e2e
|
@ -37,3 +37,4 @@ TEST_NETWORKS_ENABLED=1
|
||||||
SHOW_NOT_IMPLEMENTED_FEATURES=1
|
SHOW_NOT_IMPLEMENTED_FEATURES=1
|
||||||
DELETE_MESSAGE_FOR_ME_UNDO_TIME_LIMIT=10000
|
DELETE_MESSAGE_FOR_ME_UNDO_TIME_LIMIT=10000
|
||||||
DELETE_MESSAGE_UNDO_TIME_LIMIT=10000
|
DELETE_MESSAGE_UNDO_TIME_LIMIT=10000
|
||||||
|
ENABLE_ALERT_BANNER=0
|
||||||
|
|
|
@ -37,3 +37,4 @@ LOCAL_PAIRING_ENABLED=1
|
||||||
FAST_CREATE_COMMUNITY_ENABLED=1
|
FAST_CREATE_COMMUNITY_ENABLED=1
|
||||||
TEST_NETWORKS_ENABLED=1
|
TEST_NETWORKS_ENABLED=1
|
||||||
SHOW_NOT_IMPLEMENTED_FEATURES=1
|
SHOW_NOT_IMPLEMENTED_FEATURES=1
|
||||||
|
ENABLE_ALERT_BANNER=1
|
||||||
|
|
|
@ -23,3 +23,4 @@ DATABASE_MANAGEMENT_ENABLED=1
|
||||||
DELETE_MESSAGE_ENABLED=1
|
DELETE_MESSAGE_ENABLED=1
|
||||||
FAST_CREATE_COMMUNITY_ENABLED=0
|
FAST_CREATE_COMMUNITY_ENABLED=0
|
||||||
TEST_NETWORKS_ENABLED=0
|
TEST_NETWORKS_ENABLED=0
|
||||||
|
ENABLE_ALERT_BANNER=1
|
||||||
|
|
|
@ -185,7 +185,8 @@
|
||||||
(= :chat view-id)
|
(= :chat view-id)
|
||||||
{:effects.async-storage/set {:chat-id (get-in cofx [:db :current-chat-id])
|
{:effects.async-storage/set {:chat-id (get-in cofx [:db :current-chat-id])
|
||||||
:key-uid (get-in cofx [:db :profile/profile :key-uid])}
|
: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?))
|
(not (get db :screens/was-focused-once?))
|
||||||
{:db (assoc db :screens/was-focused-once? true)})))
|
{:db (assoc db :screens/was-focused-once? true)})))
|
||||||
|
|
|
@ -223,25 +223,28 @@
|
||||||
|
|
||||||
(defn show-image-picker
|
(defn show-image-picker
|
||||||
([images-fn]
|
([images-fn]
|
||||||
(show-image-picker images-fn nil))
|
(show-image-picker images-fn nil nil))
|
||||||
([images-fn
|
([images-fn
|
||||||
{:keys [media-type]
|
{:keys [media-type]
|
||||||
:or {media-type "any"}
|
:or {media-type "any"}
|
||||||
:as props}]
|
:as props}
|
||||||
|
finally-callback]
|
||||||
(-> ^js image-picker
|
(-> ^js image-picker
|
||||||
(.openPicker (clj->js (merge {:mediaType media-type}
|
(.openPicker (clj->js (merge {:mediaType media-type}
|
||||||
props)))
|
props)))
|
||||||
(.then images-fn)
|
(.then images-fn)
|
||||||
(.catch show-access-error))))
|
(.catch show-access-error)
|
||||||
|
(.finally finally-callback))))
|
||||||
|
|
||||||
(defn show-image-picker-camera
|
(defn show-image-picker-camera
|
||||||
([images-fn]
|
([images-fn]
|
||||||
(show-image-picker-camera images-fn nil))
|
(show-image-picker-camera images-fn nil nil))
|
||||||
([images-fn props]
|
([images-fn props finally-callback]
|
||||||
(-> ^js image-picker
|
(-> ^js image-picker
|
||||||
(.openCamera (clj->js props))
|
(.openCamera (clj->js props))
|
||||||
(.then images-fn)
|
(.then images-fn)
|
||||||
(.catch show-access-error))))
|
(.catch show-access-error)
|
||||||
|
(.finally finally-callback))))
|
||||||
|
|
||||||
;; Clipboard
|
;; Clipboard
|
||||||
|
|
||||||
|
|
|
@ -3,9 +3,11 @@
|
||||||
[legacy.status-im.ui.components.list.item :as list.item]
|
[legacy.status-im.ui.components.list.item :as list.item]
|
||||||
[legacy.status-im.ui.components.react :as react]
|
[legacy.status-im.ui.components.react :as react]
|
||||||
[re-frame.core :as re-frame]
|
[re-frame.core :as re-frame]
|
||||||
|
[react-native.platform :as platform]
|
||||||
[status-im.config :as config]
|
[status-im.config :as config]
|
||||||
[status-im.contexts.profile.settings.events]
|
[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-size 1000)
|
||||||
(def crop-opts
|
(def crop-opts
|
||||||
|
@ -17,16 +19,22 @@
|
||||||
(defn pick-pic
|
(defn pick-pic
|
||||||
[]
|
[]
|
||||||
(re-frame/dispatch [:bottom-sheet/hide-old])
|
(re-frame/dispatch [:bottom-sheet/hide-old])
|
||||||
|
(when platform/ios?
|
||||||
|
(rf/dispatch [:alert-banners/hide]))
|
||||||
(react/show-image-picker
|
(react/show-image-picker
|
||||||
#(re-frame/dispatch [:profile.settings/save-profile-picture (.-path ^js %) 0 0 crop-size crop-size])
|
#(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
|
(defn take-pic
|
||||||
[]
|
[]
|
||||||
(re-frame/dispatch [:bottom-sheet/hide-old])
|
(re-frame/dispatch [:bottom-sheet/hide-old])
|
||||||
|
(when platform/ios?
|
||||||
|
(rf/dispatch [:alert-banners/hide]))
|
||||||
(react/show-image-picker-camera
|
(react/show-image-picker-camera
|
||||||
#(re-frame/dispatch [:profile.settings/save-profile-picture (.-path ^js %) 0 0 crop-size crop-size])
|
#(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
|
(defn bottom-sheet
|
||||||
[has-picture]
|
[has-picture]
|
||||||
|
|
|
@ -7,21 +7,24 @@
|
||||||
|
|
||||||
(defn show-image-picker
|
(defn show-image-picker
|
||||||
([callback]
|
([callback]
|
||||||
(show-image-picker callback nil))
|
(show-image-picker callback nil nil))
|
||||||
([callback
|
([callback
|
||||||
{:keys [media-type]
|
{:keys [media-type]
|
||||||
:or {media-type "any"}
|
:or {media-type "any"}
|
||||||
:as props}]
|
:as props}
|
||||||
|
finally-callback]
|
||||||
(-> ^js image-picker
|
(-> ^js image-picker
|
||||||
(.openPicker (clj->js (merge {:mediaType media-type} props)))
|
(.openPicker (clj->js (merge {:mediaType media-type} props)))
|
||||||
(.then #(callback (.-path ^js %)))
|
(.then #(callback (.-path ^js %)))
|
||||||
(.catch show-access-error))))
|
(.catch show-access-error)
|
||||||
|
(.finally finally-callback))))
|
||||||
|
|
||||||
(defn show-image-picker-camera
|
(defn show-image-picker-camera
|
||||||
([callback]
|
([callback]
|
||||||
(show-image-picker-camera callback nil))
|
(show-image-picker-camera callback nil nil))
|
||||||
([callback props]
|
([callback props finally-callback]
|
||||||
(-> ^js image-picker
|
(-> ^js image-picker
|
||||||
(.openCamera (clj->js props))
|
(.openCamera (clj->js props))
|
||||||
(.then #(callback (.-path ^js %)))
|
(.then #(callback (.-path ^js %)))
|
||||||
(.catch show-access-error))))
|
(.catch show-access-error)
|
||||||
|
(.finally finally-callback))))
|
||||||
|
|
|
@ -22,6 +22,18 @@
|
||||||
{:db (dissoc db :alert-banners)
|
{:db (dissoc db :alert-banners)
|
||||||
:hide-alert-banner [(:view-id db) (:theme db)]})
|
: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/add add-alert-banner)
|
||||||
(re-frame/reg-event-fx :alert-banners/remove remove-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/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)
|
||||||
|
|
|
@ -39,15 +39,17 @@
|
||||||
(defn view
|
(defn view
|
||||||
[]
|
[]
|
||||||
(let [banners (rf/sub [:alert-banners])
|
(let [banners (rf/sub [:alert-banners])
|
||||||
|
hide-banners? (rf/sub [:alert-banners/hide?])
|
||||||
theme (quo.theme/use-theme)
|
theme (quo.theme/use-theme)
|
||||||
banners-count (count banners)
|
banners-count (count banners)
|
||||||
alert-banner (:alert banners)
|
alert-banner (:alert banners)
|
||||||
error-banner (:error banners)
|
error-banner (:error banners)
|
||||||
safe-area-top (safe-area/get-top)
|
safe-area-top (safe-area/get-top)
|
||||||
colors-map (get-colors-map theme)]
|
colors-map (get-colors-map theme)]
|
||||||
|
(when-not hide-banners?
|
||||||
[hole-view/hole-view
|
[hole-view/hole-view
|
||||||
;; required for fix flicker issue https://github.com/status-im/status-mobile/issues/19490
|
;; required for fix flicker issue https://github.com/status-im/status-mobile/issues/19490
|
||||||
{:style {:padding-bottom 1}
|
{:style {:padding-bottom 0.5}
|
||||||
:holes [{:x 0
|
:holes [{:x 0
|
||||||
:y (+ safe-area-top (* constants/alert-banner-height banners-count))
|
:y (+ safe-area-top (* constants/alert-banner-height banners-count))
|
||||||
:width (:width (rn/get-window))
|
:width (:width (rn/get-window))
|
||||||
|
@ -67,4 +69,4 @@
|
||||||
[banner
|
[banner
|
||||||
(assoc alert-banner
|
(assoc alert-banner
|
||||||
:colors-map colors-map
|
:colors-map colors-map
|
||||||
:second-banner? (= 2 banners-count))])]]))
|
:second-banner? (= 2 banners-count))])]])))
|
||||||
|
|
|
@ -3,8 +3,12 @@
|
||||||
[status-im.common.floating-button-page.view :as floating-button-page]
|
[status-im.common.floating-button-page.view :as floating-button-page]
|
||||||
[test-helpers.component :as h]))
|
[test-helpers.component :as h]))
|
||||||
|
|
||||||
|
|
||||||
|
(def sub-mocks {:alert-banners/top-margin 0})
|
||||||
|
|
||||||
(h/describe "floating button page"
|
(h/describe "floating button page"
|
||||||
(h/test "renders with a header and standard button"
|
(h/test "renders with a header and standard button"
|
||||||
|
(h/setup-subs sub-mocks)
|
||||||
(h/render [floating-button-page/view
|
(h/render [floating-button-page/view
|
||||||
{:header [quo/page-nav
|
{:header [quo/page-nav
|
||||||
{:type :title-description
|
{:type :title-description
|
||||||
|
@ -18,6 +22,7 @@
|
||||||
(h/is-truthy (h/get-by-text "floating button page")))
|
(h/is-truthy (h/get-by-text "floating button page")))
|
||||||
|
|
||||||
(h/test "renders with a header and a slide button"
|
(h/test "renders with a header and a slide button"
|
||||||
|
(h/setup-subs sub-mocks)
|
||||||
(h/render [floating-button-page/view
|
(h/render [floating-button-page/view
|
||||||
{:header [quo/page-nav
|
{:header [quo/page-nav
|
||||||
{:type :title-description
|
{:type :title-description
|
||||||
|
|
|
@ -8,7 +8,8 @@
|
||||||
[react-native.safe-area :as safe-area]
|
[react-native.safe-area :as safe-area]
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im.common.floating-button-page.floating-container.view :as floating-container]
|
[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
|
(defn- show-background
|
||||||
[{:keys [window-height keyboard-height footer-container-height content-scroll-y
|
[{:keys [window-height keyboard-height footer-container-height content-scroll-y
|
||||||
|
@ -83,6 +84,7 @@
|
||||||
(reset! content-scroll-y
|
(reset! content-scroll-y
|
||||||
(oops/oget event "nativeEvent.contentOffset.y")))]
|
(oops/oget event "nativeEvent.contentOffset.y")))]
|
||||||
(let [keyboard-shown? (if platform/ios? @keyboard-will-show? @keyboard-did-show?)
|
(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
|
show-background? (show-background {:window-height window-height
|
||||||
:footer-container-height @footer-container-height
|
:footer-container-height @footer-container-height
|
||||||
:keyboard-height @keyboard-height
|
:keyboard-height @keyboard-height
|
||||||
|
|
|
@ -1,14 +1,25 @@
|
||||||
(ns status-im.common.image-crop-picker.events
|
(ns status-im.common.image-crop-picker.events
|
||||||
(:require [react-native.image-crop-picker :as image-crop-picker]
|
(:require [react-native.image-crop-picker :as image-crop-picker]
|
||||||
|
[react-native.platform :as platform]
|
||||||
[utils.re-frame :as rf]))
|
[utils.re-frame :as rf]))
|
||||||
|
|
||||||
(rf/reg-fx :effect.image-crop-picker/show
|
(rf/reg-fx :effect.image-crop-picker/show
|
||||||
(fn [[callback crop-opts]]
|
(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
|
(rf/reg-fx :effect.image-crop-picker/show-camera
|
||||||
(fn [[callback crop-opts]]
|
(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
|
(rf/reg-event-fx
|
||||||
:image-crop-picker/show
|
:image-crop-picker/show
|
||||||
|
|
|
@ -51,9 +51,11 @@
|
||||||
insets (safe-area/get-insets)
|
insets (safe-area/get-insets)
|
||||||
window (rn/get-window)
|
window (rn/get-window)
|
||||||
window-width (:width window)
|
window-width (:width window)
|
||||||
window-height (if platform/android?
|
alert-banners-top-margin (rf/sub [:alert-banners/top-margin])
|
||||||
|
window-height (- (if platform/android?
|
||||||
(+ (:height window) (:top insets))
|
(+ (:height window) (:top insets))
|
||||||
(:height window))
|
(:height window))
|
||||||
|
alert-banners-top-margin)
|
||||||
curr-orientation (or (rf/sub [:lightbox/orientation]) orientation/portrait)
|
curr-orientation (or (rf/sub [:lightbox/orientation]) orientation/portrait)
|
||||||
landscape? (string/includes? curr-orientation orientation/landscape)
|
landscape? (string/includes? curr-orientation orientation/landscape)
|
||||||
horizontal? (or platform/android? (not landscape?))
|
horizontal? (or platform/android? (not landscape?))
|
||||||
|
|
|
@ -136,3 +136,7 @@
|
||||||
(def community-accounts-selection-enabled? true)
|
(def community-accounts-selection-enabled? true)
|
||||||
(def fetch-messages-enabled? (enabled? (get-config :FETCH_MESSAGES_ENABLED "1")))
|
(def fetch-messages-enabled? (enabled? (get-config :FETCH_MESSAGES_ENABLED "1")))
|
||||||
(def test-networks-enabled? (enabled? (get-config :TEST_NETWORKS_ENABLED "0")))
|
(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")))
|
||||||
|
|
|
@ -186,6 +186,8 @@
|
||||||
:on-allowed (fn []
|
:on-allowed (fn []
|
||||||
(when (and platform/android? @input-ref)
|
(when (and platform/android? @input-ref)
|
||||||
(.blur ^js @input-ref))
|
(.blur ^js @input-ref))
|
||||||
|
(when platform/ios?
|
||||||
|
(rf/dispatch [:alert-banners/hide]))
|
||||||
(rf/dispatch [:chat.ui/set-input-content-height
|
(rf/dispatch [:chat.ui/set-input-content-height
|
||||||
(reanimated/get-shared-value height)])
|
(reanimated/get-shared-value height)])
|
||||||
(rf/dispatch [:photo-selector/navigate-to-photo-selector]))
|
(rf/dispatch [:photo-selector/navigate-to-photo-selector]))
|
||||||
|
|
|
@ -14,8 +14,9 @@
|
||||||
curr-height))
|
curr-height))
|
||||||
|
|
||||||
(defn store-kb-height
|
(defn store-kb-height
|
||||||
[event {:keys [kb-default-height kb-height]} {:keys [window-height]}]
|
[event {:keys [kb-default-height kb-height]}]
|
||||||
(let [height (- window-height (oops/oget event "endCoordinates.screenY"))]
|
(let [height (- (:height (rn/get-window))
|
||||||
|
(oops/oget event "endCoordinates.screenY"))]
|
||||||
(reset! kb-height height)
|
(reset! kb-height height)
|
||||||
(when (zero? @kb-default-height)
|
(when (zero? @kb-default-height)
|
||||||
(async-storage/set-item! :kb-default-height (str height)))))
|
(async-storage/set-item! :kb-default-height (str height)))))
|
||||||
|
@ -56,9 +57,10 @@
|
||||||
(defn add-kb-listeners
|
(defn add-kb-listeners
|
||||||
[{:keys [keyboard-show-listener keyboard-frame-listener keyboard-hide-listener input-ref] :as props}
|
[{:keys [keyboard-show-listener keyboard-frame-listener keyboard-hide-listener input-ref] :as props}
|
||||||
state animations dimensions]
|
state animations dimensions]
|
||||||
(reset! keyboard-show-listener (.addListener rn/keyboard
|
(reset! keyboard-show-listener (.addListener
|
||||||
|
rn/keyboard
|
||||||
"keyboardDidShow"
|
"keyboardDidShow"
|
||||||
#(store-kb-height % state dimensions)))
|
#(store-kb-height % state)))
|
||||||
(reset! keyboard-frame-listener (.addListener
|
(reset! keyboard-frame-listener (.addListener
|
||||||
rn/keyboard
|
rn/keyboard
|
||||||
"keyboardWillChangeFrame"
|
"keyboardWillChangeFrame"
|
||||||
|
|
|
@ -199,6 +199,7 @@
|
||||||
:edit (rf/sub [:chats/edit-message])
|
:edit (rf/sub [:chats/edit-message])
|
||||||
:input-with-mentions (rf/sub [:chat/input-with-mentions])
|
:input-with-mentions (rf/sub [:chat/input-with-mentions])
|
||||||
:input-text (:input-text chat-input)
|
:input-text (:input-text chat-input)
|
||||||
|
:alert-banners-top-margin (rf/sub [:alert-banners/top-margin])
|
||||||
:input-content-height (:input-content-height chat-input)}))
|
:input-content-height (:input-content-height chat-input)}))
|
||||||
|
|
||||||
(defn init-shared-values
|
(defn init-shared-values
|
||||||
|
|
|
@ -39,6 +39,12 @@
|
||||||
theme
|
theme
|
||||||
window-height]} props state shared-values]
|
window-height]} props state shared-values]
|
||||||
(let [subscriptions (utils/init-subs)
|
(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
|
content-height (reagent/atom (or (:input-content-height ; Actual text height
|
||||||
subscriptions)
|
subscriptions)
|
||||||
constants/input-height))
|
constants/input-height))
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
(ns status-im.contexts.chat.messenger.messages.view
|
(ns status-im.contexts.chat.messenger.messages.view
|
||||||
(:require
|
(:require
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
|
[react-native.platform :as platform]
|
||||||
[react-native.reanimated :as reanimated]
|
[react-native.reanimated :as reanimated]
|
||||||
[react-native.safe-area :as safe-area]
|
[react-native.safe-area :as safe-area]
|
||||||
[status-im.contexts.chat.messenger.composer.view :as composer.view]
|
[status-im.contexts.chat.messenger.composer.view :as composer.view]
|
||||||
|
@ -10,43 +11,31 @@
|
||||||
[status-im.contexts.chat.messenger.placeholder.view :as placeholder.view]
|
[status-im.contexts.chat.messenger.placeholder.view :as placeholder.view]
|
||||||
[utils.re-frame :as rf]))
|
[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
|
(defn- chat-screen
|
||||||
[chat-screen-layout-calculations-complete?]
|
[{:keys [insets] :as props}]
|
||||||
(let [insets (safe-area/get-insets)
|
(let [alert-banners-top-margin (rf/sub [:alert-banners/top-margin])]
|
||||||
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)]
|
|
||||||
[rn/keyboard-avoiding-view
|
[rn/keyboard-avoiding-view
|
||||||
{:style style/keyboard-avoiding-container
|
{:style style/keyboard-avoiding-container
|
||||||
:keyboard-vertical-offset (- (:bottom insets))}
|
:keyboard-vertical-offset (- (if platform/ios? alert-banners-top-margin 0) (:bottom insets))}
|
||||||
[list.view/messages-list-content
|
[list.view/messages-list-content props]
|
||||||
{:insets insets
|
[messages.navigation/view props]
|
||||||
:layout-height layout-height
|
[composer.view/composer props]]))
|
||||||
: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}]]))
|
|
||||||
|
|
||||||
(defn lazy-chat-screen
|
(defn lazy-chat-screen
|
||||||
[chat-screen-layout-calculations-complete?]
|
[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?
|
(when-not screen-loaded?
|
||||||
(reanimated/set-shared-value chat-screen-layout-calculations-complete? false))
|
(reanimated/set-shared-value chat-screen-layout-calculations-complete? false))
|
||||||
(when screen-loaded?
|
(when screen-loaded?
|
||||||
[chat-screen chat-screen-layout-calculations-complete?])))
|
[chat-screen props])))
|
||||||
|
|
||||||
(defn chat
|
(defn chat
|
||||||
[]
|
[]
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
(:require [clojure.string :as string]
|
(:require [clojure.string :as string]
|
||||||
[quo.core :as quo]
|
[quo.core :as quo]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
|
[react-native.platform :as platform]
|
||||||
[react-native.safe-area :as safe-area]
|
[react-native.safe-area :as safe-area]
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im.common.validation.profile :as profile-validator]
|
[status-im.common.validation.profile :as profile-validator]
|
||||||
|
@ -16,6 +17,7 @@
|
||||||
(let [insets (safe-area/get-insets)
|
(let [insets (safe-area/get-insets)
|
||||||
profile (rf/sub [:profile/profile-with-image])
|
profile (rf/sub [:profile/profile-with-image])
|
||||||
customization-color (rf/sub [:profile/customization-color])
|
customization-color (rf/sub [:profile/customization-color])
|
||||||
|
alert-banners-top-margin (rf/sub [:alert-banners/top-margin])
|
||||||
profile-bio (:bio profile)
|
profile-bio (:bio profile)
|
||||||
unsaved-bio (reagent/atom profile-bio)
|
unsaved-bio (reagent/atom profile-bio)
|
||||||
error-msg (reagent/atom nil)
|
error-msg (reagent/atom nil)
|
||||||
|
@ -40,6 +42,7 @@
|
||||||
:on-press #(rf/dispatch [:navigate-back])}]
|
:on-press #(rf/dispatch [:navigate-back])}]
|
||||||
[rn/keyboard-avoiding-view
|
[rn/keyboard-avoiding-view
|
||||||
{:key :content
|
{:key :content
|
||||||
|
:keyboard-vertical-offset (if platform/ios? alert-banners-top-margin 0)
|
||||||
:style style/screen-container}
|
:style style/screen-container}
|
||||||
[rn/view {:style {:gap 22}}
|
[rn/view {:style {:gap 22}}
|
||||||
[quo/text-combinations {:title (i18n/label :t/bio)}]
|
[quo/text-combinations {:title (i18n/label :t/bio)}]
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
(:require [clojure.string :as string]
|
(:require [clojure.string :as string]
|
||||||
[quo.core :as quo]
|
[quo.core :as quo]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
|
[react-native.platform :as platform]
|
||||||
[react-native.safe-area :as safe-area]
|
[react-native.safe-area :as safe-area]
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im.common.validation.profile :as profile-validator]
|
[status-im.common.validation.profile :as profile-validator]
|
||||||
|
@ -18,6 +19,7 @@
|
||||||
profile (rf/sub [:profile/profile-with-image])
|
profile (rf/sub [:profile/profile-with-image])
|
||||||
customization-color (rf/sub [:profile/customization-color])
|
customization-color (rf/sub [:profile/customization-color])
|
||||||
display-name (profile.utils/displayed-name profile)
|
display-name (profile.utils/displayed-name profile)
|
||||||
|
alert-banners-top-margin (rf/sub [:alert-banners/top-margin])
|
||||||
full-name (reagent/atom display-name)
|
full-name (reagent/atom display-name)
|
||||||
error-msg (reagent/atom nil)
|
error-msg (reagent/atom nil)
|
||||||
typing? (reagent/atom false)
|
typing? (reagent/atom false)
|
||||||
|
@ -41,6 +43,7 @@
|
||||||
:on-press #(rf/dispatch [:navigate-back])}]
|
:on-press #(rf/dispatch [:navigate-back])}]
|
||||||
[rn/keyboard-avoiding-view
|
[rn/keyboard-avoiding-view
|
||||||
{:key :content
|
{:key :content
|
||||||
|
:keyboard-vertical-offset (if platform/ios? alert-banners-top-margin 0)
|
||||||
:style style/screen-container}
|
:style style/screen-container}
|
||||||
[rn/view {:style {:gap 22}}
|
[rn/view {:style {:gap 22}}
|
||||||
[quo/text-combinations {:title (i18n/label :t/name)}]
|
[quo/text-combinations {:title (i18n/label :t/name)}]
|
||||||
|
|
|
@ -231,7 +231,8 @@
|
||||||
(rf/reg-event-fx
|
(rf/reg-event-fx
|
||||||
:profile/show-testnet-mode-banner-if-enabled
|
:profile/show-testnet-mode-banner-if-enabled
|
||||||
(fn [{:keys [db]}]
|
(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
|
{:fx [[:dispatch
|
||||||
[:alert-banners/add
|
[:alert-banners/add
|
||||||
{:type :alert
|
{:type :alert
|
||||||
|
|
|
@ -102,8 +102,9 @@
|
||||||
shell.constants/switcher-card-size)}))
|
shell.constants/switcher-card-size)}))
|
||||||
|
|
||||||
(defn calculate-and-set-shared-values
|
(defn calculate-and-set-shared-values
|
||||||
[]
|
[alert-banners-top-margin]
|
||||||
(let [{:keys [width] :as dimensions} (utils/dimensions)
|
(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-left-position (/ (- width (* 2 shell.constants/switcher-card-size)) 3)
|
||||||
switcher-card-top-position (+ (safe-area/get-top) 120)
|
switcher-card-top-position (+ (safe-area/get-top) 120)
|
||||||
shared-values
|
shared-values
|
||||||
|
|
|
@ -34,7 +34,9 @@
|
||||||
|
|
||||||
(defn f-shell-stack
|
(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
|
(rn/use-mount
|
||||||
(fn []
|
(fn []
|
||||||
(rn/hw-back-add-listener navigate-back-handler)
|
(rn/hw-back-add-listener navigate-back-handler)
|
||||||
|
|
|
@ -12,6 +12,7 @@
|
||||||
(h/setup-subs {:wallet/scanned-address nil
|
(h/setup-subs {:wallet/scanned-address nil
|
||||||
:wallet/addresses #{"0x12E838Ae1f769147b12956485dc56e57138f3AC8"
|
:wallet/addresses #{"0x12E838Ae1f769147b12956485dc56e57138f3AC8"
|
||||||
"0x22E838Ae1f769147b12956485dc56e57138f3AC8"}
|
"0x22E838Ae1f769147b12956485dc56e57138f3AC8"}
|
||||||
|
:alert-banners/top-margin 0
|
||||||
:wallet/watch-address-activity-state nil
|
:wallet/watch-address-activity-state nil
|
||||||
:profile/customization-color :blue})))
|
:profile/customization-color :blue})))
|
||||||
|
|
||||||
|
|
|
@ -8,6 +8,7 @@
|
||||||
|
|
||||||
(h/test "Create Account button is disabled while no account name exists"
|
(h/test "Create Account button is disabled while no account name exists"
|
||||||
(h/setup-subs {:wallet/watch-only-accounts []
|
(h/setup-subs {:wallet/watch-only-accounts []
|
||||||
|
:alert-banners/top-margin 0
|
||||||
:get-screen-params {:address "0xmock-address"}})
|
:get-screen-params {:address "0xmock-address"}})
|
||||||
(h/render [confirm-address/view])
|
(h/render [confirm-address/view])
|
||||||
(h/is-truthy (h/get-by-text "0xmock-address"))
|
(h/is-truthy (h/get-by-text "0xmock-address"))
|
||||||
|
|
|
@ -6,7 +6,9 @@
|
||||||
(re-frame/reg-sub
|
(re-frame/reg-sub
|
||||||
:alert-banners/top-margin
|
:alert-banners/top-margin
|
||||||
:<- [:alert-banners]
|
:<- [:alert-banners]
|
||||||
(fn [banners]
|
:<- [:alert-banners/hide?]
|
||||||
|
(fn [[banners hide-banners?]]
|
||||||
(let [banners-count (count banners)]
|
(let [banners-count (count banners)]
|
||||||
(when (pos? banners-count)
|
(if (and (pos? banners-count) (not hide-banners?))
|
||||||
(+ (* constants/alert-banner-height banners-count) 8)))))
|
(+ (* constants/alert-banner-height banners-count) 10)
|
||||||
|
0))))
|
||||||
|
|
|
@ -8,25 +8,25 @@
|
||||||
|
|
||||||
(h/deftest-sub :alert-banners/top-margin
|
(h/deftest-sub :alert-banners/top-margin
|
||||||
[sub-name]
|
[sub-name]
|
||||||
(testing "returns 48 when only alert banner"
|
(testing "returns 50 when only alert banner"
|
||||||
(swap! rf-db/app-db assoc
|
(swap! rf-db/app-db assoc
|
||||||
:alert-banners
|
:alert-banners
|
||||||
{:alert {:text "Alert"
|
{:alert {:text "Alert"
|
||||||
:type :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
|
(swap! rf-db/app-db assoc
|
||||||
:alert-banners
|
:alert-banners
|
||||||
{:error {:text "Error"
|
{:error {:text "Error"
|
||||||
:type :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
|
(swap! rf-db/app-db assoc
|
||||||
:alert-banners
|
:alert-banners
|
||||||
{:alert {:text "Alert"
|
{:alert {:text "Alert"
|
||||||
:type :alert}
|
:type :alert}
|
||||||
:error {:text "Error"
|
:error {:text "Error"
|
||||||
:type :error}})
|
:type :error}})
|
||||||
(is (= (rf/sub [sub-name]) 88))))
|
(is (= (rf/sub [sub-name]) 90))))
|
||||||
|
|
|
@ -64,6 +64,7 @@
|
||||||
(reg-root-key-sub :password-authentication :password-authentication)
|
(reg-root-key-sub :password-authentication :password-authentication)
|
||||||
(reg-root-key-sub :initials-avatar-font-file :initials-avatar-font-file)
|
(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 :alert-banners)
|
||||||
|
(reg-root-key-sub :alert-banners/hide? :alert-banners/hide?)
|
||||||
|
|
||||||
;;onboarding
|
;;onboarding
|
||||||
(reg-root-key-sub :onboarding/generated-keys? :onboarding/generated-keys?)
|
(reg-root-key-sub :onboarding/generated-keys? :onboarding/generated-keys?)
|
||||||
|
|
Loading…
Reference in New Issue