diff options
author | 2021-08-10 19:04:54 +0200 | |
---|---|---|
committer | 2021-08-10 22:34:54 +0530 | |
commit | 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 (patch) | |
tree | 9f21b062f0c188f2c3ddfbb6594670982610aadf /src/features/webControls | |
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 'src/features/webControls')
-rw-r--r-- | src/features/webControls/components/WebControls.js | 65 |
1 files changed, 30 insertions, 35 deletions
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js index 1cdd14e55..417ebb0b0 100644 --- a/src/features/webControls/components/WebControls.js +++ b/src/features/webControls/components/WebControls.js | |||
@@ -6,7 +6,11 @@ import { Icon } from '@meetfranz/ui'; | |||
6 | import { defineMessages, intlShape } from 'react-intl'; | 6 | import { defineMessages, intlShape } from 'react-intl'; |
7 | 7 | ||
8 | import { | 8 | import { |
9 | mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline, mdiEarth, | 9 | mdiReload, |
10 | mdiArrowRight, | ||
11 | mdiArrowLeft, | ||
12 | mdiHomeOutline, | ||
13 | mdiEarth, | ||
10 | } from '@mdi/js'; | 14 | } from '@mdi/js'; |
11 | 15 | ||
12 | const messages = defineMessages({ | 16 | const messages = defineMessages({ |
@@ -32,7 +36,13 @@ const messages = defineMessages({ | |||
32 | }, | 36 | }, |
33 | }); | 37 | }); |
34 | 38 | ||
35 | const styles = (theme) => ({ | 39 | let buttonTransition = 'none'; |
40 | |||
41 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
42 | buttonTransition = 'opacity 0.25s'; | ||
43 | } | ||
44 | |||
45 | const styles = theme => ({ | ||
36 | root: { | 46 | root: { |
37 | background: theme.colorBackground, | 47 | background: theme.colorBackground, |
38 | position: 'relative', | 48 | position: 'relative', |
@@ -51,7 +61,7 @@ const styles = (theme) => ({ | |||
51 | button: { | 61 | button: { |
52 | width: 30, | 62 | width: 30, |
53 | height: 50, | 63 | height: 50, |
54 | transition: 'opacity 0.25s', | 64 | transition: buttonTransition, |
55 | 65 | ||
56 | '&:hover': { | 66 | '&:hover': { |
57 | opacity: 0.8, | 67 | opacity: 0.8, |
@@ -83,7 +93,8 @@ const styles = (theme) => ({ | |||
83 | }, | 93 | }, |
84 | }); | 94 | }); |
85 | 95 | ||
86 | @injectSheet(styles) @observer | 96 | @injectSheet(styles) |
97 | @observer | ||
87 | class WebControls extends Component { | 98 | class WebControls extends Component { |
88 | static propTypes = { | 99 | static propTypes = { |
89 | classes: PropTypes.object.isRequired, | 100 | classes: PropTypes.object.isRequired, |
@@ -96,7 +107,7 @@ class WebControls extends Component { | |||
96 | openInBrowser: PropTypes.func.isRequired, | 107 | openInBrowser: PropTypes.func.isRequired, |
97 | url: PropTypes.string.isRequired, | 108 | url: PropTypes.string.isRequired, |
98 | navigate: PropTypes.func.isRequired, | 109 | navigate: PropTypes.func.isRequired, |
99 | } | 110 | }; |
100 | 111 | ||
101 | static contextTypes = { | 112 | static contextTypes = { |
102 | intl: intlShape, | 113 | intl: intlShape, |
@@ -119,7 +130,7 @@ class WebControls extends Component { | |||
119 | state = { | 130 | state = { |
120 | inputUrl: '', | 131 | inputUrl: '', |
121 | editUrl: false, | 132 | editUrl: false, |
122 | } | 133 | }; |
123 | 134 | ||
124 | render() { | 135 | render() { |
125 | const { | 136 | const { |
@@ -135,10 +146,7 @@ class WebControls extends Component { | |||
135 | navigate, | 146 | navigate, |
136 | } = this.props; | 147 | } = this.props; |
137 | 148 | ||
138 | const { | 149 | const { inputUrl, editUrl } = this.state; |
139 | inputUrl, | ||
140 | editUrl, | ||
141 | } = this.state; | ||
142 | 150 | ||
143 | const { intl } = this.context; | 151 | const { intl } = this.context; |
144 | 152 | ||
@@ -151,10 +159,7 @@ class WebControls extends Component { | |||
151 | data-tip={intl.formatMessage(messages.goHome)} | 159 | data-tip={intl.formatMessage(messages.goHome)} |
152 | data-place="bottom" | 160 | data-place="bottom" |
153 | > | 161 | > |
154 | <Icon | 162 | <Icon icon={mdiHomeOutline} className={classes.icon} /> |
155 | icon={mdiHomeOutline} | ||
156 | className={classes.icon} | ||
157 | /> | ||
158 | </button> | 163 | </button> |
159 | <button | 164 | <button |
160 | onClick={goBack} | 165 | onClick={goBack} |
@@ -164,10 +169,7 @@ class WebControls extends Component { | |||
164 | data-tip={intl.formatMessage(messages.back)} | 169 | data-tip={intl.formatMessage(messages.back)} |
165 | data-place="bottom" | 170 | data-place="bottom" |
166 | > | 171 | > |
167 | <Icon | 172 | <Icon icon={mdiArrowLeft} className={classes.icon} /> |
168 | icon={mdiArrowLeft} | ||
169 | className={classes.icon} | ||
170 | /> | ||
171 | </button> | 173 | </button> |
172 | <button | 174 | <button |
173 | onClick={goForward} | 175 | onClick={goForward} |
@@ -177,10 +179,7 @@ class WebControls extends Component { | |||
177 | data-tip={intl.formatMessage(messages.forward)} | 179 | data-tip={intl.formatMessage(messages.forward)} |
178 | data-place="bottom" | 180 | data-place="bottom" |
179 | > | 181 | > |
180 | <Icon | 182 | <Icon icon={mdiArrowRight} className={classes.icon} /> |
181 | icon={mdiArrowRight} | ||
182 | className={classes.icon} | ||
183 | /> | ||
184 | </button> | 183 | </button> |
185 | <button | 184 | <button |
186 | onClick={reload} | 185 | onClick={reload} |
@@ -189,25 +188,24 @@ class WebControls extends Component { | |||
189 | data-tip={intl.formatMessage(messages.reload)} | 188 | data-tip={intl.formatMessage(messages.reload)} |
190 | data-place="bottom" | 189 | data-place="bottom" |
191 | > | 190 | > |
192 | <Icon | 191 | <Icon icon={mdiReload} className={classes.icon} /> |
193 | icon={mdiReload} | ||
194 | className={classes.icon} | ||
195 | /> | ||
196 | </button> | 192 | </button> |
197 | <input | 193 | <input |
198 | value={editUrl ? inputUrl : url} | 194 | value={editUrl ? inputUrl : url} |
199 | className={classes.input} | 195 | className={classes.input} |
200 | onChange={(event) => this.setState({ | 196 | onChange={event => |
201 | inputUrl: event.target.value, | 197 | this.setState({ |
202 | })} | 198 | inputUrl: event.target.value, |
203 | onFocus={(event) => { | 199 | }) |
200 | } | ||
201 | onFocus={event => { | ||
204 | console.log('on focus event'); | 202 | console.log('on focus event'); |
205 | event.target.select(); | 203 | event.target.select(); |
206 | this.setState({ | 204 | this.setState({ |
207 | editUrl: true, | 205 | editUrl: true, |
208 | }); | 206 | }); |
209 | }} | 207 | }} |
210 | onKeyDown={(event) => { | 208 | onKeyDown={event => { |
211 | if (event.key === 'Enter') { | 209 | if (event.key === 'Enter') { |
212 | this.setState({ | 210 | this.setState({ |
213 | editUrl: false, | 211 | editUrl: false, |
@@ -231,10 +229,7 @@ class WebControls extends Component { | |||
231 | data-tip={intl.formatMessage(messages.openInBrowser)} | 229 | data-tip={intl.formatMessage(messages.openInBrowser)} |
232 | data-place="bottom" | 230 | data-place="bottom" |
233 | > | 231 | > |
234 | <Icon | 232 | <Icon icon={mdiEarth} className={classes.icon} /> |
235 | icon={mdiEarth} | ||
236 | className={classes.icon} | ||
237 | /> | ||
238 | </button> | 233 | </button> |
239 | </div> | 234 | </div> |
240 | ); | 235 | ); |