From fac2f952d0292c27088757d73ef12c7ddb2861e1 Mon Sep 17 00:00:00 2001 From: John Ngei Date: Thu, 23 Feb 2023 18:31:21 +0300 Subject: [PATCH] Fix: scroll-page component sticky header height --- src/quo2/components/navigation/page_nav.cljs | 1 + src/status_im2/common/scroll_page/style.cljs | 5 +++-- src/status_im2/common/scroll_page/view.cljs | 15 +++++++++------ .../contexts/communities/discover/style.cljs | 12 ++++++++++-- .../contexts/communities/discover/view.cljs | 10 +++++----- .../contexts/communities/home/style.cljs | 11 ++++++++++- .../contexts/communities/home/view.cljs | 7 +++---- .../contexts/communities/overview/style.cljs | 18 ++++++++---------- .../contexts/communities/overview/view.cljs | 16 ++++++++-------- 9 files changed, 57 insertions(+), 38 deletions(-) diff --git a/src/quo2/components/navigation/page_nav.cljs b/src/quo2/components/navigation/page_nav.cljs index a858a81f47..705cfa4805 100644 --- a/src/quo2/components/navigation/page_nav.cljs +++ b/src/quo2/components/navigation/page_nav.cljs @@ -216,6 +216,7 @@ ;; iPhone 11 Pro's height in Figma divided by Component height 56/1125 :align-items :center :padding-horizontal 20 + :margin-top 44 :height 56 :justify-content :space-between} page-nav-background-uri (assoc :background-color page-nav-color) diff --git a/src/status_im2/common/scroll_page/style.cljs b/src/status_im2/common/scroll_page/style.cljs index 1cf51d48f1..1b96e8c3f7 100644 --- a/src/status_im2/common/scroll_page/style.cljs +++ b/src/status_im2/common/scroll_page/style.cljs @@ -31,7 +31,7 @@ [border-radius] {:flex 1 :position :absolute - :top -48 + :top (if platform/ios? -48 0) :left 0 :right 0 :overflow :scroll @@ -44,7 +44,8 @@ {:position :absolute :flex-direction :row :left 64 - :top 16})) + :top 16 + :margin-top 44})) (def sticky-header-image {:border-radius 12 diff --git a/src/status_im2/common/scroll_page/view.cljs b/src/status_im2/common/scroll_page/view.cljs index d3ba41319c..515e724edb 100644 --- a/src/status_im2/common/scroll_page/view.cljs +++ b/src/status_im2/common/scroll_page/view.cljs @@ -36,7 +36,7 @@ top-nav title-colum navigate-back?] - (let [input-range (if platform/ios? [-47 10] [0 92]) + (let [input-range (if platform/ios? [-47 10] [0 10]) output-range (if platform/ios? [-208 0] [-208 -45]) y (reanimated/use-shared-value scroll-height) translate-animation (reanimated/interpolate y @@ -60,8 +60,11 @@ :overlay-color :transparent :style (style/blur-slider translate-animation height)}] [rn/view - {:style {:z-index 6 - :margin-top (if platform/ios? 44 0)}} + {:style {:z-index 6 + :position :absolute + :top 0 + :left 0 + :right 0}} (when cover [reanimated/view {:style (style/sticky-header-title opacity-animation)} @@ -74,7 +77,8 @@ :style {:line-height 21}} name]]) (if top-nav - top-nav + [rn/view {:margin-top (if platform/ios? 44 0)} + top-nav] [quo/page-nav (merge {:horizontal-description? true :one-icon-align-left? true @@ -155,8 +159,7 @@ [rn/view {:flex 1 :border-radius (diff-with-max-min @scroll-height 16 0) - :background-color background-color - :padding-top 48} + :background-color background-color} (when cover-image [:f> display-picture @scroll-height cover-image]) children])]]))) diff --git a/src/status_im2/contexts/communities/discover/style.cljs b/src/status_im2/contexts/communities/discover/style.cljs index f24e0a83fd..9a8873e5f2 100644 --- a/src/status_im2/contexts/communities/discover/style.cljs +++ b/src/status_im2/contexts/communities/discover/style.cljs @@ -37,16 +37,24 @@ [background-color] {:background-color background-color :position :absolute - :top (if platform/ios? 0 44) + :top 0 :bottom 0 :left 0 :right 0}) +(def communities-header-container + {:align-items :center + :justify-content :center}) + +(def render-communities-container + {:padding-horizontal 20 + :margin-top 100}) + (defn blur-tabs-header [] {:padding-horizontal 20 :position :absolute - :top (if platform/ios? 56 60) + :top (if platform/ios? 100 104) :height 56 :right 0 :left 0 diff --git a/src/status_im2/contexts/communities/discover/view.cljs b/src/status_im2/contexts/communities/discover/view.cljs index 69a7f35a91..83f0c38f7d 100644 --- a/src/status_im2/contexts/communities/discover/view.cljs +++ b/src/status_im2/contexts/communities/discover/view.cljs @@ -73,8 +73,7 @@ (i18n/label :t/featured)] [quo/counter {:type :grey} communities-count]] [quo/icon :i/info - {:container-style {:align-items :center - :justify-content :center} + {:container-style style/communities-header-container :resize-mode :center :size 20 :color (colors/theme-colors @@ -195,7 +194,8 @@ featured-communities view-type] (fn [] - [rn/view {:padding-horizontal 20} + [rn/view + {:style style/render-communities-container} [discover-communities-header {:selected-tab selected-tab :view-type view-type @@ -230,8 +230,8 @@ 156 100) (if (> @scroll-height 360) - 162 - 106))} + 208 + 148))} [render-sticky-header {:selected-tab selected-tab :scroll-height scroll-height}] diff --git a/src/status_im2/contexts/communities/home/style.cljs b/src/status_im2/contexts/communities/home/style.cljs index 881be98976..2be6305c32 100644 --- a/src/status_im2/contexts/communities/home/style.cljs +++ b/src/status_im2/contexts/communities/home/style.cljs @@ -8,6 +8,15 @@ :padding-horizontal 20 :background-color :transparent}) +(def communities-header-style + {:padding-vertical 8 + :margin-top (if platform/ios? 208 112)}) + +(def render-segments-container + {:flex 1 + :padding-horizontal 20 + :padding-vertical 12}) + (defn home-communities-container [background-color] {:flex 1 @@ -21,7 +30,7 @@ (def blur-tabs-header {:flex 1 :position :absolute - :top 112 + :top (if platform/ios? 156 112) :height 52 :left 0 :right 0 diff --git a/src/status_im2/contexts/communities/home/view.cljs b/src/status_im2/contexts/communities/home/view.cljs index fcab97b82e..c35b86c39d 100644 --- a/src/status_im2/contexts/communities/home/view.cljs +++ b/src/status_im2/contexts/communities/home/view.cljs @@ -46,9 +46,7 @@ (let [ids-by-user-involvement (rf/sub [:communities/community-ids-by-user-involvement]) tab @selected-tab] [rn/view - {:style {:flex 1 - :padding-horizontal 20 - :padding-vertical 12}} + {:style style/render-segments-container} (case tab :joined [communities-list (:joined ids-by-user-involvement)] @@ -67,7 +65,8 @@ (defn communities-header [selected-tab padding-top] [:<> - [rn/view {:style {:padding-vertical 8}} + [rn/view + {:style style/communities-header-style} [quo/discover-card {:on-press #(rf/dispatch [:navigate-to :discover-communities]) :title (i18n/label :t/discover) diff --git a/src/status_im2/contexts/communities/overview/style.cljs b/src/status_im2/contexts/communities/overview/style.cljs index 2e6bb0b880..bbae2341e7 100644 --- a/src/status_im2/contexts/communities/overview/style.cljs +++ b/src/status_im2/contexts/communities/overview/style.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.communities.overview.style - (:require [react-native.platform :as platform] - [quo2.foundations.colors :as colors])) + (:require [quo2.foundations.colors :as colors])) (def preview-user {:flex-direction :row @@ -8,13 +7,12 @@ :margin-top 20}) (def blur-channel-header - {:position :absolute - :top (if platform/ios? 56 60) - :height 34 - :right 0 - :left 0 - :flex 1 - :background-color :transparent}) + {:position :absolute + :top 100 + :height 34 + :right 0 + :left 0 + :flex 1}) (def join-button {:width "100%" @@ -30,7 +28,7 @@ (def community-overview-container {:position :absolute - :top (if platform/ios? 0 44) + :top 0 :left 0 :right 0 :bottom 0}) diff --git a/src/status_im2/contexts/communities/overview/view.cljs b/src/status_im2/contexts/communities/overview/view.cljs index 81478083e7..73afd335e2 100644 --- a/src/status_im2/contexts/communities/overview/view.cljs +++ b/src/status_im2/contexts/communities/overview/view.cljs @@ -4,6 +4,7 @@ [quo2.core :as quo] [quo2.foundations.colors :as colors] [react-native.core :as rn] + [react-native.blur :as blur] [react-native.platform :as platform] [reagent.core :as reagent] [status-im2.constants :as constants] @@ -263,8 +264,11 @@ [_] (fn [{:keys [:enabled :label]}] (when enabled - [rn/view - {:style style/blur-channel-header} + [blur/view + {:style style/blur-channel-header + :blur-amount 20 + :blur-type :transparent + :overlay-color :transparent} [quo/divider-label {:label (:label label) :chevron-position :left}]]))) @@ -297,12 +301,8 @@ colors/white colors/neutral-90) :height (if platform/ios? - (if (> @scroll-height @first-channel-height) - 134 - 100) - (if (> @scroll-height @first-channel-height) - 140 - 106))} + 100 + 148)} [sticky-category-header {:enabled (> @scroll-height @first-channel-height)