diff options
author | 2022-11-16 23:30:39 +0530 | |
---|---|---|
committer | 2022-11-16 18:00:39 +0000 | |
commit | eb7b2481f631cec5953265eef4ebc3f2fa7e496a (patch) | |
tree | 419d4413f90ece77c0a2204b40948f1a158793d5 /src/features/workspaces/components/WorkspaceDrawer.tsx | |
parent | 6.2.1-nightly.44 [skip ci] (diff) | |
download | ferdium-app-eb7b2481f631cec5953265eef4ebc3f2fa7e496a.tar.gz ferdium-app-eb7b2481f631cec5953265eef4ebc3f2fa7e496a.tar.zst ferdium-app-eb7b2481f631cec5953265eef4ebc3f2fa7e496a.zip |
Transform JSX components to TSX (#755)
* color picker types
* Import
* SetupAssistant
* Services & appear
* ServiceWebView
* SettingsLayout
* ImportantScreen
* WorkspaceDrawer
* SetupAssistant
* chore: update vscode settings
* chore: removed stale Import screen component & its tree
Diffstat (limited to 'src/features/workspaces/components/WorkspaceDrawer.tsx')
-rw-r--r-- | src/features/workspaces/components/WorkspaceDrawer.tsx | 186 |
1 files changed, 186 insertions, 0 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawer.tsx b/src/features/workspaces/components/WorkspaceDrawer.tsx new file mode 100644 index 000000000..bdbebdb0a --- /dev/null +++ b/src/features/workspaces/components/WorkspaceDrawer.tsx | |||
@@ -0,0 +1,186 @@ | |||
1 | import { Component, ReactElement } from 'react'; | ||
2 | import { observer } from 'mobx-react'; | ||
3 | import withStyles, { WithStylesProps } from 'react-jss'; | ||
4 | import { defineMessages, injectIntl, WrappedComponentProps } from 'react-intl'; | ||
5 | import ReactTooltip from 'react-tooltip'; | ||
6 | import { mdiPlusBox, mdiCog } from '@mdi/js'; | ||
7 | import { noop } from 'lodash'; | ||
8 | import { H1 } from '../../../components/ui/headline'; | ||
9 | import Icon from '../../../components/ui/icon'; | ||
10 | import WorkspaceDrawerItem from './WorkspaceDrawerItem'; | ||
11 | import workspaceActions from '../actions'; | ||
12 | import { workspaceStore } from '../index'; | ||
13 | import { getUserWorkspacesRequest } from '../api'; | ||
14 | import Service from '../../../models/Service'; | ||
15 | import Workspace from '../models/Workspace'; | ||
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 | interface IProps extends WithStylesProps<typeof styles>, WrappedComponentProps { | ||
93 | getServicesForWorkspace: (workspace: Workspace | null) => Service[]; | ||
94 | } | ||
95 | |||
96 | @observer | ||
97 | class WorkspaceDrawer extends Component<IProps> { | ||
98 | componentDidMount(): void { | ||
99 | try { | ||
100 | ReactTooltip.rebuild(); | ||
101 | getUserWorkspacesRequest.execute(); | ||
102 | } catch (error) { | ||
103 | console.log(error); | ||
104 | } | ||
105 | } | ||
106 | |||
107 | render(): ReactElement { | ||
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 | onKeyDown={noop} | ||
122 | onClick={() => { | ||
123 | workspaceActions.openWorkspaceSettings(); | ||
124 | }} | ||
125 | data-tip={`${intl.formatMessage( | ||
126 | messages.workspacesSettingsTooltip, | ||
127 | )}`} | ||
128 | > | ||
129 | <Icon | ||
130 | icon={mdiCog} | ||
131 | size={1.5} | ||
132 | className={classes.workspacesSettingsButtonIcon} | ||
133 | /> | ||
134 | </span> | ||
135 | </H1> | ||
136 | <div className={classes.workspaces}> | ||
137 | <WorkspaceDrawerItem | ||
138 | name={intl.formatMessage(messages.allServices)} | ||
139 | onClick={() => { | ||
140 | workspaceActions.deactivate(); | ||
141 | workspaceActions.toggleWorkspaceDrawer(); | ||
142 | }} | ||
143 | services={getServicesForWorkspace(null)} | ||
144 | isActive={actualWorkspace == null} | ||
145 | shortcutIndex={0} | ||
146 | /> | ||
147 | {workspaces.map((workspace, index) => ( | ||
148 | <WorkspaceDrawerItem | ||
149 | key={workspace.id} | ||
150 | name={workspace.name} | ||
151 | isActive={actualWorkspace === workspace} | ||
152 | onClick={() => { | ||
153 | if (actualWorkspace === workspace) return; | ||
154 | workspaceActions.activate({ workspace }); | ||
155 | workspaceActions.toggleWorkspaceDrawer(); | ||
156 | }} | ||
157 | onContextMenuEditClick={() => | ||
158 | workspaceActions.edit({ workspace }) | ||
159 | } | ||
160 | services={getServicesForWorkspace(workspace)} | ||
161 | shortcutIndex={index + 1} | ||
162 | /> | ||
163 | ))} | ||
164 | <div | ||
165 | className={classes.addNewWorkspaceLabel} | ||
166 | onClick={() => { | ||
167 | workspaceActions.openWorkspaceSettings(); | ||
168 | }} | ||
169 | onKeyDown={noop} | ||
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 | withStyles(styles, { injectTheme: true })(WorkspaceDrawer), | ||
186 | ); | ||