From 2f4d8accaeae132cfa5661a4667760e68954dbbe Mon Sep 17 00:00:00 2001 From: Christoph Pader Date: Fri, 11 Nov 2022 11:56:59 +0100 Subject: [PATCH] feat: implement selectors with blurred background --- src/quo2/components/selectors/selectors.cljs | 63 ++++++++++++------- .../quo2_preview/selectors/selectors.cljs | 45 +++++++++++-- 2 files changed, 80 insertions(+), 28 deletions(-) diff --git a/src/quo2/components/selectors/selectors.cljs b/src/quo2/components/selectors/selectors.cljs index 5218af62e4..cfb87652fb 100644 --- a/src/quo2/components/selectors/selectors.cljs +++ b/src/quo2/components/selectors/selectors.cljs @@ -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 diff --git a/src/status_im/ui2/screens/quo2_preview/selectors/selectors.cljs b/src/status_im/ui2/screens/quo2_preview/selectors/selectors.cljs index 2c64138e01..00d365a9e6 100644 --- a/src/status_im/ui2/screens/quo2_preview/selectors/selectors.cljs +++ b/src/status_im/ui2/screens/quo2_preview/selectors/selectors.cljs @@ -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)