diff options
Diffstat (limited to 'src/features/workspaces/components/WorkspaceDrawer.jsx')
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.jsx | 184 |
1 files changed, 184 insertions, 0 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawer.jsx b/src/features/workspaces/components/WorkspaceDrawer.jsx new file mode 100644 index 000000000..b0b0e639a --- /dev/null +++ b/src/features/workspaces/components/WorkspaceDrawer.jsx | |||
@@ -0,0 +1,184 @@ | |||
1 | import { Component } from 'react'; | ||
2 | import PropTypes from 'prop-types'; | ||
3 | import { observer } from 'mobx-react'; | ||
4 | import injectSheet from 'react-jss'; | ||
5 | import { defineMessages, injectIntl } from 'react-intl'; | ||
6 | import ReactTooltip from 'react-tooltip'; | ||
7 | |||
8 | import { mdiPlusBox, mdiCog } from '@mdi/js'; | ||
9 | |||
10 | import { H1 } from '../../../components/ui/headline'; | ||
11 | import Icon from '../../../components/ui/icon'; | ||
12 | import WorkspaceDrawerItem from './WorkspaceDrawerItem'; | ||
13 | import workspaceActions from '../actions'; | ||
14 | import { workspaceStore } from '../index'; | ||
15 | import { getUserWorkspacesRequest } from '../api'; | ||
16 | |||
17 | const messages = defineMessages({ | ||
18 | headline: { | ||
19 | id: 'workspaceDrawer.headline', | ||
20 | defaultMessage: 'Workspaces', | ||
21 | }, | ||
22 | allServices: { | ||
23 | id: 'workspaceDrawer.allServices', | ||
24 | defaultMessage: 'All services', | ||
25 | }, | ||
26 | workspacesSettingsTooltip: { | ||
27 | id: 'workspaceDrawer.workspacesSettingsTooltip', | ||
28 | defaultMessage: 'Edit workspaces settings', | ||
29 | }, | ||
30 | workspaceFeatureInfo: { | ||
31 | id: 'workspaceDrawer.workspaceFeatureInfo', | ||
32 | defaultMessage: | ||
33 | '<p>Ferdium Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>', | ||
34 | }, | ||
35 | addNewWorkspaceLabel: { | ||
36 | id: 'workspaceDrawer.addNewWorkspaceLabel', | ||
37 | defaultMessage: 'Add new workspace', | ||
38 | }, | ||
39 | }); | ||
40 | |||
41 | const styles = theme => ({ | ||
42 | drawer: { | ||
43 | background: theme.workspaces.drawer.background, | ||
44 | width: `${theme.workspaces.drawer.width}px`, | ||
45 | display: 'flex', | ||
46 | flexDirection: 'column', | ||
47 | }, | ||
48 | headline: { | ||
49 | fontSize: '24px', | ||
50 | marginTop: '38px', | ||
51 | marginBottom: '25px', | ||
52 | marginLeft: theme.workspaces.drawer.padding, | ||
53 | }, | ||
54 | workspacesSettingsButton: { | ||
55 | float: 'right', | ||
56 | marginRight: theme.workspaces.drawer.padding, | ||
57 | marginTop: '2px', | ||
58 | }, | ||
59 | workspacesSettingsButtonIcon: { | ||
60 | fill: theme.workspaces.drawer.buttons.color, | ||
61 | '&:hover': { | ||
62 | fill: theme.workspaces.drawer.buttons.hoverColor, | ||
63 | }, | ||
64 | }, | ||
65 | workspaces: { | ||
66 | height: 'auto', | ||
67 | overflowY: 'auto', | ||
68 | }, | ||
69 | addNewWorkspaceLabel: { | ||
70 | height: 'auto', | ||
71 | color: theme.workspaces.drawer.buttons.color, | ||
72 | margin: [40, 0], | ||
73 | textAlign: 'center', | ||
74 | '& > svg': { | ||
75 | fill: theme.workspaces.drawer.buttons.color, | ||
76 | }, | ||
77 | '& > span': { | ||
78 | fontSize: '13px', | ||
79 | marginLeft: 10, | ||
80 | position: 'relative', | ||
81 | top: -3, | ||
82 | }, | ||
83 | '&:hover': { | ||
84 | color: theme.workspaces.drawer.buttons.hoverColor, | ||
85 | '& > svg': { | ||
86 | fill: theme.workspaces.drawer.buttons.hoverColor, | ||
87 | }, | ||
88 | }, | ||
89 | }, | ||
90 | }); | ||
91 | |||
92 | class WorkspaceDrawer extends Component { | ||
93 | static propTypes = { | ||
94 | classes: PropTypes.object.isRequired, | ||
95 | getServicesForWorkspace: PropTypes.func.isRequired, | ||
96 | }; | ||
97 | |||
98 | componentDidMount() { | ||
99 | ReactTooltip.rebuild(); | ||
100 | try { | ||
101 | getUserWorkspacesRequest.execute(); | ||
102 | } catch (error) { | ||
103 | console.log(error); | ||
104 | } | ||
105 | } | ||
106 | |||
107 | render() { | ||
108 | const { classes, getServicesForWorkspace } = this.props; | ||
109 | const { intl } = this.props; | ||
110 | const { activeWorkspace, isSwitchingWorkspace, nextWorkspace, workspaces } = | ||
111 | workspaceStore; | ||
112 | const actualWorkspace = isSwitchingWorkspace | ||
113 | ? nextWorkspace | ||
114 | : activeWorkspace; | ||
115 | return ( | ||
116 | <div className={`${classes.drawer} workspaces-drawer`}> | ||
117 | <H1 className={classes.headline}> | ||
118 | {intl.formatMessage(messages.headline)} | ||
119 | <span | ||
120 | className={classes.workspacesSettingsButton} | ||
121 | onClick={() => { | ||
122 | workspaceActions.openWorkspaceSettings(); | ||
123 | }} | ||
124 | data-tip={`${intl.formatMessage( | ||
125 | messages.workspacesSettingsTooltip, | ||
126 | )}`} | ||
127 | > | ||
128 | <Icon | ||
129 | icon={mdiCog} | ||
130 | size={1.5} | ||
131 | className={classes.workspacesSettingsButtonIcon} | ||
132 | /> | ||
133 | </span> | ||
134 | </H1> | ||
135 | <div className={classes.workspaces}> | ||
136 | <WorkspaceDrawerItem | ||
137 | name={intl.formatMessage(messages.allServices)} | ||
138 | onClick={() => { | ||
139 | workspaceActions.deactivate(); | ||
140 | workspaceActions.toggleWorkspaceDrawer(); | ||
141 | }} | ||
142 | services={getServicesForWorkspace(null)} | ||
143 | isActive={actualWorkspace == null} | ||
144 | shortcutIndex={0} | ||
145 | /> | ||
146 | {workspaces.map((workspace, index) => ( | ||
147 | <WorkspaceDrawerItem | ||
148 | key={workspace.id} | ||
149 | name={workspace.name} | ||
150 | isActive={actualWorkspace === workspace} | ||
151 | onClick={() => { | ||
152 | if (actualWorkspace === workspace) return; | ||
153 | workspaceActions.activate({ workspace }); | ||
154 | workspaceActions.toggleWorkspaceDrawer(); | ||
155 | }} | ||
156 | onContextMenuEditClick={() => | ||
157 | workspaceActions.edit({ workspace }) | ||
158 | } | ||
159 | services={getServicesForWorkspace(workspace)} | ||
160 | shortcutIndex={index + 1} | ||
161 | /> | ||
162 | ))} | ||
163 | <div | ||
164 | className={classes.addNewWorkspaceLabel} | ||
165 | onClick={() => { | ||
166 | workspaceActions.openWorkspaceSettings(); | ||
167 | }} | ||
168 | > | ||
169 | <Icon | ||
170 | icon={mdiPlusBox} | ||
171 | className={classes.workspacesSettingsButtonIcon} | ||
172 | /> | ||
173 | <span>{intl.formatMessage(messages.addNewWorkspaceLabel)}</span> | ||
174 | </div> | ||
175 | </div> | ||
176 | <ReactTooltip place="right" type="dark" effect="solid" /> | ||
177 | </div> | ||
178 | ); | ||
179 | } | ||
180 | } | ||
181 | |||
182 | export default injectIntl( | ||
183 | injectSheet(styles, { injectTheme: true })(observer(WorkspaceDrawer)), | ||
184 | ); | ||