From f8b5b35063a0269cfdca5c20a335562c87f2d8df Mon Sep 17 00:00:00 2001 From: John Ngei Date: Tue, 7 Feb 2023 12:58:38 +0300 Subject: [PATCH] Update community home scrolling to support sticky header and tabs (#14929) * communities home sticky tabs * Communities home screen scroll behaviours * refactored scroll-page component --- src/quo2/components/navigation/page_nav.cljs | 3 +- src/status_im2/common/home/style.cljs | 4 +- src/status_im2/common/scroll_page/view.cljs | 7 +- .../contexts/communities/home/style.cljs | 29 ++++ .../contexts/communities/home/view.cljs | 140 +++++++++++------- 5 files changed, 126 insertions(+), 57 deletions(-) create mode 100644 src/status_im2/contexts/communities/home/style.cljs diff --git a/src/quo2/components/navigation/page_nav.cljs b/src/quo2/components/navigation/page_nav.cljs index 6ffd8f9d76..a858a81f47 100644 --- a/src/quo2/components/navigation/page_nav.cljs +++ b/src/quo2/components/navigation/page_nav.cljs @@ -224,7 +224,8 @@ {:style {:flex 1 :flex-direction :row :align-items :center}} - [left-section-view left-section put-middle-section-on-left?] + (when left-section + [left-section-view left-section put-middle-section-on-left?]) (when put-middle-section-on-left? [mid-section-view (assoc mid-section-props diff --git a/src/status_im2/common/home/style.cljs b/src/status_im2/common/home/style.cljs index 75ccb5901b..a65944d1ff 100644 --- a/src/status_im2/common/home/style.cljs +++ b/src/status_im2/common/home/style.cljs @@ -5,8 +5,8 @@ :align-items :center :height 56 :padding-vertical 12 - :margin-bottom 8 - :padding-horizontal 20}) + :padding-horizontal 20 + :background-color :transparent}) (def title-column-text {:accessibility-label :communities-screen-title diff --git a/src/status_im2/common/scroll_page/view.cljs b/src/status_im2/common/scroll_page/view.cljs index a421721a52..932b9dbb93 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 150]) + (let [input-range (if platform/ios? [-47 10] [0 92]) output-range (if platform/ios? [-208 0] [-208 -45]) y (reanimated/use-shared-value scroll-height) translate-animation (reanimated/interpolate y @@ -128,9 +128,8 @@ sticky-header children] [:<> - [:f> scroll-page-header @scroll-height height name - page-nav-right-section-buttons cover-image sticky-header top-nav title-colum - navigate-back?] + [:f> scroll-page-header @scroll-height height name page-nav-right-section-buttons + cover-image sticky-header top-nav title-colum navigate-back?] [rn/scroll-view {:content-container-style (style/scroll-view-container (diff-with-max-min @scroll-height 16 0)) diff --git a/src/status_im2/contexts/communities/home/style.cljs b/src/status_im2/contexts/communities/home/style.cljs new file mode 100644 index 0000000000..881be98976 --- /dev/null +++ b/src/status_im2/contexts/communities/home/style.cljs @@ -0,0 +1,29 @@ +(ns status-im2.contexts.communities.home.style + (:require [react-native.platform :as platform])) + +(defn community-segments + [padding-top] + {:padding-bottom 12 + :padding-top padding-top + :padding-horizontal 20 + :background-color :transparent}) + +(defn home-communities-container + [background-color] + {:flex 1 + :background-color background-color + :position :absolute + :top (if platform/ios? -44 0) + :bottom 0 + :left 0 + :right 0}) + +(def blur-tabs-header + {:flex 1 + :position :absolute + :top 112 + :height 52 + :left 0 + :right 0 + :justify-content :center + :background-color :transparent}) diff --git a/src/status_im2/contexts/communities/home/view.cljs b/src/status_im2/contexts/communities/home/view.cljs index 32d44dd70e..b0386e1ddf 100644 --- a/src/status_im2/contexts/communities/home/view.cljs +++ b/src/status_im2/contexts/communities/home/view.cljs @@ -1,37 +1,19 @@ (ns status-im2.contexts.communities.home.view (:require [utils.i18n :as i18n] [quo2.core :as quo] - [react-native.core :as rn] + [quo2.foundations.colors :as colors] [reagent.core :as reagent] + [react-native.core :as rn] [status-im2.common.home.view :as common.home] + [status-im2.common.scroll-page.view :as scroll-page] [status-im2.contexts.communities.menus.community-options.view :as options] + [status-im2.contexts.communities.home.style :as style] [utils.re-frame :as rf])) -(defn render-fn - [id] - (let [community-item (rf/sub [:communities/home-item id])] - [quo/communities-membership-list-item - {:on-press #(rf/dispatch [:navigate-to :community-overview id]) - :on-long-press #(rf/dispatch - [:bottom-sheet/show-sheet - {:content (fn [] - [options/community-options-bottom-sheet id]) - :selected-item (fn [] - [quo/communities-membership-list-item {} community-item])}])} - community-item])) - -(defn get-item-layout-js - [_ index] - #js {:length 64 :offset (* 64 index) :index index}) - -(defn home-community-segments - [selected-tab] +(defn community-segments + [selected-tab padding-top] [rn/view - {:style {:padding-bottom 12 - :padding-top 16 - :margin-top 8 - :height 60 - :padding-horizontal 20}} + {:style (style/community-segments padding-top)} [quo/tabs {:size 32 :on-change #(reset! selected-tab %) @@ -41,17 +23,25 @@ {:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}]}]]) (defn communities-list - [community-ids] - [rn/flat-list - {:key-fn identity - :get-item-layout get-item-layout-js - :keyboard-should-persist-taps :always - :shows-horizontal-scroll-indicator false - :data community-ids - :render-fn render-fn - :content-container-style {:padding-bottom 30}}]) + [communities-ids] + [rn/view + (map-indexed + (fn [index id] + (let [community (rf/sub [:communities/home-item id])] + ^{:key index} + [quo/communities-membership-list-item + {:on-press #(rf/dispatch [:navigate-to :community-overview id]) + :on-long-press #(rf/dispatch + [:bottom-sheet/show-sheet + {:content (fn [] + [options/community-options-bottom-sheet id]) + :selected-item (fn [] + [quo/communities-membership-list-item {} community])}])} + community])) + communities-ids)]) -(defn segments-community-lists + +(defn render-communities-segments [selected-tab] (let [ids-by-user-involvement (rf/sub [:communities/community-ids-by-user-involvement]) tab @selected-tab] @@ -74,20 +64,70 @@ :icon :i/info} (i18n/label :t/error)])])) +(defn communities-header + [selected-tab padding-top] + [:<> + [rn/view {:style {:padding-vertical 8}} + [quo/discover-card + {:on-press #(rf/dispatch [:navigate-to :discover-communities]) + :title (i18n/label :t/discover) + :description (i18n/label :t/whats-trending) + :accessibility-label :communities-home-discover-card}]] + [community-segments selected-tab padding-top]]) + +(defn home-page-comunity-lists + [{:keys [selected-tab padding-top]}] + (fn [] + [rn/view {:style {:flex 1}} + [communities-header selected-tab padding-top] + [render-communities-segments selected-tab]])) + +(defn home-sticky-header + [{:keys [selected-tab scroll-height padding-top]}] + (fn [] + (when (> @scroll-height 80) + [rn/view + {:style style/blur-tabs-header} + [community-segments selected-tab padding-top]]))) + +(defn communities-screen-content + [] + (let [scroll-height (reagent/atom 0) + selected-tab (reagent/atom :joined)] + (fn [] + [scroll-page/scroll-page + {:name (i18n/label :t/communities) + :on-scroll #(reset! scroll-height %) + :top-nav (fn [] + [common.home/top-nav + {:type :default + :hide-search true + :style {:background-color :transparent}}]) + :title-colum (fn [] + [common.home/title-column + {:label (i18n/label :t/communities) + :handler #(rf/dispatch [:bottom-sheet/show-sheet :add-new {}]) + :accessibility-label :new-chat-button}]) + :background-color (colors/theme-colors + colors/white + colors/neutral-95) + :navigate-back? :false + :height (if (> @scroll-height 80) + 208 + 156)} + [home-sticky-header + {:selected-tab selected-tab + :scroll-height scroll-height + :padding-top 8}] + [home-page-comunity-lists + {:selected-tab selected-tab + :padding-top 16 + :height 60}]]))) + (defn home [] - (let [selected-tab (reagent/atom :joined)] - (fn [] - [:<> - [common.home/top-nav {:type :default :hide-search true}] - [common.home/title-column - {:label (i18n/label :t/communities) - :handler #(rf/dispatch [:bottom-sheet/show-sheet :add-new {}]) - :accessibility-label :new-chat-button}] - [quo/discover-card - {:on-press #(rf/dispatch [:navigate-to :discover-communities]) - :title (i18n/label :t/discover) - :description (i18n/label :t/whats-trending) - :accessibility-label :communities-home-discover-card}] - [home-community-segments selected-tab] - [segments-community-lists selected-tab]]))) + [rn/view + {:style (style/home-communities-container (colors/theme-colors + colors/white + colors/neutral-95))} + [communities-screen-content]])