microsoft/vscode · #334322
Add layout density options for modern UI in `Customize Layout` menu
src/vs/workbench/browser/actions/layoutActions.ts28 + / 2 −
@@ -8,7 +8,7 @@ import { MenuId, MenuRegistry, registerAction2, Action2 } from '../../../platfor import { Categories } from '../../../platform/action/common/actionCommonCategories.js'; import { IConfigurationService } from '../../../platform/configuration/common/configuration.js'; import { alert } from '../../../base/browser/ui/aria/aria.js';-import { EditorActionsLocation, EditorTabsMode, IWorkbenchLayoutService, LayoutSettings, Parts, Position, ZenModeSettings, positionToString } from '../../services/layout/browser/layoutService.js';+import { EditorActionsLocation, EditorTabsMode, IWorkbenchLayoutService, LayoutSettings, ModernUIDensity, Parts, Position, ZenModeSettings, positionToString } from '../../services/layout/browser/layoutService.js'; import { ServicesAccessor, IInstantiationService } from '../../../platform/instantiation/common/instantiation.js'; import { KeyMod, KeyCode } from '../../../base/common/keyCodes.js'; import { isWindows, isLinux, isWeb, isMacintosh, isNative } from '../../../base/common/platform.js';@@ -54,6 +54,9 @@ const panelAlignmentJustifyIcon = registerIcon('panel-align-justify', Codicon.la const quickInputAlignmentTopIcon = registerIcon('quickInputAlignmentTop', Codicon.arrowUp, localize('quickInputAlignmentTop', "Represents quick input alignment set to the top")); const quickInputAlignmentCenterIcon = registerIcon('quickInputAlignmentCenter', Codicon.circle, localize('quickInputAlignmentCenter', "Represents quick input alignment set to the center")); +const layoutDensityDefaultIcon = registerIcon('layout-density-default-icon', Codicon.layoutDensityDefault, localize('layoutDensityDefaultIcon', "Represents the default layout density"));+const layoutDensityCompactIcon = registerIcon('layout-density-compact-icon', Codicon.layoutDensityCompact, localize('layoutDensityCompactIcon', "Represents the compact layout density"));+ const fullscreenIcon = registerIcon('fullscreen', Codicon.screenFull, localize('fullScreenIcon', "Represents full screen")); const centerLayoutIcon = registerIcon('centerLayoutIcon', Codicon.layoutCentered, localize('centerLayoutIcon', "Represents centered layout mode")); const zenModeIcon = registerIcon('zenMode', Codicon.target, localize('zenModeIcon', "Represents zen mode"));@@ -1385,18 +1388,28 @@ const QuickInputActions: CustomizeLayoutItem[] = [ CreateOptionLayoutItem('workbench.action.alignQuickInputCenter', QuickInputAlignmentContextKey.isEqualTo('center'), localize('center', "Center"), quickInputAlignmentCenterIcon), ]; +const ModernUIEnabledContext = ContextKeyExpr.equals(`config.${LayoutSettings.MODERN_UI}`, true);++const LayoutDensityActions: CustomizeLayoutItem[] = [+ CreateOptionLayoutItem(`workbench.action.setLayoutDensity.${ModernUIDensity.Default}`, ContextKeyExpr.equals(`config.${LayoutSettings.MODERN_UI_DENSITY}`, ModernUIDensity.Default), localize('layoutDensityDefault', "Default"), layoutDensityDefaultIcon),+ CreateOptionLayoutItem(`workbench.action.setLayoutDensity.${ModernUIDensity.Compact}`, ContextKeyExpr.equals(`config.${LayoutSettings.MODERN_UI_DENSITY}`, ModernUIDensity.Compact), localize('layoutDensityCompact', "Compact"), layoutDensityCompactIcon),+];+ const MiscLayoutOptions: CustomizeLayoutItem[] = [ CreateOptionLayoutItem('workbench.action.toggleFullScreen', IsMainWindowFullscreenContext, localize('fullscreen', "Full Screen"), fullscreenIcon), CreateOptionLayoutItem('workbench.action.toggleZenMode', InEditorZenModeContext, localize('zenMode', "Zen Mode"), zenModeIcon), CreateOptionLayoutItem('workbench.action.toggleCenteredLayout', IsMainEditorCenteredLayoutContext, localize('centeredLayout', "Centered Layout"), centerLayoutIcon), ]; const LayoutContextKeySet = new Set<string>();-for (const { active } of [...ToggleVisibilityActions, ...MoveSideBarActions, ...AlignPanelActions, ...QuickInputActions, ...MiscLayoutOptions]) {+for (const { active } of [...ToggleVisibilityActions, ...MoveSideBarActions, ...AlignPanelActions, ...QuickInputActions, ...LayoutDensityActions, ...MiscLayoutOptions]) { for (const key of active.keys()) { LayoutContextKeySet.add(key); } }+for (const key of ModernUIEnabledContext.keys()) {+ LayoutContextKeySet.add(key);+} /** * Matches the title bar's `editorActionsEnabled` getter: true when editor@@ -1484,6 +1497,17 @@ registerAction2(class CustomizeLayoutAction extends Action2 { ] }; };+ const layoutDensityItems: QuickPickItem[] = [];+ if (ModernUIEnabledContext.evaluate(contextKeyService.getContext(null))) {+ layoutDensityItems.push(+ {+ type: 'separator',+ label: localize('layoutDensity', "Layout Density")+ },+ ...LayoutDensityActions.map(toQuickPickItem)+ );+ }+ return [ { type: 'separator',@@ -1505,6 +1529,7 @@ registerAction2(class CustomizeLayoutAction extends Action2 { label: localize('quickOpen', "Quick Input Position") }, ...QuickInputActions.map(toQuickPickItem),+ ...layoutDensityItems, { type: 'separator', label: localize('layoutModes', "Modes"),@@ -1593,6 +1618,7 @@ registerAction2(class CustomizeLayoutAction extends Action2 { resetSetting('workbench.sideBar.location'); resetSetting('workbench.statusBar.visible'); resetSetting('workbench.panel.defaultLocation');+ resetSetting(LayoutSettings.MODERN_UI_DENSITY); if (!isMacintosh || !isNative) { resetSetting('window.menuBarVisibility');