From 26a702799c0ac2ec6cb3b389e76c21d6bd5d27da Mon Sep 17 00:00:00 2001 From: Ibrahem Khalil Date: Tue, 3 Oct 2023 19:37:11 +0300 Subject: [PATCH] [16845] Wrong buttons background color on community home screen's page nav (#17003) --- package.json.gpg | Bin 0 -> 2195 bytes .../components/navigation/page_nav/view.cljs | 23 ++++++++++++------ src/status_im2/common/scroll_page/view.cljs | 19 ++++++++------- .../contexts/communities/overview/view.cljs | 14 ++++++----- 4 files changed, 33 insertions(+), 23 deletions(-) create mode 100644 package.json.gpg diff --git a/package.json.gpg b/package.json.gpg new file mode 100644 index 0000000000000000000000000000000000000000..036a58bc789c0d140da464ade6c41514cc8e7132 GIT binary patch literal 2195 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 Vk9_~(UkwiD=0890m2Llf^#2WyW~cxF literal 0 HcmV?d00001 diff --git a/src/quo2/components/navigation/page_nav/view.cljs b/src/quo2/components/navigation/page_nav/view.cljs index a352d1ed75..b7003c5641 100644 --- a/src/quo2/components/navigation/page_nav/view.cljs +++ b/src/quo2/components/navigation/page_nav/view.cljs @@ -20,7 +20,7 @@ :blur :grey}) (defn- page-nav-base - [{:keys [margin-top background on-press accessibility-label icon-name] + [{:keys [margin-top background on-press accessibility-label icon-name behind-overlay?] :or {background :white}} & children] (into [rn/view {:style (style/container margin-top)} @@ -30,7 +30,9 @@ :icon-only? true :size 32 :on-press on-press - :background (when (button-properties/backgrounds background) background) + :background (if behind-overlay? + :blur + (button-properties/backgrounds background)) :accessibility-label accessibility-label} icon-name])] children)) @@ -38,7 +40,7 @@ (defn- right-section-spacing [] [rn/view {:style style/right-actions-spacing}]) (defn- add-right-buttons-xf - [max-actions background] + [max-actions background behind-overlay?] (comp (filter map?) (take max-actions) (map (fn [{:keys [icon-name label] :as button-props}] @@ -48,7 +50,9 @@ :icon-only? icon-name :size 32 :accessible true - :background (when (button-properties/backgrounds background) background)) + :background (if behind-overlay? + :blur + (when (button-properties/backgrounds background) background))) (or label icon-name)])) (interpose [right-section-spacing]))) @@ -64,7 +68,8 @@ emoji]) (defn- right-content - [{:keys [background content max-actions min-size? support-account-switcher? account-switcher] + [{:keys [background content max-actions min-size? support-account-switcher? account-switcher + behind-overlay?] :or {support-account-switcher? true}}] [rn/view (when min-size? {:style style/right-content-min-size}) (cond @@ -73,7 +78,7 @@ (coll? content) (into [rn/view {:style style/right-actions-container}] - (add-right-buttons-xf max-actions background) + (add-right-buttons-xf max-actions background behind-overlay?) content) :else @@ -170,7 +175,8 @@ shown-name]])) (defn- view-internal - [{:keys [type right-side background text-align account-switcher] + "behind-overlay is necessary for us to know if the page-nav buttons are under the bottom sheet overlay or not." + [{:keys [type right-side background text-align account-switcher behind-overlay?] :or {type :no-title text-align :center right-side :none @@ -179,7 +185,8 @@ (case type :no-title [page-nav-base props - [right-content {:background background :content right-side :max-actions 3}]] + [right-content + {:background background :content right-side :max-actions 3 :behind-overlay? behind-overlay?}]] :title (let [centered? (= text-align :center)] diff --git a/src/status_im2/common/scroll_page/view.cljs b/src/status_im2/common/scroll_page/view.cljs index b5342815d4..db87f3f098 100644 --- a/src/status_im2/common/scroll_page/view.cljs +++ b/src/status_im2/common/scroll_page/view.cljs @@ -24,7 +24,7 @@ (defn f-scroll-page-header [scroll-height height name page-nav-right-side logo sticky-header top-nav title-colum navigate-back? - collapsed?] + collapsed? overlay-shown?] (let [input-range [0 10] output-range [-208 -45] y (reanimated/use-shared-value scroll-height) @@ -69,12 +69,13 @@ [rn/view {:style {:margin-top 0}} top-nav] [quo/page-nav - (cond-> {:margin-top 44 - :type :no-title - :background (if (= 1 (reanimated/get-shared-value opacity-animation)) - :blur - :photo) - :right-side page-nav-right-side} + (cond-> {:margin-top 44 + :type :no-title + :background (if (= 1 (reanimated/get-shared-value opacity-animation)) + :blur + :photo) + :right-side page-nav-right-side + :overlay-shown? overlay-shown?} navigate-back? (assoc :icon-name :i/close :on-press #(rf/dispatch [:navigate-back])))]) (when title-colum @@ -106,12 +107,12 @@ (let [scroll-height (reagent/atom negative-scroll-position-0)] (fn [{:keys [name theme cover-image logo page-nav-right-section-buttons on-scroll collapsed? - height top-nav title-colum background-color navigate-back?]} + height top-nav title-colum background-color navigate-back? overlay-shown?]} sticky-header children] [:<> [:f> f-scroll-page-header @scroll-height height name page-nav-right-section-buttons - logo sticky-header top-nav title-colum navigate-back? collapsed?] + logo sticky-header top-nav title-colum navigate-back? collapsed? overlay-shown?] [rn/scroll-view {:content-container-style {:flex-grow 1} :content-inset-adjustment-behavior :never diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 0b50ccca4f..ac50ce6976 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -312,9 +312,10 @@ ;; user is on this page initial-joined? joined] (fn [{:keys [id name images] :as community} pending?] - (let [cover {:uri (get-in images [:banner :uri])} - logo {:uri (get-in images [:thumbnail :uri])} - collapsed? (and initial-joined? (:joined community))] + (let [cover {:uri (get-in images [:banner :uri])} + logo {:uri (get-in images [:thumbnail :uri])} + collapsed? (and initial-joined? (:joined community)) + overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))] [scroll-page/scroll-page {:cover-image cover :collapsed? collapsed? @@ -324,7 +325,8 @@ :on-scroll #(reset! scroll-height %) :navigate-back? true :background-color (colors/theme-colors colors/white colors/neutral-95) - :height 148} + :height 148 + :overlay-shown? overlay-shown?} [sticky-category-header {:enabled (> @scroll-height @first-channel-height) :label (pick-first-category-by-height @@ -337,8 +339,8 @@ {:on-category-layout (partial add-category-height categories-heights) :collapsed? collapsed? :on-first-channel-height-changed - ;; Here we set the height of the component and we filter out the - ;; categories, as some might have been removed + ;; Here we set the height of the component and we filter out the categories, as some might + ;; have been removed. (fn [height categories] (swap! categories-heights select-keys categories) (reset! first-channel-height height))}]]))))