diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-08-10 19:04:54 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-08-10 22:34:54 +0530 |
commit | 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 (patch) | |
tree | 9f21b062f0c188f2c3ddfbb6594670982610aadf /packages/forms/src | |
parent | refactor: Move platform-specific logic for shortcut keys into common location. (diff) | |
download | ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.gz ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.zst ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.zip |
feat: follow OS reduced motion setting (#1757)
- add missing meta charset to index.html
- dont restrict scaling for user in index.html
- load animations.css conditionally based on motion preference
- load transitions conditionally in js and css based on motion preference
Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>
Diffstat (limited to 'packages/forms/src')
-rw-r--r-- | packages/forms/src/button/index.tsx | 13 | ||||
-rw-r--r-- | packages/forms/src/select/index.tsx | 12 | ||||
-rw-r--r-- | packages/forms/src/toggle/index.tsx | 8 |
3 files changed, 27 insertions, 6 deletions
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx index c08c4e97d..0aef04a6c 100644 --- a/packages/forms/src/button/index.tsx +++ b/packages/forms/src/button/index.tsx | |||
@@ -35,13 +35,21 @@ interface IProps extends IFormField, IWithStyle { | |||
35 | target?: string; | 35 | target?: string; |
36 | } | 36 | } |
37 | 37 | ||
38 | let buttonTransition: string = 'none'; | ||
39 | let loaderContainerTransition: string = 'none'; | ||
40 | |||
41 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
42 | buttonTransition = 'background .5s, opacity 0.3s'; | ||
43 | loaderContainerTransition = 'all 0.3s'; | ||
44 | } | ||
45 | |||
38 | const styles = (theme: Theme) => ({ | 46 | const styles = (theme: Theme) => ({ |
39 | button: { | 47 | button: { |
40 | borderRadius: theme.borderRadiusSmall, | 48 | borderRadius: theme.borderRadiusSmall, |
41 | border: 'none', | 49 | border: 'none', |
42 | display: 'inline-flex', | 50 | display: 'inline-flex', |
43 | position: 'relative' as Property.Position, | 51 | position: 'relative' as Property.Position, |
44 | transition: 'background .5s, opacity 0.3s', | 52 | transition: buttonTransition, |
45 | textAlign: 'center' as Property.TextAlign, | 53 | textAlign: 'center' as Property.TextAlign, |
46 | outline: 'none', | 54 | outline: 'none', |
47 | alignItems: 'center', | 55 | alignItems: 'center', |
@@ -50,7 +58,6 @@ const styles = (theme: Theme) => ({ | |||
50 | (props.stretch ? '100%' : 'auto') as Property.Width<string>, | 58 | (props.stretch ? '100%' : 'auto') as Property.Width<string>, |
51 | fontSize: theme.uiFontSize, | 59 | fontSize: theme.uiFontSize, |
52 | textDecoration: 'none', | 60 | textDecoration: 'none', |
53 | // height: theme.buttonHeight, | ||
54 | 61 | ||
55 | '&:hover': { | 62 | '&:hover': { |
56 | opacity: 0.8, | 63 | opacity: 0.8, |
@@ -129,7 +136,7 @@ const styles = (theme: Theme) => ({ | |||
129 | width: (props: IProps): string => (!props.busy ? '0' : '40px'), | 136 | width: (props: IProps): string => (!props.busy ? '0' : '40px'), |
130 | height: 20, | 137 | height: 20, |
131 | overflow: 'hidden', | 138 | overflow: 'hidden', |
132 | transition: 'all 0.3s', | 139 | transition: loaderContainerTransition, |
133 | marginLeft: (props: IProps): number => (!props.busy ? 10 : 20), | 140 | marginLeft: (props: IProps): number => (!props.busy ? 10 : 20), |
134 | marginRight: (props: IProps): number => (!props.busy ? -10 : -20), | 141 | marginRight: (props: IProps): number => (!props.busy ? -10 : -20), |
135 | position: (props: IProps): Property.Position => | 142 | position: (props: IProps): Property.Position => |
diff --git a/packages/forms/src/select/index.tsx b/packages/forms/src/select/index.tsx index 4a5775579..ef3e70ddb 100644 --- a/packages/forms/src/select/index.tsx +++ b/packages/forms/src/select/index.tsx | |||
@@ -46,6 +46,14 @@ interface IState { | |||
46 | options: IOptions; | 46 | options: IOptions; |
47 | } | 47 | } |
48 | 48 | ||
49 | let popupTransition: string = 'none'; | ||
50 | let toggleTransition: string = 'none'; | ||
51 | |||
52 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
53 | popupTransition = 'all 0.3s'; | ||
54 | toggleTransition = 'transform 0.3s'; | ||
55 | } | ||
56 | |||
49 | const styles = (theme: Theme) => ({ | 57 | const styles = (theme: Theme) => ({ |
50 | select: { | 58 | select: { |
51 | background: theme.selectBackground, | 59 | background: theme.selectBackground, |
@@ -70,7 +78,7 @@ const styles = (theme: Theme) => ({ | |||
70 | overflowX: 'scroll', | 78 | overflowX: 'scroll', |
71 | border: theme.selectBorder, | 79 | border: theme.selectBorder, |
72 | borderTop: 0, | 80 | borderTop: 0, |
73 | transition: 'all 0.3s', | 81 | transition: popupTransition, |
74 | }, | 82 | }, |
75 | open: { | 83 | open: { |
76 | opacity: 1, | 84 | opacity: 1, |
@@ -98,7 +106,7 @@ const styles = (theme: Theme) => ({ | |||
98 | toggle: { | 106 | toggle: { |
99 | marginLeft: 'auto', | 107 | marginLeft: 'auto', |
100 | fill: theme.selectToggleColor, | 108 | fill: theme.selectToggleColor, |
101 | transition: 'transform 0.3s', | 109 | transition: toggleTransition, |
102 | }, | 110 | }, |
103 | toggleOpened: { | 111 | toggleOpened: { |
104 | transform: 'rotateZ(90deg)', | 112 | transform: 'rotateZ(90deg)', |
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx index a9970c8f1..e525d2906 100644 --- a/packages/forms/src/toggle/index.tsx +++ b/packages/forms/src/toggle/index.tsx | |||
@@ -17,6 +17,12 @@ interface IProps | |||
17 | className?: string; | 17 | className?: string; |
18 | } | 18 | } |
19 | 19 | ||
20 | let buttonTransition: string = 'none'; | ||
21 | |||
22 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
23 | buttonTransition = 'all .5s'; | ||
24 | } | ||
25 | |||
20 | const styles = (theme: Theme) => ({ | 26 | const styles = (theme: Theme) => ({ |
21 | toggle: { | 27 | toggle: { |
22 | background: theme.toggleBackground, | 28 | background: theme.toggleBackground, |
@@ -34,7 +40,7 @@ const styles = (theme: Theme) => ({ | |||
34 | left: 1, | 40 | left: 1, |
35 | top: 1, | 41 | top: 1, |
36 | position: 'absolute' as Property.Position, | 42 | position: 'absolute' as Property.Position, |
37 | transition: 'all .5s', | 43 | transition: buttonTransition, |
38 | }, | 44 | }, |
39 | buttonActive: { | 45 | buttonActive: { |
40 | background: theme.toggleButtonActive, | 46 | background: theme.toggleButtonActive, |