From b532966e8597be85fca2a97ad9a6fe60ffa388db Mon Sep 17 00:00:00 2001 From: Jamie Caprani Date: Wed, 11 Oct 2023 12:39:26 +0200 Subject: [PATCH] chore: slider button - add error type, blur variant and fix small ui bug (#17473) --- .../buttons/slide_button/animations.cljs | 2 +- .../buttons/slide_button/component_spec.cljs | 2 +- .../buttons/slide_button/style.cljs | 15 +++---- .../buttons/slide_button/utils.cljs | 41 ++++++++++++------- .../components/buttons/slide_button/view.cljs | 27 +++++++----- .../standard_auth/view.cljs | 2 +- .../quo_preview/buttons/slide_button.cljs | 30 +++++++++++--- .../contexts/syncing/setup_syncing/view.cljs | 2 +- 8 files changed, 77 insertions(+), 44 deletions(-) diff --git a/src/quo2/components/buttons/slide_button/animations.cljs b/src/quo2/components/buttons/slide_button/animations.cljs index bb32f0808f..22f0304546 100644 --- a/src/quo2/components/buttons/slide_button/animations.cljs +++ b/src/quo2/components/buttons/slide_button/animations.cljs @@ -22,7 +22,7 @@ (defn- track-cover-interpolation [track-width thumb-size] {:in [0 1] - :out [(/ thumb-size 2) track-width]}) + :out [thumb-size (+ track-width thumb-size)]}) (defn- arrow-icon-position-interpolation [thumb-size] diff --git a/src/quo2/components/buttons/slide_button/component_spec.cljs b/src/quo2/components/buttons/slide_button/component_spec.cljs index 754a0764c9..aba89e1a8b 100644 --- a/src/quo2/components/buttons/slide_button/component_spec.cljs +++ b/src/quo2/components/buttons/slide_button/component_spec.cljs @@ -81,7 +81,7 @@ (h/has-style track-mock {:opacity constants/disable-opacity}))) (h/test "render the small button" - (h/render [slide-button/view (assoc default-props :size :size/s-40)]) + (h/render [slide-button/view (assoc default-props :size :size-40)]) (let [mock (h/get-by-test-id :slide-button-track) small-height (:track-height constants/small-dimensions)] (h/has-style mock {:height small-height}))) diff --git a/src/quo2/components/buttons/slide_button/style.cljs b/src/quo2/components/buttons/slide_button/style.cljs index 837f5ca03d..1e7ed844ce 100644 --- a/src/quo2/components/buttons/slide_button/style.cljs +++ b/src/quo2/components/buttons/slide_button/style.cljs @@ -2,8 +2,7 @@ (:require [quo2.components.buttons.slide-button.constants :as constants] [quo2.components.buttons.slide-button.utils :as utils] - [react-native.reanimated :as reanimated] - [quo2.foundations.typography :as typography])) + [react-native.reanimated :as reanimated])) (def absolute-fill {:position :absolute @@ -16,7 +15,7 @@ [{:keys [interpolate-track thumb-size customization-color theme]}] (reanimated/apply-animations-to-style {:transform [{:translate-x (interpolate-track :track-clamp)}]} - {:background-color (utils/slider-color :main customization-color theme) + {:background-color (utils/main-color customization-color theme) :border-radius 12 :height thumb-size :width thumb-size @@ -46,7 +45,7 @@ :justify-content :space-around})) (defn track - [{:keys [disabled? customization-color height theme]}] + [{:keys [disabled? customization-color height blur?]}] {:align-items :flex-start :justify-content :center :border-radius 14 @@ -54,7 +53,7 @@ :align-self :stretch :padding constants/track-padding :opacity (if disabled? 0.3 1) - :background-color (utils/slider-color :track customization-color theme)}) + :background-color (utils/track-color customization-color blur?)}) (defn track-cover [interpolate-track] @@ -74,7 +73,5 @@ :width track-width}) (defn track-text - [customization-color theme] - (-> typography/paragraph-1 - (merge typography/font-medium) - (assoc :color (utils/slider-color :main customization-color theme)))) + [customization-color theme blur?] + {:color (utils/text-color customization-color theme blur?)}) diff --git a/src/quo2/components/buttons/slide_button/utils.cljs b/src/quo2/components/buttons/slide_button/utils.cljs index deaac47fd8..5e9a69559a 100644 --- a/src/quo2/components/buttons/slide_button/utils.cljs +++ b/src/quo2/components/buttons/slide_button/utils.cljs @@ -3,19 +3,30 @@ [quo2.components.buttons.slide-button.constants :as constants] [quo2.foundations.colors :as colors])) -(defn slider-color - "- `color-key` `:main`/`:track` - - `customization-color` Customization color" - [color-key customization-color theme] - (let [colors-by-key {:main (colors/theme-colors - (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme) - :track (colors/theme-colors - (colors/custom-color customization-color 50 10) - (colors/custom-color customization-color 60 10) - theme)}] - (color-key colors-by-key))) +(defn main-color + "`customization-color` Customization color" + [customization-color theme] + (colors/theme-colors + (colors/custom-color customization-color 50) + (colors/custom-color customization-color 60) + theme)) + +(defn track-color + "`customization-color` Customization color" + ([customization-color blur?] + (if blur? + colors/white-opa-5 + (colors/custom-color customization-color 50 10)))) + +(defn text-color + "`customization-color` Customization color" + [customization-color theme blur?] + (if blur? + colors/white-opa-40 + (colors/theme-colors + (colors/custom-color customization-color 50) + (colors/custom-color customization-color 60) + theme))) (defn clamp-value [value min-value max-value] @@ -34,8 +45,8 @@ (defn get-dimensions [track-width size dimension-key] (let [default-dimensions (case size - :size/s-40 constants/small-dimensions - :size/s-48 constants/large-dimensions + :size-40 constants/small-dimensions + :size-48 constants/large-dimensions constants/large-dimensions)] (-> default-dimensions (merge {:usable-track (calc-usable-track diff --git a/src/quo2/components/buttons/slide_button/view.cljs b/src/quo2/components/buttons/slide_button/view.cljs index 73995c8a2d..575a3f3c0c 100644 --- a/src/quo2/components/buttons/slide_button/view.cljs +++ b/src/quo2/components/buttons/slide_button/view.cljs @@ -10,6 +10,7 @@ [reagent.core :as reagent] [oops.core :as oops] [react-native.reanimated :as reanimated] + [quo2.components.markdown.text :as text] [quo2.components.buttons.slide-button.constants :as constants] [quo2.theme :as quo.theme])) @@ -29,7 +30,9 @@ customization-color size container-style - theme]}] + theme + type + blur?]}] (let [x-pos (reanimated/use-shared-value 0) dimensions (partial utils/get-dimensions (or @track-width constants/default-width) @@ -37,12 +40,12 @@ interpolate-track (partial animations/interpolate-track x-pos (dimensions :usable-track) - (dimensions :thumb))] + (dimensions :thumb)) + custom-color (if (= type :danger) :danger customization-color)] (rn/use-effect (fn [] (when @sliding-complete? (on-complete))) [@sliding-complete?]) - (rn/use-effect (fn [] (when on-reset (reset! sliding-complete? false) @@ -50,7 +53,6 @@ (animations/reset-track-position x-pos) (on-reset))) [on-reset]) - [gesture/gesture-detector {:gesture (animations/drag-gesture x-pos gestures-disabled? @@ -60,24 +62,29 @@ [reanimated/view {:test-ID :slide-button-track :style (merge (style/track {:disabled? disabled? - :customization-color customization-color + :customization-color custom-color :height (dimensions :track-height) - :theme theme}) + :blur? blur?}) container-style) :on-layout (when-not (some? @track-width) on-track-layout)} [reanimated/view {:style (style/track-cover interpolate-track)} [rn/view {:style (style/track-cover-text-container @track-width)} [icon/icon track-icon - {:color (utils/slider-color :main customization-color theme) + {:color (utils/text-color custom-color theme blur?) :size 20}] [rn/view {:width 4}] - [rn/text {:style (style/track-text customization-color theme)} track-text]]] + [text/text + {:weight :medium + :size :paragraph-1 + :style (style/track-text custom-color theme blur?)} + track-text]]] [reanimated/view {:style (style/thumb-container {:interpolate-track interpolate-track :thumb-size (dimensions :thumb) - :customization-color customization-color - :theme theme})} + :customization-color custom-color + :theme theme + :blur? blur?})} [reanimated/view {:style (style/arrow-icon-container interpolate-track)} [icon/icon :arrow-right {:color colors/white diff --git a/src/status_im2/common/standard_authentication/standard_auth/view.cljs b/src/status_im2/common/standard_authentication/standard_auth/view.cljs index cbf78c0245..e38c2ab888 100644 --- a/src/status_im2/common/standard_authentication/standard_auth/view.cljs +++ b/src/status_im2/common/standard_authentication/standard_auth/view.cljs @@ -73,7 +73,7 @@ :on-auth-success on-auth-success :on-auth-fail on-auth-fail :fallback-button-label fallback-button-label}) - :track-icon :i/face-id + :track-icon (if biometric-auth? :i/face-id :password) :track-text track-text}]]))) (def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/quo_preview/buttons/slide_button.cljs b/src/status_im2/contexts/quo_preview/buttons/slide_button.cljs index a26a047168..b7235fb1fa 100644 --- a/src/status_im2/contexts/quo_preview/buttons/slide_button.cljs +++ b/src/status_im2/contexts/quo_preview/buttons/slide_button.cljs @@ -1,29 +1,43 @@ (ns status-im2.contexts.quo-preview.buttons.slide-button (:require [quo2.core :as quo] [reagent.core :as reagent] - [status-im2.contexts.quo-preview.preview :as preview])) + [status-im2.contexts.quo-preview.preview :as preview] + [react-native.core :as rn])) (def descriptor [{:key :size :type :select - :options [{:key :size/s-48} - {:key :size/s-40}]} + :options [{:key :size-48} + {:key :size-40}]} + {:key :type + :type :select + :options [{:key :default} + {:key :danger}]} {:key :disabled? :type :boolean} + {:key :blur? + :type :boolean} (preview/customization-color-option {:key :color})]) -(defn view +(defn f-view [] (let [state (reagent/atom {:disabled? false :color :blue - :size :size/s-48}) + :size :size-48}) color (reagent/cursor state [:color]) + blur? (reagent/cursor state [:blur?]) complete? (reagent/atom false)] (fn [] + (rn/use-effect (fn [] + (reset! complete? true) + (js/setTimeout #(reset! complete? false) 50)) + [(:size @state)]) [preview/preview-container {:state state :descriptor descriptor - :component-container-style {:align-items :center}} + :component-container-style (when-not @blur? (:align-items :center)) + :blur? @blur? + :show-blur-background? true} (if (not @complete?) [quo/slide-button {:track-text "We gotta slide" @@ -31,9 +45,13 @@ :customization-color @color :size (:size @state) :disabled? (:disabled? @state) + :blur? @blur? + :type (:type @state) :on-complete (fn [] (js/setTimeout (fn [] (reset! complete? true)) 1000) (js/alert "I don't wanna slide anymore"))}] [quo/button {:on-press (fn [] (reset! complete? false))} "Try again"])]))) + +(defn view [] [:f> f-view]) diff --git a/src/status_im2/contexts/syncing/setup_syncing/view.cljs b/src/status_im2/contexts/syncing/setup_syncing/view.cljs index 183e40d408..aae5485272 100644 --- a/src/status_im2/contexts/syncing/setup_syncing/view.cljs +++ b/src/status_im2/contexts/syncing/setup_syncing/view.cljs @@ -120,7 +120,7 @@ [rn/view {:style style/standard-auth} [standard-auth/view {:blur? true - :size :size/s-40 + :size :size-40 :track-text (i18n/label :t/slide-to-reveal-code) :customization-color customization-color :on-enter-password on-enter-password