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 /src/features/workspaces/components | |
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')
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawerItem.js | 47 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceSwitchingIndicator.js | 23 |
2 files changed, 45 insertions, 25 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js index 0294f69fc..c3f9fcb19 100644 --- a/src/features/workspaces/components/WorkspaceDrawerItem.js +++ b/src/features/workspaces/components/WorkspaceDrawerItem.js | |||
@@ -18,12 +18,18 @@ const messages = defineMessages({ | |||
18 | }, | 18 | }, |
19 | }); | 19 | }); |
20 | 20 | ||
21 | const styles = (theme) => ({ | 21 | let itemTransition = 'none'; |
22 | |||
23 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
24 | itemTransition = 'background-color 300ms ease-out'; | ||
25 | } | ||
26 | |||
27 | const styles = theme => ({ | ||
22 | item: { | 28 | item: { |
23 | height: '67px', | 29 | height: '67px', |
24 | padding: `15px ${theme.workspaces.drawer.padding}px`, | 30 | padding: `15px ${theme.workspaces.drawer.padding}px`, |
25 | borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`, | 31 | borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`, |
26 | transition: 'background-color 300ms ease-out', | 32 | transition: itemTransition, |
27 | '&:first-child': { | 33 | '&:first-child': { |
28 | borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`, | 34 | borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`, |
29 | }, | 35 | }, |
@@ -59,7 +65,8 @@ const styles = (theme) => ({ | |||
59 | }, | 65 | }, |
60 | }); | 66 | }); |
61 | 67 | ||
62 | @injectSheet(styles) @observer | 68 | @injectSheet(styles) |
69 | @observer | ||
63 | class WorkspaceDrawerItem extends Component { | 70 | class WorkspaceDrawerItem extends Component { |
64 | static propTypes = { | 71 | static propTypes = { |
65 | classes: PropTypes.object.isRequired, | 72 | classes: PropTypes.object.isRequired, |
@@ -91,15 +98,19 @@ class WorkspaceDrawerItem extends Component { | |||
91 | } = this.props; | 98 | } = this.props; |
92 | const { intl } = this.context; | 99 | const { intl } = this.context; |
93 | 100 | ||
94 | const contextMenuTemplate = [{ | 101 | const contextMenuTemplate = [ |
95 | label: name, | 102 | { |
96 | enabled: false, | 103 | label: name, |
97 | }, { | 104 | enabled: false, |
98 | type: 'separator', | 105 | }, |
99 | }, { | 106 | { |
100 | label: intl.formatMessage(messages.contextMenuEdit), | 107 | type: 'separator', |
101 | click: onContextMenuEditClick, | 108 | }, |
102 | }]; | 109 | { |
110 | label: intl.formatMessage(messages.contextMenuEdit), | ||
111 | click: onContextMenuEditClick, | ||
112 | }, | ||
113 | ]; | ||
103 | 114 | ||
104 | const contextMenu = Menu.buildFromTemplate(contextMenuTemplate); | 115 | const contextMenu = Menu.buildFromTemplate(contextMenuTemplate); |
105 | 116 | ||
@@ -110,10 +121,12 @@ class WorkspaceDrawerItem extends Component { | |||
110 | isActive ? classes.isActiveItem : null, | 121 | isActive ? classes.isActiveItem : null, |
111 | ])} | 122 | ])} |
112 | onClick={onClick} | 123 | onClick={onClick} |
113 | onContextMenu={() => ( | 124 | onContextMenu={() => |
114 | onContextMenuEditClick && contextMenu.popup(getCurrentWindow()) | 125 | onContextMenuEditClick && contextMenu.popup(getCurrentWindow()) |
115 | )} | 126 | } |
116 | data-tip={`${shortcutIndex <= 9 ? `(${ctrlKey}+${altKey}+${shortcutIndex})` : ''}`} | 127 | data-tip={`${ |
128 | shortcutIndex <= 9 ? `(${ctrlKey}+${altKey}+${shortcutIndex})` : '' | ||
129 | }`} | ||
117 | > | 130 | > |
118 | <span | 131 | <span |
119 | className={classnames([ | 132 | className={classnames([ |
@@ -129,7 +142,9 @@ class WorkspaceDrawerItem extends Component { | |||
129 | isActive ? classes.activeServices : null, | 142 | isActive ? classes.activeServices : null, |
130 | ])} | 143 | ])} |
131 | > | 144 | > |
132 | {services.length ? services.join(', ') : intl.formatMessage(messages.noServicesAddedYet)} | 145 | {services.length |
146 | ? services.join(', ') | ||
147 | : intl.formatMessage(messages.noServicesAddedYet)} | ||
133 | </span> | 148 | </span> |
134 | </div> | 149 | </div> |
135 | ); | 150 | ); |
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} |