From 68da5175c01c08abbbd64b84b27e681e8ece35d8 Mon Sep 17 00:00:00 2001 From: Alexander Date: Tue, 6 Jun 2023 12:47:17 +0100 Subject: [PATCH] =?UTF-8?q?Correct=20top=20bar=20offsets=20and=20positions?= =?UTF-8?q?=20on=20Android=20+=20correct=20blur=20as=20a=20bonus=20?= =?UTF-8?q?=E2=9C=A8=20(#16148)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Correct top bar offsets and positions on Android * Style fixes * Style fixes --- .../chat/messages/navigation/style.cljs | 47 ++++++++++++------- .../chat/messages/navigation/view.cljs | 25 +++++----- 2 files changed, 43 insertions(+), 29 deletions(-) diff --git a/src/status_im2/contexts/chat/messages/navigation/style.cljs b/src/status_im2/contexts/chat/messages/navigation/style.cljs index 4dfac7262a..8b616fba68 100644 --- a/src/status_im2/contexts/chat/messages/navigation/style.cljs +++ b/src/status_im2/contexts/chat/messages/navigation/style.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.chat.messages.navigation.style (:require [quo2.foundations.colors :as colors] - [react-native.platform :as platform] [react-native.reanimated :as reanimated])) (defonce ^:const navigation-bar-height 100) @@ -17,33 +16,47 @@ :background-color (colors/theme-colors colors/white-opa-40 colors/neutral-80-opa-40)} position)) -(defn blur-view - [status-bar-height] +(def background-view + {: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 :top 0 :left 0 :right 0 - :height (- navigation-bar-height - (if platform/ios? 0 status-bar-height)) + :height navigation-bar-height :display :flex :flex-direction :row :overflow :hidden}) (defn animated-blur-view - [enabled? animation status-bar-height] + [enabled? animation] (reanimated/apply-animations-to-style (when enabled? {:opacity animation}) - (blur-view status-bar-height))) + blur-view)) (def navigation-view - {:z-index 4}) + {:z-index 1}) -(defn header-container - [status-bar-height] +(def header-container {:position :absolute - :top (- header-offset - (if platform/ios? 0 status-bar-height)) + :top header-offset :left 0 :right 0 :padding-bottom 8 @@ -63,20 +76,18 @@ :opacity opacity-animation}) header)) -(defn pinned-banner - [status-bar-height] +(def pinned-banner {:position :absolute :left 0 :right 0 - :top (- navigation-bar-height - (if platform/ios? 0 status-bar-height))}) + :top navigation-bar-height}) (defn animated-pinned-banner - [enabled? animation status-bar-height] + [enabled? animation] (reanimated/apply-animations-to-style (when enabled? {:opacity animation}) - (pinned-banner status-bar-height))) + pinned-banner)) (def header-content-container {:flex-direction :row diff --git a/src/status_im2/contexts/chat/messages/navigation/view.cljs b/src/status_im2/contexts/chat/messages/navigation/view.cljs index ad94294487..ce1ad38401 100644 --- a/src/status_im2/contexts/chat/messages/navigation/view.cljs +++ b/src/status_im2/contexts/chat/messages/navigation/view.cljs @@ -2,9 +2,10 @@ (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] [re-frame.db] + [react-native.blur :as blur] [react-native.core :as rn] + [react-native.platform :as platform] [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.pin.banner.view :as pin.banner] [status-im2.constants :as constants] @@ -14,9 +15,7 @@ (defn f-navigation-view [{:keys [scroll-y]}] - (let [insets (safe-area/get-insets) - status-bar-height (:top insets) - {:keys [group-chat chat-id chat-name emoji + (let [{:keys [group-chat chat-id chat-name emoji chat-type] :as chat} (rf/sub [:chats/current-chat-chat-view]) all-loaded? (rf/sub [:chats/all-loaded? chat-id]) @@ -52,14 +51,18 @@ {:extrapolateLeft "clamp" :extrapolateRight "clamp"})] [rn/view {:style style/navigation-view} - [reanimated/blur-view - {:blurAmount 32 - :blurType (colors/theme-colors :xlight :dark) - :overlayColor :transparent - :style (style/animated-blur-view all-loaded? opacity-animation status-bar-height)}] + [reanimated/view + {:style (style/animated-background-view all-loaded? opacity-animation)}] + + [reanimated/view {:style (style/animated-blur-view all-loaded? opacity-animation)} + [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 {:style (style/header-container status-bar-height)} + [rn/view {:style style/header-container} [rn/touchable-opacity {:active-opacity 1 :on-press #(rf/dispatch [:navigate-back]) @@ -104,7 +107,7 @@ [quo/icon :i/options {:size 20 :color (colors/theme-colors colors/black colors/white)}]])] [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]]]])) (defn navigation-view