status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: implement selectors with blurred background

This commit is contained in:
Christoph Pader 2022-11-11 11:56:59 +01:00 committed by Christoph Pader
parent b8bfb2df80
commit 2f4d8accae
2 changed files with 80 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/quo2/components/selectors/selectors.cljs
View File

@ -1,14 +1,19 @@
(ns quo2.components.selectors.selectors
(:require [react-native.core :as rn]
[quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[reagent.core :as reagent]
[quo2.components.icon :as icons]))
(defn- get-color [checked? disabled?]
(if checked?
(defn- get-color [checked? disabled? blurred-background?]
(cond
checked?
(colors/custom-color-by-theme
:primary 50 60 (when disabled? 30) (when disabled? 30))
blurred-background?
(colors/theme-colors
(colors/alpha colors/neutral-80 (if disabled? 0.05 0.1))
(colors/alpha colors/white (if disabled? 0.05 0.1)))
:else
(colors/theme-colors
(colors/alpha colors/neutral-20 (if disabled? 0.4 1))
(colors/alpha colors/neutral-70 (if disabled? 0.3 1)))))
@ -21,7 +26,7 @@
(defn checkbox-prefill [{:keys [default-checked?]}]
(let [checked? (reagent/atom (or default-checked? false))]
(fn [{:keys [on-change disabled? container-style]}]
(fn [{:keys [on-change disabled? blurred-background? container-style]}]
[rn/touchable-without-feedback
{:on-press (handle-press disabled? on-change checked?)}
[rn/view
@ -30,9 +35,13 @@
{:height 21
:width 21
:border-radius 6
:background-color (colors/theme-colors
(colors/alpha colors/neutral-20 (if disabled? 0.3 1))
(colors/alpha colors/neutral-70 (if disabled? 0.3 1)))})
:background-color (if blurred-background?
(colors/theme-colors
(colors/alpha colors/neutral-80 (if disabled? 0.05 0.1))
(colors/alpha colors/white (if disabled? 0.05 0.1)))
(colors/theme-colors
(colors/alpha colors/neutral-20 (if disabled? 0.3 1))
(colors/alpha colors/neutral-70 (if disabled? 0.3 1))))})
:accessibility-label (str "checkbox-" (if @checked? "on" "off"))
:accessibility-role :checkbox}
(when @checked?
@ -47,7 +56,7 @@
(defn checkbox [{:keys [default-checked?]}]
(let [checked? (reagent/atom (or default-checked? false))]
(fn [{:keys [on-change disabled? container-style]}]
(fn [{:keys [on-change disabled? blurred-background? container-style]}]
[rn/touchable-without-feedback
{:on-press (handle-press disabled? on-change checked?)}
[rn/view
@ -59,13 +68,19 @@
{:style {:flex 1
:border-radius 6
:border-width (if @checked? 0 1)
:background-color (if @checked?
(get-color @checked? disabled?)
:background-color (cond
@checked?
(get-color @checked? disabled? blurred-background?)
blurred-background?
(colors/theme-colors
colors/white-opa-5
colors/white-opa-10)
:else
(colors/theme-colors
colors/white
colors/neutral-80-opa-40))
:border-color (if @checked? :none
(get-color @checked? disabled?))}
(get-color @checked? disabled? blurred-background?))}
:accessibility-label (str "checkbox-" (if @checked? "on" "off"))
:accessibility-role :checkbox}
(when @checked?
@ -78,7 +93,7 @@
(defn radio [{:keys [default-checked?]}]
(let [checked? (reagent/atom (or default-checked? false))]
(fn [{:keys [on-change disabled? container-style]}]
(fn [{:keys [on-change disabled? blurred-background? container-style]}]
[rn/touchable-without-feedback
{:on-press (handle-press disabled? on-change checked?)}
[rn/view
@ -88,9 +103,10 @@
:width 20
:border-radius 20
:border-width 1
:border-color (get-color @checked? disabled?)
:background-color (colors/theme-colors colors/white
(colors/alpha colors/neutral-80 0.4))})
:border-color (get-color @checked? disabled? blurred-background?)
:background-color (when-not blurred-background?
(colors/theme-colors colors/white
(colors/alpha colors/neutral-80 0.4)))})
:accessibility-label (str "radio-" (if @checked? "on" "off"))
:accessibility-role :checkbox}
@ -98,7 +114,7 @@
{:margin-left :auto
:height 14
:width 14
:background-color (when @checked? (get-color @checked? disabled?))
:background-color (when @checked? (get-color @checked? disabled? blurred-background?))
:border-radius 20
:margin-right :auto
:margin-top :auto
@ -106,7 +122,7 @@
(defn toggle [{:keys [default-checked?]}]
(let [checked? (reagent/atom (or default-checked? false))]
(fn [{:keys [on-change disabled? container-style]}]
(fn [{:keys [on-change disabled? blurred-background? container-style]}]
[rn/touchable-without-feedback
{:on-press (handle-press disabled? on-change checked?)}
[rn/view
@ -115,17 +131,20 @@
{:height 20
:width 30
:border-radius 20
:background-color (get-color @checked? disabled?)})
:background-color (get-color @checked? disabled? blurred-background?)})
:accessibility-label (str "toggle-" (if @checked? "on" "off"))
:accessibility-role :checkbox}
[rn/view {:style
{:margin-left (if @checked? 12 2)
:height 16
:width 16
:background-color (colors/alpha colors/white
(if (theme/dark?)
(if disabled? 0.3 1)
1))
:background-color (if blurred-background?
(colors/theme-colors
(colors/alpha colors/white (if disabled? 0.4 1))
(colors/alpha colors/white (if disabled? 0.3 1)))
(colors/theme-colors
(colors/alpha colors/white 1)
(colors/alpha colors/white (if disabled? 0.4 1))))
:border-radius 20
:margin-right :auto
:margin-top :auto

45
src/status_im/ui2/screens/quo2_preview/selectors/selectors.cljs
View File

@ -1,10 +1,13 @@
(ns status-im.ui2.screens.quo2-preview.selectors.selectors
(:require [react-native.core :as rn]
[status-im.ui2.screens.quo2-preview.preview :as preview]
[reagent.core :as reagent]
[quo2.components.selectors.selectors :as quo2]
(:require ["react-native" :refer [StyleSheet]]
[oops.core :refer [oget]]
[quo.previews.preview :as preview]
[quo.react-native :as rn]
[quo2.components.markdown.text :as text]
[quo2.foundations.colors :as colors]))
[quo2.components.selectors.selectors :as quo2]
[quo2.foundations.colors :as colors]
[reagent.core :as reagent]
[status-im.ui.components.react :as react]))
(def descriptor [{:label "Disabled?"
:key :disabled?
@ -16,6 +19,7 @@
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[text/text {:size :heading-2} "Toggle"]
@ -29,7 +33,36 @@
:disabled? (:disabled? @state)}]
[text/text {:size :heading-2} "Checkbox Prefill"]
[quo2/checkbox-prefill {:container-style {:margin-top 0}
:disabled? (:disabled? @state)}]]])))
:disabled? (:disabled? @state)}]]
[rn/view {:padding-vertical 60
:align-items :center}
[react/blur-view {:style (oget StyleSheet "absoluteFill")
:blurAmount 20
:blurType (if (colors/dark?) :dark :light)}
[react/linear-gradient {:style (oget StyleSheet "absoluteFill")
:colors [(colors/alpha "#4CB4EF" 0.2)
(colors/alpha "#FB8F61" 0.2)
(colors/alpha "#647084" 0.2)]
:start {:x 0 :y 0}
:end {:x 1 :y 1}}]]
[text/text {:size :heading-2} "Toggle"]
[quo2/toggle {:container-style {:margin-top 0}
:disabled? (:disabled? @state)
:blurred-background? true}]
[text/text {:size :heading-2} "Radio"]
[quo2/radio {:container-style {:margin-top 0}
:disabled? (:disabled? @state)
:blurred-background? true}]
[text/text {:size :heading-2} "Checkbox"]
[quo2/checkbox {:container-style {:margin-top 0}
:disabled? (:disabled? @state)
:blurred-background? true}]
[text/text {:size :heading-2} "Checkbox Prefill"]
[quo2/checkbox-prefill {:container-style {:margin-top 0}
:disabled? (:disabled? @state)
:blurred-background? true}]]])))
(defn preview-selectors []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)