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

Use custom color for disabled state of controls 

Signed-off-by: Gheorghe Pinzaru <feross95@gmail.com>
This commit is contained in:
Gheorghe Pinzaru 2020-10-30 14:10:42 +03:00
parent 3ac8f0c5fd
commit 7402718e68
No known key found for this signature in database
GPG Key ID: C9A094959935A952
3 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/quo/components/controls/styles.cljs
View File

@ -2,14 +2,16 @@
(:require [quo.animated :as animated] (:require [quo.animated :as animated]
[quo.design-system.colors :as colors])) [quo.design-system.colors :as colors]))
(defn switch-style [state] (defn switch-style [state disabled]
{:width 52 {:width 52
:height 28 :height 28
:border-radius 14 :border-radius 14
:padding 4 :padding 4
:background-color (animated/mix-color state :background-color (animated/mix-color state
(:ui-01 @colors/theme) (:ui-01 @colors/theme)
(:interactive-01 @colors/theme))}) (if disabled
(:interactive-04 @colors/theme)
(:interactive-01 @colors/theme)))})
(defn switch-bullet-style [state hold] (defn switch-bullet-style [state hold]
{:width 20 {:width 20
@ -24,14 +26,16 @@
:shadow-color (:shadow-01 @colors/theme) :shadow-color (:shadow-01 @colors/theme)
:shadow-offset {:width 0 :height 4}}) :shadow-offset {:width 0 :height 4}})
(defn radio-style [state] (defn radio-style [state disabled]
{:width 20 {:width 20
:height 20 :height 20
:border-radius 10 :border-radius 10
:padding 4 :padding 4
:background-color (animated/mix-color state :background-color (animated/mix-color state
(:ui-01 @colors/theme) (:ui-01 @colors/theme)
(:interactive-01 @colors/theme))}) (if disabled
(:interactive-04 @colors/theme)
(:interactive-01 @colors/theme)))})
(defn radio-bullet-style [state hold] (defn radio-bullet-style [state hold]
{:width 12 {:width 12
@ -46,7 +50,7 @@
:shadow-color (:shadow-01 @colors/theme) :shadow-color (:shadow-01 @colors/theme)
:shadow-offset {:width 0 :height 4}}) :shadow-offset {:width 0 :height 4}})
(defn checkbox-style [state] (defn checkbox-style [state disabled]
{:width 18 {:width 18
:height 18 :height 18
:border-radius 4 :border-radius 4
@ -54,7 +58,9 @@
:align-items :center :align-items :center
:background-color (animated/mix-color state :background-color (animated/mix-color state
(:ui-01 @colors/theme) (:ui-01 @colors/theme)
(:interactive-01 @colors/theme))}) (if disabled
(:interactive-04 @colors/theme)
(:interactive-01 @colors/theme)))})
(defn check-icon-style [state hold] (defn check-icon-style [state hold]
{:opacity (animated/mix hold 1 0.6) {:opacity (animated/mix hold 1 0.6)

15
src/quo/components/controls/view.cljs
View File

@ -45,22 +45,23 @@
:enabled (boolean (and onChange (not disabled)))}) :enabled (boolean (and onChange (not disabled)))})
[animated/view [animated/view
[component {:transition transition [component {:transition transition
:hold hold}]]])))) :hold hold
:disabled disabled}]]]))))
(defn switch-view [{:keys [transition hold]}] (defn switch-view [{:keys [transition hold disabled]}]
[animated/view {:style (styles/switch-style transition) [animated/view {:style (styles/switch-style transition disabled)
:accessibility-label :switch :accessibility-label :switch
:accessibility-role :switch} :accessibility-role :switch}
[animated/view {:style (styles/switch-bullet-style transition hold)}]]) [animated/view {:style (styles/switch-bullet-style transition hold)}]])
(defn radio-view [{:keys [transition hold]}] (defn radio-view [{:keys [transition hold disabled]}]
[animated/view {:style (styles/radio-style transition) [animated/view {:style (styles/radio-style transition disabled)
:accessibility-label :radio :accessibility-label :radio
:accessibility-role :radio} :accessibility-role :radio}
[animated/view {:style (styles/radio-bullet-style transition hold)}]]) [animated/view {:style (styles/radio-bullet-style transition hold)}]])
(defn checkbox-view [{:keys [transition hold]}] (defn checkbox-view [{:keys [transition hold disabled]}]
[animated/view {:style (styles/checkbox-style transition) [animated/view {:style (styles/checkbox-style transition disabled)
:accessibility-label :checkbox :accessibility-label :checkbox
:accessibility-role :checkbox} :accessibility-role :checkbox}
[animated/view {:style (styles/check-icon-style transition hold)} [animated/view {:style (styles/check-icon-style transition hold)}

2
src/quo/design_system/colors.cljs
View File

@ -29,6 +29,7 @@
:interactive-01 "rgba(67,96,223,1)" ; Accent color, buttons, own message, actions,active state :interactive-01 "rgba(67,96,223,1)" ; Accent color, buttons, own message, actions,active state
:interactive-02 "rgba(236,239,252,1)" ; Light Accent, buttons background, actions background, messages :interactive-02 "rgba(236,239,252,1)" ; Light Accent, buttons background, actions background, messages
:interactive-03 "rgba(255,255,255,0.1)" ; Background for interactive above accent :interactive-03 "rgba(255,255,255,0.1)" ; Background for interactive above accent
:interactive-04 "rgba(147,155,161,1)" ; Disabled state
:ui-background "rgba(255,255,255,1)" ; Default view background :ui-background "rgba(255,255,255,1)" ; Default view background
:ui-01 "rgba(238,242,245,1)" ; Secondary background :ui-01 "rgba(238,242,245,1)" ; Secondary background
:ui-02 "rgba(0,0,0,0.1)" ; Deviders :ui-02 "rgba(0,0,0,0.1)" ; Deviders
@ -59,6 +60,7 @@
:interactive-01 "rgba(97,119,229,1)" :interactive-01 "rgba(97,119,229,1)"
:interactive-02 "rgba(35,37,47,1)" :interactive-02 "rgba(35,37,47,1)"
:interactive-03 "rgba(255,255,255,0.1)" :interactive-03 "rgba(255,255,255,0.1)"
:interactive-04 "rgba(131,140,145,1)"
:ui-background "rgba(20,20,20,1)" :ui-background "rgba(20,20,20,1)"
:ui-01 "rgba(37,37,40,1)" :ui-01 "rgba(37,37,40,1)"
:ui-02 "rgba(0,0,0,0.1)" :ui-02 "rgba(0,0,0,0.1)"