1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import injectSheet from 'react-jss';
import { defineMessages, intlShape } from 'react-intl';
import { H1, Icon } from '@meetfranz/ui';
import ReactTooltip from 'react-tooltip';
import { workspacesState } from '../state';
import WorkspaceDrawerItem from './WorkspaceDrawerItem';
import { workspaceActions } from '../actions';
const messages = defineMessages({
headline: {
id: 'workspaceDrawer.headline',
defaultMessage: '!!!Workspaces',
},
allServices: {
id: 'workspaceDrawer.allServices',
defaultMessage: '!!!All services',
},
addWorkspaceTooltip: {
id: 'workspaceDrawer.addWorkspaceTooltip',
defaultMessage: '!!!Add workspace',
},
});
const styles = theme => ({
drawer: {
backgroundColor: theme.workspaceDrawerBackground,
width: `${theme.workspaceDrawerWidth}px`,
},
headline: {
fontSize: '24px',
marginTop: '38px',
marginBottom: '25px',
marginLeft: `${theme.workspaceDrawerPadding}px`,
},
addWorkspaceButton: {
float: 'right',
marginRight: `${theme.workspaceDrawerPadding}px`,
marginTop: '2px',
},
addWorkspaceButtonIcon: {
fill: theme.workspaceDrawerAddButtonColor,
'&:hover': {
fill: theme.workspaceDrawerAddButtonHoverColor,
},
},
});
@injectSheet(styles) @observer
class WorkspaceDrawer extends Component {
static propTypes = {
classes: PropTypes.object.isRequired,
getServicesForWorkspace: PropTypes.func.isRequired,
};
static contextTypes = {
intl: intlShape,
};
componentDidMount() {
ReactTooltip.rebuild();
}
render() {
const {
classes,
getServicesForWorkspace,
} = this.props;
const { intl } = this.context;
const { activeWorkspace, isSwitchingWorkspace, nextWorkspace } = workspacesState;
const actualWorkspace = isSwitchingWorkspace ? nextWorkspace : activeWorkspace;
return (
<div className={classes.drawer}>
<H1 className={classes.headline}>
{intl.formatMessage(messages.headline)}
<span
className={classes.addWorkspaceButton}
onClick={workspaceActions.openWorkspaceSettings}
data-tip={`${intl.formatMessage(messages.addWorkspaceTooltip)}`}
>
<Icon
icon="mdiPlusBox"
size={1.5}
className={classes.addWorkspaceButtonIcon}
/>
</span>
</H1>
<div className={classes.workspaces}>
<WorkspaceDrawerItem
name={intl.formatMessage(messages.allServices)}
onClick={() => workspaceActions.deactivate()}
services={getServicesForWorkspace(null)}
isActive={actualWorkspace == null}
/>
{workspacesState.workspaces.map(workspace => (
<WorkspaceDrawerItem
key={workspace.id}
name={workspace.name}
isActive={actualWorkspace === workspace}
onClick={() => workspaceActions.activate({ workspace })}
services={getServicesForWorkspace(workspace)}
/>
))}
</div>
<ReactTooltip place="right" type="dark" effect="solid" />
</div>
);
}
}
export default WorkspaceDrawer;
|
