diff options
Diffstat (limited to 'src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx')
-rw-r--r-- | src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx new file mode 100644 index 000000000..c9af22c96 --- /dev/null +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.tsx | |||
@@ -0,0 +1,90 @@ | |||
1 | import { Component, ReactElement } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import withStyles, { WithStylesProps } from 'react-jss'; | ||
4 | import classnames from 'classnames'; | ||
5 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
6 | import Loader from '../../../components/ui/loader/index'; | ||
7 | import { workspaceStore } from '../index'; | ||
8 | import { Theme } from '../../../themes'; | ||
9 | |||
10 | const messages = defineMessages({ | ||
11 | switchingTo: { | ||
12 | id: 'workspaces.switchingIndicator.switchingTo', | ||
13 | defaultMessage: 'Switching to', | ||
14 | }, | ||
15 | }); | ||
16 | |||
17 | const wrapperTransition = | ||
18 | window && window.matchMedia('(prefers-reduced-motion: no-preference)') | ||
19 | ? 'width 0.5s ease' | ||
20 | : 'none'; | ||
21 | |||
22 | const styles = theme => ({ | ||
23 | wrapper: { | ||
24 | display: 'flex', | ||
25 | alignItems: 'flex-start', | ||
26 | position: 'absolute', | ||
27 | transition: wrapperTransition, | ||
28 | width: `calc(100% - ${theme.workspaces.drawer.width}px)`, | ||
29 | marginTop: '20px', | ||
30 | }, | ||
31 | component: { | ||
32 | background: 'rgba(20, 20, 20, 0.4)', | ||
33 | padding: '10px 20px', | ||
34 | display: 'flex', | ||
35 | width: 'auto', | ||
36 | height: 'auto', | ||
37 | margin: [0, 'auto'], | ||
38 | borderRadius: 6, | ||
39 | alignItems: 'center', | ||
40 | zIndex: 200, | ||
41 | }, | ||
42 | spinner: { | ||
43 | width: 40, | ||
44 | height: 40, | ||
45 | marginRight: 10, | ||
46 | }, | ||
47 | message: { | ||
48 | fontSize: 16, | ||
49 | whiteSpace: 'nowrap', | ||
50 | color: theme.colorAppLoaderSpinner, | ||
51 | }, | ||
52 | }); | ||
53 | |||
54 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { | ||
55 | theme?: Theme; | ||
56 | } | ||
57 | |||
58 | @observer | ||
59 | class WorkspaceSwitchingIndicator extends Component<IProps> { | ||
60 | render(): ReactElement | null { | ||
61 | const { classes, intl, theme } = this.props; | ||
62 | const { isSwitchingWorkspace, nextWorkspace } = workspaceStore; | ||
63 | |||
64 | if (!isSwitchingWorkspace) { | ||
65 | return null; | ||
66 | } | ||
67 | |||
68 | const nextWorkspaceName = nextWorkspace | ||
69 | ? nextWorkspace.name | ||
70 | : 'All services'; | ||
71 | |||
72 | return ( | ||
73 | <div className={classnames([classes.wrapper])}> | ||
74 | <div className={classes.component}> | ||
75 | <Loader | ||
76 | className={classes.spinner} | ||
77 | color={theme?.workspaces.switchingIndicator.spinnerColor} | ||
78 | /> | ||
79 | <p className={classes.message}> | ||
80 | {`${intl.formatMessage(messages.switchingTo)} ${nextWorkspaceName}`} | ||
81 | </p> | ||
82 | </div> | ||
83 | </div> | ||
84 | ); | ||
85 | } | ||
86 | } | ||
87 | |||
88 | export default injectIntl( | ||
89 | withStyles(styles, { injectTheme: true })(WorkspaceSwitchingIndicator), | ||
90 | ); | ||