Switcher blurred background view (#13717)
This commit is contained in:
parent
d3235e4174
commit
8c9ccbb116
|
@ -210,7 +210,7 @@ PODS:
|
|||
- React
|
||||
- react-native-blob-util (0.13.18):
|
||||
- React-Core
|
||||
- react-native-blur (0.8.0):
|
||||
- react-native-blur (3.6.1):
|
||||
- React
|
||||
- react-native-camera-kit (8.0.4):
|
||||
- React
|
||||
|
@ -384,7 +384,7 @@ PODS:
|
|||
- SDWebImage (5.11.1):
|
||||
- SDWebImage/Core (= 5.11.1)
|
||||
- SDWebImage/Core (5.11.1)
|
||||
- SDWebImageWebPCoder (0.8.4):
|
||||
- SDWebImageWebPCoder (0.8.5):
|
||||
- libwebp (~> 1.0)
|
||||
- SDWebImage/Core (~> 5.10)
|
||||
- secp256k1 (0.1.6)
|
||||
|
@ -635,7 +635,7 @@ SPEC CHECKSUMS:
|
|||
FBLazyVector: 3bb422f41b18121b71783a905c10e58606f7dc3e
|
||||
FBReactNativeSpec: f2c97f2529dd79c083355182cc158c9f98f4bd6e
|
||||
Folly: b73c3869541e86821df3c387eb0af5f65addfab4
|
||||
glog: 502275bc0747df92346edbab1f40dacde2ec86d4
|
||||
glog: 36ce0530c6d2c3a5a4326885ef4069564887a1db
|
||||
HMSegmentedControl: 34c1f54d822d8308e7b24f5d901ec674dfa31352
|
||||
Keycard: ac6df4d91525c3c82635ac24d4ddd9a80aca5fc8
|
||||
libwebp: 98a37e597e40bfdb4c911fc98f2c53d0b12d05fc
|
||||
|
@ -653,7 +653,7 @@ SPEC CHECKSUMS:
|
|||
React-jsinspector: 58aef7155bc9a9683f5b60b35eccea8722a4f53a
|
||||
react-native-background-timer: 1f7d560647b40e6a60b01c452ba29c54bf581fc4
|
||||
react-native-blob-util: 600972b1782380a5a7d5db61a3817ea32349dae9
|
||||
react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
|
||||
react-native-blur: 4568dd93d1d82748c180df8beb2d929c97b13b47
|
||||
react-native-camera-kit: 498a6d111a904834e0824e9073cfadef7303235f
|
||||
react-native-cameraroll: 88f4e62d9ecd0e1f253abe4f685474f2ea14bfa2
|
||||
react-native-config: c98128a72bc2c3a1ca72caec0b021f0fa944aa29
|
||||
|
@ -696,7 +696,7 @@ SPEC CHECKSUMS:
|
|||
RNShare: 2dc2fcac3f7321cfd6b60a23ed4bf4d549f86f5f
|
||||
RNSVG: 8ba35cbeb385a52fd960fd28db9d7d18b4c2974f
|
||||
SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
|
||||
SDWebImageWebPCoder: f93010f3f6c031e2f8fb3081ca4ee6966c539815
|
||||
SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
|
||||
secp256k1: f61d67e6fdcb85fd727acf1bf35ace6036db540c
|
||||
SQLCipher: f9fcf29b2e59ced7defc2a2bdd0ebe79b40d4990
|
||||
SSZipArchive: fe6a26b2a54d5a0890f2567b5cc6de5caa600aef
|
||||
|
|
|
@ -183,16 +183,6 @@
|
|||
(def info-50-opa-30 (alpha info-50 0.3))
|
||||
(def info-50-opa-40 (alpha info-50 0.4))
|
||||
|
||||
;;;;Switcher
|
||||
(def switcher-background "#040B14")
|
||||
|
||||
;;switcher-screen with transparency
|
||||
(def switcher-background-opa-60 (alpha switcher-background 0.6))
|
||||
(def switcher-background-opa-70 (alpha switcher-background 0.7))
|
||||
(def switcher-background-opa-80 (alpha switcher-background 0.8))
|
||||
(def switcher-background-opa-90 (alpha switcher-background 0.9))
|
||||
(def switcher-background-opa-95 (alpha switcher-background 0.95))
|
||||
|
||||
;;General
|
||||
|
||||
;; background
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
[quo2.screens.status-tags :as status-tags]
|
||||
[quo2.screens.counter :as counter]
|
||||
[quo2.screens.segmented :as segmented]
|
||||
[quo.components.safe-area :as safe-area]
|
||||
[quo.core :as quo]))
|
||||
|
||||
(def screens [{:name :quo2-texts
|
||||
|
@ -54,17 +55,21 @@
|
|||
[quo/text "Set dark theme"]]])
|
||||
|
||||
(defn main-screen []
|
||||
[rn/scroll-view {:flex 1
|
||||
:padding-vertical 8
|
||||
:padding-horizontal 16
|
||||
:background-color (:ui-background @colors/theme)}
|
||||
[theme-switcher]
|
||||
[rn/view
|
||||
(for [{:keys [name]} screens]
|
||||
^{:key name}
|
||||
[rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to name])}
|
||||
[rn/view {:style {:padding-vertical 8}}
|
||||
[quo/text (str "Preview " name)]]])]])
|
||||
(fn []
|
||||
[safe-area/consumer
|
||||
(fn [insets]
|
||||
[rn/scroll-view {:flex 1
|
||||
:padding-top (:top insets)
|
||||
:padding-bottom 8
|
||||
:padding-horizontal 16
|
||||
:background-color (:ui-background @colors/theme)}
|
||||
[theme-switcher]
|
||||
[rn/view
|
||||
(for [{:keys [name]} screens]
|
||||
^{:key name}
|
||||
[rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to name])}
|
||||
[rn/view {:style {:padding-vertical 8}}
|
||||
[quo/text (str "Preview " name)]]])]])]))
|
||||
|
||||
(def main-screens [{:name :quo2-preview
|
||||
:insets {:top false}
|
||||
|
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
(defn get-options [show-topbar? options]
|
||||
(merge options
|
||||
(nav-roots/status-bar-options)
|
||||
(roots/status-bar-options)
|
||||
(when platform/android?
|
||||
{:navigationBar {:backgroundColor (colors/theme-colors colors/white colors/neutral-90)}})
|
||||
(if show-topbar?
|
||||
|
|
|
@ -6,8 +6,9 @@
|
|||
(defn status-bar-options []
|
||||
(if platform/android?
|
||||
{:navigationBar {:backgroundColor colors/neutral-80}
|
||||
:statusBar {:backgroundColor (colors/theme-colors colors/neutral-5 colors/neutral-95)
|
||||
:style (if (theme/dark?) :light :dark)}}
|
||||
:statusBar {:backgroundColor :transparent
|
||||
:style (if (theme/dark?) :light :dark)
|
||||
:drawBehind true}}
|
||||
{:statusBar {:style (if (theme/dark?) :light :dark)}}))
|
||||
|
||||
(defn roots []
|
||||
|
|
|
@ -47,7 +47,9 @@
|
|||
(if platform/android? 55 80))
|
||||
|
||||
(defn dimensions []
|
||||
(<sub [:dimensions/window]))
|
||||
(let [{:keys [width height]} (<sub [:dimensions/window])]
|
||||
{:width width
|
||||
:height (+ height switcher-height-offset)}))
|
||||
|
||||
(def stacks-ids [:communities-stack :chats-stack :wallet-stack :browser-stack])
|
||||
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
(ns status-im.switcher.styles
|
||||
(:require [quo.theme :as theme]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.utils.platform :as platform]
|
||||
[status-im.switcher.constants :as constants]))
|
||||
|
||||
(def themes
|
||||
|
@ -63,12 +64,19 @@
|
|||
{:backgroundColor (get-color :switcher-close-button-bg-color)}))
|
||||
|
||||
(defn switcher-screen []
|
||||
(dissoc
|
||||
(merge-switcher-button-common-styles
|
||||
{:background-color colors/switcher-background-opa-80
|
||||
:z-index 1
|
||||
:overflow :hidden})
|
||||
:justify-content))
|
||||
(cond-> (merge-switcher-button-common-styles
|
||||
{:background-color colors/neutral-80-opa-80
|
||||
:z-index 1
|
||||
:overflow :hidden})
|
||||
platform/android? (dissoc :background-color)
|
||||
true (dissoc :justify-content)))
|
||||
|
||||
(defn switcher-blur-background []
|
||||
(let [{:keys [width height]} (constants/dimensions)]
|
||||
{:style {:width width
|
||||
:height (+ height constants/switcher-container-height-padding)}
|
||||
:blur-amount 17
|
||||
:overlay-color colors/neutral-80-opa-80}))
|
||||
|
||||
(defn switcher-screen-container []
|
||||
(let [{:keys [width height]} (constants/dimensions)]
|
||||
|
|
|
@ -3,6 +3,7 @@
|
|||
[quo2.reanimated :as reanimated]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.switcher.styles :as styles]
|
||||
[status-im.ui.components.react :as react]
|
||||
[status-im.switcher.constants :as constants]
|
||||
[status-im.switcher.animation :as animation]
|
||||
[status-im.ui.components.icons.icons :as icons]
|
||||
|
@ -50,6 +51,7 @@
|
|||
:transform [{:scale (:switcher-container-scale shared-values)}]}
|
||||
switcher-container-original-style)]
|
||||
[reanimated/view {:style switcher-screen-animated-style}
|
||||
[react/blur-view (styles/switcher-blur-background)]
|
||||
[reanimated/view {:style switcher-container-animated-style}
|
||||
[switcher-container/tabs toggle-switcher-screen-fn]]]))])
|
||||
|
||||
|
|
|
@ -310,11 +310,11 @@
|
|||
:chat-icon chat-icon.styles/chat-icon-chat-list}]]))
|
||||
|
||||
(defn home []
|
||||
[react/keyboard-avoiding-view {:style {:flex 1 :background-color (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/switcher-background)}
|
||||
[react/keyboard-avoiding-view {:style {:flex 1 :background-color (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/neutral-95)}
|
||||
:ignore-offset true}
|
||||
[topbar/topbar {:navigation :none
|
||||
:use-insets true
|
||||
:background (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/switcher-background)
|
||||
:background (quo2.colors/theme-colors quo2.colors/neutral-5 quo2.colors/neutral-95)
|
||||
:left-component [react/view {:flex-direction :row :margin-left 16}
|
||||
[profile-button]]
|
||||
:right-component [react/view {:flex-direction :row :margin-right 16}
|
||||
|
@ -343,4 +343,4 @@
|
|||
[notifications-button-old]]}]
|
||||
[chats-list-old]
|
||||
[plus-button-old]
|
||||
[tabbar/tabs-counts-subscriptions]])
|
||||
[tabbar/tabs-counts-subscriptions]])
|
||||
|
|
Loading…
Reference in New Issue