diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-03-21 15:55:38 +0100 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-03-21 15:55:38 +0100 |
commit | 1c5c54515fce5911b062474b41035f1f3dce1143 (patch) | |
tree | fdd544a142a6e25b3b1ef74b7cb864e947416385 /src/features/workspaces/components | |
parent | style add workspace icon in drawer like the sidebar icons (diff) | |
download | ferdium-app-1c5c54515fce5911b062474b41035f1f3dce1143.tar.gz ferdium-app-1c5c54515fce5911b062474b41035f1f3dce1143.tar.zst ferdium-app-1c5c54515fce5911b062474b41035f1f3dce1143.zip |
improve workspace drawer layout
Diffstat (limited to 'src/features/workspaces/components')
4 files changed, 18 insertions, 8 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js index 7bf3684c0..28e74b287 100644 --- a/src/features/workspaces/components/WorkspaceDrawer.js +++ b/src/features/workspaces/components/WorkspaceDrawer.js | |||
@@ -22,17 +22,17 @@ const messages = defineMessages({ | |||
22 | const styles = theme => ({ | 22 | const styles = theme => ({ |
23 | drawer: { | 23 | drawer: { |
24 | backgroundColor: theme.workspaceDrawerBackground, | 24 | backgroundColor: theme.workspaceDrawerBackground, |
25 | width: theme.workspaceDrawerWidth, | 25 | width: `${theme.workspaceDrawerWidth}px`, |
26 | }, | 26 | }, |
27 | headline: { | 27 | headline: { |
28 | fontSize: '24px', | 28 | fontSize: '24px', |
29 | marginTop: '38px', | 29 | marginTop: '38px', |
30 | marginBottom: '25px', | 30 | marginBottom: '25px', |
31 | marginLeft: '10px', | 31 | marginLeft: `${theme.workspaceDrawerPadding}px`, |
32 | }, | 32 | }, |
33 | addWorkspaceButton: { | 33 | addWorkspaceButton: { |
34 | float: 'right', | 34 | float: 'right', |
35 | marginRight: '10px', | 35 | marginRight: `${theme.workspaceDrawerPadding}px`, |
36 | marginTop: '2px', | 36 | marginTop: '2px', |
37 | }, | 37 | }, |
38 | addWorkspaceButtonIcon: { | 38 | addWorkspaceButtonIcon: { |
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js index 935508943..d2cdf1c0a 100644 --- a/src/features/workspaces/components/WorkspaceDrawerItem.js +++ b/src/features/workspaces/components/WorkspaceDrawerItem.js | |||
@@ -7,7 +7,7 @@ import classnames from 'classnames'; | |||
7 | const styles = theme => ({ | 7 | const styles = theme => ({ |
8 | item: { | 8 | item: { |
9 | height: '67px', | 9 | height: '67px', |
10 | padding: '15px 10px', | 10 | padding: `15px ${theme.workspaceDrawerPadding}px`, |
11 | borderBottom: `1px solid ${theme.workspaceDrawerItemBorder}`, | 11 | borderBottom: `1px solid ${theme.workspaceDrawerItemBorder}`, |
12 | '&:first-child': { | 12 | '&:first-child': { |
13 | borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`, | 13 | borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`, |
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}`} |
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js index df35b3590..17b3755d7 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.js | |||
@@ -43,7 +43,7 @@ class WorkspacesDashboard extends Component { | |||
43 | render() { | 43 | render() { |
44 | const { | 44 | const { |
45 | workspaces, | 45 | workspaces, |
46 | isLoading, | 46 | isLoadingWorkspaces, |
47 | onCreateWorkspaceSubmit, | 47 | onCreateWorkspaceSubmit, |
48 | onWorkspaceClick, | 48 | onWorkspaceClick, |
49 | classes, | 49 | classes, |