diff options
author | Dominik Guzei <dominik.guzei@gmail.com> | 2019-03-19 19:38:56 +0100 |
---|---|---|
committer | Dominik Guzei <dominik.guzei@gmail.com> | 2019-03-19 19:40:08 +0100 |
commit | e4f1862644d5921e2ee77078c10e16efa3e58c7b (patch) | |
tree | ff7f23eb83ee974a9f719ed6f58647ce7f0a1175 /src/features | |
parent | fix conflicts with latest develop (diff) | |
download | ferdium-app-e4f1862644d5921e2ee77078c10e16efa3e58c7b.tar.gz ferdium-app-e4f1862644d5921e2ee77078c10e16efa3e58c7b.tar.zst ferdium-app-e4f1862644d5921e2ee77078c10e16efa3e58c7b.zip |
add workspace drawer
Diffstat (limited to 'src/features')
-rw-r--r-- | src/features/workspaces/actions.js | 6 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.js | 94 | ||||
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawerItem.js | 88 | ||||
-rw-r--r-- | src/features/workspaces/state.js | 1 | ||||
-rw-r--r-- | src/features/workspaces/store.js | 12 |
5 files changed, 199 insertions, 2 deletions
diff --git a/src/features/workspaces/actions.js b/src/features/workspaces/actions.js index 25246de09..a85f8f57f 100644 --- a/src/features/workspaces/actions.js +++ b/src/features/workspaces/actions.js | |||
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; | |||
2 | import Workspace from './models/Workspace'; | 2 | import Workspace from './models/Workspace'; |
3 | import { createActionsFromDefinitions } from '../../actions/lib/actions'; | 3 | import { createActionsFromDefinitions } from '../../actions/lib/actions'; |
4 | 4 | ||
5 | export default createActionsFromDefinitions({ | 5 | export const workspaceActions = createActionsFromDefinitions({ |
6 | edit: { | 6 | edit: { |
7 | workspace: PropTypes.instanceOf(Workspace).isRequired, | 7 | workspace: PropTypes.instanceOf(Workspace).isRequired, |
8 | }, | 8 | }, |
@@ -19,4 +19,8 @@ export default createActionsFromDefinitions({ | |||
19 | workspace: PropTypes.instanceOf(Workspace).isRequired, | 19 | workspace: PropTypes.instanceOf(Workspace).isRequired, |
20 | }, | 20 | }, |
21 | deactivate: {}, | 21 | deactivate: {}, |
22 | toggleWorkspaceDrawer: {}, | ||
23 | openWorkspaceSettings: {}, | ||
22 | }, PropTypes.checkPropTypes); | 24 | }, PropTypes.checkPropTypes); |
25 | |||
26 | export default workspaceActions; | ||
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js new file mode 100644 index 000000000..27bf08361 --- /dev/null +++ b/src/features/workspaces/components/WorkspaceDrawer.js | |||
@@ -0,0 +1,94 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import { defineMessages, intlShape } from 'react-intl'; | ||
6 | import { H1, Icon } from '@meetfranz/ui'; | ||
7 | import { workspacesState } from '../state'; | ||
8 | import WorkspaceDrawerItem from './WorkspaceDrawerItem'; | ||
9 | import { workspaceActions } from '../actions'; | ||
10 | |||
11 | const messages = defineMessages({ | ||
12 | headline: { | ||
13 | id: 'workspaceDrawer.headline', | ||
14 | defaultMessage: '!!!Workspaces', | ||
15 | }, | ||
16 | allServices: { | ||
17 | id: 'workspaceDrawer.allServices', | ||
18 | defaultMessage: '!!!All services', | ||
19 | }, | ||
20 | }); | ||
21 | |||
22 | const styles = theme => ({ | ||
23 | drawer: { | ||
24 | backgroundColor: theme.workspaceDrawerBackground, | ||
25 | width: theme.workspaceDrawerWidth, | ||
26 | }, | ||
27 | headline: { | ||
28 | fontSize: '24px', | ||
29 | marginTop: '38px', | ||
30 | marginBottom: '25px', | ||
31 | marginLeft: '10px', | ||
32 | }, | ||
33 | addWorkspaceButton: { | ||
34 | float: 'right', | ||
35 | marginRight: '10px', | ||
36 | marginTop: '2px', | ||
37 | }, | ||
38 | }); | ||
39 | |||
40 | @injectSheet(styles) @observer | ||
41 | class WorkspaceDrawer extends Component { | ||
42 | static propTypes = { | ||
43 | classes: PropTypes.object.isRequired, | ||
44 | getServicesForWorkspace: PropTypes.func.isRequired, | ||
45 | }; | ||
46 | |||
47 | static contextTypes = { | ||
48 | intl: intlShape, | ||
49 | }; | ||
50 | |||
51 | render() { | ||
52 | const { | ||
53 | classes, | ||
54 | getServicesForWorkspace, | ||
55 | } = this.props; | ||
56 | const { intl } = this.context; | ||
57 | |||
58 | return ( | ||
59 | <div className={classes.drawer}> | ||
60 | <H1 className={classes.headline}> | ||
61 | {intl.formatMessage(messages.headline)} | ||
62 | <span | ||
63 | className={classes.addWorkspaceButton} | ||
64 | onClick={workspaceActions.openWorkspaceSettings} | ||
65 | > | ||
66 | <Icon | ||
67 | icon="mdiPlusBox" | ||
68 | size={1.5} | ||
69 | /> | ||
70 | </span> | ||
71 | </H1> | ||
72 | <div className={classes.workspaces}> | ||
73 | <WorkspaceDrawerItem | ||
74 | name={intl.formatMessage(messages.allServices)} | ||
75 | onClick={() => workspaceActions.deactivate()} | ||
76 | services={getServicesForWorkspace(null)} | ||
77 | isActive={workspacesState.activeWorkspace == null} | ||
78 | /> | ||
79 | {workspacesState.workspaces.map(workspace => ( | ||
80 | <WorkspaceDrawerItem | ||
81 | key={workspace.id} | ||
82 | name={workspace.name} | ||
83 | isActive={workspacesState.activeWorkspace === workspace} | ||
84 | onClick={() => workspaceActions.activate({ workspace })} | ||
85 | services={getServicesForWorkspace(workspace)} | ||
86 | /> | ||
87 | ))} | ||
88 | </div> | ||
89 | </div> | ||
90 | ); | ||
91 | } | ||
92 | } | ||
93 | |||
94 | export default WorkspaceDrawer; | ||
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js new file mode 100644 index 000000000..00207d323 --- /dev/null +++ b/src/features/workspaces/components/WorkspaceDrawerItem.js | |||
@@ -0,0 +1,88 @@ | |||
1 | import React, { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import classnames from 'classnames'; | ||
6 | |||
7 | const styles = theme => ({ | ||
8 | item: { | ||
9 | height: '67px', | ||
10 | padding: '15px 10px', | ||
11 | borderBottom: `1px solid ${theme.workspaceDrawerItemBorder}`, | ||
12 | '&:first-child': { | ||
13 | borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`, | ||
14 | }, | ||
15 | }, | ||
16 | isActiveItem: { | ||
17 | backgroundColor: theme.workspaceDrawerItemActiveBackground, | ||
18 | }, | ||
19 | name: { | ||
20 | marginTop: '4px', | ||
21 | color: theme.workspaceDrawerNameColor, | ||
22 | }, | ||
23 | activeName: { | ||
24 | color: theme.workspaceDrawerNameActiveColor, | ||
25 | }, | ||
26 | services: { | ||
27 | display: 'block', | ||
28 | fontSize: '11px', | ||
29 | marginTop: '5px', | ||
30 | color: theme.workspaceDrawerServicesColor, | ||
31 | whiteSpace: 'nowrap', | ||
32 | textOverflow: 'ellipsis', | ||
33 | overflow: 'hidden', | ||
34 | lineHeight: '15px', | ||
35 | }, | ||
36 | activeServices: { | ||
37 | color: theme.workspaceDrawerServicesActiveColor, | ||
38 | }, | ||
39 | }); | ||
40 | |||
41 | @injectSheet(styles) @observer | ||
42 | class WorkspaceDrawerItem extends Component { | ||
43 | static propTypes = { | ||
44 | classes: PropTypes.object.isRequired, | ||
45 | isActive: PropTypes.bool.isRequired, | ||
46 | name: PropTypes.string.isRequired, | ||
47 | onClick: PropTypes.func.isRequired, | ||
48 | services: PropTypes.arrayOf(PropTypes.string).isRequired, | ||
49 | }; | ||
50 | |||
51 | render() { | ||
52 | const { | ||
53 | classes, | ||
54 | isActive, | ||
55 | name, | ||
56 | onClick, | ||
57 | services, | ||
58 | } = this.props; | ||
59 | return ( | ||
60 | <div | ||
61 | className={classnames([ | ||
62 | classes.item, | ||
63 | isActive ? classes.isActiveItem : null, | ||
64 | ])} | ||
65 | onClick={onClick} | ||
66 | > | ||
67 | <span | ||
68 | className={classnames([ | ||
69 | classes.name, | ||
70 | isActive ? classes.activeName : null, | ||
71 | ])} | ||
72 | > | ||
73 | {name} | ||
74 | </span> | ||
75 | <span | ||
76 | className={classnames([ | ||
77 | classes.services, | ||
78 | isActive ? classes.activeServices : null, | ||
79 | ])} | ||
80 | > | ||
81 | {services.join(', ')} | ||
82 | </span> | ||
83 | </div> | ||
84 | ); | ||
85 | } | ||
86 | } | ||
87 | |||
88 | export default WorkspaceDrawerItem; | ||
diff --git a/src/features/workspaces/state.js b/src/features/workspaces/state.js index 963b96f81..68a7d8d91 100644 --- a/src/features/workspaces/state.js +++ b/src/features/workspaces/state.js | |||
@@ -4,6 +4,7 @@ const defaultState = { | |||
4 | activeWorkspace: null, | 4 | activeWorkspace: null, |
5 | isLoading: false, | 5 | isLoading: false, |
6 | isFeatureActive: false, | 6 | isFeatureActive: false, |
7 | isWorkspaceDrawerOpen: false, | ||
7 | workspaces: [], | 8 | workspaces: [], |
8 | workspaceBeingEdited: null, | 9 | workspaceBeingEdited: null, |
9 | }; | 10 | }; |
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js index a2997a0d2..1b57ba2da 100644 --- a/src/features/workspaces/store.js +++ b/src/features/workspaces/store.js | |||
@@ -3,7 +3,7 @@ import Store from '../../stores/lib/Store'; | |||
3 | import CachedRequest from '../../stores/lib/CachedRequest'; | 3 | import CachedRequest from '../../stores/lib/CachedRequest'; |
4 | import Workspace from './models/Workspace'; | 4 | import Workspace from './models/Workspace'; |
5 | import { matchRoute } from '../../helpers/routing-helpers'; | 5 | import { matchRoute } from '../../helpers/routing-helpers'; |
6 | import workspaceActions from './actions'; | 6 | import { workspaceActions } from './actions'; |
7 | 7 | ||
8 | const debug = require('debug')('Franz:feature:workspaces'); | 8 | const debug = require('debug')('Franz:feature:workspaces'); |
9 | 9 | ||
@@ -55,6 +55,8 @@ export default class WorkspacesStore extends Store { | |||
55 | workspaceActions.update.listen(this._update); | 55 | workspaceActions.update.listen(this._update); |
56 | workspaceActions.activate.listen(this._setActiveWorkspace); | 56 | workspaceActions.activate.listen(this._setActiveWorkspace); |
57 | workspaceActions.deactivate.listen(this._deactivateActiveWorkspace); | 57 | workspaceActions.deactivate.listen(this._deactivateActiveWorkspace); |
58 | workspaceActions.toggleWorkspaceDrawer.listen(this._toggleWorkspaceDrawer); | ||
59 | workspaceActions.openWorkspaceSettings.listen(this._openWorkspaceSettings); | ||
58 | } | 60 | } |
59 | 61 | ||
60 | _getWorkspaceById = id => this.state.workspaces.find(w => w.id === id); | 62 | _getWorkspaceById = id => this.state.workspaces.find(w => w.id === id); |
@@ -111,4 +113,12 @@ export default class WorkspacesStore extends Store { | |||
111 | @action _deactivateActiveWorkspace = () => { | 113 | @action _deactivateActiveWorkspace = () => { |
112 | this.state.activeWorkspace = null; | 114 | this.state.activeWorkspace = null; |
113 | }; | 115 | }; |
116 | |||
117 | @action _toggleWorkspaceDrawer = () => { | ||
118 | this.state.isWorkspaceDrawerOpen = !this.state.isWorkspaceDrawerOpen; | ||
119 | }; | ||
120 | |||
121 | @action _openWorkspaceSettings = () => { | ||
122 | this.actions.ui.openSettings({ path: 'workspaces' }); | ||
123 | }; | ||
114 | } | 124 | } |