1 files changed, 123 insertions, 125 deletions
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
index 2b1e87023..ceb9cfff9 100644
--- a/src/components/layout/Sidebar.tsx
+++ b/src/components/layout/Sidebar.tsx
@@ -205,133 +205,131 @@ class Sidebar extends Component<IProps, IState> {
          hibernateService={this.props.hibernateService}
          wakeUpService={this.props.wakeUpService}
        />
-        <>
+        {numberActiveButtons <= 1 || hideCollapseButton ? null : (
-          {numberActiveButtons <= 1 || hideCollapseButton ? null : (
+          <button
-            <button
+            type="button"
-              type="button"
+            onClick={() => toggleCollapseMenu()}
-              onClick={() => toggleCollapseMenu()}
+            className="sidebar__button sidebar__button--hamburger-menu"
-              className="sidebar__button sidebar__button--hamburger-menu"
+          >
-            >
+            {isMenuCollapsed ? <Icon icon={mdiMenu} size={1.5} /> : null}
-              {isMenuCollapsed ? <Icon icon={mdiMenu} size={1.5} /> : null}
-              {!isMenuCollapsed && !useHorizontalStyle ? (
+            {!isMenuCollapsed && !useHorizontalStyle ? (
-                <Icon icon={mdiChevronDown} size={1.5} />
+              <Icon icon={mdiChevronDown} size={1.5} />
-              ) : null}
+            ) : null}
-              {!isMenuCollapsed && useHorizontalStyle ? (
+            {!isMenuCollapsed && useHorizontalStyle ? (
-                <Icon icon={mdiChevronRight} size={1.5} />
+              <Icon icon={mdiChevronRight} size={1.5} />
-              ) : null}
+            ) : null}
-            </button>
+          </button>
-          )}
+        )}
-          {!hideRecipesButton && !isMenuCollapsed ? (
+        {!hideRecipesButton && !isMenuCollapsed ? (
-            <button
+          <button
-              type="button"
+            type="button"
-              onClick={() => openSettings({ path: 'recipes' })}
+            onClick={() => openSettings({ path: 'recipes' })}
-              className="sidebar__button sidebar__button--new-service"
+            className="sidebar__button sidebar__button--new-service"
-              data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+            data-tooltip-content={`${intl.formatMessage(
-                messages.addNewService,
+              messages.addNewService,
-              )} (${addNewServiceShortcutKey(false)})`}
+            )} (${addNewServiceShortcutKey(false)})`}
-            >
+          >
-              <Icon icon={mdiPlusBox} size={1.5} />
+            <Icon icon={mdiPlusBox} size={1.5} />
-            </button>
+          </button>
-          ) : null}
+        ) : null}
-          {!hideSplitModeButton && !isMenuCollapsed ? (
+        {!hideSplitModeButton && !isMenuCollapsed ? (
-            <button
+          <button
-              type="button"
+            type="button"
-              onClick={() => {
+            onClick={() => {
-                actions!.settings.update({
+              actions!.settings.update({
-                  type: 'app',
+                type: 'app',
-                  data: {
+                data: {
-                    splitMode: !splitMode,
+                  splitMode: !splitMode,
-                  },
+                },
-                });
+              });
-              }}
+            }}
-              className="sidebar__button sidebar__button--split-mode-toggle"
+            className="sidebar__button sidebar__button--split-mode-toggle"
-              data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+            data-tooltip-content={`${intl.formatMessage(
-                messages.splitModeToggle,
+              messages.splitModeToggle,
-              )} (${splitModeToggleShortcutKey(false)})`}
+            )} (${splitModeToggleShortcutKey(false)})`}
-            >
+          >
-              <Icon icon={mdiViewSplitVertical} size={1.5} />
+            <Icon icon={mdiViewSplitVertical} size={1.5} />
-            </button>
+          </button>
-          ) : null}
+        ) : null}
-          {!hideWorkspacesButton && !isMenuCollapsed ? (
+        {!hideWorkspacesButton && !isMenuCollapsed ? (
-            <button
+          <button
-              type="button"
+            type="button"
-              onClick={() => {
+            onClick={() => {
-                toggleWorkspaceDrawer();
+              toggleWorkspaceDrawer();
-                this.updateToolTip();
+              this.updateToolTip();
-              }}
+            }}
-              className={`sidebar__button sidebar__button--workspaces ${
+            className={`sidebar__button sidebar__button--workspaces ${
-                isWorkspaceDrawerOpen ? 'is-active' : ''
+              isWorkspaceDrawerOpen ? 'is-active' : ''
-              }`}
+            }`}
-              data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+            data-tooltip-content={`${intl.formatMessage(
-                workspaceToggleMessage,
+              workspaceToggleMessage,
-              )} (${workspaceToggleShortcutKey(false)})`}
+            )} (${workspaceToggleShortcutKey(false)})`}
-            >
+          >
-              <Icon icon={mdiViewGrid} size={1.5} />
+            <Icon icon={mdiViewGrid} size={1.5} />
-            </button>
+          </button>
-          ) : null}
+        ) : null}
-          {!hideNotificationsButton && !isMenuCollapsed ? (
+        {!hideNotificationsButton && !isMenuCollapsed ? (
-            <button
+          <button
-              type="button"
+            type="button"
-              onClick={() => {
+            onClick={() => {
-                toggleMuteApp();
+              toggleMuteApp();
-                this.updateToolTip();
+              this.updateToolTip();
-              }}
+            }}
-              className={`sidebar__button sidebar__button--audio ${
+            className={`sidebar__button sidebar__button--audio ${
-                isAppMuted ? 'is-muted' : ''
+              isAppMuted ? 'is-muted' : ''
-              }`}
+            }`}
-              data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+            data-tooltip-content={`${intl.formatMessage(
-                isAppMuted ? messages.unmute : messages.mute,
+              isAppMuted ? messages.unmute : messages.mute,
-              )} (${muteFerdiumShortcutKey(false)})`}
+            )} (${muteFerdiumShortcutKey(false)})`}
-            >
+          >
-              <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} />
+            <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} />
-            </button>
+          </button>
-          ) : null}
+        ) : null}
-          {todosStore.isFeatureEnabledByUser && !isMenuCollapsed ? (
+        {todosStore.isFeatureEnabledByUser && !isMenuCollapsed ? (
-            <button
+          <button
-              type="button"
+            type="button"
-              onClick={() => {
+            onClick={() => {
-                todoActions.toggleTodosPanel();
+              todoActions.toggleTodosPanel();
-                this.updateToolTip();
+              this.updateToolTip();
-              }}
+            }}
-              disabled={isTodosServiceActive}
+            disabled={isTodosServiceActive}
-              className={`sidebar__button sidebar__button--todos ${
+            className={`sidebar__button sidebar__button--todos ${
-                todosStore.isTodosPanelVisible ? 'is-active' : ''
+              todosStore.isTodosPanelVisible ? 'is-active' : ''
-              }`}
+            }`}
-              data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+            data-tooltip-content={`${intl.formatMessage(
-                todosToggleMessage,
+              todosToggleMessage,
-              )} (${todosToggleShortcutKey(false)})`}
+            )} (${todosToggleShortcutKey(false)})`}
-            >
+          >
-              <Icon icon={mdiCheckAll} size={1.5} />
+            <Icon icon={mdiCheckAll} size={1.5} />
-            </button>
+          </button>
-          ) : null}
+        ) : null}
-          {stores!.settings.all.app.lockingFeatureEnabled ? (
+        {stores!.settings.all.app.lockingFeatureEnabled ? (
-            <button
+          <button
-              type="button"
+            type="button"
-              className="sidebar__button"
+            className="sidebar__button"
-              onClick={() => {
+            onClick={() => {
-                actions!.settings.update({
+              actions!.settings.update({
-                  type: 'app',
+                type: 'app',
-                  data: {
+                data: {
-                    locked: true,
+                  locked: true,
-                  },
+                },
-                });
+              });
-              }}
+            }}
-              data-tooltip-id="tooltip-sidebar-button"
+            data-tooltip-id="tooltip-sidebar-button"
-              data-tooltip-content={`${intl.formatMessage(
+            data-tooltip-content={`${intl.formatMessage(
-                messages.lockFerdium,
+              messages.lockFerdium,
-              )} (${lockFerdiumShortcutKey(false)})`}
+            )} (${lockFerdiumShortcutKey(false)})`}
-            >
+          >
-              <Icon icon={mdiLock} size={1.5} />
+            <Icon icon={mdiLock} size={1.5} />
-            </button>
+          </button>
-          ) : null}
+        ) : null}
-        </>
        {this.state.tooltipEnabled && (
          <ReactTooltip
            id="tooltip-sidebar-button"

diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index 2b1e87023..ceb9cfff9 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx
@@ -205,133 +205,131 @@ class Sidebar extends Component<IProps, IState> {
205	hibernateService={this.props.hibernateService}	205	hibernateService={this.props.hibernateService}
206	wakeUpService={this.props.wakeUpService}	206	wakeUpService={this.props.wakeUpService}
207	/>	207	/>
208	<>	208	{numberActiveButtons <= 1 \|\| hideCollapseButton ? null : (
209	{numberActiveButtons <= 1 \|\| hideCollapseButton ? null : (	209	<button
210	<button	210	type="button"
211	type="button"	211	onClick={() => toggleCollapseMenu()}
212	onClick={() => toggleCollapseMenu()}	212	className="sidebar__button sidebar__button--hamburger-menu"
213	className="sidebar__button sidebar__button--hamburger-menu"	213	>
214	>	214	{isMenuCollapsed ? <Icon icon={mdiMenu} size={1.5} /> : null}
215	{isMenuCollapsed ? <Icon icon={mdiMenu} size={1.5} /> : null}
216		215
217	{!isMenuCollapsed && !useHorizontalStyle ? (	216	{!isMenuCollapsed && !useHorizontalStyle ? (
218	<Icon icon={mdiChevronDown} size={1.5} />	217	<Icon icon={mdiChevronDown} size={1.5} />
219	) : null}	218	) : null}
220		219
221	{!isMenuCollapsed && useHorizontalStyle ? (	220	{!isMenuCollapsed && useHorizontalStyle ? (
222	<Icon icon={mdiChevronRight} size={1.5} />	221	<Icon icon={mdiChevronRight} size={1.5} />
223	) : null}	222	) : null}
224	</button>	223	</button>
225	)}	224	)}
226	{!hideRecipesButton && !isMenuCollapsed ? (	225	{!hideRecipesButton && !isMenuCollapsed ? (
227	<button	226	<button
228	type="button"	227	type="button"
229	onClick={() => openSettings({ path: 'recipes' })}	228	onClick={() => openSettings({ path: 'recipes' })}
230	className="sidebar__button sidebar__button--new-service"	229	className="sidebar__button sidebar__button--new-service"
231	data-tooltip-id="tooltip-sidebar-button"	230	data-tooltip-id="tooltip-sidebar-button"
232	data-tooltip-content={`${intl.formatMessage(	231	data-tooltip-content={`${intl.formatMessage(
233	messages.addNewService,	232	messages.addNewService,
234	)} (${addNewServiceShortcutKey(false)})`}	233	)} (${addNewServiceShortcutKey(false)})`}
235	>	234	>
236	<Icon icon={mdiPlusBox} size={1.5} />	235	<Icon icon={mdiPlusBox} size={1.5} />
237	</button>	236	</button>
238	) : null}	237	) : null}
239	{!hideSplitModeButton && !isMenuCollapsed ? (	238	{!hideSplitModeButton && !isMenuCollapsed ? (
240	<button	239	<button
241	type="button"	240	type="button"
242	onClick={() => {	241	onClick={() => {
243	actions!.settings.update({	242	actions!.settings.update({
244	type: 'app',	243	type: 'app',
245	data: {	244	data: {
246	splitMode: !splitMode,	245	splitMode: !splitMode,
247	},	246	},
248	});	247	});
249	}}	248	}}
250	className="sidebar__button sidebar__button--split-mode-toggle"	249	className="sidebar__button sidebar__button--split-mode-toggle"
251	data-tooltip-id="tooltip-sidebar-button"	250	data-tooltip-id="tooltip-sidebar-button"
252	data-tooltip-content={`${intl.formatMessage(	251	data-tooltip-content={`${intl.formatMessage(
253	messages.splitModeToggle,	252	messages.splitModeToggle,
254	)} (${splitModeToggleShortcutKey(false)})`}	253	)} (${splitModeToggleShortcutKey(false)})`}
255	>	254	>
256	<Icon icon={mdiViewSplitVertical} size={1.5} />	255	<Icon icon={mdiViewSplitVertical} size={1.5} />
257	</button>	256	</button>
258	) : null}	257	) : null}
259	{!hideWorkspacesButton && !isMenuCollapsed ? (	258	{!hideWorkspacesButton && !isMenuCollapsed ? (
260	<button	259	<button
261	type="button"	260	type="button"
262	onClick={() => {	261	onClick={() => {
263	toggleWorkspaceDrawer();	262	toggleWorkspaceDrawer();
264	this.updateToolTip();	263	this.updateToolTip();
265	}}	264	}}
266	className={`sidebar__button sidebar__button--workspaces ${	265	className={`sidebar__button sidebar__button--workspaces ${
267	isWorkspaceDrawerOpen ? 'is-active' : ''	266	isWorkspaceDrawerOpen ? 'is-active' : ''
268	}`}	267	}`}
269	data-tooltip-id="tooltip-sidebar-button"	268	data-tooltip-id="tooltip-sidebar-button"
270	data-tooltip-content={`${intl.formatMessage(	269	data-tooltip-content={`${intl.formatMessage(
271	workspaceToggleMessage,	270	workspaceToggleMessage,
272	)} (${workspaceToggleShortcutKey(false)})`}	271	)} (${workspaceToggleShortcutKey(false)})`}
273	>	272	>
274	<Icon icon={mdiViewGrid} size={1.5} />	273	<Icon icon={mdiViewGrid} size={1.5} />
275	</button>	274	</button>
276	) : null}	275	) : null}
277	{!hideNotificationsButton && !isMenuCollapsed ? (	276	{!hideNotificationsButton && !isMenuCollapsed ? (
278	<button	277	<button
279	type="button"	278	type="button"
280	onClick={() => {	279	onClick={() => {
281	toggleMuteApp();	280	toggleMuteApp();
282	this.updateToolTip();	281	this.updateToolTip();
283	}}	282	}}
284	className={`sidebar__button sidebar__button--audio ${	283	className={`sidebar__button sidebar__button--audio ${
285	isAppMuted ? 'is-muted' : ''	284	isAppMuted ? 'is-muted' : ''
286	}`}	285	}`}
287	data-tooltip-id="tooltip-sidebar-button"	286	data-tooltip-id="tooltip-sidebar-button"
288	data-tooltip-content={`${intl.formatMessage(	287	data-tooltip-content={`${intl.formatMessage(
289	isAppMuted ? messages.unmute : messages.mute,	288	isAppMuted ? messages.unmute : messages.mute,
290	)} (${muteFerdiumShortcutKey(false)})`}	289	)} (${muteFerdiumShortcutKey(false)})`}
291	>	290	>
292	<Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} />	291	<Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} />
293	</button>	292	</button>
294	) : null}	293	) : null}
295	{todosStore.isFeatureEnabledByUser && !isMenuCollapsed ? (	294	{todosStore.isFeatureEnabledByUser && !isMenuCollapsed ? (
296	<button	295	<button
297	type="button"	296	type="button"
298	onClick={() => {	297	onClick={() => {
299	todoActions.toggleTodosPanel();	298	todoActions.toggleTodosPanel();
300	this.updateToolTip();	299	this.updateToolTip();
301	}}	300	}}
302	disabled={isTodosServiceActive}	301	disabled={isTodosServiceActive}
303	className={`sidebar__button sidebar__button--todos ${	302	className={`sidebar__button sidebar__button--todos ${
304	todosStore.isTodosPanelVisible ? 'is-active' : ''	303	todosStore.isTodosPanelVisible ? 'is-active' : ''
305	}`}	304	}`}
306	data-tooltip-id="tooltip-sidebar-button"	305	data-tooltip-id="tooltip-sidebar-button"
307	data-tooltip-content={`${intl.formatMessage(	306	data-tooltip-content={`${intl.formatMessage(
308	todosToggleMessage,	307	todosToggleMessage,
309	)} (${todosToggleShortcutKey(false)})`}	308	)} (${todosToggleShortcutKey(false)})`}
310	>	309	>
311	<Icon icon={mdiCheckAll} size={1.5} />	310	<Icon icon={mdiCheckAll} size={1.5} />
312	</button>	311	</button>
313	) : null}	312	) : null}
314	{stores!.settings.all.app.lockingFeatureEnabled ? (	313	{stores!.settings.all.app.lockingFeatureEnabled ? (
315	<button	314	<button
316	type="button"	315	type="button"
317	className="sidebar__button"	316	className="sidebar__button"
318	onClick={() => {	317	onClick={() => {
319	actions!.settings.update({	318	actions!.settings.update({
320	type: 'app',	319	type: 'app',
321	data: {	320	data: {
322	locked: true,	321	locked: true,
323	},	322	},
324	});	323	});
325	}}	324	}}
326	data-tooltip-id="tooltip-sidebar-button"	325	data-tooltip-id="tooltip-sidebar-button"
327	data-tooltip-content={`${intl.formatMessage(	326	data-tooltip-content={`${intl.formatMessage(
328	messages.lockFerdium,	327	messages.lockFerdium,
329	)} (${lockFerdiumShortcutKey(false)})`}	328	)} (${lockFerdiumShortcutKey(false)})`}
330	>	329	>
331	<Icon icon={mdiLock} size={1.5} />	330	<Icon icon={mdiLock} size={1.5} />
332	</button>	331	</button>
333	) : null}	332	) : null}
334	</>
335	{this.state.tooltipEnabled && (	333	{this.state.tooltipEnabled && (
336	<ReactTooltip	334	<ReactTooltip
337	id="tooltip-sidebar-button"	335	id="tooltip-sidebar-button"