From 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 Mon Sep 17 00:00:00 2001 From: Markus Hatvan Date: Tue, 10 Aug 2021 19:04:54 +0200 Subject: 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 --- src/features/webControls/components/WebControls.js | 65 ++++++++++------------ .../workspaces/components/WorkspaceDrawerItem.js | 47 ++++++++++------ .../components/WorkspaceSwitchingIndicator.js | 23 +++++--- 3 files changed, 75 insertions(+), 60 deletions(-) (limited to 'src/features') 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'; import { defineMessages, intlShape } from 'react-intl'; import { - mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline, mdiEarth, + mdiReload, + mdiArrowRight, + mdiArrowLeft, + mdiHomeOutline, + mdiEarth, } from '@mdi/js'; const messages = defineMessages({ @@ -32,7 +36,13 @@ const messages = defineMessages({ }, }); -const styles = (theme) => ({ +let buttonTransition = 'none'; + +if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { + buttonTransition = 'opacity 0.25s'; +} + +const styles = theme => ({ root: { background: theme.colorBackground, position: 'relative', @@ -51,7 +61,7 @@ const styles = (theme) => ({ button: { width: 30, height: 50, - transition: 'opacity 0.25s', + transition: buttonTransition, '&:hover': { opacity: 0.8, @@ -83,7 +93,8 @@ const styles = (theme) => ({ }, }); -@injectSheet(styles) @observer +@injectSheet(styles) +@observer class WebControls extends Component { static propTypes = { classes: PropTypes.object.isRequired, @@ -96,7 +107,7 @@ class WebControls extends Component { openInBrowser: PropTypes.func.isRequired, url: PropTypes.string.isRequired, navigate: PropTypes.func.isRequired, - } + }; static contextTypes = { intl: intlShape, @@ -119,7 +130,7 @@ class WebControls extends Component { state = { inputUrl: '', editUrl: false, - } + }; render() { const { @@ -135,10 +146,7 @@ class WebControls extends Component { navigate, } = this.props; - const { - inputUrl, - editUrl, - } = this.state; + const { inputUrl, editUrl } = this.state; const { intl } = this.context; @@ -151,10 +159,7 @@ class WebControls extends Component { data-tip={intl.formatMessage(messages.goHome)} data-place="bottom" > - + this.setState({ - inputUrl: event.target.value, - })} - onFocus={(event) => { + onChange={event => + this.setState({ + inputUrl: event.target.value, + }) + } + onFocus={event => { console.log('on focus event'); event.target.select(); this.setState({ editUrl: true, }); }} - onKeyDown={(event) => { + onKeyDown={event => { if (event.key === 'Enter') { this.setState({ editUrl: false, @@ -231,10 +229,7 @@ class WebControls extends Component { data-tip={intl.formatMessage(messages.openInBrowser)} data-place="bottom" > - + ); 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({ }, }); -const styles = (theme) => ({ +let itemTransition = 'none'; + +if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { + itemTransition = 'background-color 300ms ease-out'; +} + +const styles = theme => ({ item: { height: '67px', padding: `15px ${theme.workspaces.drawer.padding}px`, borderBottom: `1px solid ${theme.workspaces.drawer.listItem.border}`, - transition: 'background-color 300ms ease-out', + transition: itemTransition, '&:first-child': { borderTop: `1px solid ${theme.workspaces.drawer.listItem.border}`, }, @@ -59,7 +65,8 @@ const styles = (theme) => ({ }, }); -@injectSheet(styles) @observer +@injectSheet(styles) +@observer class WorkspaceDrawerItem extends Component { static propTypes = { classes: PropTypes.object.isRequired, @@ -91,15 +98,19 @@ class WorkspaceDrawerItem extends Component { } = this.props; const { intl } = this.context; - const contextMenuTemplate = [{ - label: name, - enabled: false, - }, { - type: 'separator', - }, { - label: intl.formatMessage(messages.contextMenuEdit), - click: onContextMenuEditClick, - }]; + const contextMenuTemplate = [ + { + label: name, + enabled: false, + }, + { + type: 'separator', + }, + { + label: intl.formatMessage(messages.contextMenuEdit), + click: onContextMenuEditClick, + }, + ]; const contextMenu = Menu.buildFromTemplate(contextMenuTemplate); @@ -110,10 +121,12 @@ class WorkspaceDrawerItem extends Component { isActive ? classes.isActiveItem : null, ])} onClick={onClick} - onContextMenu={() => ( + onContextMenu={() => onContextMenuEditClick && contextMenu.popup(getCurrentWindow()) - )} - data-tip={`${shortcutIndex <= 9 ? `(${ctrlKey}+${altKey}+${shortcutIndex})` : ''}`} + } + data-tip={`${ + shortcutIndex <= 9 ? `(${ctrlKey}+${altKey}+${shortcutIndex})` : '' + }`} > - {services.length ? services.join(', ') : intl.formatMessage(messages.noServicesAddedYet)} + {services.length + ? services.join(', ') + : intl.formatMessage(messages.noServicesAddedYet)} ); 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({ }, }); -const styles = (theme) => ({ +let wrapperTransition = 'none'; + +if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { + wrapperTransition = 'width 0.5s ease'; +} + +const styles = theme => ({ wrapper: { display: 'flex', alignItems: 'flex-start', position: 'absolute', - transition: 'width 0.5s ease', + transition: wrapperTransition, width: `calc(100% - ${theme.workspaces.drawer.width}px)`, marginTop: '20px', }, @@ -47,7 +53,8 @@ const styles = (theme) => ({ }, }); -@injectSheet(styles) @observer +@injectSheet(styles) +@observer class WorkspaceSwitchingIndicator extends Component { static propTypes = { classes: PropTypes.object.isRequired, @@ -63,13 +70,11 @@ class WorkspaceSwitchingIndicator extends Component { const { intl } = this.context; const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; if (!isSwitchingWorkspace) return null; - const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services'; + const nextWorkspaceName = nextWorkspace + ? nextWorkspace.name + : 'All services'; return ( -
+