diff options
author | 2022-05-02 22:47:38 +0100 | |
---|---|---|
committer | 2022-05-02 21:47:38 +0000 | |
commit | ae310e3d07041fbde728ac283842d4ab6665ff9f (patch) | |
tree | b3c51ccb0f6eaf8f9b7f042eb7f691259f8a2ac5 | |
parent | 6.0.0-nightly.23 [skip ci] (diff) | |
download | ferdium-app-ae310e3d07041fbde728ac283842d4ab6665ff9f.tar.gz ferdium-app-ae310e3d07041fbde728ac283842d4ab6665ff9f.tar.zst ferdium-app-ae310e3d07041fbde728ac283842d4ab6665ff9f.zip |
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 <vraravam@users.noreply.github.com>
-rw-r--r-- | src/components/layout/Sidebar.js | 168 | ||||
-rw-r--r-- | src/components/settings/settings/EditSettingsForm.js | 8 | ||||
-rw-r--r-- | src/config.ts | 4 | ||||
-rw-r--r-- | src/containers/settings/EditSettingsScreen.js | 40 | ||||
-rw-r--r-- | 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 { | |||
11 | mdiBellOff, | 11 | mdiBellOff, |
12 | mdiBell, | 12 | mdiBell, |
13 | mdiLock, | 13 | mdiLock, |
14 | mdiMenu, | ||
15 | mdiChevronDown, | ||
16 | mdiChevronRight, | ||
14 | } from '@mdi/js'; | 17 | } from '@mdi/js'; |
15 | 18 | ||
16 | import Tabbar from '../services/tabs/Tabbar'; | 19 | import Tabbar from '../services/tabs/Tabbar'; |
@@ -98,6 +101,7 @@ class Sidebar extends Component { | |||
98 | 101 | ||
99 | state = { | 102 | state = { |
100 | tooltipEnabled: true, | 103 | tooltipEnabled: true, |
104 | isCollapsed: false | ||
101 | }; | 105 | }; |
102 | 106 | ||
103 | componentDidUpdate() { | 107 | componentDidUpdate() { |
@@ -112,6 +116,10 @@ class Sidebar extends Component { | |||
112 | this.setState({ tooltipEnabled: false }); | 116 | this.setState({ tooltipEnabled: false }); |
113 | } | 117 | } |
114 | 118 | ||
119 | collapseMenu() { | ||
120 | this.setState((prevState) => ({ isCollapsed: !prevState.isCollapsed })); | ||
121 | } | ||
122 | |||
115 | updateToolTip() { | 123 | updateToolTip() { |
116 | this.disableToolTip(); | 124 | this.disableToolTip(); |
117 | setTimeout(this.enableToolTip.bind(this)); | 125 | setTimeout(this.enableToolTip.bind(this)); |
@@ -128,6 +136,13 @@ class Sidebar extends Component { | |||
128 | actions, | 136 | actions, |
129 | isTodosServiceActive, | 137 | isTodosServiceActive, |
130 | } = this.props; | 138 | } = this.props; |
139 | const { | ||
140 | hideRecipesButton, | ||
141 | hideWorkspacesButton, | ||
142 | hideNotificationsButton, | ||
143 | hideSettingsButton, | ||
144 | useVerticalStyle | ||
145 | } = stores.settings.app; | ||
131 | const { intl } = this.props; | 146 | const { intl } = this.props; |
132 | const todosToggleMessage = todosStore.isTodosPanelVisible | 147 | const todosToggleMessage = todosStore.isTodosPanelVisible |
133 | ? messages.closeTodosDrawer | 148 | ? messages.closeTodosDrawer |
@@ -137,6 +152,14 @@ class Sidebar extends Component { | |||
137 | ? messages.closeWorkspaceDrawer | 152 | ? messages.closeWorkspaceDrawer |
138 | : messages.openWorkspaceDrawer; | 153 | : messages.openWorkspaceDrawer; |
139 | 154 | ||
155 | const numberActiveButtons = [ | ||
156 | !hideRecipesButton, | ||
157 | !hideWorkspacesButton, | ||
158 | !hideNotificationsButton, | ||
159 | !hideSettingsButton, | ||
160 | todosStore.isFeatureEnabledByUser | ||
161 | ].filter(Boolean).length; | ||
162 | |||
140 | return ( | 163 | return ( |
141 | <div className="sidebar"> | 164 | <div className="sidebar"> |
142 | <Tabbar | 165 | <Tabbar |
@@ -146,32 +169,91 @@ class Sidebar extends Component { | |||
146 | useVerticalStyle={stores.settings.all.app.useVerticalStyle} | 169 | useVerticalStyle={stores.settings.all.app.useVerticalStyle} |
147 | /> | 170 | /> |
148 | <> | 171 | <> |
149 | <button | 172 | {numberActiveButtons <= 1 ? ( |
150 | type="button" | 173 | null |
151 | onClick={() => openSettings({ path: 'recipes' })} | 174 | ) : |
152 | className="sidebar__button sidebar__button--new-service" | 175 | <button |
153 | data-tip={`${intl.formatMessage( | 176 | type="button" |
154 | messages.addNewService, | 177 | onClick={() => this.collapseMenu()} |
155 | )} (${addNewServiceShortcutKey(false)})`} | 178 | className="sidebar__button sidebar__button--hamburger-menu" |
156 | > | 179 | > |
157 | <Icon icon={mdiPlusBox} size={1.5} /> | 180 | {this.state.isCollapsed ? |
158 | </button> | 181 | <Icon icon={mdiMenu} size={1.5} /> |
159 | <button | 182 | : |
160 | type="button" | 183 | (useVerticalStyle) ? |
161 | onClick={() => { | 184 | <Icon icon={mdiChevronRight} size={1.5} /> |
162 | toggleWorkspaceDrawer(); | 185 | : |
163 | this.updateToolTip(); | 186 | <Icon icon={mdiChevronDown} size={1.5} /> |
164 | }} | 187 | } |
165 | className={`sidebar__button sidebar__button--workspaces ${ | 188 | </button> |
166 | isWorkspaceDrawerOpen ? 'is-active' : '' | 189 | } |
167 | }`} | 190 | {!hideRecipesButton && !this.state.isCollapsed ? ( |
168 | data-tip={`${intl.formatMessage( | 191 | <button |
169 | workspaceToggleMessage, | 192 | type="button" |
170 | )} (${workspaceToggleShortcutKey(false)})`} | 193 | onClick={() => openSettings({ path: 'recipes' })} |
171 | > | 194 | className="sidebar__button sidebar__button--new-service" |
172 | <Icon icon={mdiViewGrid} size={1.5} /> | 195 | data-tip={`${intl.formatMessage( |
173 | </button> | 196 | messages.addNewService, |
174 | {todosStore.isFeatureEnabledByUser ? ( | 197 | )} (${addNewServiceShortcutKey(false)})`} |
198 | > | ||
199 | <Icon icon={mdiPlusBox} size={1.5} /> | ||
200 | </button> | ||
201 | ) : null} | ||
202 | {!hideWorkspacesButton && !this.state.isCollapsed ? ( | ||
203 | <button | ||
204 | type="button" | ||
205 | onClick={() => { | ||
206 | toggleWorkspaceDrawer(); | ||
207 | this.updateToolTip(); | ||
208 | }} | ||
209 | className={`sidebar__button sidebar__button--workspaces ${ | ||
210 | isWorkspaceDrawerOpen ? 'is-active' : '' | ||
211 | }`} | ||
212 | data-tip={`${intl.formatMessage( | ||
213 | workspaceToggleMessage, | ||
214 | )} (${workspaceToggleShortcutKey(false)})`} | ||
215 | > | ||
216 | <Icon icon={mdiViewGrid} size={1.5} /> | ||
217 | </button> | ||
218 | ) : null} | ||
219 | {!hideNotificationsButton && !this.state.isCollapsed ? ( | ||
220 | <button | ||
221 | type="button" | ||
222 | onClick={() => { | ||
223 | toggleMuteApp(); | ||
224 | this.updateToolTip(); | ||
225 | }} | ||
226 | className={`sidebar__button sidebar__button--audio ${ | ||
227 | isAppMuted ? 'is-muted' : '' | ||
228 | }`} | ||
229 | data-tip={`${intl.formatMessage( | ||
230 | isAppMuted ? messages.unmute : messages.mute, | ||
231 | )} (${muteFerdiumShortcutKey(false)})`} | ||
232 | > | ||
233 | <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} /> | ||
234 | </button> | ||
235 | ) : null} | ||
236 | {!hideSettingsButton && !this.state.isCollapsed ? ( | ||
237 | <button | ||
238 | type="button" | ||
239 | onClick={() => openSettings({ path: 'app' })} | ||
240 | className="sidebar__button sidebar__button--settings" | ||
241 | data-tip={`${intl.formatMessage( | ||
242 | globalMessages.settings, | ||
243 | )} (${settingsShortcutKey(false)})`} | ||
244 | > | ||
245 | <Icon icon={mdiCog} size={1.5} /> | ||
246 | { | ||
247 | this.props.stores.settings.app.automaticUpdates && | ||
248 | (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE || | ||
249 | this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED || | ||
250 | this.props.showServicesUpdatedInfoBar) && ( | ||
251 | <span className="update-available">•</span> | ||
252 | ) | ||
253 | } | ||
254 | </button> | ||
255 | ) : null} | ||
256 | {todosStore.isFeatureEnabledByUser && !this.state.isCollapsed ? ( | ||
175 | <button | 257 | <button |
176 | type="button" | 258 | type="button" |
177 | onClick={() => { | 259 | onClick={() => { |
@@ -189,22 +271,6 @@ class Sidebar extends Component { | |||
189 | <Icon icon={mdiCheckAll} size={1.5} /> | 271 | <Icon icon={mdiCheckAll} size={1.5} /> |
190 | </button> | 272 | </button> |
191 | ) : null} | 273 | ) : null} |
192 | <button | ||
193 | type="button" | ||
194 | onClick={() => { | ||
195 | toggleMuteApp(); | ||
196 | this.updateToolTip(); | ||
197 | }} | ||
198 | className={`sidebar__button sidebar__button--audio ${ | ||
199 | isAppMuted ? 'is-muted' : '' | ||
200 | }`} | ||
201 | data-tip={`${intl.formatMessage( | ||
202 | isAppMuted ? messages.unmute : messages.mute, | ||
203 | )} (${muteFerdiumShortcutKey(false)})`} | ||
204 | > | ||
205 | <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} /> | ||
206 | </button> | ||
207 | |||
208 | {stores.settings.all.app.lockingFeatureEnabled ? ( | 274 | {stores.settings.all.app.lockingFeatureEnabled ? ( |
209 | <button | 275 | <button |
210 | type="button" | 276 | type="button" |
@@ -225,24 +291,6 @@ class Sidebar extends Component { | |||
225 | </button> | 291 | </button> |
226 | ) : null} | 292 | ) : null} |
227 | </> | 293 | </> |
228 | <button | ||
229 | type="button" | ||
230 | onClick={() => openSettings({ path: 'app' })} | ||
231 | className="sidebar__button sidebar__button--settings" | ||
232 | data-tip={`${intl.formatMessage( | ||
233 | globalMessages.settings, | ||
234 | )} (${settingsShortcutKey(false)})`} | ||
235 | > | ||
236 | <Icon icon={mdiCog} size={1.5} /> | ||
237 | { | ||
238 | this.props.stores.settings.app.automaticUpdates && | ||
239 | (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE || | ||
240 | this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED || | ||
241 | this.props.showServicesUpdatedInfoBar) && ( | ||
242 | <span className="update-available">•</span> | ||
243 | ) | ||
244 | } | ||
245 | </button> | ||
246 | {this.state.tooltipEnabled && ( | 294 | {this.state.tooltipEnabled && ( |
247 | <ReactTooltip place="right" type="dark" effect="solid" /> | 295 | <ReactTooltip place="right" type="dark" effect="solid" /> |
248 | )} | 296 | )} |
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 { | |||
574 | 574 | ||
575 | <Toggle field={form.$('useVerticalStyle')} /> | 575 | <Toggle field={form.$('useVerticalStyle')} /> |
576 | 576 | ||
577 | <Toggle field={form.$('hideRecipesButton')} /> | ||
578 | |||
579 | <Toggle field={form.$('hideWorkspacesButton')} /> | ||
580 | |||
581 | <Toggle field={form.$('hideNotificationsButton')} /> | ||
582 | |||
583 | <Toggle field={form.$('hideSettingsButton')} /> | ||
584 | |||
577 | <Toggle field={form.$('alwaysShowWorkspaces')} /> | 585 | <Toggle field={form.$('alwaysShowWorkspaces')} /> |
578 | 586 | ||
579 | <Hr /> | 587 | <Hr /> |
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 = { | |||
243 | navigationBarBehaviour: 'custom', | 243 | navigationBarBehaviour: 'custom', |
244 | searchEngine: SEARCH_ENGINE_DDG, | 244 | searchEngine: SEARCH_ENGINE_DDG, |
245 | useVerticalStyle: false, | 245 | useVerticalStyle: false, |
246 | hideRecipesButton: false, | ||
247 | hideWorkspacesButton: false, | ||
248 | hideNotificationsButton: false, | ||
249 | hideSettingsButton: false, | ||
246 | alwaysShowWorkspaces: false, | 250 | alwaysShowWorkspaces: false, |
247 | liftSingleInstanceLock: false, | 251 | liftSingleInstanceLock: false, |
248 | enableLongPressServiceHint: false, | 252 | 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({ | |||
201 | id: 'settings.app.form.useVerticalStyle', | 201 | id: 'settings.app.form.useVerticalStyle', |
202 | defaultMessage: 'Use horizontal style', | 202 | defaultMessage: 'Use horizontal style', |
203 | }, | 203 | }, |
204 | hideRecipesButton: { | ||
205 | id: 'settings.app.form.hideRecipesButton', | ||
206 | defaultMessage: 'Hide Recipes button', | ||
207 | }, | ||
208 | hideWorkspacesButton: { | ||
209 | id: 'settings.app.form.hideWorkspacesButton', | ||
210 | defaultMessage: 'Hide Workspace Drawer button', | ||
211 | }, | ||
212 | hideNotificationsButton: { | ||
213 | id: 'settings.app.form.hideNotificationsButton', | ||
214 | defaultMessage: 'Hide Notifications & Sound button', | ||
215 | }, | ||
216 | hideSettingsButton: { | ||
217 | id: 'settings.app.form.hideSettingsButton', | ||
218 | defaultMessage: 'Hide Settings button', | ||
219 | }, | ||
204 | alwaysShowWorkspaces: { | 220 | alwaysShowWorkspaces: { |
205 | id: 'settings.app.form.alwaysShowWorkspaces', | 221 | id: 'settings.app.form.alwaysShowWorkspaces', |
206 | defaultMessage: 'Always show workspace drawer', | 222 | defaultMessage: 'Always show workspace drawer', |
@@ -333,6 +349,10 @@ class EditSettingsScreen extends Component { | |||
333 | settingsData.enableLongPressServiceHint, | 349 | settingsData.enableLongPressServiceHint, |
334 | ), | 350 | ), |
335 | useVerticalStyle: Boolean(settingsData.useVerticalStyle), | 351 | useVerticalStyle: Boolean(settingsData.useVerticalStyle), |
352 | hideRecipesButton: Boolean(settingsData.hideRecipesButton), | ||
353 | hideWorkspacesButton: Boolean(settingsData.hideWorkspacesButton), | ||
354 | hideNotificationsButton: Boolean(settingsData.hideNotificationsButton), | ||
355 | hideSettingsButton: Boolean(settingsData.hideSettingsButton), | ||
336 | alwaysShowWorkspaces: Boolean(settingsData.alwaysShowWorkspaces), | 356 | alwaysShowWorkspaces: Boolean(settingsData.alwaysShowWorkspaces), |
337 | accentColor: settingsData.accentColor, | 357 | accentColor: settingsData.accentColor, |
338 | showMessageBadgeWhenMuted: Boolean( | 358 | showMessageBadgeWhenMuted: Boolean( |
@@ -679,6 +699,26 @@ class EditSettingsScreen extends Component { | |||
679 | value: settings.all.app.useVerticalStyle, | 699 | value: settings.all.app.useVerticalStyle, |
680 | default: DEFAULT_APP_SETTINGS.useVerticalStyle, | 700 | default: DEFAULT_APP_SETTINGS.useVerticalStyle, |
681 | }, | 701 | }, |
702 | hideRecipesButton: { | ||
703 | label: intl.formatMessage(messages.hideRecipesButton), | ||
704 | value: settings.all.app.hideRecipesButton, | ||
705 | default: DEFAULT_APP_SETTINGS.hideRecipesButton, | ||
706 | }, | ||
707 | hideWorkspacesButton: { | ||
708 | label: intl.formatMessage(messages.hideWorkspacesButton), | ||
709 | value: settings.all.app.hideWorkspacesButton, | ||
710 | default: DEFAULT_APP_SETTINGS.hideWorkspacesButton, | ||
711 | }, | ||
712 | hideNotificationsButton: { | ||
713 | label: intl.formatMessage(messages.hideNotificationsButton), | ||
714 | value: settings.all.app.hideNotificationsButton, | ||
715 | default: DEFAULT_APP_SETTINGS.hideNotificationsButton, | ||
716 | }, | ||
717 | hideSettingsButton: { | ||
718 | label: intl.formatMessage(messages.hideSettingsButton), | ||
719 | value: settings.all.app.hideSettingsButton, | ||
720 | default: DEFAULT_APP_SETTINGS.hideSettingsButton, | ||
721 | }, | ||
682 | alwaysShowWorkspaces: { | 722 | alwaysShowWorkspaces: { |
683 | label: intl.formatMessage(messages.alwaysShowWorkspaces), | 723 | label: intl.formatMessage(messages.alwaysShowWorkspaces), |
684 | value: settings.all.app.alwaysShowWorkspaces, | 724 | 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 @@ | |||
214 | "settings.app.form.enableTodos": "Enable Ferdium Todos", | 214 | "settings.app.form.enableTodos": "Enable Ferdium Todos", |
215 | "settings.app.form.hibernateOnStartup": "Keep services in hibernation on startup", | 215 | "settings.app.form.hibernateOnStartup": "Keep services in hibernation on startup", |
216 | "settings.app.form.hibernationStrategy": "Hibernation strategy", | 216 | "settings.app.form.hibernationStrategy": "Hibernation strategy", |
217 | "settings.app.form.hideNotificationsButton": "Hide Notifications & Sound button", | ||
218 | "settings.app.form.hideRecipesButton": "Hide Recipes button", | ||
219 | "settings.app.form.hideSettingsButton": "Hide Settings button", | ||
220 | "settings.app.form.hideWorkspacesButton": "Hide Workspace Drawer button", | ||
217 | "settings.app.form.iconSize": "Service icon size", | 221 | "settings.app.form.iconSize": "Service icon size", |
218 | "settings.app.form.inactivityLock": "Lock after inactivity", | 222 | "settings.app.form.inactivityLock": "Lock after inactivity", |
219 | "settings.app.form.keepAllWorkspacesLoaded": "Keep all workspaces loaded", | 223 | "settings.app.form.keepAllWorkspacesLoaded": "Keep all workspaces loaded", |