From ae310e3d07041fbde728ac283842d4ab6665ff9f Mon Sep 17 00:00:00 2001 From: André Oliveira <37463445+SpecialAro@users.noreply.github.com> Date: Mon, 2 May 2022 22:47:38 +0100 Subject: Feature: Hide sidebar buttons toggled behind a hamburger menu (#81) * Reordered the 'Settings' button in sidebar closer to the other buttons being hidden Co-authored-by: Vijay A --- src/components/layout/Sidebar.js | 168 +++++++++++++-------- .../settings/settings/EditSettingsForm.js | 8 + src/config.ts | 4 + src/containers/settings/EditSettingsScreen.js | 40 +++++ src/i18n/locales/en-US.json | 4 + 5 files changed, 164 insertions(+), 60 deletions(-) diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js index d0b2dcf72..91178a370 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.js @@ -11,6 +11,9 @@ import { mdiBellOff, mdiBell, mdiLock, + mdiMenu, + mdiChevronDown, + mdiChevronRight, } from '@mdi/js'; import Tabbar from '../services/tabs/Tabbar'; @@ -98,6 +101,7 @@ class Sidebar extends Component { state = { tooltipEnabled: true, + isCollapsed: false }; componentDidUpdate() { @@ -112,6 +116,10 @@ class Sidebar extends Component { this.setState({ tooltipEnabled: false }); } + collapseMenu() { + this.setState((prevState) => ({ isCollapsed: !prevState.isCollapsed })); + } + updateToolTip() { this.disableToolTip(); setTimeout(this.enableToolTip.bind(this)); @@ -128,6 +136,13 @@ class Sidebar extends Component { actions, isTodosServiceActive, } = this.props; + const { + hideRecipesButton, + hideWorkspacesButton, + hideNotificationsButton, + hideSettingsButton, + useVerticalStyle + } = stores.settings.app; const { intl } = this.props; const todosToggleMessage = todosStore.isTodosPanelVisible ? messages.closeTodosDrawer @@ -137,6 +152,14 @@ class Sidebar extends Component { ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer; + const numberActiveButtons = [ + !hideRecipesButton, + !hideWorkspacesButton, + !hideNotificationsButton, + !hideSettingsButton, + todosStore.isFeatureEnabledByUser + ].filter(Boolean).length; + return (
<> - - - {todosStore.isFeatureEnabledByUser ? ( + {numberActiveButtons <= 1 ? ( + null + ) : + + } + {!hideRecipesButton && !this.state.isCollapsed ? ( + + ) : null} + {!hideWorkspacesButton && !this.state.isCollapsed ? ( + + ) : null} + {!hideNotificationsButton && !this.state.isCollapsed ? ( + + ) : null} + {!hideSettingsButton && !this.state.isCollapsed ? ( + + ) : null} + {todosStore.isFeatureEnabledByUser && !this.state.isCollapsed ? ( ) : null} - - {stores.settings.all.app.lockingFeatureEnabled ? ( {this.state.tooltipEnabled && ( )} diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js index a42df869a..b7d45a01c 100644 --- a/src/components/settings/settings/EditSettingsForm.js +++ b/src/components/settings/settings/EditSettingsForm.js @@ -574,6 +574,14 @@ class EditSettingsForm extends Component { + + + + + + + +
diff --git a/src/config.ts b/src/config.ts index 4ea762311..48056533f 100644 --- a/src/config.ts +++ b/src/config.ts @@ -243,6 +243,10 @@ export const DEFAULT_APP_SETTINGS = { navigationBarBehaviour: 'custom', searchEngine: SEARCH_ENGINE_DDG, useVerticalStyle: false, + hideRecipesButton: false, + hideWorkspacesButton: false, + hideNotificationsButton: false, + hideSettingsButton: false, alwaysShowWorkspaces: false, liftSingleInstanceLock: false, enableLongPressServiceHint: false, diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js index c3f2b4415..6f906684e 100644 --- a/src/containers/settings/EditSettingsScreen.js +++ b/src/containers/settings/EditSettingsScreen.js @@ -201,6 +201,22 @@ const messages = defineMessages({ id: 'settings.app.form.useVerticalStyle', defaultMessage: 'Use horizontal style', }, + hideRecipesButton: { + id: 'settings.app.form.hideRecipesButton', + defaultMessage: 'Hide Recipes button', + }, + hideWorkspacesButton: { + id: 'settings.app.form.hideWorkspacesButton', + defaultMessage: 'Hide Workspace Drawer button', + }, + hideNotificationsButton: { + id: 'settings.app.form.hideNotificationsButton', + defaultMessage: 'Hide Notifications & Sound button', + }, + hideSettingsButton: { + id: 'settings.app.form.hideSettingsButton', + defaultMessage: 'Hide Settings button', + }, alwaysShowWorkspaces: { id: 'settings.app.form.alwaysShowWorkspaces', defaultMessage: 'Always show workspace drawer', @@ -333,6 +349,10 @@ class EditSettingsScreen extends Component { settingsData.enableLongPressServiceHint, ), useVerticalStyle: Boolean(settingsData.useVerticalStyle), + hideRecipesButton: Boolean(settingsData.hideRecipesButton), + hideWorkspacesButton: Boolean(settingsData.hideWorkspacesButton), + hideNotificationsButton: Boolean(settingsData.hideNotificationsButton), + hideSettingsButton: Boolean(settingsData.hideSettingsButton), alwaysShowWorkspaces: Boolean(settingsData.alwaysShowWorkspaces), accentColor: settingsData.accentColor, showMessageBadgeWhenMuted: Boolean( @@ -679,6 +699,26 @@ class EditSettingsScreen extends Component { value: settings.all.app.useVerticalStyle, default: DEFAULT_APP_SETTINGS.useVerticalStyle, }, + hideRecipesButton: { + label: intl.formatMessage(messages.hideRecipesButton), + value: settings.all.app.hideRecipesButton, + default: DEFAULT_APP_SETTINGS.hideRecipesButton, + }, + hideWorkspacesButton: { + label: intl.formatMessage(messages.hideWorkspacesButton), + value: settings.all.app.hideWorkspacesButton, + default: DEFAULT_APP_SETTINGS.hideWorkspacesButton, + }, + hideNotificationsButton: { + label: intl.formatMessage(messages.hideNotificationsButton), + value: settings.all.app.hideNotificationsButton, + default: DEFAULT_APP_SETTINGS.hideNotificationsButton, + }, + hideSettingsButton: { + label: intl.formatMessage(messages.hideSettingsButton), + value: settings.all.app.hideSettingsButton, + default: DEFAULT_APP_SETTINGS.hideSettingsButton, + }, alwaysShowWorkspaces: { label: intl.formatMessage(messages.alwaysShowWorkspaces), value: settings.all.app.alwaysShowWorkspaces, diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json index 795c58365..610355699 100644 --- a/src/i18n/locales/en-US.json +++ b/src/i18n/locales/en-US.json @@ -214,6 +214,10 @@ "settings.app.form.enableTodos": "Enable Ferdium Todos", "settings.app.form.hibernateOnStartup": "Keep services in hibernation on startup", "settings.app.form.hibernationStrategy": "Hibernation strategy", + "settings.app.form.hideNotificationsButton": "Hide Notifications & Sound button", + "settings.app.form.hideRecipesButton": "Hide Recipes button", + "settings.app.form.hideSettingsButton": "Hide Settings button", + "settings.app.form.hideWorkspacesButton": "Hide Workspace Drawer button", "settings.app.form.iconSize": "Service icon size", "settings.app.form.inactivityLock": "Lock after inactivity", "settings.app.form.keepAllWorkspacesLoaded": "Keep all workspaces loaded", -- cgit v1.2.3-70-g09d2