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 | |
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
6 files changed, 22 insertions, 11 deletions
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts index e6785ec5e..2290b18e3 100644 --- a/packages/theme/src/themes/default/index.ts +++ b/packages/theme/src/themes/default/index.ts | |||
@@ -142,7 +142,8 @@ export const badgeBorderRadius = 50; | |||
142 | export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string(); | 142 | export const colorModalOverlayBackground = color('#000').alpha(0.5).rgb().string(); |
143 | 143 | ||
144 | // Workspace Drawer | 144 | // Workspace Drawer |
145 | export const workspaceDrawerWidth = '220px'; | 145 | export const workspaceDrawerWidth = 300; |
146 | export const workspaceDrawerPadding = 20; | ||
146 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex(); | 147 | export const workspaceDrawerBackground = color(colorBackground).lighten(0.1).hex(); |
147 | export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight; | 148 | export const workspaceDrawerAddButtonColor = legacyStyles.themeGrayLight; |
148 | export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex(); | 149 | export const workspaceDrawerAddButtonHoverColor = color(legacyStyles.themeGrayLight).lighten(0.1).hex(); |
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js index 284a2523a..4e897e623 100644 --- a/src/components/layout/AppLayout.js +++ b/src/components/layout/AppLayout.js | |||
@@ -51,10 +51,10 @@ const messages = defineMessages({ | |||
51 | 51 | ||
52 | const styles = theme => ({ | 52 | const styles = theme => ({ |
53 | appContent: { | 53 | appContent: { |
54 | width: `calc(100% + ${theme.workspaceDrawerWidth})`, | 54 | width: `calc(100% + ${theme.workspaceDrawerWidth}px)`, |
55 | transition: 'transform 0.5s ease', | 55 | transition: 'transform 0.5s ease', |
56 | transform() { | 56 | transform() { |
57 | return workspacesState.isWorkspaceDrawerOpen ? 'translateX(0)' : 'translateX(-220px)'; | 57 | return workspacesState.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaceDrawerWidth}px)`; |
58 | }, | 58 | }, |
59 | }, | 59 | }, |
60 | }); | 60 | }); |
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, |