status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix: scroll-page component sticky header height

This commit is contained in:
John Ngei 2023-02-23 18:31:21 +03:00 committed by GitHub
parent e830f633d8
commit fac2f952d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 57 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/quo2/components/navigation/page_nav.cljs
View File

@ -216,6 +216,7 @@
;; iPhone 11 Pro's height in Figma divided by Component height 56/1125 ;; iPhone 11 Pro's height in Figma divided by Component height 56/1125
:align-items :center :align-items :center
:padding-horizontal 20 :padding-horizontal 20
:margin-top 44
:height 56 :height 56
:justify-content :space-between} :justify-content :space-between}
page-nav-background-uri (assoc :background-color page-nav-color) page-nav-background-uri (assoc :background-color page-nav-color)

5
src/status_im2/common/scroll_page/style.cljs
View File

@ -31,7 +31,7 @@
[border-radius] [border-radius]
{:flex 1 {:flex 1
:position :absolute :position :absolute
:top -48 :top (if platform/ios? -48 0)
:left 0 :left 0
:right 0 :right 0
:overflow :scroll :overflow :scroll
@ -44,7 +44,8 @@
{:position :absolute {:position :absolute
:flex-direction :row :flex-direction :row
:left 64 :left 64
:top 16})) :top 16
:margin-top 44}))
(def sticky-header-image (def sticky-header-image
{:border-radius 12 {:border-radius 12

13
src/status_im2/common/scroll_page/view.cljs
View File

@ -36,7 +36,7 @@
top-nav top-nav
title-colum title-colum
navigate-back?] 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]) output-range (if platform/ios? [-208 0] [-208 -45])
y (reanimated/use-shared-value scroll-height) y (reanimated/use-shared-value scroll-height)
translate-animation (reanimated/interpolate y translate-animation (reanimated/interpolate y
@ -61,7 +61,10 @@
:style (style/blur-slider translate-animation height)}] :style (style/blur-slider translate-animation height)}]
[rn/view [rn/view
{:style {:z-index 6 {:style {:z-index 6
:margin-top (if platform/ios? 44 0)}} :position :absolute
:top 0
:left 0
:right 0}}
(when cover (when cover
[reanimated/view [reanimated/view
{:style (style/sticky-header-title opacity-animation)} {:style (style/sticky-header-title opacity-animation)}
@ -74,7 +77,8 @@
:style {:line-height 21}} :style {:line-height 21}}
name]]) name]])
(if top-nav (if top-nav
top-nav [rn/view {:margin-top (if platform/ios? 44 0)}
top-nav]
[quo/page-nav [quo/page-nav
(merge {:horizontal-description? true (merge {:horizontal-description? true
:one-icon-align-left? true :one-icon-align-left? true
@ -155,8 +159,7 @@
[rn/view [rn/view
{:flex 1 {:flex 1
:border-radius (diff-with-max-min @scroll-height 16 0) :border-radius (diff-with-max-min @scroll-height 16 0)
:background-color background-color :background-color background-color}
:padding-top 48}
(when cover-image (when cover-image
[:f> display-picture @scroll-height cover-image]) [:f> display-picture @scroll-height cover-image])
children])]]))) children])]])))

12
src/status_im2/contexts/communities/discover/style.cljs
View File

@ -37,16 +37,24 @@
[background-color] [background-color]
{:background-color background-color {:background-color background-color
:position :absolute :position :absolute
:top (if platform/ios? 0 44) :top 0
:bottom 0 :bottom 0
:left 0 :left 0
:right 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 (defn blur-tabs-header
[] []
{:padding-horizontal 20 {:padding-horizontal 20
:position :absolute :position :absolute
:top (if platform/ios? 56 60) :top (if platform/ios? 100 104)
:height 56 :height 56
:right 0 :right 0
:left 0 :left 0

10
src/status_im2/contexts/communities/discover/view.cljs
View File

@ -73,8 +73,7 @@
(i18n/label :t/featured)] (i18n/label :t/featured)]
[quo/counter {:type :grey} communities-count]] [quo/counter {:type :grey} communities-count]]
[quo/icon :i/info [quo/icon :i/info
{:container-style {:align-items :center {:container-style style/communities-header-container
:justify-content :center}
:resize-mode :center :resize-mode :center
:size 20 :size 20
:color (colors/theme-colors :color (colors/theme-colors
@ -195,7 +194,8 @@
featured-communities featured-communities
view-type] view-type]
(fn [] (fn []
[rn/view {:padding-horizontal 20} [rn/view
{:style style/render-communities-container}
[discover-communities-header [discover-communities-header
{:selected-tab selected-tab {:selected-tab selected-tab
:view-type view-type :view-type view-type
@ -230,8 +230,8 @@
156 156
100) 100)
(if (> @scroll-height 360) (if (> @scroll-height 360)
162 208
106))} 148))}
[render-sticky-header [render-sticky-header
{:selected-tab selected-tab {:selected-tab selected-tab
:scroll-height scroll-height}] :scroll-height scroll-height}]

11
src/status_im2/contexts/communities/home/style.cljs
View File

@ -8,6 +8,15 @@
:padding-horizontal 20 :padding-horizontal 20
:background-color :transparent}) :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 (defn home-communities-container
[background-color] [background-color]
{:flex 1 {:flex 1
@ -21,7 +30,7 @@
(def blur-tabs-header (def blur-tabs-header
{:flex 1 {:flex 1
:position :absolute :position :absolute
:top 112 :top (if platform/ios? 156 112)
:height 52 :height 52
:left 0 :left 0
:right 0 :right 0

7
src/status_im2/contexts/communities/home/view.cljs
View File

@ -46,9 +46,7 @@
(let [ids-by-user-involvement (rf/sub [:communities/community-ids-by-user-involvement]) (let [ids-by-user-involvement (rf/sub [:communities/community-ids-by-user-involvement])
tab @selected-tab] tab @selected-tab]
[rn/view [rn/view
{:style {:flex 1 {:style style/render-segments-container}
:padding-horizontal 20
:padding-vertical 12}}
(case tab (case tab
:joined :joined
[communities-list (:joined ids-by-user-involvement)] [communities-list (:joined ids-by-user-involvement)]
@ -67,7 +65,8 @@
(defn communities-header (defn communities-header
[selected-tab padding-top] [selected-tab padding-top]
[:<> [:<>
[rn/view {:style {:padding-vertical 8}} [rn/view
{:style style/communities-header-style}
[quo/discover-card [quo/discover-card
{:on-press #(rf/dispatch [:navigate-to :discover-communities]) {:on-press #(rf/dispatch [:navigate-to :discover-communities])
:title (i18n/label :t/discover) :title (i18n/label :t/discover)

10
src/status_im2/contexts/communities/overview/style.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.communities.overview.style (ns status-im2.contexts.communities.overview.style
(:require [react-native.platform :as platform] (:require [quo2.foundations.colors :as colors]))
[quo2.foundations.colors :as colors]))
(def preview-user (def preview-user
{:flex-direction :row {:flex-direction :row
@ -9,12 +8,11 @@
(def blur-channel-header (def blur-channel-header
{:position :absolute {:position :absolute
:top (if platform/ios? 56 60) :top 100
:height 34 :height 34
:right 0 :right 0
:left 0 :left 0
:flex 1 :flex 1})
:background-color :transparent})
(def join-button (def join-button
{:width "100%" {:width "100%"
@ -30,7 +28,7 @@
(def community-overview-container (def community-overview-container
{:position :absolute {:position :absolute
:top (if platform/ios? 0 44) :top 0
:left 0 :left 0
:right 0 :right 0
:bottom 0}) :bottom 0})

16
src/status_im2/contexts/communities/overview/view.cljs
View File

@ -4,6 +4,7 @@
[quo2.core :as quo] [quo2.core :as quo]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[react-native.core :as rn] [react-native.core :as rn]
[react-native.blur :as blur]
[react-native.platform :as platform] [react-native.platform :as platform]
[reagent.core :as reagent] [reagent.core :as reagent]
[status-im2.constants :as constants] [status-im2.constants :as constants]
@ -263,8 +264,11 @@
[_] [_]
(fn [{:keys [:enabled :label]}] (fn [{:keys [:enabled :label]}]
(when enabled (when enabled
[rn/view [blur/view
{:style style/blur-channel-header} {:style style/blur-channel-header
:blur-amount 20
:blur-type :transparent
:overlay-color :transparent}
[quo/divider-label [quo/divider-label
{:label (:label label) {:label (:label label)
:chevron-position :left}]]))) :chevron-position :left}]])))
@ -297,12 +301,8 @@
colors/white colors/white
colors/neutral-90) colors/neutral-90)
:height (if platform/ios? :height (if platform/ios?
(if (> @scroll-height @first-channel-height) 100
134 148)}
100)
(if (> @scroll-height @first-channel-height)
140
106))}
[sticky-category-header [sticky-category-header
{:enabled (> @scroll-height @first-channel-height) {:enabled (> @scroll-height @first-channel-height)