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/workspaces/components/WorkspaceSwitchingIndicator.js | |
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/workspaces/components/WorkspaceSwitchingIndicator.js')
-rw-r--r-- | src/features/workspaces/components/WorkspaceSwitchingIndicator.js | 23 |
1 files changed, 14 insertions, 9 deletions
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js index b46959e91..613075c4a 100644 --- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js | |||
@@ -15,12 +15,18 @@ const messages = defineMessages({ | |||
15 | }, | 15 | }, |
16 | }); | 16 | }); |
17 | 17 | ||
18 | const styles = (theme) => ({ | 18 | let wrapperTransition = 'none'; |
19 | |||
20 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
21 | wrapperTransition = 'width 0.5s ease'; | ||
22 | } | ||
23 | |||
24 | const styles = theme => ({ | ||
19 | wrapper: { | 25 | wrapper: { |
20 | display: 'flex', | 26 | display: 'flex', |
21 | alignItems: 'flex-start', | 27 | alignItems: 'flex-start', |
22 | position: 'absolute', | 28 | position: 'absolute', |
23 | transition: 'width 0.5s ease', | 29 | transition: wrapperTransition, |
24 | width: `calc(100% - ${theme.workspaces.drawer.width}px)`, | 30 | width: `calc(100% - ${theme.workspaces.drawer.width}px)`, |
25 | marginTop: '20px', | 31 | marginTop: '20px', |
26 | }, | 32 | }, |
@@ -47,7 +53,8 @@ const styles = (theme) => ({ | |||
47 | }, | 53 | }, |
48 | }); | 54 | }); |
49 | 55 | ||
50 | @injectSheet(styles) @observer | 56 | @injectSheet(styles) |
57 | @observer | ||
51 | class WorkspaceSwitchingIndicator extends Component { | 58 | class WorkspaceSwitchingIndicator extends Component { |
52 | static propTypes = { | 59 | static propTypes = { |
53 | classes: PropTypes.object.isRequired, | 60 | classes: PropTypes.object.isRequired, |
@@ -63,13 +70,11 @@ class WorkspaceSwitchingIndicator extends Component { | |||
63 | const { intl } = this.context; | 70 | const { intl } = this.context; |
64 | const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; | 71 | const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; |
65 | if (!isSwitchingWorkspace) return null; | 72 | if (!isSwitchingWorkspace) return null; |
66 | const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services'; | 73 | const nextWorkspaceName = nextWorkspace |
74 | ? nextWorkspace.name | ||
75 | : 'All services'; | ||
67 | return ( | 76 | return ( |
68 | <div | 77 | <div className={classnames([classes.wrapper])}> |
69 | className={classnames([ | ||
70 | classes.wrapper, | ||
71 | ])} | ||
72 | > | ||
73 | <div className={classes.component}> | 78 | <div className={classes.component}> |
74 | <Loader | 79 | <Loader |
75 | className={classes.spinner} | 80 | className={classes.spinner} |