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

chore: slider button - add error type, blur variant and fix small ui bug (#17473)

This commit is contained in:
Jamie Caprani 2023-10-11 12:39:26 +02:00 committed by GitHub
parent 272e8e80d8
commit b532966e85
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 77 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/quo2/components/buttons/slide_button/animations.cljs
View File

@ -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]

2
src/quo2/components/buttons/slide_button/component_spec.cljs
View File

@ -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})))

15
src/quo2/components/buttons/slide_button/style.cljs
View File

@ -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?)})

41
src/quo2/components/buttons/slide_button/utils.cljs
View File

@ -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

27
src/quo2/components/buttons/slide_button/view.cljs
View File

@ -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

2
src/status_im2/common/standard_authentication/standard_auth/view.cljs
View File

@ -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
src/status_im2/contexts/quo_preview/buttons/slide_button.cljs
View File

@ -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])

2
src/status_im2/contexts/syncing/setup_syncing/view.cljs
View File

@ -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