Skip to content

Commit

Permalink
chore: slider button - add error type, blur variant and fix small ui …
Browse files Browse the repository at this point in the history 
…bug (#17473)
  • Loading branch information
@J-Son89
J-Son89 authored Oct 11, 2023
1 parent 272e8e8 commit b532966
Show file tree
Hide file tree
Showing 8 changed files with 77 additions and 44 deletions.
2 changes: 1 addition & 1 deletion src/quo2/components/buttons/slide_button/animations.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
2 changes: 1 addition & 1 deletion src/quo2/components/buttons/slide_button/component_spec.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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})))
Expand Down
15 changes: 6 additions & 9 deletions src/quo2/components/buttons/slide_button/style.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -46,15 +45,15 @@
: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
:height height
: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]
Expand All @@ -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?)})
41 changes: 26 additions & 15 deletions src/quo2/components/buttons/slide_button/utils.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand All @@ -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
Expand Down
27 changes: 17 additions & 10 deletions src/quo2/components/buttons/slide_button/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]))

Expand All @@ -29,28 +30,29 @@
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)
size)
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)
(reset! gestures-disabled? false)
(animations/reset-track-position x-pos)
(on-reset)))
[on-reset])

[gesture/gesture-detector
{:gesture (animations/drag-gesture x-pos
gestures-disabled?
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/status_im2/common/standard_authentication/standard_auth/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))
30 changes: 24 additions & 6 deletions src/status_im2/contexts/quo_preview/buttons/slide_button.cljs
View file
Original file line number Diff line number Diff line change
@@ -1,39 +1,57 @@
(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"
:track-icon :face-id
: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])
2 changes: 1 addition & 1 deletion src/status_im2/contexts/syncing/setup_syncing/view.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit b532966

Please sign in to comment.