diff options
author | 2021-08-10 19:04:54 +0200 | |
---|---|---|
committer | 2021-08-10 22:34:54 +0530 | |
commit | 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 (patch) | |
tree | 9f21b062f0c188f2c3ddfbb6594670982610aadf /src/components/layout | |
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/components/layout')
-rw-r--r-- | src/components/layout/AppLayout.js | 86 |
1 files changed, 51 insertions, 35 deletions
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 6e1d7c9a0..de962cc12 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -40,22 +40,32 @@ const messages = defineMessages({ | |||
40 | }, | 40 | }, |
41 | authRequestFailed: { | 41 | authRequestFailed: { |
42 | id: 'infobar.authRequestFailed', | 42 | id: 'infobar.authRequestFailed', |
43 | defaultMessage: '!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.', | 43 | defaultMessage: |
44 | '!!!There were errors while trying to perform an authenticated request. Please try logging out and back in if this error persists.', | ||
44 | }, | 45 | }, |
45 | }); | 46 | }); |
46 | 47 | ||
47 | const styles = (theme) => ({ | 48 | let transition = 'none'; |
49 | |||
50 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
51 | transition = 'transform 0.5s ease'; | ||
52 | } | ||
53 | |||
54 | const styles = theme => ({ | ||
48 | appContent: { | 55 | appContent: { |
49 | // width: `calc(100% + ${theme.workspaces.drawer.width}px)`, | 56 | // width: `calc(100% + ${theme.workspaces.drawer.width}px)`, |
50 | width: '100%', | 57 | width: '100%', |
51 | transition: 'transform 0.5s ease', | 58 | transition, |
52 | transform() { | 59 | transform() { |
53 | return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`; | 60 | return workspaceStore.isWorkspaceDrawerOpen |
61 | ? 'translateX(0)' | ||
62 | : `translateX(-${theme.workspaces.drawer.width}px)`; | ||
54 | }, | 63 | }, |
55 | }, | 64 | }, |
56 | }); | 65 | }); |
57 | 66 | ||
58 | @injectSheet(styles) @observer | 67 | @injectSheet(styles) |
68 | @observer | ||
59 | class AppLayout extends Component { | 69 | class AppLayout extends Component { |
60 | static propTypes = { | 70 | static propTypes = { |
61 | classes: PropTypes.object.isRequired, | 71 | classes: PropTypes.object.isRequired, |
@@ -80,7 +90,7 @@ class AppLayout extends Component { | |||
80 | 90 | ||
81 | state = { | 91 | state = { |
82 | shouldShowAppUpdateInfoBar: true, | 92 | shouldShowAppUpdateInfoBar: true, |
83 | } | 93 | }; |
84 | 94 | ||
85 | static defaultProps = { | 95 | static defaultProps = { |
86 | children: [], | 96 | children: [], |
@@ -118,42 +128,48 @@ class AppLayout extends Component { | |||
118 | return ( | 128 | return ( |
119 | <ErrorBoundary> | 129 | <ErrorBoundary> |
120 | <div className="app"> | 130 | <div className="app"> |
121 | {isWindows && !isFullScreen && <TitleBar menu={window.ferdi.menu.template} icon="assets/images/logo.svg" />} | 131 | {isWindows && !isFullScreen && ( |
132 | <TitleBar | ||
133 | menu={window.ferdi.menu.template} | ||
134 | icon="assets/images/logo.svg" | ||
135 | /> | ||
136 | )} | ||
122 | <div className={`app__content ${classes.appContent}`}> | 137 | <div className={`app__content ${classes.appContent}`}> |
123 | {workspacesDrawer} | 138 | {workspacesDrawer} |
124 | {sidebar} | 139 | {sidebar} |
125 | <div className="app__service"> | 140 | <div className="app__service"> |
126 | <WorkspaceSwitchingIndicator /> | 141 | <WorkspaceSwitchingIndicator /> |
127 | {news.length > 0 && news.map((item) => ( | 142 | {news.length > 0 && |
143 | news.map(item => ( | ||
144 | <InfoBar | ||
145 | key={item.id} | ||
146 | position="top" | ||
147 | type={item.type} | ||
148 | sticky={item.sticky} | ||
149 | onHide={() => removeNewsItem({ newsId: item.id })} | ||
150 | > | ||
151 | <span | ||
152 | dangerouslySetInnerHTML={createMarkup(item.message)} | ||
153 | onClick={event => { | ||
154 | const { target } = event; | ||
155 | if (target && target.hasAttribute('data-is-news-cta')) { | ||
156 | removeNewsItem({ newsId: item.id }); | ||
157 | } | ||
158 | }} | ||
159 | /> | ||
160 | </InfoBar> | ||
161 | ))} | ||
162 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( | ||
128 | <InfoBar | 163 | <InfoBar |
129 | key={item.id} | 164 | type="danger" |
130 | position="top" | 165 | ctaLabel="Try again" |
131 | type={item.type} | 166 | ctaLoading={areRequiredRequestsLoading} |
132 | sticky={item.sticky} | 167 | sticky |
133 | onHide={() => removeNewsItem({ newsId: item.id })} | 168 | onClick={retryRequiredRequests} |
134 | > | 169 | > |
135 | <span | 170 | <span className="mdi mdi-flash" /> |
136 | dangerouslySetInnerHTML={createMarkup(item.message)} | 171 | {intl.formatMessage(messages.requiredRequestsFailed)} |
137 | onClick={(event) => { | ||
138 | const { target } = event; | ||
139 | if (target && target.hasAttribute('data-is-news-cta')) { | ||
140 | removeNewsItem({ newsId: item.id }); | ||
141 | } | ||
142 | }} | ||
143 | /> | ||
144 | </InfoBar> | 172 | </InfoBar> |
145 | ))} | ||
146 | {!areRequiredRequestsSuccessful && showRequiredRequestsError && ( | ||
147 | <InfoBar | ||
148 | type="danger" | ||
149 | ctaLabel="Try again" | ||
150 | ctaLoading={areRequiredRequestsLoading} | ||
151 | sticky | ||
152 | onClick={retryRequiredRequests} | ||
153 | > | ||
154 | <span className="mdi mdi-flash" /> | ||
155 | {intl.formatMessage(messages.requiredRequestsFailed)} | ||
156 | </InfoBar> | ||
157 | )} | 173 | )} |
158 | {authRequestFailed && ( | 174 | {authRequestFailed && ( |
159 | <InfoBar | 175 | <InfoBar |
@@ -178,7 +194,7 @@ class AppLayout extends Component { | |||
178 | {intl.formatMessage(messages.servicesUpdated)} | 194 | {intl.formatMessage(messages.servicesUpdated)} |
179 | </InfoBar> | 195 | </InfoBar> |
180 | )} | 196 | )} |
181 | { appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && ( | 197 | {appUpdateIsDownloaded && this.state.shouldShowAppUpdateInfoBar && ( |
182 | <AppUpdateInfoBar | 198 | <AppUpdateInfoBar |
183 | nextAppReleaseVersion={nextAppReleaseVersion} | 199 | nextAppReleaseVersion={nextAppReleaseVersion} |
184 | onInstallUpdate={installAppUpdate} | 200 | onInstallUpdate={installAppUpdate} |