status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-02-26 23:31:03 +00:00
Code Issues Projects Releases Wiki Activity

feat: implement selectors with blurred background

Browse Source
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 (ns quo2.components.selectors.selectors
(:require [react-native.core :as rn] (:require [react-native.core :as rn]
[quo2.foundations.colors :as colors] [quo2.foundations.colors :as colors]
[quo2.theme :as theme]
[reagent.core :as reagent] [reagent.core :as reagent]
[quo2.components.icon :as icons])) [quo2.components.icon :as icons]))
(defn- get-color [checked? disabled?] (defn- get-color [checked? disabled? blurred-background?]
(if checked? (cond
checked?
(colors/custom-color-by-theme (colors/custom-color-by-theme
:primary 50 60 (when disabled? 30) (when disabled? 30)) :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/theme-colors
(colors/alpha colors/neutral-20 (if disabled? 0.4 1)) (colors/alpha colors/neutral-20 (if disabled? 0.4 1))
(colors/alpha colors/neutral-70 (if disabled? 0.3 1))))) (colors/alpha colors/neutral-70 (if disabled? 0.3 1)))))
@ -21,7 +26,7 @@
(defn checkbox-prefill [{:keys [default-checked?]}] (defn checkbox-prefill [{:keys [default-checked?]}]
(let [checked? (reagent/atom (or default-checked? false))] (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 [rn/touchable-without-feedback
{:on-press (handle-press disabled? on-change checked?)} {:on-press (handle-press disabled? on-change checked?)}
[rn/view [rn/view
@ -30,9 +35,13 @@
{:height 21 {:height 21
:width 21 :width 21
:border-radius 6 :border-radius 6
:background-color (colors/theme-colors :background-color (if blurred-background?
(colors/alpha colors/neutral-20 (if disabled? 0.3 1)) (colors/theme-colors
(colors/alpha colors/neutral-70 (if disabled? 0.3 1)))}) (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-label (str "checkbox-" (if @checked? "on" "off"))
:accessibility-role :checkbox} :accessibility-role :checkbox}
(when @checked? (when @checked?
@ -47,7 +56,7 @@
(defn checkbox [{:keys [default-checked?]}] (defn checkbox [{:keys [default-checked?]}]
(let [checked? (reagent/atom (or default-checked? false))] (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 [rn/touchable-without-feedback
{:on-press (handle-press disabled? on-change checked?)} {:on-press (handle-press disabled? on-change checked?)}
[rn/view [rn/view
@ -59,13 +68,19 @@
{:style {:flex 1 {:style {:flex 1
:border-radius 6 :border-radius 6
:border-width (if @checked? 0 1) :border-width (if @checked? 0 1)
:background-color (if @checked? :background-color (cond
(get-color @checked? disabled?) @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/theme-colors
colors/white colors/white
colors/neutral-80-opa-40)) colors/neutral-80-opa-40))
:border-color (if @checked? :none :border-color (if @checked? :none
(get-color @checked? disabled?))} (get-color @checked? disabled? blurred-background?))}
:accessibility-label (str "checkbox-" (if @checked? "on" "off")) :accessibility-label (str "checkbox-" (if @checked? "on" "off"))
:accessibility-role :checkbox} :accessibility-role :checkbox}
(when @checked? (when @checked?
@ -78,7 +93,7 @@
(defn radio [{:keys [default-checked?]}] (defn radio [{:keys [default-checked?]}]
(let [checked? (reagent/atom (or default-checked? false))] (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 [rn/touchable-without-feedback
{:on-press (handle-press disabled? on-change checked?)} {:on-press (handle-press disabled? on-change checked?)}
[rn/view [rn/view
@ -88,9 +103,10 @@
:width 20 :width 20
:border-radius 20 :border-radius 20
:border-width 1 :border-width 1
:border-color (get-color @checked? disabled?) :border-color (get-color @checked? disabled? blurred-background?)
:background-color (colors/theme-colors colors/white :background-color (when-not blurred-background?
(colors/alpha colors/neutral-80 0.4))}) (colors/theme-colors colors/white
(colors/alpha colors/neutral-80 0.4)))})
:accessibility-label (str "radio-" (if @checked? "on" "off")) :accessibility-label (str "radio-" (if @checked? "on" "off"))
:accessibility-role :checkbox} :accessibility-role :checkbox}
@ -98,7 +114,7 @@
{:margin-left :auto {:margin-left :auto
:height 14 :height 14
:width 14 :width 14
:background-color (when @checked? (get-color @checked? disabled?)) :background-color (when @checked? (get-color @checked? disabled? blurred-background?))
:border-radius 20 :border-radius 20
:margin-right :auto :margin-right :auto
:margin-top :auto :margin-top :auto
@ -106,7 +122,7 @@
(defn toggle [{:keys [default-checked?]}] (defn toggle [{:keys [default-checked?]}]
(let [checked? (reagent/atom (or default-checked? false))] (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 [rn/touchable-without-feedback
{:on-press (handle-press disabled? on-change checked?)} {:on-press (handle-press disabled? on-change checked?)}
[rn/view [rn/view
@ -115,17 +131,20 @@
{:height 20 {:height 20
:width 30 :width 30
:border-radius 20 :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-label (str "toggle-" (if @checked? "on" "off"))
:accessibility-role :checkbox} :accessibility-role :checkbox}
[rn/view {:style [rn/view {:style
{:margin-left (if @checked? 12 2) {:margin-left (if @checked? 12 2)
:height 16 :height 16
:width 16 :width 16
:background-color (colors/alpha colors/white :background-color (if blurred-background?
(if (theme/dark?) (colors/theme-colors
(if disabled? 0.3 1) (colors/alpha colors/white (if disabled? 0.4 1))
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 :border-radius 20
:margin-right :auto :margin-right :auto
:margin-top :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 (ns status-im.ui2.screens.quo2-preview.selectors.selectors
(:require [react-native.core :as rn] (:require ["react-native" :refer [StyleSheet]]
[status-im.ui2.screens.quo2-preview.preview :as preview] [oops.core :refer [oget]]
[reagent.core :as reagent] [quo.previews.preview :as preview]
[quo2.components.selectors.selectors :as quo2] [quo.react-native :as rn]
[quo2.components.markdown.text :as text] [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?" (def descriptor [{:label "Disabled?"
:key :disabled? :key :disabled?
@ -16,6 +19,7 @@
[rn/view {:margin-bottom 50 [rn/view {:margin-bottom 50
:padding 16} :padding 16}
[preview/customizer state descriptor] [preview/customizer state descriptor]
[rn/view {:padding-vertical 60 [rn/view {:padding-vertical 60
:align-items :center} :align-items :center}
[text/text {:size :heading-2} "Toggle"] [text/text {:size :heading-2} "Toggle"]
@ -29,7 +33,36 @@
:disabled? (:disabled? @state)}] :disabled? (:disabled? @state)}]
[text/text {:size :heading-2} "Checkbox Prefill"] [text/text {:size :heading-2} "Checkbox Prefill"]
[quo2/checkbox-prefill {:container-style {:margin-top 0} [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 [] (defn preview-selectors []
[rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90) [rn/view {:background-color (colors/theme-colors colors/white colors/neutral-90)