Skip to content

Commit

Permalink
Allow menubar to convert into hamburger below threshold (#155223)
Browse files Browse the repository at this point in the history
fixes #152906
  • Loading branch information
sbatten authored Jul 14, 2022
1 parent 29a4da1 commit c41b1ca
Show file tree
Hide file tree
Showing 6 changed files with 27 additions and 28 deletions.
3 changes: 1 addition & 2 deletions src/vs/base/browser/ui/menu/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,7 @@ export const MENU_ESCAPED_MNEMONIC_REGEX = /(&)?(&)([^\s&])/g;

export enum Direction {
Right,
Left,
Down
Left
}

export interface IMenuOptions {
Expand Down
5 changes: 5 additions & 0 deletions src/vs/base/browser/ui/menu/menubar.css
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@
overflow: hidden;
}

.menubar.overflow-menu-only {
width: 38px;
}

.fullscreen .menubar:not(.compact) {
margin: 0px;
padding: 4px 5px;
Expand Down Expand Up @@ -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;
}
Expand Down
22 changes: 20 additions & 2 deletions src/vs/base/browser/ui/menu/menubar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down Expand Up @@ -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;
Expand All @@ -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 = [];
Expand Down Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
16 changes: 0 additions & 16 deletions src/vs/workbench/browser/parts/titlebar/menubarControl.ts
Original file line number Diff line number Diff line change
Expand Up @@ -581,17 +581,6 @@ export class CustomMenubarControl extends MenubarControl {
return getMenuBarVisibility(this.configurationService);
}

private get currentCommandCenterEnabled(): boolean {
const settingValue = this.configurationService.getValue<boolean>('window.commandCenter');

let enableCommandCenter = false;
if (typeof settingValue === 'boolean') {
enableCommandCenter = !!settingValue;
}

return enableCommandCenter;
}

private get currentDisableMenuBarAltFocus(): boolean {
const settingValue = this.configurationService.getValue<boolean>('window.customMenuBarAltFocus');

Expand Down Expand Up @@ -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;
}

Expand Down
8 changes: 0 additions & 8 deletions src/vs/workbench/browser/parts/titlebar/titlebarPart.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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')) {
Expand Down

0 comments on commit c41b1ca

Please sign in to comment.