fix ios blur blue overlay (#17015)
This commit is contained in:
parent
e4a2ac9cce
commit
a45f353356
|
@ -1,5 +1,6 @@
|
|||
(ns quo2.foundations.colors
|
||||
(:require [clojure.string :as string]
|
||||
[react-native.platform :as platform]
|
||||
[quo2.theme :as theme]))
|
||||
|
||||
(defn alpha
|
||||
|
@ -126,12 +127,13 @@
|
|||
(def neutral-5-opa-70-blur (alpha neutral-5 0.7))
|
||||
(def neutral-10-opa-10-blur (alpha neutral-10 0.1))
|
||||
(def neutral-10-opa-40-blur (alpha neutral-10 0.4))
|
||||
(def neutral-80-opa-80-blur (alpha "#192438" 0.8))
|
||||
;; https://github.com/status-im/status-mobile/issues/14903
|
||||
(def neutral-80-opa-80-blur (if platform/android? (alpha "#192438" 0.8) "#1E2430CC"))
|
||||
(def neutral-90-opa-10-blur (alpha neutral-90 0.1))
|
||||
(def neutral-90-opa-40-blur (alpha neutral-90 0.4))
|
||||
(def neutral-90-opa-70-blur (alpha neutral-90 0.7))
|
||||
(def neutral-95-opa-70-blur neutral-95-opa-70)
|
||||
(def neutral-100-opa-70-blur neutral-100-opa-70)
|
||||
(def neutral-100-opa-70-blur (if platform/android? neutral-100-opa-70 "#0D1014B3"))
|
||||
|
||||
;;;;Black
|
||||
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]
|
||||
[oops.core :refer [oget]]
|
||||
[react-native.platform :as platform]
|
||||
[status-im2.common.resources :as resources]
|
||||
[status-im.async-storage.core :as async-storage]
|
||||
[status-im2.contexts.shell.jump-to.state :as shell.state]
|
||||
|
@ -88,10 +89,9 @@
|
|||
(when dark-overlay?
|
||||
[blur/view
|
||||
{:style style/background-blur-overlay
|
||||
:blur-amount 30
|
||||
:blur-radius 25
|
||||
:blur-amount (if platform/android? 30 20)
|
||||
:blur-radius (if platform/android? 25 10)
|
||||
:blur-type :transparent
|
||||
:overlay-color :transparent}])]))
|
||||
|
||||
(defn view [dark-overlay?] [:f> f-view dark-overlay?])
|
||||
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
[react-native.blur :as blur]
|
||||
[react-native.core :as rn]
|
||||
[reagent.core :as reagent]
|
||||
[react-native.platform :as platform]
|
||||
[status-im2.contexts.onboarding.common.overlay.style :as style]
|
||||
[status-im2.constants :as constants]))
|
||||
|
||||
|
@ -61,7 +62,7 @@
|
|||
:style (style/blur-container opacity)}
|
||||
[blur/view
|
||||
{:blur-amount @blur-amount
|
||||
:blur-radius 25
|
||||
:blur-radius (if platform/android? 25 10)
|
||||
:blur-type :transparent
|
||||
:overlay-color :transparent
|
||||
:style style/blur-style}]]))
|
||||
|
|
|
@ -27,10 +27,13 @@
|
|||
:flex 1
|
||||
:accessibility-label :bottom-tabs})
|
||||
|
||||
(def bottom-tabs-blur-overlay
|
||||
{:position :absolute
|
||||
:left 0
|
||||
:right 0
|
||||
:bottom 0
|
||||
:height (utils/bottom-tabs-extended-container-height)
|
||||
:background-color colors/neutral-100-opa-70})
|
||||
(defn bottom-tabs-blur-overlay
|
||||
[height]
|
||||
(reanimated/apply-animations-to-style
|
||||
{:height height}
|
||||
{:position :absolute
|
||||
:left 0
|
||||
:right 0
|
||||
:bottom 0
|
||||
:height (utils/bottom-tabs-container-height)
|
||||
:background-color colors/neutral-100-opa-70-blur}))
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
(ns status-im2.contexts.shell.jump-to.components.bottom-tabs.view
|
||||
(:require [utils.re-frame :as rf]
|
||||
[react-native.core :as rn]
|
||||
[react-native.blur :as blur]
|
||||
[react-native.gesture :as gesture]
|
||||
[react-native.platform :as platform]
|
||||
[react-native.reanimated :as reanimated]
|
||||
[status-im2.contexts.shell.jump-to.utils :as utils]
|
||||
[status-im2.contexts.shell.jump-to.state :as state]
|
||||
|
@ -14,8 +14,8 @@
|
|||
(defn blur-overlay-params
|
||||
[style]
|
||||
{:style style
|
||||
:blur-amount 30
|
||||
:blur-radius 25
|
||||
:blur-amount (if platform/android? 30 20)
|
||||
:blur-radius (if platform/android? 25 10)
|
||||
:blur-type :transparent
|
||||
:overlay-color :transparent})
|
||||
|
||||
|
@ -53,13 +53,15 @@
|
|||
(gesture/number-of-taps 2)
|
||||
(gesture/on-start
|
||||
(fn [_event]
|
||||
(rf/dispatch [:messages-home/select-tab :tab/recent]))))]
|
||||
(rf/dispatch [:messages-home/select-tab :tab/recent]))))
|
||||
bottom-tabs-blur-overlay-style (style/bottom-tabs-blur-overlay (:bottom-tabs-height
|
||||
shared-values))]
|
||||
(utils/load-stack @state/selected-stack-id)
|
||||
(reanimated/set-shared-value (:pass-through? shared-values) pass-through?)
|
||||
[reanimated/view
|
||||
{:style (style/bottom-tabs-container pass-through? (:bottom-tabs-height shared-values))}
|
||||
(when pass-through?
|
||||
[blur/view (blur-overlay-params style/bottom-tabs-blur-overlay)])
|
||||
[reanimated/blur-view (blur-overlay-params bottom-tabs-blur-overlay-style)])
|
||||
[rn/view {:style (style/bottom-tabs)}
|
||||
[gesture/gesture-detector {:gesture communities-double-tab-gesture}
|
||||
[bottom-tab :i/communities :communities-stack shared-values notifications-data]]
|
||||
|
|
|
@ -61,4 +61,4 @@
|
|||
:left 0
|
||||
:right 0
|
||||
:top 0
|
||||
:background-color colors/neutral-100-opa-70})
|
||||
:background-color colors/neutral-100-opa-70-blur})
|
||||
|
|
Loading…
Reference in New Issue