Correct top bar offsets and positions on Android + correct blur as a bonus ✨ (#16148)
* Correct top bar offsets and positions on Android * Style fixes * Style fixes
This commit is contained in:
parent
0e08ba4ad1
commit
68da5175c0
|
@ -1,6 +1,5 @@
|
||||||
(ns status-im2.contexts.chat.messages.navigation.style
|
(ns status-im2.contexts.chat.messages.navigation.style
|
||||||
(:require [quo2.foundations.colors :as colors]
|
(:require [quo2.foundations.colors :as colors]
|
||||||
[react-native.platform :as platform]
|
|
||||||
[react-native.reanimated :as reanimated]))
|
[react-native.reanimated :as reanimated]))
|
||||||
|
|
||||||
(defonce ^:const navigation-bar-height 100)
|
(defonce ^:const navigation-bar-height 100)
|
||||||
|
@ -17,33 +16,47 @@
|
||||||
:background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}
|
:background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)}
|
||||||
position))
|
position))
|
||||||
|
|
||||||
(defn blur-view
|
(def background-view
|
||||||
[status-bar-height]
|
{:position :absolute
|
||||||
|
:top 0
|
||||||
|
:left 0
|
||||||
|
:right 0
|
||||||
|
:height navigation-bar-height
|
||||||
|
:background-color (colors/theme-colors colors/white-opa-70 :transparent)
|
||||||
|
:display :flex
|
||||||
|
:flex-direction :row
|
||||||
|
:overflow :hidden})
|
||||||
|
|
||||||
|
(defn animated-background-view
|
||||||
|
[enabled? animation]
|
||||||
|
(reanimated/apply-animations-to-style
|
||||||
|
(when enabled?
|
||||||
|
{:opacity animation})
|
||||||
|
background-view))
|
||||||
|
|
||||||
|
(def blur-view
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
:top 0
|
:top 0
|
||||||
:left 0
|
:left 0
|
||||||
:right 0
|
:right 0
|
||||||
:height (- navigation-bar-height
|
:height navigation-bar-height
|
||||||
(if platform/ios? 0 status-bar-height))
|
|
||||||
:display :flex
|
:display :flex
|
||||||
:flex-direction :row
|
:flex-direction :row
|
||||||
:overflow :hidden})
|
:overflow :hidden})
|
||||||
|
|
||||||
(defn animated-blur-view
|
(defn animated-blur-view
|
||||||
[enabled? animation status-bar-height]
|
[enabled? animation]
|
||||||
(reanimated/apply-animations-to-style
|
(reanimated/apply-animations-to-style
|
||||||
(when enabled?
|
(when enabled?
|
||||||
{:opacity animation})
|
{:opacity animation})
|
||||||
(blur-view status-bar-height)))
|
blur-view))
|
||||||
|
|
||||||
(def navigation-view
|
(def navigation-view
|
||||||
{:z-index 4})
|
{:z-index 1})
|
||||||
|
|
||||||
(defn header-container
|
(def header-container
|
||||||
[status-bar-height]
|
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
:top (- header-offset
|
:top header-offset
|
||||||
(if platform/ios? 0 status-bar-height))
|
|
||||||
:left 0
|
:left 0
|
||||||
:right 0
|
:right 0
|
||||||
:padding-bottom 8
|
:padding-bottom 8
|
||||||
|
@ -63,20 +76,18 @@
|
||||||
:opacity opacity-animation})
|
:opacity opacity-animation})
|
||||||
header))
|
header))
|
||||||
|
|
||||||
(defn pinned-banner
|
(def pinned-banner
|
||||||
[status-bar-height]
|
|
||||||
{:position :absolute
|
{:position :absolute
|
||||||
:left 0
|
:left 0
|
||||||
:right 0
|
:right 0
|
||||||
:top (- navigation-bar-height
|
:top navigation-bar-height})
|
||||||
(if platform/ios? 0 status-bar-height))})
|
|
||||||
|
|
||||||
(defn animated-pinned-banner
|
(defn animated-pinned-banner
|
||||||
[enabled? animation status-bar-height]
|
[enabled? animation]
|
||||||
(reanimated/apply-animations-to-style
|
(reanimated/apply-animations-to-style
|
||||||
(when enabled?
|
(when enabled?
|
||||||
{:opacity animation})
|
{:opacity animation})
|
||||||
(pinned-banner status-bar-height)))
|
pinned-banner))
|
||||||
|
|
||||||
(def header-content-container
|
(def header-content-container
|
||||||
{:flex-direction :row
|
{:flex-direction :row
|
||||||
|
|
|
@ -2,9 +2,10 @@
|
||||||
(:require [quo2.core :as quo]
|
(:require [quo2.core :as quo]
|
||||||
[quo2.foundations.colors :as colors]
|
[quo2.foundations.colors :as colors]
|
||||||
[re-frame.db]
|
[re-frame.db]
|
||||||
|
[react-native.blur :as blur]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
|
[react-native.platform :as platform]
|
||||||
[react-native.reanimated :as reanimated]
|
[react-native.reanimated :as reanimated]
|
||||||
[react-native.safe-area :as safe-area]
|
|
||||||
[status-im2.contexts.chat.messages.navigation.style :as style]
|
[status-im2.contexts.chat.messages.navigation.style :as style]
|
||||||
[status-im2.contexts.chat.messages.pin.banner.view :as pin.banner]
|
[status-im2.contexts.chat.messages.pin.banner.view :as pin.banner]
|
||||||
[status-im2.constants :as constants]
|
[status-im2.constants :as constants]
|
||||||
|
@ -14,9 +15,7 @@
|
||||||
|
|
||||||
(defn f-navigation-view
|
(defn f-navigation-view
|
||||||
[{:keys [scroll-y]}]
|
[{:keys [scroll-y]}]
|
||||||
(let [insets (safe-area/get-insets)
|
(let [{:keys [group-chat chat-id chat-name emoji
|
||||||
status-bar-height (:top insets)
|
|
||||||
{:keys [group-chat chat-id chat-name emoji
|
|
||||||
chat-type]
|
chat-type]
|
||||||
:as chat} (rf/sub [:chats/current-chat-chat-view])
|
:as chat} (rf/sub [:chats/current-chat-chat-view])
|
||||||
all-loaded? (rf/sub [:chats/all-loaded? chat-id])
|
all-loaded? (rf/sub [:chats/all-loaded? chat-id])
|
||||||
|
@ -52,14 +51,18 @@
|
||||||
{:extrapolateLeft "clamp"
|
{:extrapolateLeft "clamp"
|
||||||
:extrapolateRight "clamp"})]
|
:extrapolateRight "clamp"})]
|
||||||
[rn/view {:style style/navigation-view}
|
[rn/view {:style style/navigation-view}
|
||||||
[reanimated/blur-view
|
[reanimated/view
|
||||||
{:blurAmount 32
|
{:style (style/animated-background-view all-loaded? opacity-animation)}]
|
||||||
:blurType (colors/theme-colors :xlight :dark)
|
|
||||||
:overlayColor :transparent
|
[reanimated/view {:style (style/animated-blur-view all-loaded? opacity-animation)}
|
||||||
:style (style/animated-blur-view all-loaded? opacity-animation status-bar-height)}]
|
[blur/view
|
||||||
|
{:blur-amount 20
|
||||||
|
:blur-type (colors/theme-colors :light :dark)
|
||||||
|
:blur-radius (if platform/ios? 20 10)
|
||||||
|
:style {:flex 1}}]]
|
||||||
|
|
||||||
[rn/view
|
[rn/view
|
||||||
[rn/view {:style (style/header-container status-bar-height)}
|
[rn/view {:style style/header-container}
|
||||||
[rn/touchable-opacity
|
[rn/touchable-opacity
|
||||||
{:active-opacity 1
|
{:active-opacity 1
|
||||||
:on-press #(rf/dispatch [:navigate-back])
|
:on-press #(rf/dispatch [:navigate-back])
|
||||||
|
@ -104,7 +107,7 @@
|
||||||
[quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]])]
|
[quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]])]
|
||||||
|
|
||||||
[reanimated/view
|
[reanimated/view
|
||||||
{:style (style/animated-pinned-banner all-loaded? banner-opacity-animation status-bar-height)}
|
{:style (style/animated-pinned-banner all-loaded? banner-opacity-animation)}
|
||||||
[pin.banner/banner chat-id]]]]))
|
[pin.banner/banner chat-id]]]]))
|
||||||
|
|
||||||
(defn navigation-view
|
(defn navigation-view
|
||||||
|
|
Loading…
Reference in New Issue