diff options
author | 2022-07-07 09:31:50 +0200 | |
---|---|---|
committer | 2022-07-07 09:31:50 +0200 | |
commit | 71c52373f81cace664047edd19d9d289f45a4dff (patch) | |
tree | 69b3f1d45a8b3f1ceab9497ea3c96e9dc18e3166 /src/features/workspaces/components/WorkspaceDrawer.js | |
parent | 6.0.0-nightly.91 [skip ci] (diff) | |
download | ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.tar.gz ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.tar.zst ferdium-app-71c52373f81cace664047edd19d9d289f45a4dff.zip |
chore: Mobx & React-Router upgrade (#406)
Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/features/workspaces/components/WorkspaceDrawer.js')
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.js | 186 |
1 files changed, 0 insertions, 186 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js deleted file mode 100644 index 3454fdbe9..000000000 --- a/src/features/workspaces/components/WorkspaceDrawer.js +++ /dev/null | |||
@@ -1,186 +0,0 @@ | |||
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 { | ||
16 | getUserWorkspacesRequest, | ||
17 | } from '../api'; | ||
18 | |||
19 | const messages = defineMessages({ | ||
20 | headline: { | ||
21 | id: 'workspaceDrawer.headline', | ||
22 | defaultMessage: 'Workspaces', | ||
23 | }, | ||
24 | allServices: { | ||
25 | id: 'workspaceDrawer.allServices', | ||
26 | defaultMessage: 'All services', | ||
27 | }, | ||
28 | workspacesSettingsTooltip: { | ||
29 | id: 'workspaceDrawer.workspacesSettingsTooltip', | ||
30 | defaultMessage: 'Edit workspaces settings', | ||
31 | }, | ||
32 | workspaceFeatureInfo: { | ||
33 | id: 'workspaceDrawer.workspaceFeatureInfo', | ||
34 | defaultMessage: | ||
35 | '<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>', | ||
36 | }, | ||
37 | addNewWorkspaceLabel: { | ||
38 | id: 'workspaceDrawer.addNewWorkspaceLabel', | ||
39 | defaultMessage: 'Add new workspace', | ||
40 | }, | ||
41 | }); | ||
42 | |||
43 | const styles = theme => ({ | ||
44 | drawer: { | ||
45 | background: theme.workspaces.drawer.background, | ||
46 | width: `${theme.workspaces.drawer.width}px`, | ||
47 | display: 'flex', | ||
48 | flexDirection: 'column', | ||
49 | }, | ||
50 | headline: { | ||
51 | fontSize: '24px', | ||
52 | marginTop: '38px', | ||
53 | marginBottom: '25px', | ||
54 | marginLeft: theme.workspaces.drawer.padding, | ||
55 | }, | ||
56 | workspacesSettingsButton: { | ||
57 | float: 'right', | ||
58 | marginRight: theme.workspaces.drawer.padding, | ||
59 | marginTop: '2px', | ||
60 | }, | ||
61 | workspacesSettingsButtonIcon: { | ||
62 | fill: theme.workspaces.drawer.buttons.color, | ||
63 | '&:hover': { | ||
64 | fill: theme.workspaces.drawer.buttons.hoverColor, | ||
65 | }, | ||
66 | }, | ||
67 | workspaces: { | ||
68 | height: 'auto', | ||
69 | overflowY: 'auto', | ||
70 | }, | ||
71 | addNewWorkspaceLabel: { | ||
72 | height: 'auto', | ||
73 | color: theme.workspaces.drawer.buttons.color, | ||
74 | margin: [40, 0], | ||
75 | textAlign: 'center', | ||
76 | '& > svg': { | ||
77 | fill: theme.workspaces.drawer.buttons.color, | ||
78 | }, | ||
79 | '& > span': { | ||
80 | fontSize: '13px', | ||
81 | marginLeft: 10, | ||
82 | position: 'relative', | ||
83 | top: -3, | ||
84 | }, | ||
85 | '&:hover': { | ||
86 | color: theme.workspaces.drawer.buttons.hoverColor, | ||
87 | '& > svg': { | ||
88 | fill: theme.workspaces.drawer.buttons.hoverColor, | ||
89 | }, | ||
90 | }, | ||
91 | }, | ||
92 | }); | ||
93 | |||
94 | class WorkspaceDrawer extends Component { | ||
95 | static propTypes = { | ||
96 | classes: PropTypes.object.isRequired, | ||
97 | getServicesForWorkspace: PropTypes.func.isRequired, | ||
98 | }; | ||
99 | |||
100 | componentDidMount() { | ||
101 | ReactTooltip.rebuild(); | ||
102 | try { | ||
103 | getUserWorkspacesRequest.execute(); | ||
104 | } catch (error) { | ||
105 | console.log(error); | ||
106 | } | ||
107 | } | ||
108 | |||
109 | render() { | ||
110 | const { classes, getServicesForWorkspace } = this.props; | ||
111 | const { intl } = this.props; | ||
112 | const { activeWorkspace, isSwitchingWorkspace, nextWorkspace, workspaces } = | ||
113 | workspaceStore; | ||
114 | const actualWorkspace = isSwitchingWorkspace | ||
115 | ? nextWorkspace | ||
116 | : activeWorkspace; | ||
117 | return ( | ||
118 | <div className={`${classes.drawer} workspaces-drawer`}> | ||
119 | <H1 className={classes.headline}> | ||
120 | {intl.formatMessage(messages.headline)} | ||
121 | <span | ||
122 | className={classes.workspacesSettingsButton} | ||
123 | onClick={() => { | ||
124 | workspaceActions.openWorkspaceSettings(); | ||
125 | }} | ||
126 | data-tip={`${intl.formatMessage( | ||
127 | messages.workspacesSettingsTooltip, | ||
128 | )}`} | ||
129 | > | ||
130 | <Icon | ||
131 | icon={mdiCog} | ||
132 | size={1.5} | ||
133 | className={classes.workspacesSettingsButtonIcon} | ||
134 | /> | ||
135 | </span> | ||
136 | </H1> | ||
137 | <div className={classes.workspaces}> | ||
138 | <WorkspaceDrawerItem | ||
139 | name={intl.formatMessage(messages.allServices)} | ||
140 | onClick={() => { | ||
141 | workspaceActions.deactivate(); | ||
142 | workspaceActions.toggleWorkspaceDrawer(); | ||
143 | }} | ||
144 | services={getServicesForWorkspace(null)} | ||
145 | isActive={actualWorkspace == null} | ||
146 | shortcutIndex={0} | ||
147 | /> | ||
148 | {workspaces.map((workspace, index) => ( | ||
149 | <WorkspaceDrawerItem | ||
150 | key={workspace.id} | ||
151 | name={workspace.name} | ||
152 | isActive={actualWorkspace === workspace} | ||
153 | onClick={() => { | ||
154 | if (actualWorkspace === workspace) return; | ||
155 | workspaceActions.activate({ workspace }); | ||
156 | workspaceActions.toggleWorkspaceDrawer(); | ||
157 | }} | ||
158 | onContextMenuEditClick={() => | ||
159 | workspaceActions.edit({ workspace }) | ||
160 | } | ||
161 | services={getServicesForWorkspace(workspace)} | ||
162 | shortcutIndex={index + 1} | ||
163 | /> | ||
164 | ))} | ||
165 | <div | ||
166 | className={classes.addNewWorkspaceLabel} | ||
167 | onClick={() => { | ||
168 | workspaceActions.openWorkspaceSettings(); | ||
169 | }} | ||
170 | > | ||
171 | <Icon | ||
172 | icon={mdiPlusBox} | ||
173 | className={classes.workspacesSettingsButtonIcon} | ||
174 | /> | ||
175 | <span>{intl.formatMessage(messages.addNewWorkspaceLabel)}</span> | ||
176 | </div> | ||
177 | </div> | ||
178 | <ReactTooltip place="right" type="dark" effect="solid" /> | ||
179 | </div> | ||
180 | ); | ||
181 | } | ||
182 | } | ||
183 | |||
184 | export default injectIntl( | ||
185 | injectSheet(styles, { injectTheme: true })(observer(WorkspaceDrawer)), | ||
186 | ); | ||