aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/layout/Sidebar.js
diff options
context:
space:
mode:
authorLibravatar Ricardo Cino <ricardo@cino.io>2022-06-27 00:02:24 +0200
committerLibravatar GitHub <noreply@github.com>2022-06-26 22:02:24 +0000
commit43acb4145e0d19ec9a28a59583510499af624fb7 (patch)
treeb6e0a17424b936f9478c41785c2cdee208d50d26 /src/components/layout/Sidebar.js
parentchore: turned all auth containers into typescript (#375) (diff)
downloadferdium-app-43acb4145e0d19ec9a28a59583510499af624fb7.tar.gz
ferdium-app-43acb4145e0d19ec9a28a59583510499af624fb7.tar.zst
ferdium-app-43acb4145e0d19ec9a28a59583510499af624fb7.zip
feat: remember collapsed state of hamburger menu on refresh/reboot (#373)
Diffstat (limited to 'src/components/layout/Sidebar.js')
-rw-r--r--src/components/layout/Sidebar.js331
1 files changed, 0 insertions, 331 deletions
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
deleted file mode 100644
index 1d3c81dcd..000000000
--- a/src/components/layout/Sidebar.js
+++ /dev/null
@@ -1,331 +0,0 @@
1import { Component } from 'react';
2import PropTypes from 'prop-types';
3import ReactTooltip from 'react-tooltip';
4import { defineMessages, injectIntl } from 'react-intl';
5import { inject, observer } from 'mobx-react';
6import {
7 mdiCheckAll,
8 mdiViewGrid,
9 mdiPlusBox,
10 mdiCog,
11 mdiBellOff,
12 mdiBell,
13 mdiLock,
14 mdiMenu,
15 mdiChevronDown,
16 mdiChevronRight,
17 mdiViewSplitVertical,
18} from '@mdi/js';
19
20import Tabbar from '../services/tabs/Tabbar';
21import {
22 settingsShortcutKey,
23 lockFerdiumShortcutKey,
24 todosToggleShortcutKey,
25 workspaceToggleShortcutKey,
26 addNewServiceShortcutKey,
27 splitModeToggleShortcutKey,
28 muteFerdiumShortcutKey,
29} from '../../environment';
30import { todosStore } from '../../features/todos';
31import { todoActions } from '../../features/todos/actions';
32import AppStore from '../../stores/AppStore';
33import SettingsStore from '../../stores/SettingsStore';
34import globalMessages from '../../i18n/globalMessages';
35import { Icon } from '../ui/icon';
36
37const messages = defineMessages({
38 addNewService: {
39 id: 'sidebar.addNewService',
40 defaultMessage: 'Add new service',
41 },
42 splitModeToggle: {
43 id: 'sidebar.splitModeToggle',
44 defaultMessage: 'Split Mode Toggle',
45 },
46 mute: {
47 id: 'sidebar.muteApp',
48 defaultMessage: 'Disable notifications & audio',
49 },
50 unmute: {
51 id: 'sidebar.unmuteApp',
52 defaultMessage: 'Enable notifications & audio',
53 },
54 openWorkspaceDrawer: {
55 id: 'sidebar.openWorkspaceDrawer',
56 defaultMessage: 'Open workspace drawer',
57 },
58 closeWorkspaceDrawer: {
59 id: 'sidebar.closeWorkspaceDrawer',
60 defaultMessage: 'Close workspace drawer',
61 },
62 openTodosDrawer: {
63 id: 'sidebar.openTodosDrawer',
64 defaultMessage: 'Open Ferdium Todos',
65 },
66 closeTodosDrawer: {
67 id: 'sidebar.closeTodosDrawer',
68 defaultMessage: 'Close Ferdium Todos',
69 },
70 lockFerdium: {
71 id: 'sidebar.lockFerdium',
72 defaultMessage: 'Lock Ferdium',
73 },
74});
75
76class Sidebar extends Component {
77 static propTypes = {
78 openSettings: PropTypes.func.isRequired,
79 closeSettings: PropTypes.func.isRequired,
80 setActive: PropTypes.func.isRequired,
81 reorder: PropTypes.func.isRequired,
82 reload: PropTypes.func.isRequired,
83 toggleNotifications: PropTypes.func.isRequired,
84 toggleAudio: PropTypes.func.isRequired,
85 toggleDarkMode: PropTypes.func.isRequired,
86 showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
87 showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
88 showServiceNameSetting: PropTypes.bool.isRequired,
89 showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
90 deleteService: PropTypes.func.isRequired,
91 updateService: PropTypes.func.isRequired,
92 hibernateService: PropTypes.func.isRequired,
93 wakeUpService: PropTypes.func.isRequired,
94 toggleMuteApp: PropTypes.func.isRequired,
95 isAppMuted: PropTypes.bool.isRequired,
96 isWorkspaceDrawerOpen: PropTypes.bool.isRequired,
97 toggleWorkspaceDrawer: PropTypes.func.isRequired,
98 isTodosServiceActive: PropTypes.bool.isRequired,
99 stores: PropTypes.shape({
100 app: PropTypes.instanceOf(AppStore).isRequired,
101 settings: PropTypes.instanceOf(SettingsStore).isRequired,
102 }).isRequired,
103 actions: PropTypes.shape({
104 settings: PropTypes.instanceOf(SettingsStore).isRequired,
105 }).isRequired,
106 };
107
108 state = {
109 tooltipEnabled: true,
110 isCollapsed: false
111 };
112
113 componentDidUpdate() {
114 ReactTooltip.rebuild();
115 }
116
117 enableToolTip() {
118 this.setState({ tooltipEnabled: true });
119 }
120
121 disableToolTip() {
122 this.setState({ tooltipEnabled: false });
123 }
124
125 collapseMenu() {
126 this.setState((prevState) => ({ isCollapsed: !prevState.isCollapsed }));
127 }
128
129 updateToolTip() {
130 this.disableToolTip();
131 setTimeout(this.enableToolTip.bind(this));
132 }
133
134 render() {
135 const {
136 openSettings,
137 toggleMuteApp,
138 isAppMuted,
139 isWorkspaceDrawerOpen,
140 toggleWorkspaceDrawer,
141 stores,
142 actions,
143 isTodosServiceActive,
144 } = this.props;
145 const {
146 hideCollapseButton,
147 hideRecipesButton,
148 hideWorkspacesButton,
149 hideNotificationsButton,
150 hideSettingsButton,
151 hideSplitModeButton,
152 useVerticalStyle,
153 splitMode,
154 } = stores.settings.app;
155 const { intl } = this.props;
156 const todosToggleMessage = todosStore.isTodosPanelVisible
157 ? messages.closeTodosDrawer
158 : messages.openTodosDrawer;
159
160 const workspaceToggleMessage = isWorkspaceDrawerOpen
161 ? messages.closeWorkspaceDrawer
162 : messages.openWorkspaceDrawer;
163
164 const numberActiveButtons = [
165 !hideRecipesButton,
166 !hideWorkspacesButton,
167 !hideNotificationsButton,
168 !hideSettingsButton,
169 !hideSplitModeButton,
170 todosStore.isFeatureEnabledByUser
171 ].filter(Boolean).length;
172
173 return (
174 <div className="sidebar">
175 <Tabbar
176 {...this.props}
177 enableToolTip={() => this.enableToolTip()}
178 disableToolTip={() => this.disableToolTip()}
179 useVerticalStyle={stores.settings.all.app.useVerticalStyle}
180 />
181 <>
182 {numberActiveButtons <= 1 || hideCollapseButton ? (
183 null
184 ) :
185 <button
186 type="button"
187 onClick={() => this.collapseMenu()}
188 className="sidebar__button sidebar__button--hamburger-menu"
189 >
190 {this.state.isCollapsed ?
191 <Icon icon={mdiMenu} size={1.5} />
192 :
193 (useVerticalStyle) ?
194 <Icon icon={mdiChevronRight} size={1.5} />
195 :
196 <Icon icon={mdiChevronDown} size={1.5} />
197 }
198 </button>
199 }
200 {!hideRecipesButton && !this.state.isCollapsed ? (
201 <button
202 type="button"
203 onClick={() => openSettings({ path: 'recipes' })}
204 className="sidebar__button sidebar__button--new-service"
205 data-tip={`${intl.formatMessage(
206 messages.addNewService,
207 )} (${addNewServiceShortcutKey(false)})`}
208 >
209 <Icon icon={mdiPlusBox} size={1.5} />
210 </button>
211 ) : null}
212 {!hideSplitModeButton && !this.state.isCollapsed ? (
213 <button
214 type="button"
215 onClick={() => {
216 actions.settings.update({
217 type: 'app',
218 data: {
219 splitMode: !splitMode,
220 },
221 });
222 }}
223 className="sidebar__button sidebar__button--split-mode-toggle"
224 data-tip={`${intl.formatMessage(
225 messages.splitModeToggle,
226 )} (${splitModeToggleShortcutKey(false)})`}
227 >
228 <Icon icon={mdiViewSplitVertical} size={1.5} />
229 </button>
230 ) : null}
231 {!hideWorkspacesButton && !this.state.isCollapsed ? (
232 <button
233 type="button"
234 onClick={() => {
235 toggleWorkspaceDrawer();
236 this.updateToolTip();
237 }}
238 className={`sidebar__button sidebar__button--workspaces ${
239 isWorkspaceDrawerOpen ? 'is-active' : ''
240 }`}
241 data-tip={`${intl.formatMessage(
242 workspaceToggleMessage,
243 )} (${workspaceToggleShortcutKey(false)})`}
244 >
245 <Icon icon={mdiViewGrid} size={1.5} />
246 </button>
247 ) : null}
248 {!hideNotificationsButton && !this.state.isCollapsed ? (
249 <button
250 type="button"
251 onClick={() => {
252 toggleMuteApp();
253 this.updateToolTip();
254 }}
255 className={`sidebar__button sidebar__button--audio ${
256 isAppMuted ? 'is-muted' : ''
257 }`}
258 data-tip={`${intl.formatMessage(
259 isAppMuted ? messages.unmute : messages.mute,
260 )} (${muteFerdiumShortcutKey(false)})`}
261 >
262 <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} />
263 </button>
264 ) : null}
265 {todosStore.isFeatureEnabledByUser && !this.state.isCollapsed ? (
266 <button
267 type="button"
268 onClick={() => {
269 todoActions.toggleTodosPanel();
270 this.updateToolTip();
271 }}
272 disabled={isTodosServiceActive}
273 className={`sidebar__button sidebar__button--todos ${
274 todosStore.isTodosPanelVisible ? 'is-active' : ''
275 }`}
276 data-tip={`${intl.formatMessage(
277 todosToggleMessage,
278 )} (${todosToggleShortcutKey(false)})`}
279 >
280 <Icon icon={mdiCheckAll} size={1.5} />
281 </button>
282 ) : null}
283 {stores.settings.all.app.lockingFeatureEnabled ? (
284 <button
285 type="button"
286 className="sidebar__button"
287 onClick={() => {
288 actions.settings.update({
289 type: 'app',
290 data: {
291 locked: true,
292 },
293 });
294 }}
295 data-tip={`${intl.formatMessage(
296 messages.lockFerdium,
297 )} (${lockFerdiumShortcutKey(false)})`}
298 >
299 <Icon icon={mdiLock} size={1.5} />
300 </button>
301 ) : null}
302 </>
303 {this.state.tooltipEnabled && (
304 <ReactTooltip place="right" type="dark" effect="solid" />
305 )}
306 {!hideSettingsButton && !this.state.isCollapsed ? (
307 <button
308 type="button"
309 onClick={() => openSettings({ path: 'app' })}
310 className="sidebar__button sidebar__button--settings"
311 data-tip={`${intl.formatMessage(
312 globalMessages.settings,
313 )} (${settingsShortcutKey(false)})`}
314 >
315 <Icon icon={mdiCog} size={1.5} />
316 {
317 this.props.stores.settings.app.automaticUpdates &&
318 (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE ||
319 this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED ||
320 this.props.showServicesUpdatedInfoBar) && (
321 <span className="update-available">•</span>
322 )
323 }
324 </button>
325 ) : null}
326 </div>
327 );
328 }
329}
330
331export default injectIntl(inject('stores', 'actions')(observer(Sidebar)));
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2024-09-10 06:23:10 +0000