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
: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)

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

@ -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

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

@ -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])]])))

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

@ -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

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

@ -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}]

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

@ -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

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])
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)

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

@ -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})

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

@ -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)