Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Oct 11, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5b3c24b
chore: slider button - add error type, blur and fix small ui bug
J-Son89 Oct 2, 2023
68c1983
adjust syncing page with slider button adjustments
J-Son89 Oct 2, 2023
f224118
chore: add clungu comment
J-Son89 Oct 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/quo2/components/buttons/slide_button/animations.cljs
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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}
Comment on lines +38 to +40
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If blur is only for the dark theme, should add the blur-dark-only? prop as well.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

imo, this feature would have benefitted from discussion before being merged/moved forward. This blur-dark-only? option ignores that there is also blur-light-only (at least I think there is some cases). Not to mention that there is many incorrect configurations of components possible on the preview screens. The button is a good example of this and a better alternative (imo) is to block incorrect configurations via disabling the descriptors for relevant options. This would of course benefit a lot if Mali gets added to the codebase.

Having this discussion was mentioned here (although I'm not sure if the pr with this feature had got merged before, I assume it had so no big deal):
#17271 (comment)
response - #17271 (comment)
response - #17271 (comment)

imo it should be commonplace to discuss with those interested in the team before we add new features to the preview screens as they tend to effect everyone, and with a team so large it takes a while to make later refactors once a feature starts getting used.

(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
Open in desktop
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