From c41b1ca9563e977158c49c097038950e106482fe Mon Sep 17 00:00:00 2001 From: SteVen Batten <6561887+sbatten@users.noreply.github.com> Date: Thu, 14 Jul 2022 14:40:53 -0700 Subject: [PATCH] Allow menubar to convert into hamburger below threshold (#155223) fixes #152906 --- src/vs/base/browser/ui/menu/menu.ts | 3 +-- src/vs/base/browser/ui/menu/menubar.css | 5 +++++ src/vs/base/browser/ui/menu/menubar.ts | 22 +++++++++++++++++-- .../parts/titlebar/media/titlebarpart.css | 1 + .../browser/parts/titlebar/menubarControl.ts | 16 -------------- .../browser/parts/titlebar/titlebarPart.ts | 8 ------- 6 files changed, 27 insertions(+), 28 deletions(-) diff --git a/src/vs/base/browser/ui/menu/menu.ts b/src/vs/base/browser/ui/menu/menu.ts index dce1f797febb1..7a22cb3503899 100644 --- a/src/vs/base/browser/ui/menu/menu.ts +++ b/src/vs/base/browser/ui/menu/menu.ts @@ -33,8 +33,7 @@ export const MENU_ESCAPED_MNEMONIC_REGEX = /(&)?(&)([^\s&])/g; export enum Direction { Right, - Left, - Down + Left } export interface IMenuOptions { diff --git a/src/vs/base/browser/ui/menu/menubar.css b/src/vs/base/browser/ui/menu/menubar.css index 64e309bf5dc54..3a65f9a882985 100644 --- a/src/vs/base/browser/ui/menu/menubar.css +++ b/src/vs/base/browser/ui/menu/menubar.css @@ -13,6 +13,10 @@ overflow: hidden; } +.menubar.overflow-menu-only { + width: 38px; +} + .fullscreen .menubar:not(.compact) { margin: 0px; padding: 4px 5px; @@ -93,6 +97,7 @@ justify-content: center; } +.menubar:not(.compact) .menubar-menu-button:first-child .toolbar-toggle-more::before, .menubar.compact .toolbar-toggle-more::before { content: "\eb94" !important; } diff --git a/src/vs/base/browser/ui/menu/menubar.ts b/src/vs/base/browser/ui/menu/menubar.ts index 10dd697e7a4bc..572b33983ccba 100644 --- a/src/vs/base/browser/ui/menu/menubar.ts +++ b/src/vs/base/browser/ui/menu/menubar.ts @@ -334,8 +334,6 @@ export class MenuBar extends Disposable { triggerKeys.push(KeyCode.RightArrow); } else if (this.options.compactMode === Direction.Left) { triggerKeys.push(KeyCode.LeftArrow); - } else if (this.options.compactMode === Direction.Down) { - triggerKeys.push(KeyCode.DownArrow); } } @@ -475,6 +473,11 @@ export class MenuBar extends Disposable { return; } + const overflowMenuOnlyClass = 'overflow-menu-only'; + + // Remove overflow only restriction to allow the most space + this.container.classList.toggle(overflowMenuOnlyClass, false); + const sizeAvailable = this.container.offsetWidth; let currentSize = 0; let full = this.isCompact; @@ -501,6 +504,18 @@ export class MenuBar extends Disposable { } } + + // If below minimium menu threshold, show the overflow menu only as hamburger menu + if (this.numMenusShown - 1 <= showableMenus.length / 2) { + for (const menuBarMenu of showableMenus) { + menuBarMenu.buttonElement.style.visibility = 'hidden'; + } + + full = true; + this.numMenusShown = 0; + currentSize = 0; + } + // Overflow if (this.isCompact) { this.overflowMenu.actions = []; @@ -540,6 +555,9 @@ export class MenuBar extends Disposable { this.container.appendChild(this.overflowMenu.buttonElement); this.overflowMenu.buttonElement.style.visibility = 'hidden'; } + + // If we are only showing the overflow, add this class to avoid taking up space + this.container.classList.toggle(overflowMenuOnlyClass, this.numMenusShown === 0); } private updateLabels(titleElement: HTMLElement, buttonElement: HTMLElement, label: string): void { diff --git a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css index 29f1142364e59..9b4d5aada91bc 100644 --- a/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css +++ b/src/vs/workbench/browser/parts/titlebar/media/titlebarpart.css @@ -133,6 +133,7 @@ /* width */ width: 16px; + flex-shrink: 0; } .monaco-workbench .part.titlebar>.titlebar-container>.window-title>.command-center .action-item.quickopen>.action-label { diff --git a/src/vs/workbench/browser/parts/titlebar/menubarControl.ts b/src/vs/workbench/browser/parts/titlebar/menubarControl.ts index 6c0a24014c852..b431d4df48ebe 100644 --- a/src/vs/workbench/browser/parts/titlebar/menubarControl.ts +++ b/src/vs/workbench/browser/parts/titlebar/menubarControl.ts @@ -581,17 +581,6 @@ export class CustomMenubarControl extends MenubarControl { return getMenuBarVisibility(this.configurationService); } - private get currentCommandCenterEnabled(): boolean { - const settingValue = this.configurationService.getValue('window.commandCenter'); - - let enableCommandCenter = false; - if (typeof settingValue === 'boolean') { - enableCommandCenter = !!settingValue; - } - - return enableCommandCenter; - } - private get currentDisableMenuBarAltFocus(): boolean { const settingValue = this.configurationService.getValue('window.customMenuBarAltFocus'); @@ -637,11 +626,6 @@ export class CustomMenubarControl extends MenubarControl { private get currentCompactMenuMode(): Direction | undefined { if (this.currentMenubarVisibility !== 'compact') { - // With the command center enabled, use compact menu in title bar and flow to the right - if (this.currentCommandCenterEnabled) { - return Direction.Down; - } - return undefined; } diff --git a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts index 2c7855bd9cc22..17b5eb918bb95 100644 --- a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts +++ b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts @@ -157,14 +157,6 @@ export class TitlebarPart extends Part implements ITitleService { this.installMenubar(); } } - - // Trigger a re-install of the menubar with command center change - if (event.affectsConfiguration('window.commandCenter')) { - if (this.currentMenubarVisibility !== 'compact') { - this.uninstallMenubar(); - this.installMenubar(); - } - } } if (this.titleBarStyle !== 'native' && this.layoutControls && event.affectsConfiguration('workbench.layoutControl.enabled')) {