[16845] Wrong buttons background color on community home screen's page nav (#17003)
This commit is contained in:
parent
f5038f8e24
commit
26a702799c
Binary file not shown.
|
@ -20,7 +20,7 @@
|
||||||
:blur :grey})
|
:blur :grey})
|
||||||
|
|
||||||
(defn- page-nav-base
|
(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}}
|
:or {background :white}}
|
||||||
& children]
|
& children]
|
||||||
(into [rn/view {:style (style/container margin-top)}
|
(into [rn/view {:style (style/container margin-top)}
|
||||||
|
@ -30,7 +30,9 @@
|
||||||
:icon-only? true
|
:icon-only? true
|
||||||
:size 32
|
:size 32
|
||||||
:on-press on-press
|
:on-press on-press
|
||||||
:background (when (button-properties/backgrounds background) background)
|
:background (if behind-overlay?
|
||||||
|
:blur
|
||||||
|
(button-properties/backgrounds background))
|
||||||
:accessibility-label accessibility-label}
|
:accessibility-label accessibility-label}
|
||||||
icon-name])]
|
icon-name])]
|
||||||
children))
|
children))
|
||||||
|
@ -38,7 +40,7 @@
|
||||||
(defn- right-section-spacing [] [rn/view {:style style/right-actions-spacing}])
|
(defn- right-section-spacing [] [rn/view {:style style/right-actions-spacing}])
|
||||||
|
|
||||||
(defn- add-right-buttons-xf
|
(defn- add-right-buttons-xf
|
||||||
[max-actions background]
|
[max-actions background behind-overlay?]
|
||||||
(comp (filter map?)
|
(comp (filter map?)
|
||||||
(take max-actions)
|
(take max-actions)
|
||||||
(map (fn [{:keys [icon-name label] :as button-props}]
|
(map (fn [{:keys [icon-name label] :as button-props}]
|
||||||
|
@ -48,7 +50,9 @@
|
||||||
:icon-only? icon-name
|
:icon-only? icon-name
|
||||||
:size 32
|
:size 32
|
||||||
:accessible true
|
:accessible true
|
||||||
:background (when (button-properties/backgrounds background) background))
|
:background (if behind-overlay?
|
||||||
|
:blur
|
||||||
|
(when (button-properties/backgrounds background) background)))
|
||||||
(or label icon-name)]))
|
(or label icon-name)]))
|
||||||
(interpose [right-section-spacing])))
|
(interpose [right-section-spacing])))
|
||||||
|
|
||||||
|
@ -64,7 +68,8 @@
|
||||||
emoji])
|
emoji])
|
||||||
|
|
||||||
(defn- right-content
|
(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}}]
|
:or {support-account-switcher? true}}]
|
||||||
[rn/view (when min-size? {:style style/right-content-min-size})
|
[rn/view (when min-size? {:style style/right-content-min-size})
|
||||||
(cond
|
(cond
|
||||||
|
@ -73,7 +78,7 @@
|
||||||
|
|
||||||
(coll? content)
|
(coll? content)
|
||||||
(into [rn/view {:style style/right-actions-container}]
|
(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)
|
content)
|
||||||
|
|
||||||
:else
|
:else
|
||||||
|
@ -170,7 +175,8 @@
|
||||||
shown-name]]))
|
shown-name]]))
|
||||||
|
|
||||||
(defn- view-internal
|
(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
|
:or {type :no-title
|
||||||
text-align :center
|
text-align :center
|
||||||
right-side :none
|
right-side :none
|
||||||
|
@ -179,7 +185,8 @@
|
||||||
(case type
|
(case type
|
||||||
:no-title
|
:no-title
|
||||||
[page-nav-base props
|
[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
|
:title
|
||||||
(let [centered? (= text-align :center)]
|
(let [centered? (= text-align :center)]
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
|
|
||||||
(defn f-scroll-page-header
|
(defn f-scroll-page-header
|
||||||
[scroll-height height name page-nav-right-side logo sticky-header top-nav title-colum navigate-back?
|
[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]
|
(let [input-range [0 10]
|
||||||
output-range [-208 -45]
|
output-range [-208 -45]
|
||||||
y (reanimated/use-shared-value scroll-height)
|
y (reanimated/use-shared-value scroll-height)
|
||||||
|
@ -74,7 +74,8 @@
|
||||||
:background (if (= 1 (reanimated/get-shared-value opacity-animation))
|
:background (if (= 1 (reanimated/get-shared-value opacity-animation))
|
||||||
:blur
|
:blur
|
||||||
:photo)
|
:photo)
|
||||||
:right-side page-nav-right-side}
|
:right-side page-nav-right-side
|
||||||
|
:overlay-shown? overlay-shown?}
|
||||||
navigate-back? (assoc :icon-name :i/close
|
navigate-back? (assoc :icon-name :i/close
|
||||||
:on-press #(rf/dispatch [:navigate-back])))])
|
:on-press #(rf/dispatch [:navigate-back])))])
|
||||||
(when title-colum
|
(when title-colum
|
||||||
|
@ -106,12 +107,12 @@
|
||||||
(let [scroll-height (reagent/atom negative-scroll-position-0)]
|
(let [scroll-height (reagent/atom negative-scroll-position-0)]
|
||||||
(fn [{:keys [name theme cover-image logo page-nav-right-section-buttons on-scroll
|
(fn [{:keys [name theme cover-image logo page-nav-right-section-buttons on-scroll
|
||||||
collapsed?
|
collapsed?
|
||||||
height top-nav title-colum background-color navigate-back?]}
|
height top-nav title-colum background-color navigate-back? overlay-shown?]}
|
||||||
sticky-header
|
sticky-header
|
||||||
children]
|
children]
|
||||||
[:<>
|
[:<>
|
||||||
[:f> f-scroll-page-header @scroll-height height name page-nav-right-section-buttons
|
[: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
|
[rn/scroll-view
|
||||||
{:content-container-style {:flex-grow 1}
|
{:content-container-style {:flex-grow 1}
|
||||||
:content-inset-adjustment-behavior :never
|
:content-inset-adjustment-behavior :never
|
||||||
|
|
|
@ -314,7 +314,8 @@
|
||||||
(fn [{:keys [id name images] :as community} pending?]
|
(fn [{:keys [id name images] :as community} pending?]
|
||||||
(let [cover {:uri (get-in images [:banner :uri])}
|
(let [cover {:uri (get-in images [:banner :uri])}
|
||||||
logo {:uri (get-in images [:thumbnail :uri])}
|
logo {:uri (get-in images [:thumbnail :uri])}
|
||||||
collapsed? (and initial-joined? (:joined community))]
|
collapsed? (and initial-joined? (:joined community))
|
||||||
|
overlay-shown? (boolean (:sheets (rf/sub [:bottom-sheet])))]
|
||||||
[scroll-page/scroll-page
|
[scroll-page/scroll-page
|
||||||
{:cover-image cover
|
{:cover-image cover
|
||||||
:collapsed? collapsed?
|
:collapsed? collapsed?
|
||||||
|
@ -324,7 +325,8 @@
|
||||||
:on-scroll #(reset! scroll-height %)
|
:on-scroll #(reset! scroll-height %)
|
||||||
:navigate-back? true
|
:navigate-back? true
|
||||||
:background-color (colors/theme-colors colors/white colors/neutral-95)
|
:background-color (colors/theme-colors colors/white colors/neutral-95)
|
||||||
:height 148}
|
:height 148
|
||||||
|
:overlay-shown? overlay-shown?}
|
||||||
[sticky-category-header
|
[sticky-category-header
|
||||||
{:enabled (> @scroll-height @first-channel-height)
|
{:enabled (> @scroll-height @first-channel-height)
|
||||||
:label (pick-first-category-by-height
|
:label (pick-first-category-by-height
|
||||||
|
@ -337,8 +339,8 @@
|
||||||
{:on-category-layout (partial add-category-height categories-heights)
|
{:on-category-layout (partial add-category-height categories-heights)
|
||||||
:collapsed? collapsed?
|
:collapsed? collapsed?
|
||||||
:on-first-channel-height-changed
|
:on-first-channel-height-changed
|
||||||
;; Here we set the height of the component and we filter out the
|
;; Here we set the height of the component and we filter out the categories, as some might
|
||||||
;; categories, as some might have been removed
|
;; have been removed.
|
||||||
(fn [height categories]
|
(fn [height categories]
|
||||||
(swap! categories-heights select-keys categories)
|
(swap! categories-heights select-keys categories)
|
||||||
(reset! first-channel-height height))}]]))))
|
(reset! first-channel-height height))}]]))))
|
||||||
|
|
Loading…
Reference in New Issue