diff options
Diffstat (limited to 'src/features/workspaces/components/WorkspaceSwitchingIndicator.js')
-rw-r--r-- | src/features/workspaces/components/WorkspaceSwitchingIndicator.js | 16 |
1 files changed, 13 insertions, 3 deletions
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js index 4a279afaf..f68ac1b00 100644 --- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js +++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js | |||
@@ -2,17 +2,22 @@ import React, { Component } from 'react'; | |||
2 | import PropTypes from 'prop-types'; | 2 | import PropTypes from 'prop-types'; |
3 | import { observer } from 'mobx-react'; | 3 | import { observer } from 'mobx-react'; |
4 | import injectSheet from 'react-jss'; | 4 | import injectSheet from 'react-jss'; |
5 | import classnames from 'classnames'; | ||
5 | import { workspacesState } from '../state'; | 6 | import { workspacesState } from '../state'; |
6 | import LoaderComponent from '../../../components/ui/Loader'; | 7 | import LoaderComponent from '../../../components/ui/Loader'; |
7 | 8 | ||
8 | const styles = () => ({ | 9 | const styles = theme => ({ |
9 | wrapper: { | 10 | wrapper: { |
10 | display: 'flex', | 11 | display: 'flex', |
11 | alignItems: 'flex-start', | 12 | alignItems: 'flex-start', |
12 | position: 'absolute', | 13 | position: 'absolute', |
14 | transition: 'width 0.5s ease', | ||
13 | width: '100%', | 15 | width: '100%', |
14 | marginTop: '20px', | 16 | marginTop: '20px', |
15 | }, | 17 | }, |
18 | wrapperWhenDrawerIsOpen: { | ||
19 | width: `calc(100% - ${theme.workspaceDrawerWidth}px)`, | ||
20 | }, | ||
16 | component: { | 21 | component: { |
17 | background: 'rgba(20, 20, 20, 0.4)', | 22 | background: 'rgba(20, 20, 20, 0.4)', |
18 | padding: 20, | 23 | padding: 20, |
@@ -37,11 +42,16 @@ class WorkspaceSwitchingIndicator extends Component { | |||
37 | 42 | ||
38 | render() { | 43 | render() { |
39 | const { classes } = this.props; | 44 | const { classes } = this.props; |
40 | const { isSwitchingWorkspace, nextWorkspace } = workspacesState; | 45 | const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspacesState; |
41 | if (!isSwitchingWorkspace) return null; | 46 | if (!isSwitchingWorkspace) return null; |
42 | const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services'; | 47 | const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services'; |
43 | return ( | 48 | return ( |
44 | <div className={classes.wrapper}> | 49 | <div |
50 | className={classnames([ | ||
51 | classes.wrapper, | ||
52 | isWorkspaceDrawerOpen ? classes.wrapperWhenDrawerIsOpen : null, | ||
53 | ])} | ||
54 | > | ||
45 | <div className={classes.component}> | 55 | <div className={classes.component}> |
46 | <h1 className={classes.name}> | 56 | <h1 className={classes.name}> |
47 | {`Switching to ${nextWorkspaceName}`} | 57 | {`Switching to ${nextWorkspaceName}`} |