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/components/auth | |
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/auth')
-rw-r--r-- | src/components/auth/SetupAssistant.js | 110 |
1 files changed, 60 insertions, 50 deletions
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js index bd9069eb7..06ab09892 100644 --- a/src/components/auth/SetupAssistant.js +++ b/src/components/auth/SetupAssistant.js | |||
@@ -18,15 +18,16 @@ const SLACK_ID = 'slack'; | |||
18 | const messages = defineMessages({ | 18 | const messages = defineMessages({ |
19 | headline: { | 19 | headline: { |
20 | id: 'setupAssistant.headline', | 20 | id: 'setupAssistant.headline', |
21 | defaultMessage: '!!!Let\'s get started', | 21 | defaultMessage: "!!!Let's get started", |
22 | }, | 22 | }, |
23 | subHeadline: { | 23 | subHeadline: { |
24 | id: 'setupAssistant.subheadline', | 24 | id: 'setupAssistant.subheadline', |
25 | defaultMessage: '!!!Choose from our most used services and get back on top of your messaging now.', | 25 | defaultMessage: |
26 | '!!!Choose from our most used services and get back on top of your messaging now.', | ||
26 | }, | 27 | }, |
27 | submitButtonLabel: { | 28 | submitButtonLabel: { |
28 | id: 'setupAssistant.submit.label', | 29 | id: 'setupAssistant.submit.label', |
29 | defaultMessage: '!!!Let\'s go', | 30 | defaultMessage: "!!!Let's go", |
30 | }, | 31 | }, |
31 | inviteSuccessInfo: { | 32 | inviteSuccessInfo: { |
32 | id: 'invite.successInfo', | 33 | id: 'invite.successInfo', |
@@ -34,14 +35,19 @@ const messages = defineMessages({ | |||
34 | }, | 35 | }, |
35 | }); | 36 | }); |
36 | 37 | ||
37 | const styles = (theme) => ({ | 38 | let transition = 'none'; |
39 | |||
40 | if (window.matchMedia('(prefers-reduced-motion: no-preference)')) { | ||
41 | transition = 'all 0.25s'; | ||
42 | } | ||
43 | |||
44 | const styles = theme => ({ | ||
38 | root: { | 45 | root: { |
39 | width: '500px !important', | 46 | width: '500px !important', |
40 | textAlign: 'center', | 47 | textAlign: 'center', |
41 | padding: 20, | 48 | padding: 20, |
42 | 49 | ||
43 | '& h1': { | 50 | '& h1': {}, |
44 | }, | ||
45 | }, | 51 | }, |
46 | servicesGrid: { | 52 | servicesGrid: { |
47 | display: 'flex', | 53 | display: 'flex', |
@@ -60,7 +66,7 @@ const styles = (theme) => ({ | |||
60 | borderRadius: theme.borderRadius, | 66 | borderRadius: theme.borderRadius, |
61 | marginBottom: 10, | 67 | marginBottom: 10, |
62 | opacity: 0.5, | 68 | opacity: 0.5, |
63 | transition: 'all 0.25s', | 69 | transition, |
64 | border: [3, 'solid', 'transparent'], | 70 | border: [3, 'solid', 'transparent'], |
65 | 71 | ||
66 | '& h2': { | 72 | '& h2': { |
@@ -70,10 +76,8 @@ const styles = (theme) => ({ | |||
70 | 76 | ||
71 | '&:hover': { | 77 | '&:hover': { |
72 | border: [3, 'solid', theme.brandPrimary], | 78 | border: [3, 'solid', theme.brandPrimary], |
73 | '& $serviceIcon': { | 79 | '& $serviceIcon': {}, |
74 | }, | ||
75 | }, | 80 | }, |
76 | |||
77 | }, | 81 | }, |
78 | selected: { | 82 | selected: { |
79 | border: [3, 'solid', theme.brandPrimary], | 83 | border: [3, 'solid', theme.brandPrimary], |
@@ -82,7 +86,7 @@ const styles = (theme) => ({ | |||
82 | }, | 86 | }, |
83 | serviceIcon: { | 87 | serviceIcon: { |
84 | width: 50, | 88 | width: 50, |
85 | transition: 'all 0.25s', | 89 | transition, |
86 | }, | 90 | }, |
87 | 91 | ||
88 | slackModalContent: { | 92 | slackModalContent: { |
@@ -125,7 +129,8 @@ const styles = (theme) => ({ | |||
125 | }, | 129 | }, |
126 | }); | 130 | }); |
127 | 131 | ||
128 | @injectSheet(styles) @observer | 132 | @injectSheet(styles) |
133 | @observer | ||
129 | class SetupAssistant extends Component { | 134 | class SetupAssistant extends Component { |
130 | static propTypes = { | 135 | static propTypes = { |
131 | classes: PropTypes.object.isRequired, | 136 | classes: PropTypes.object.isRequired, |
@@ -144,13 +149,17 @@ class SetupAssistant extends Component { | |||
144 | }; | 149 | }; |
145 | 150 | ||
146 | state = { | 151 | state = { |
147 | services: [{ | 152 | services: [ |
148 | id: 'whatsapp', | 153 | { |
149 | }, { | 154 | id: 'whatsapp', |
150 | id: 'messenger', | 155 | }, |
151 | }, { | 156 | { |
152 | id: 'gmail', | 157 | id: 'messenger', |
153 | }], | 158 | }, |
159 | { | ||
160 | id: 'gmail', | ||
161 | }, | ||
162 | ], | ||
154 | isSlackModalOpen: false, | 163 | isSlackModalOpen: false, |
155 | slackWorkspace: '', | 164 | slackWorkspace: '', |
156 | }; | 165 | }; |
@@ -158,10 +167,12 @@ class SetupAssistant extends Component { | |||
158 | slackWorkspaceHandler() { | 167 | slackWorkspaceHandler() { |
159 | const { slackWorkspace = '', services } = this.state; | 168 | const { slackWorkspace = '', services } = this.state; |
160 | 169 | ||
161 | const sanitizedWorkspace = slackWorkspace.trim().replace(/^https?:\/\//, ''); | 170 | const sanitizedWorkspace = slackWorkspace |
171 | .trim() | ||
172 | .replace(/^https?:\/\//, ''); | ||
162 | 173 | ||
163 | if (sanitizedWorkspace) { | 174 | if (sanitizedWorkspace) { |
164 | const index = services.findIndex((s) => s.id === SLACK_ID); | 175 | const index = services.findIndex(s => s.id === SLACK_ID); |
165 | 176 | ||
166 | if (index === -1) { | 177 | if (index === -1) { |
167 | const newServices = services; | 178 | const newServices = services; |
@@ -179,9 +190,17 @@ class SetupAssistant extends Component { | |||
179 | render() { | 190 | render() { |
180 | const { intl } = this.context; | 191 | const { intl } = this.context; |
181 | const { | 192 | const { |
182 | classes, isInviteSuccessful, onSubmit, services, isSettingUpServices, | 193 | classes, |
194 | isInviteSuccessful, | ||
195 | onSubmit, | ||
196 | services, | ||
197 | isSettingUpServices, | ||
183 | } = this.props; | 198 | } = this.props; |
184 | const { isSlackModalOpen, slackWorkspace, services: addedServices } = this.state; | 199 | const { |
200 | isSlackModalOpen, | ||
201 | slackWorkspace, | ||
202 | services: addedServices, | ||
203 | } = this.state; | ||
185 | 204 | ||
186 | return ( | 205 | return ( |
187 | <div className={`auth__container ${classes.root}`}> | 206 | <div className={`auth__container ${classes.root}`}> |
@@ -197,29 +216,22 @@ class SetupAssistant extends Component { | |||
197 | </Appear> | 216 | </Appear> |
198 | )} | 217 | )} |
199 | 218 | ||
200 | <img | 219 | <img src="./assets/images/logo.svg" className="auth__logo" alt="" /> |
201 | src="./assets/images/logo.svg" | 220 | <h1>{intl.formatMessage(messages.headline)}</h1> |
202 | className="auth__logo" | 221 | <h2>{intl.formatMessage(messages.subHeadline)}</h2> |
203 | alt="" | ||
204 | /> | ||
205 | <h1> | ||
206 | {intl.formatMessage(messages.headline)} | ||
207 | </h1> | ||
208 | <h2> | ||
209 | {intl.formatMessage(messages.subHeadline)} | ||
210 | </h2> | ||
211 | <div className={classnames('grid', classes.servicesGrid)}> | 222 | <div className={classnames('grid', classes.servicesGrid)}> |
212 | {Object.keys(services).map((id) => { | 223 | {Object.keys(services).map(id => { |
213 | const service = services[id]; | 224 | const service = services[id]; |
214 | return ( | 225 | return ( |
215 | <button | 226 | <button |
216 | className={classnames({ | 227 | className={classnames({ |
217 | [classes.serviceContainer]: true, | 228 | [classes.serviceContainer]: true, |
218 | [classes.selected]: this.state.services.findIndex((s) => s.id === id) !== -1, | 229 | [classes.selected]: |
230 | this.state.services.findIndex(s => s.id === id) !== -1, | ||
219 | })} | 231 | })} |
220 | key={id} | 232 | key={id} |
221 | onClick={() => { | 233 | onClick={() => { |
222 | const index = this.state.services.findIndex((s) => s.id === id); | 234 | const index = this.state.services.findIndex(s => s.id === id); |
223 | if (index === -1) { | 235 | if (index === -1) { |
224 | if (id === SLACK_ID) { | 236 | if (id === SLACK_ID) { |
225 | this.setState({ isSlackModalOpen: true }); | 237 | this.setState({ isSlackModalOpen: true }); |
@@ -244,9 +256,7 @@ class SetupAssistant extends Component { | |||
244 | className={classes.serviceIcon} | 256 | className={classes.serviceIcon} |
245 | alt="" | 257 | alt="" |
246 | /> | 258 | /> |
247 | <h2> | 259 | <h2>{service.name}</h2> |
248 | {service.name} | ||
249 | </h2> | ||
250 | {id === SLACK_ID && slackWorkspace && ( | 260 | {id === SLACK_ID && slackWorkspace && ( |
251 | <Badge type="secondary" className={classes.slackBadge}> | 261 | <Badge type="secondary" className={classes.slackBadge}> |
252 | {slackWorkspace} | 262 | {slackWorkspace} |
@@ -275,22 +285,22 @@ class SetupAssistant extends Component { | |||
275 | <div className={classes.slackModalContent}> | 285 | <div className={classes.slackModalContent}> |
276 | <img src={`${CDN_URL}/recipes/dist/slack/src/icon.svg`} alt="" /> | 286 | <img src={`${CDN_URL}/recipes/dist/slack/src/icon.svg`} alt="" /> |
277 | <h1>Create your first Slack workspace</h1> | 287 | <h1>Create your first Slack workspace</h1> |
278 | <form onSubmit={(e) => { | 288 | <form |
279 | e.preventDefault(); | 289 | onSubmit={e => { |
280 | this.slackWorkspaceHandler(); | 290 | e.preventDefault(); |
281 | }} | 291 | this.slackWorkspaceHandler(); |
292 | }} | ||
282 | > | 293 | > |
283 | <Input | 294 | <Input |
284 | suffix=".slack.com" | 295 | suffix=".slack.com" |
285 | placeholder="workspace-url" | 296 | placeholder="workspace-url" |
286 | onChange={(e) => this.setState({ slackWorkspace: e.target.value })} | 297 | onChange={e => |
298 | this.setState({ slackWorkspace: e.target.value }) | ||
299 | } | ||
287 | value={slackWorkspace} | 300 | value={slackWorkspace} |
288 | /> | 301 | /> |
289 | <div className={classes.modalActionContainer}> | 302 | <div className={classes.modalActionContainer}> |
290 | <Button | 303 | <Button type="submit" label="Save" /> |
291 | type="submit" | ||
292 | label="Save" | ||
293 | /> | ||
294 | <Button | 304 | <Button |
295 | type="link" | 305 | type="link" |
296 | buttonType="secondary" | 306 | buttonType="secondary" |
@@ -305,7 +315,7 @@ class SetupAssistant extends Component { | |||
305 | <Button | 315 | <Button |
306 | type="button" | 316 | type="button" |
307 | className="auth__button" | 317 | className="auth__button" |
308 | // disabled={!atLeastOneEmailAddress} | 318 | // disabled={!atLeastOneEmailAddress} |
309 | label={intl.formatMessage(messages.submitButtonLabel)} | 319 | label={intl.formatMessage(messages.submitButtonLabel)} |
310 | onClick={() => onSubmit(this.state.services)} | 320 | onClick={() => onSubmit(this.state.services)} |
311 | busy={isSettingUpServices} | 321 | busy={isSettingUpServices} |