diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/actions/app.ts | 1 | ||||
-rw-r--r-- | src/components/layout/Sidebar.jsx (renamed from src/components/layout/Sidebar.js) | 99 | ||||
-rw-r--r-- | src/config.ts | 1 | ||||
-rw-r--r-- | src/containers/layout/AppLayoutContainer.js | 4 | ||||
-rw-r--r-- | src/stores/AppStore.ts | 12 |
5 files changed, 69 insertions, 48 deletions
diff --git a/src/actions/app.ts b/src/actions/app.ts index a798a8b0b..2e60c9327 100644 --- a/src/actions/app.ts +++ b/src/actions/app.ts | |||
@@ -26,5 +26,6 @@ export default <ActionDefinitions>{ | |||
26 | overrideSystemMute: PropTypes.bool, | 26 | overrideSystemMute: PropTypes.bool, |
27 | }, | 27 | }, |
28 | toggleMuteApp: {}, | 28 | toggleMuteApp: {}, |
29 | toggleCollapseMenu: {}, | ||
29 | clearAllCache: {}, | 30 | clearAllCache: {}, |
30 | }; | 31 | }; |
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.jsx index 1d3c81dcd..6949544b4 100644 --- a/src/components/layout/Sidebar.js +++ b/src/components/layout/Sidebar.jsx | |||
@@ -93,6 +93,8 @@ class Sidebar extends Component { | |||
93 | wakeUpService: PropTypes.func.isRequired, | 93 | wakeUpService: PropTypes.func.isRequired, |
94 | toggleMuteApp: PropTypes.func.isRequired, | 94 | toggleMuteApp: PropTypes.func.isRequired, |
95 | isAppMuted: PropTypes.bool.isRequired, | 95 | isAppMuted: PropTypes.bool.isRequired, |
96 | toggleCollapseMenu: PropTypes.func.isRequired, | ||
97 | isMenuCollapsed: PropTypes.bool.isRequired, | ||
96 | isWorkspaceDrawerOpen: PropTypes.bool.isRequired, | 98 | isWorkspaceDrawerOpen: PropTypes.bool.isRequired, |
97 | toggleWorkspaceDrawer: PropTypes.func.isRequired, | 99 | toggleWorkspaceDrawer: PropTypes.func.isRequired, |
98 | isTodosServiceActive: PropTypes.bool.isRequired, | 100 | isTodosServiceActive: PropTypes.bool.isRequired, |
@@ -105,10 +107,13 @@ class Sidebar extends Component { | |||
105 | }).isRequired, | 107 | }).isRequired, |
106 | }; | 108 | }; |
107 | 109 | ||
108 | state = { | 110 | constructor(props) { |
109 | tooltipEnabled: true, | 111 | super(props); |
110 | isCollapsed: false | 112 | |
111 | }; | 113 | this.state = { |
114 | tooltipEnabled: true, | ||
115 | }; | ||
116 | } | ||
112 | 117 | ||
113 | componentDidUpdate() { | 118 | componentDidUpdate() { |
114 | ReactTooltip.rebuild(); | 119 | ReactTooltip.rebuild(); |
@@ -122,10 +127,6 @@ class Sidebar extends Component { | |||
122 | this.setState({ tooltipEnabled: false }); | 127 | this.setState({ tooltipEnabled: false }); |
123 | } | 128 | } |
124 | 129 | ||
125 | collapseMenu() { | ||
126 | this.setState((prevState) => ({ isCollapsed: !prevState.isCollapsed })); | ||
127 | } | ||
128 | |||
129 | updateToolTip() { | 130 | updateToolTip() { |
130 | this.disableToolTip(); | 131 | this.disableToolTip(); |
131 | setTimeout(this.enableToolTip.bind(this)); | 132 | setTimeout(this.enableToolTip.bind(this)); |
@@ -135,6 +136,7 @@ class Sidebar extends Component { | |||
135 | const { | 136 | const { |
136 | openSettings, | 137 | openSettings, |
137 | toggleMuteApp, | 138 | toggleMuteApp, |
139 | toggleCollapseMenu, | ||
138 | isAppMuted, | 140 | isAppMuted, |
139 | isWorkspaceDrawerOpen, | 141 | isWorkspaceDrawerOpen, |
140 | toggleWorkspaceDrawer, | 142 | toggleWorkspaceDrawer, |
@@ -167,9 +169,11 @@ class Sidebar extends Component { | |||
167 | !hideNotificationsButton, | 169 | !hideNotificationsButton, |
168 | !hideSettingsButton, | 170 | !hideSettingsButton, |
169 | !hideSplitModeButton, | 171 | !hideSplitModeButton, |
170 | todosStore.isFeatureEnabledByUser | 172 | todosStore.isFeatureEnabledByUser, |
171 | ].filter(Boolean).length; | 173 | ].filter(Boolean).length; |
172 | 174 | ||
175 | const { isMenuCollapsed } = stores.settings.all.app; | ||
176 | |||
173 | return ( | 177 | return ( |
174 | <div className="sidebar"> | 178 | <div className="sidebar"> |
175 | <Tabbar | 179 | <Tabbar |
@@ -179,25 +183,26 @@ class Sidebar extends Component { | |||
179 | useVerticalStyle={stores.settings.all.app.useVerticalStyle} | 183 | useVerticalStyle={stores.settings.all.app.useVerticalStyle} |
180 | /> | 184 | /> |
181 | <> | 185 | <> |
182 | {numberActiveButtons <= 1 || hideCollapseButton ? ( | 186 | {numberActiveButtons <= 1 || hideCollapseButton ? null : ( |
183 | null | ||
184 | ) : | ||
185 | <button | 187 | <button |
186 | type="button" | 188 | type="button" |
187 | onClick={() => this.collapseMenu()} | 189 | onClick={() => toggleCollapseMenu()} |
188 | className="sidebar__button sidebar__button--hamburger-menu" | 190 | className="sidebar__button sidebar__button--hamburger-menu" |
189 | > | 191 | > |
190 | {this.state.isCollapsed ? | 192 | {isMenuCollapsed && !useVerticalStyle ? ( |
191 | <Icon icon={mdiMenu} size={1.5} /> | 193 | <Icon icon={mdiMenu} size={1.5} /> |
192 | : | 194 | ) : null} |
193 | (useVerticalStyle) ? | 195 | |
194 | <Icon icon={mdiChevronRight} size={1.5} /> | 196 | {isMenuCollapsed && useVerticalStyle ? ( |
195 | : | 197 | <Icon icon={mdiChevronRight} size={1.5} /> |
196 | <Icon icon={mdiChevronDown} size={1.5} /> | 198 | ) : null} |
197 | } | 199 | |
200 | {!isMenuCollapsed ? ( | ||
201 | <Icon icon={mdiChevronDown} size={1.5} /> | ||
202 | ) : null} | ||
198 | </button> | 203 | </button> |
199 | } | 204 | )} |
200 | {!hideRecipesButton && !this.state.isCollapsed ? ( | 205 | {!hideRecipesButton && !isMenuCollapsed ? ( |
201 | <button | 206 | <button |
202 | type="button" | 207 | type="button" |
203 | onClick={() => openSettings({ path: 'recipes' })} | 208 | onClick={() => openSettings({ path: 'recipes' })} |
@@ -209,7 +214,7 @@ class Sidebar extends Component { | |||
209 | <Icon icon={mdiPlusBox} size={1.5} /> | 214 | <Icon icon={mdiPlusBox} size={1.5} /> |
210 | </button> | 215 | </button> |
211 | ) : null} | 216 | ) : null} |
212 | {!hideSplitModeButton && !this.state.isCollapsed ? ( | 217 | {!hideSplitModeButton && !isMenuCollapsed ? ( |
213 | <button | 218 | <button |
214 | type="button" | 219 | type="button" |
215 | onClick={() => { | 220 | onClick={() => { |
@@ -228,7 +233,7 @@ class Sidebar extends Component { | |||
228 | <Icon icon={mdiViewSplitVertical} size={1.5} /> | 233 | <Icon icon={mdiViewSplitVertical} size={1.5} /> |
229 | </button> | 234 | </button> |
230 | ) : null} | 235 | ) : null} |
231 | {!hideWorkspacesButton && !this.state.isCollapsed ? ( | 236 | {!hideWorkspacesButton && !isMenuCollapsed ? ( |
232 | <button | 237 | <button |
233 | type="button" | 238 | type="button" |
234 | onClick={() => { | 239 | onClick={() => { |
@@ -245,7 +250,7 @@ class Sidebar extends Component { | |||
245 | <Icon icon={mdiViewGrid} size={1.5} /> | 250 | <Icon icon={mdiViewGrid} size={1.5} /> |
246 | </button> | 251 | </button> |
247 | ) : null} | 252 | ) : null} |
248 | {!hideNotificationsButton && !this.state.isCollapsed ? ( | 253 | {!hideNotificationsButton && !isMenuCollapsed ? ( |
249 | <button | 254 | <button |
250 | type="button" | 255 | type="button" |
251 | onClick={() => { | 256 | onClick={() => { |
@@ -262,7 +267,7 @@ class Sidebar extends Component { | |||
262 | <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} /> | 267 | <Icon icon={isAppMuted ? mdiBellOff : mdiBell} size={1.5} /> |
263 | </button> | 268 | </button> |
264 | ) : null} | 269 | ) : null} |
265 | {todosStore.isFeatureEnabledByUser && !this.state.isCollapsed ? ( | 270 | {todosStore.isFeatureEnabledByUser && !isMenuCollapsed ? ( |
266 | <button | 271 | <button |
267 | type="button" | 272 | type="button" |
268 | onClick={() => { | 273 | onClick={() => { |
@@ -303,26 +308,26 @@ class Sidebar extends Component { | |||
303 | {this.state.tooltipEnabled && ( | 308 | {this.state.tooltipEnabled && ( |
304 | <ReactTooltip place="right" type="dark" effect="solid" /> | 309 | <ReactTooltip place="right" type="dark" effect="solid" /> |
305 | )} | 310 | )} |
306 | {!hideSettingsButton && !this.state.isCollapsed ? ( | 311 | {!hideSettingsButton && !isMenuCollapsed ? ( |
307 | <button | 312 | <button |
308 | type="button" | 313 | type="button" |
309 | onClick={() => openSettings({ path: 'app' })} | 314 | onClick={() => openSettings({ path: 'app' })} |
310 | className="sidebar__button sidebar__button--settings" | 315 | className="sidebar__button sidebar__button--settings" |
311 | data-tip={`${intl.formatMessage( | 316 | data-tip={`${intl.formatMessage( |
312 | globalMessages.settings, | 317 | globalMessages.settings, |
313 | )} (${settingsShortcutKey(false)})`} | 318 | )} (${settingsShortcutKey(false)})`} |
314 | > | 319 | > |
315 | <Icon icon={mdiCog} size={1.5} /> | 320 | <Icon icon={mdiCog} size={1.5} /> |
316 | { | 321 | {this.props.stores.settings.app.automaticUpdates && |
317 | this.props.stores.settings.app.automaticUpdates && | 322 | (this.props.stores.app.updateStatus === |
318 | (this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.AVAILABLE || | 323 | this.props.stores.app.updateStatusTypes.AVAILABLE || |
319 | this.props.stores.app.updateStatus === this.props.stores.app.updateStatusTypes.DOWNLOADED || | 324 | this.props.stores.app.updateStatus === |
320 | this.props.showServicesUpdatedInfoBar) && ( | 325 | this.props.stores.app.updateStatusTypes.DOWNLOADED || |
321 | <span className="update-available">•</span> | 326 | this.props.showServicesUpdatedInfoBar) && ( |
322 | ) | 327 | <span className="update-available">•</span> |
323 | } | 328 | )} |
324 | </button> | 329 | </button> |
325 | ) : null} | 330 | ) : null} |
326 | </div> | 331 | </div> |
327 | ); | 332 | ); |
328 | } | 333 | } |
diff --git a/src/config.ts b/src/config.ts index 9a459f338..499f7b9e0 100644 --- a/src/config.ts +++ b/src/config.ts | |||
@@ -263,6 +263,7 @@ export const DEFAULT_APP_SETTINGS = { | |||
263 | searchEngine: SEARCH_ENGINE_STARTPAGE, | 263 | searchEngine: SEARCH_ENGINE_STARTPAGE, |
264 | useVerticalStyle: false, | 264 | useVerticalStyle: false, |
265 | hideCollapseButton: false, | 265 | hideCollapseButton: false, |
266 | isMenuCollapsed: false, | ||
266 | hideRecipesButton: false, | 267 | hideRecipesButton: false, |
267 | hideSplitModeButton: true, | 268 | hideSplitModeButton: true, |
268 | useGrayscaleServices: false, | 269 | useGrayscaleServices: false, |
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js index 45dd7d75d..1021ab4fa 100644 --- a/src/containers/layout/AppLayoutContainer.js +++ b/src/containers/layout/AppLayoutContainer.js | |||
@@ -69,7 +69,7 @@ class AppLayoutContainer extends Component { | |||
69 | 69 | ||
70 | const { retryRequiredRequests } = this.props.actions.requests; | 70 | const { retryRequiredRequests } = this.props.actions.requests; |
71 | 71 | ||
72 | const { installUpdate, toggleMuteApp } = this.props.actions.app; | 72 | const { installUpdate, toggleMuteApp, toggleCollapseMenu } = this.props.actions.app; |
73 | 73 | ||
74 | const { openSettings, closeSettings } = this.props.actions.ui; | 74 | const { openSettings, closeSettings } = this.props.actions.ui; |
75 | 75 | ||
@@ -113,6 +113,7 @@ class AppLayoutContainer extends Component { | |||
113 | services={services.allDisplayed} | 113 | services={services.allDisplayed} |
114 | setActive={setActive} | 114 | setActive={setActive} |
115 | isAppMuted={settings.all.app.isAppMuted} | 115 | isAppMuted={settings.all.app.isAppMuted} |
116 | isMenuCollapsed={settings.all.app.isMenuCollapsed} | ||
116 | openSettings={openSettings} | 117 | openSettings={openSettings} |
117 | closeSettings={closeSettings} | 118 | closeSettings={closeSettings} |
118 | reorder={reorder} | 119 | reorder={reorder} |
@@ -125,6 +126,7 @@ class AppLayoutContainer extends Component { | |||
125 | hibernateService={hibernate} | 126 | hibernateService={hibernate} |
126 | wakeUpService={awake} | 127 | wakeUpService={awake} |
127 | toggleMuteApp={toggleMuteApp} | 128 | toggleMuteApp={toggleMuteApp} |
129 | toggleCollapseMenu={toggleCollapseMenu} | ||
128 | toggleWorkspaceDrawer={workspaceActions.toggleWorkspaceDrawer} | 130 | toggleWorkspaceDrawer={workspaceActions.toggleWorkspaceDrawer} |
129 | isWorkspaceDrawerOpen={workspaceStore.isWorkspaceDrawerOpen} | 131 | isWorkspaceDrawerOpen={workspaceStore.isWorkspaceDrawerOpen} |
130 | showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar} | 132 | showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar} |
diff --git a/src/stores/AppStore.ts b/src/stores/AppStore.ts index f333a0060..05acbf33d 100644 --- a/src/stores/AppStore.ts +++ b/src/stores/AppStore.ts | |||
@@ -114,6 +114,9 @@ export default class AppStore extends TypedStore { | |||
114 | this.actions.app.healthCheck.listen(this._healthCheck.bind(this)); | 114 | this.actions.app.healthCheck.listen(this._healthCheck.bind(this)); |
115 | this.actions.app.muteApp.listen(this._muteApp.bind(this)); | 115 | this.actions.app.muteApp.listen(this._muteApp.bind(this)); |
116 | this.actions.app.toggleMuteApp.listen(this._toggleMuteApp.bind(this)); | 116 | this.actions.app.toggleMuteApp.listen(this._toggleMuteApp.bind(this)); |
117 | this.actions.app.toggleCollapseMenu.listen( | ||
118 | this._toggleCollapseMenu.bind(this), | ||
119 | ); | ||
117 | this.actions.app.clearAllCache.listen(this._clearAllCache.bind(this)); | 120 | this.actions.app.clearAllCache.listen(this._clearAllCache.bind(this)); |
118 | 121 | ||
119 | this.registerReactions([ | 122 | this.registerReactions([ |
@@ -449,6 +452,15 @@ export default class AppStore extends TypedStore { | |||
449 | }); | 452 | }); |
450 | } | 453 | } |
451 | 454 | ||
455 | @action _toggleCollapseMenu(): void { | ||
456 | this.actions.settings.update({ | ||
457 | type: 'app', | ||
458 | data: { | ||
459 | isMenuCollapsed: !this.stores.settings.all.app.isMenuCollapsed, | ||
460 | }, | ||
461 | }); | ||
462 | } | ||
463 | |||
452 | @action async _clearAllCache() { | 464 | @action async _clearAllCache() { |
453 | this.isClearingAllCache = true; | 465 | this.isClearingAllCache = true; |
454 | const clearAppCache = this.clearAppCacheRequest.execute(); | 466 | const clearAppCache = this.clearAppCacheRequest.execute(); |