development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-08-28 05:19:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Activity Bar Position Bottom with Menu (#208767)

Browse source 
fix #207242
This commit is contained in:
Benjamin Christopher Simmonds 2024-03-26 12:47:12 +01:00 committed by GitHub
parent 9fcefcb44b
commit 9ed28b5d67
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 41 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/vs/base/browser/ui/menu/menu.ts
View file

@ -31,11 +31,21 @@ export const MENU_ESCAPED_MNEMONIC_REGEX = /(&)?(&)([^\s&])/g;
export enum Direction {
export enum HorizontalDirection {
Right,
Left
}
export enum VerticalDirection {
Above,
Below
}
export interface IMenuDirection {
horizontal: HorizontalDirection;
vertical: VerticalDirection;
}
export interface IMenuOptions {
context?: unknown;
actionViewItemProvider?: IActionViewItemProvider;
@ -44,7 +54,7 @@ export interface IMenuOptions {
ariaLabel?: string;
enableMnemonics?: boolean;
anchorAlignment?: AnchorAlignment;
expandDirection?: Direction;
expandDirection?: IMenuDirection;
useEventAsContext?: boolean;
submenuIds?: Set<string>;
}
@ -725,7 +735,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
private mouseOver: boolean = false;
private showScheduler: RunOnceScheduler;
private hideScheduler: RunOnceScheduler;
private expandDirection: Direction;
private expandDirection: IMenuDirection;
constructor(
action: IAction,
@ -736,7 +746,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
) {
super(action, action, submenuOptions, menuStyles);
this.expandDirection = submenuOptions && submenuOptions.expandDirection !== undefined ? submenuOptions.expandDirection : Direction.Right;
this.expandDirection = submenuOptions && submenuOptions.expandDirection !== undefined ? submenuOptions.expandDirection : { horizontal: HorizontalDirection.Right, vertical: VerticalDirection.Below };
this.showScheduler = new RunOnceScheduler(() => {
if (this.mouseOver) {
@ -850,11 +860,11 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
}
}
private calculateSubmenuMenuLayout(windowDimensions: Dimension, submenu: Dimension, entry: IDomNodePagePosition, expandDirection: Direction): { top: number; left: number } {
private calculateSubmenuMenuLayout(windowDimensions: Dimension, submenu: Dimension, entry: IDomNodePagePosition, expandDirection: IMenuDirection): { top: number; left: number } {
const ret = { top: 0, left: 0 };
// Start with horizontal
ret.left = layout(windowDimensions.width, submenu.width, { position: expandDirection === Direction.Right ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After, offset: entry.left, size: entry.width });
ret.left = layout(windowDimensions.width, submenu.width, { position: expandDirection.horizontal === HorizontalDirection.Right ? LayoutAnchorPosition.Before : LayoutAnchorPosition.After, offset: entry.left, size: entry.width });
// We don't have enough room to layout the menu fully, so we are overlapping the menu
if (ret.left >= entry.left && ret.left < entry.left + entry.width) {

25
src/vs/base/browser/ui/menu/menubar.ts
View file

@ -8,7 +8,7 @@ import * as DOM from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { StandardMouseEvent } from 'vs/base/browser/mouseEvent';
import { EventType, Gesture, GestureEvent } from 'vs/base/browser/touch';
import { cleanMnemonic, Direction, IMenuOptions, IMenuStyles, Menu, MENU_ESCAPED_MNEMONIC_REGEX, MENU_MNEMONIC_REGEX } from 'vs/base/browser/ui/menu/menu';
import { cleanMnemonic, HorizontalDirection, IMenuDirection, IMenuOptions, IMenuStyles, Menu, MENU_ESCAPED_MNEMONIC_REGEX, MENU_MNEMONIC_REGEX, VerticalDirection } from 'vs/base/browser/ui/menu/menu';
import { ActionRunner, IAction, IActionRunner, Separator, SubmenuAction } from 'vs/base/common/actions';
import { asArray } from 'vs/base/common/arrays';
import { RunOnceScheduler } from 'vs/base/common/async';
@ -32,7 +32,7 @@ export interface IMenuBarOptions {
visibility?: string;
getKeybinding?: (action: IAction) => ResolvedKeybinding | undefined;
alwaysOnMnemonics?: boolean;
compactMode?: Direction;
compactMode?: IMenuDirection;
actionRunner?: IActionRunner;
getCompactMenuActions?: () => IAction[];
}
@ -333,9 +333,9 @@ export class MenuBar extends Disposable {
} else {
triggerKeys.push(KeyCode.Space);
if (this.options.compactMode === Direction.Right) {
if (this.options.compactMode?.horizontal === HorizontalDirection.Right) {
triggerKeys.push(KeyCode.RightArrow);
} else if (this.options.compactMode === Direction.Left) {
} else if (this.options.compactMode?.horizontal === HorizontalDirection.Left) {
triggerKeys.push(KeyCode.LeftArrow);
}
}
@ -1007,18 +1007,25 @@ export class MenuBar extends Disposable {
const titleBoundingRect = customMenu.titleElement.getBoundingClientRect();
const titleBoundingRectZoom = DOM.getDomNodeZoomLevel(customMenu.titleElement);
if (this.options.compactMode === Direction.Right) {
menuHolder.style.top = `${titleBoundingRect.top}px`;
if (this.options.compactMode?.horizontal === HorizontalDirection.Right) {
menuHolder.style.left = `${titleBoundingRect.left + this.container.clientWidth}px`;
} else if (this.options.compactMode === Direction.Left) {
} else if (this.options.compactMode?.horizontal === HorizontalDirection.Left) {
menuHolder.style.top = `${titleBoundingRect.top}px`;
menuHolder.style.right = `${this.container.clientWidth}px`;
menuHolder.style.left = 'auto';
} else {
menuHolder.style.top = `${titleBoundingRect.bottom * titleBoundingRectZoom}px`;
menuHolder.style.left = `${titleBoundingRect.left * titleBoundingRectZoom}px`;
}
if (this.options.compactMode?.vertical === VerticalDirection.Above) {
// TODO@benibenj Do not hardcode the height of the menu holder
menuHolder.style.top = `${titleBoundingRect.top - this.menus.length * 30 + this.container.clientHeight}px`;
} else if (this.options.compactMode?.vertical === VerticalDirection.Below) {
menuHolder.style.top = `${titleBoundingRect.top}px`;
} else {
menuHolder.style.top = `${titleBoundingRect.bottom * titleBoundingRectZoom}px`;
}
customMenu.buttonElement.appendChild(menuHolder);
const menuOptions: IMenuOptions = {
@ -1026,7 +1033,7 @@ export class MenuBar extends Disposable {
actionRunner: this.actionRunner,
enableMnemonics: this.options.alwaysOnMnemonics || (this.mnemonicsInUse && this.options.enableMnemonics),
ariaLabel: customMenu.buttonElement.getAttribute('aria-label') ?? undefined,
expandDirection: this.isCompact ? this.options.compactMode : Direction.Right,
expandDirection: this.isCompact ? this.options.compactMode : { horizontal: HorizontalDirection.Right, vertical: VerticalDirection.Below },
useEventAsContext: true
};

12
src/vs/workbench/browser/parts/titlebar/menubarControl.ts
View file

@ -25,7 +25,7 @@ import { INotificationService, Severity } from 'vs/platform/notification/common/
import { IPreferencesService } from 'vs/workbench/services/preferences/common/preferences';
import { IWorkbenchEnvironmentService } from 'vs/workbench/services/environment/common/environmentService';
import { MenuBar, IMenuBarOptions } from 'vs/base/browser/ui/menu/menubar';
import { Direction } from 'vs/base/browser/ui/menu/menu';
import { HorizontalDirection, IMenuDirection, VerticalDirection } from 'vs/base/browser/ui/menu/menu';
import { mnemonicMenuLabel, unmnemonicLabel } from 'vs/base/common/labels';
import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
import { isFullscreen, onDidChangeFullscreen } from 'vs/base/browser/browser';
@ -41,6 +41,7 @@ import { isICommandActionToggleInfo } from 'vs/platform/action/common/action';
import { createAndFillInContextMenuActions } from 'vs/platform/actions/browser/menuEntryActionViewItem';
import { defaultMenuStyles } from 'vs/platform/theme/browser/defaultStyles';
import { mainWindow } from 'vs/base/browser/window';
import { ActivityBarPosition } from 'vs/workbench/services/layout/browser/layoutService';
export type IOpenRecentAction = IAction & { uri: URI; remoteAuthority?: string };
@ -536,14 +537,19 @@ export class CustomMenubarControl extends MenubarControl {
return enableMenuBarMnemonics && (!isWeb || isFullscreen(mainWindow));
}
private get currentCompactMenuMode(): Direction | undefined {
private get currentCompactMenuMode(): IMenuDirection | undefined {
if (this.currentMenubarVisibility !== 'compact') {
return undefined;
}
// Menu bar lives in activity bar and should flow based on its location
const currentSidebarLocation = this.configurationService.getValue<string>('workbench.sideBar.location');
return currentSidebarLocation === 'right' ? Direction.Left : Direction.Right;
const horizontalDirection = currentSidebarLocation === 'right' ? HorizontalDirection.Left : HorizontalDirection.Right;
const activityBarLocation = this.configurationService.getValue<string>('workbench.activityBar.location');
const verticalDirection = activityBarLocation === ActivityBarPosition.BOTTOM ? VerticalDirection.Above : VerticalDirection.Below;
return { horizontal: horizontalDirection, vertical: verticalDirection };
}
private onDidVisibilityChange(visible: boolean): void {