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: android shadow (#18504)

This commit is contained in:
BalogunofAfrica 2024-01-31 12:02:27 +01:00 committed by GitHub
parent 11e49c0cc3
commit e4ba0d3062
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 58 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
src/quo/foundations/shadows.cljs
View File

@ -3,62 +3,69 @@
(:require (:require
[quo.foundations.colors :as colors] [quo.foundations.colors :as colors]
[quo.theme :as quo.theme] [quo.theme :as quo.theme]
[react-native.platform :as platform])) [react-native.platform :as platform]
[utils.number]))
;; Set radius coefficient based on Android Version.
;; A good way to know is to check if shadow color is supported i.e API level 28 (Android 9) above
(def ^:private shadow-radius-coefficient (if platform/is-shadow-color-supported? 0.8 0.1))
(defn- get-shadow-color
"Calculates the shadow color based on a given color and opacity, with an optional coefficient.
- Arity [color opacity]: Uses a default coefficient value of 5 (empirically determined) to compute the shadow color.
- Arity [color opacity coefficient]: Uses the specified coefficient to compute the shadow color.
On Android platforms, the shadow color's alpha is adjusted based on the product of opacity and
coefficient, constrained between 0 and 1. Returns a map with :shadow-color and :shadow-opacity keys."
([color opacity]
(get-shadow-color color opacity 5))
([color opacity coefficient]
{:shadow-color (if platform/android?
(colors/alpha color (utils.number/value-in-range (* opacity coefficient) 0 1))
color)
:shadow-opacity opacity}))
(defn- get-shadow-radius
"Computes shadow radius and elevation properties based on a given radius, with an optional coefficient.
- Arity [radius]: Uses a default coefficient of 0.8 for API level 28 and above and 0.1 otherwise (empirically determined) to compute the elevation.
- Arity [radius coefficient]: Uses the specified coefficient to compute the elevation.
Returns a map with :elevation, computed as the product of radius and coefficient, and :shadow-radius keys."
([radius]
(get-shadow-radius radius shadow-radius-coefficient))
([radius coefficient]
{:elevation (* radius coefficient)
:shadow-radius radius}))
(def ^:private shadows (def ^:private shadows
(let [dark-normal {1 {:shadow-color (when platform/ios? (let [dark-normal {1 (merge {:shadow-offset {:width 0 :height 4}}
(colors/alpha colors/neutral-100 0.5)) (get-shadow-color colors/neutral-100 0.5)
:shadow-offset {:width 0 :height 4} (get-shadow-radius 20))
:elevation 3 2 (merge {:shadow-offset {:width 0 :height 4}}
:shadow-opacity 1 (get-shadow-color colors/neutral-100 0.64)
:shadow-radius 20} (get-shadow-radius 20))
2 {:shadow-color (when platform/ios? 3 (merge {:shadow-offset {:width 0 :height 12}}
(colors/alpha colors/neutral-100 0.64)) (get-shadow-color colors/neutral-100 0.64)
:shadow-offset {:width 0 :height 4} (get-shadow-radius 20))
:elevation 4 4 (merge {:shadow-offset {:width 0 :height 16}}
:shadow-opacity 1 (get-shadow-color colors/neutral-100 0.72)
:shadow-radius 20} (get-shadow-radius 20))}
3 {:shadow-color (when platform/ios?
(colors/alpha colors/neutral-100 0.64))
:shadow-offset {:width 0 :height 12}
:elevation 8
:shadow-opacity 1
:shadow-radius 20}
4 {:shadow-color (when platform/ios?
(colors/alpha colors/neutral-100 0.72))
:shadow-offset {:width 0 :height 16}
:shadow-opacity 1
:shadow-radius 20
:elevation 15}}
dark-normal-inverted (-> dark-normal dark-normal-inverted (-> dark-normal
(update-in [:soft :shadow-offset :height] -) (update-in [:soft :shadow-offset :height] -)
(update-in [:medium :shadow-offset :height] -) (update-in [:medium :shadow-offset :height] -)
(update-in [:intense :shadow-offset :height] -) (update-in [:intense :shadow-offset :height] -)
(update-in [:strong :shadow-offset :height] -)) (update-in [:strong :shadow-offset :height] -))
light-normal {1 {:shadow-color (when platform/ios? light-normal {1 (merge {:shadow-offset {:width 0 :height 4}}
(colors/alpha colors/neutral-100 0.04)) (get-shadow-color colors/neutral-100 0.04)
:shadow-offset {:width 0 :height 4} (get-shadow-radius 16))
:elevation 1
:shadow-opacity 1 2 (merge {:shadow-offset {:width 0 :height 4}}
:shadow-radius 16} (get-shadow-color colors/neutral-100 0.08)
2 {:shadow-color (when platform/ios? (get-shadow-radius 16))
(colors/alpha colors/neutral-100 0.08)) 3 (merge {:shadow-offset {:width 0 :height 12}}
:shadow-offset {:width 0 :height 4} (get-shadow-color colors/neutral-100 0.12)
:elevation 6 (get-shadow-radius 16))
:shadow-opacity 1 4 (merge {:shadow-offset {:width 0 :height 16}}
:shadow-radius 16} (get-shadow-color colors/neutral-100 0.16)
3 {:shadow-color (when platform/ios? (get-shadow-radius 16))}
(colors/alpha colors/neutral-100 0.12))
:shadow-offset {:width 0 :height 12}
:elevation 8
:shadow-opacity 1
:shadow-radius 16}
4 {:shadow-color (when platform/ios?
(colors/alpha colors/neutral-100 0.16))
:shadow-offset {:width 0 :height 16}
:shadow-opacity 1
:shadow-radius 16
:elevation 13}}
light-normal-inverted (-> light-normal light-normal-inverted (-> light-normal
(update-in [:soft :shadow-offset :height] -) (update-in [:soft :shadow-offset :height] -)
(update-in [:medium :shadow-offset :height] -) (update-in [:medium :shadow-offset :height] -)

2
src/react_native/platform.cljs
View File

@ -14,3 +14,5 @@
(def low-device? (and android? (< version 29))) (def low-device? (and android? (< version 29)))
(def is-below-android-13? (and android? (< version 33))) (def is-below-android-13? (and android? (< version 33)))
(def is-shadow-color-supported? (and android? (> version 27)))