From 24bdb7b9fb90aaa3b778256a08f5a76587f39a76 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Thu, 10 May 2018 07:13:10 +0200 Subject: [PATCH] grid - support to flip editor layout --- src/vs/code/electron-main/menus.ts | 2 +- .../browser/actions/media/actions.css | 6 ++-- .../browser/actions/toggleEditorLayout.ts | 30 ++++++---------- .../browser/parts/editor/editorPart.ts | 36 +++++++++---------- .../browser/parts/editor2/nextEditorPart.ts | 14 ++++++-- .../group/common/nextEditorGroupsService.ts | 15 ++++++++ 6 files changed, 57 insertions(+), 46 deletions(-) diff --git a/src/vs/code/electron-main/menus.ts b/src/vs/code/electron-main/menus.ts index 2b9cc41a2e7..12c76d973a6 100644 --- a/src/vs/code/electron-main/menus.ts +++ b/src/vs/code/electron-main/menus.ts @@ -691,7 +691,7 @@ export class CodeMenu { const toggleCenteredLayout = this.createMenuItem(nls.localize('miToggleCenteredLayout', "Toggle Centered Layout"), 'workbench.action.toggleCenteredLayout'); const toggleMenuBar = this.createMenuItem(nls.localize({ key: 'miToggleMenuBar', comment: ['&& denotes a mnemonic'] }, "Toggle Menu &&Bar"), 'workbench.action.toggleMenuBar'); const splitEditor = this.createMenuItem(nls.localize({ key: 'miSplitEditor', comment: ['&& denotes a mnemonic'] }, "Split &&Editor"), 'workbench.action.splitEditor'); - const toggleEditorLayout = this.createMenuItem(nls.localize({ key: 'miToggleEditorLayout', comment: ['&& denotes a mnemonic'] }, "Toggle Editor Group &&Layout"), 'workbench.action.toggleEditorGroupLayout'); + const toggleEditorLayout = this.createMenuItem(nls.localize({ key: 'miToggleEditorLayout', comment: ['&& denotes a mnemonic'] }, "Flip Editor Group &&Layout"), 'workbench.action.toggleEditorGroupLayout'); const toggleSidebar = this.createMenuItem(nls.localize({ key: 'miToggleSidebar', comment: ['&& denotes a mnemonic'] }, "&&Toggle Side Bar"), 'workbench.action.toggleSidebarVisibility'); let moveSideBarLabel: string; diff --git a/src/vs/workbench/browser/actions/media/actions.css b/src/vs/workbench/browser/actions/media/actions.css index 351a1ce74e6..8edf1d21a2f 100644 --- a/src/vs/workbench/browser/actions/media/actions.css +++ b/src/vs/workbench/browser/actions/media/actions.css @@ -3,11 +3,11 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.vs .monaco-workbench .toggle-editor-layout { +.vs .monaco-workbench .flip-editor-layout { background-image: url('editor-layout.svg'); } -.vs-dark .monaco-workbench .toggle-editor-layout, -.hc-black .monaco-workbench .toggle-editor-layout { +.vs-dark .monaco-workbench .flip-editor-layout, +.hc-black .monaco-workbench .flip-editor-layout { background-image: url('editor-layout-inverse.svg') !important; } diff --git a/src/vs/workbench/browser/actions/toggleEditorLayout.ts b/src/vs/workbench/browser/actions/toggleEditorLayout.ts index a02f3b68235..8efb05b33bd 100644 --- a/src/vs/workbench/browser/actions/toggleEditorLayout.ts +++ b/src/vs/workbench/browser/actions/toggleEditorLayout.ts @@ -12,53 +12,45 @@ import { Action } from 'vs/base/common/actions'; import { SyncActionDescriptor } from 'vs/platform/actions/common/actions'; import { IWorkbenchActionRegistry, Extensions } from 'vs/workbench/common/actions'; import { KeyMod, KeyCode } from 'vs/base/common/keyCodes'; -import { IEditorGroupService, GroupOrientation } from 'vs/workbench/services/group/common/groupService'; import { dispose, IDisposable } from 'vs/base/common/lifecycle'; import { CommandsRegistry } from 'vs/platform/commands/common/commands'; import { ServicesAccessor } from 'vs/platform/instantiation/common/instantiation'; +import { INextEditorGroupsService, GroupOrientation } from 'vs/workbench/services/group/common/nextEditorGroupsService'; export class ToggleEditorLayoutAction extends Action { public static readonly ID = 'workbench.action.toggleEditorGroupLayout'; - public static readonly LABEL = nls.localize('toggleEditorGroupLayout', "Toggle Editor Group Vertical/Horizontal Layout"); + public static readonly LABEL = nls.localize('flipLayout', "Flip Editor Group Layout"); private toDispose: IDisposable[]; constructor( id: string, label: string, - @IEditorGroupService private editorGroupService: IEditorGroupService + @INextEditorGroupsService private editorGroupService: INextEditorGroupsService ) { super(id, label); this.toDispose = []; - this.class = 'toggle-editor-layout'; + this.class = 'flip-editor-layout'; this.updateEnablement(); - this.updateLabel(); this.registerListeners(); } private registerListeners(): void { - this.toDispose.push(this.editorGroupService.onEditorsChanged(() => this.updateEnablement())); - this.toDispose.push(this.editorGroupService.onGroupOrientationChanged(() => this.updateLabel())); - } - - private updateLabel(): void { - const editorGroupLayoutVertical = (this.editorGroupService.getGroupOrientation() !== 'horizontal'); - this.label = editorGroupLayoutVertical ? nls.localize('horizontalLayout', "Horizontal Editor Group Layout") : nls.localize('verticalLayout', "Vertical Editor Group Layout"); + this.toDispose.push(this.editorGroupService.onDidAddGroup(() => this.updateEnablement())); + this.toDispose.push(this.editorGroupService.onDidRemoveGroup(() => this.updateEnablement())); } private updateEnablement(): void { - this.enabled = this.editorGroupService.getStacksModel().groups.length > 0; + this.enabled = this.editorGroupService.count > 1; } public run(): TPromise { - const groupOrientiation = this.editorGroupService.getGroupOrientation(); - const newGroupOrientation: GroupOrientation = (groupOrientiation === 'vertical') ? 'horizontal' : 'vertical'; - - this.editorGroupService.setGroupOrientation(newGroupOrientation); + const newOrientation = (this.editorGroupService.orientation === GroupOrientation.VERTICAL) ? GroupOrientation.HORIZONTAL : GroupOrientation.VERTICAL; + this.editorGroupService.setGroupOrientation(newOrientation); return TPromise.as(null); } @@ -71,7 +63,7 @@ export class ToggleEditorLayoutAction extends Action { } CommandsRegistry.registerCommand('_workbench.editor.setGroupOrientation', function (accessor: ServicesAccessor, args: [GroupOrientation]) { - const editorGroupService = accessor.get(IEditorGroupService); + const editorGroupService = accessor.get(INextEditorGroupsService); const [orientation] = args; editorGroupService.setGroupOrientation(orientation); @@ -81,4 +73,4 @@ CommandsRegistry.registerCommand('_workbench.editor.setGroupOrientation', functi const registry = Registry.as(Extensions.WorkbenchActions); const group = nls.localize('view', "View"); -registry.registerWorkbenchAction(new SyncActionDescriptor(ToggleEditorLayoutAction, ToggleEditorLayoutAction.ID, ToggleEditorLayoutAction.LABEL, { primary: KeyMod.Shift | KeyMod.Alt | KeyCode.KEY_0, mac: { primary: KeyMod.CtrlCmd | KeyMod.Alt | KeyCode.KEY_0 } }), 'View: Toggle Editor Group Vertical/Horizontal Layout', group); \ No newline at end of file +registry.registerWorkbenchAction(new SyncActionDescriptor(ToggleEditorLayoutAction, ToggleEditorLayoutAction.ID, ToggleEditorLayoutAction.LABEL, { primary: KeyMod.Shift | KeyMod.Alt | KeyCode.KEY_0, mac: { primary: KeyMod.CtrlCmd | KeyMod.Alt | KeyCode.KEY_0 } }), 'View: Flip Editor Group Layout', group); \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/editor/editorPart.ts b/src/vs/workbench/browser/parts/editor/editorPart.ts index e715e419880..76853afc27d 100644 --- a/src/vs/workbench/browser/parts/editor/editorPart.ts +++ b/src/vs/workbench/browser/parts/editor/editorPart.ts @@ -304,26 +304,6 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService //#endregion - //#region TODO@grid group orientation - - public get onGroupOrientationChanged(): Event { - return this._onGroupOrientationChanged.event; - } - - public setGroupOrientation(orientation: GroupOrientation): void { - this.editorGroupsControl.setGroupOrientation(orientation); - this._onGroupOrientationChanged.fire(); - - // Rename groups when layout changes - this.renameGroups(); - } - - public getGroupOrientation(): GroupOrientation { - return this.editorGroupsControl.getGroupOrientation(); - } - - //#endregion - //#region TODO@grid replaceEditors() public replaceEditors(editors: { toReplace: EditorInput, replaceWith: EditorInput, options?: EditorOptions }[], position?: Position): TPromise { @@ -1085,6 +1065,22 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupService return editor; } + public get onGroupOrientationChanged(): Event { + return this._onGroupOrientationChanged.event; + } + + public setGroupOrientation(orientation: GroupOrientation): void { + this.editorGroupsControl.setGroupOrientation(orientation); + this._onGroupOrientationChanged.fire(); + + // Rename groups when layout changes + this.renameGroups(); + } + + public getGroupOrientation(): GroupOrientation { + return this.editorGroupsControl.getGroupOrientation(); + } + private updateTextCompareEditorVisible(): void { // this method was called whenever an editor got visible or hidden // this.textCompareEditorVisible = TextCompareEditorVisible.bindTo(contextKeyService); diff --git a/src/vs/workbench/browser/parts/editor2/nextEditorPart.ts b/src/vs/workbench/browser/parts/editor2/nextEditorPart.ts index 40f24042b55..b001fd5a93f 100644 --- a/src/vs/workbench/browser/parts/editor2/nextEditorPart.ts +++ b/src/vs/workbench/browser/parts/editor2/nextEditorPart.ts @@ -11,7 +11,7 @@ import { Part } from 'vs/workbench/browser/part'; import { Dimension, isAncestor, toggleClass, addClass, clearNode } from 'vs/base/browser/dom'; import { Event, Emitter, once } from 'vs/base/common/event'; import { contrastBorder, editorBackground } from 'vs/platform/theme/common/colorRegistry'; -import { INextEditorGroupsService, GroupDirection, IAddGroupOptions, GroupsArrangement } from 'vs/workbench/services/group/common/nextEditorGroupsService'; +import { INextEditorGroupsService, GroupDirection, IAddGroupOptions, GroupsArrangement, GroupOrientation } from 'vs/workbench/services/group/common/nextEditorGroupsService'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { Direction, SerializableGrid, Sizing, ISerializedGrid, Orientation, ISerializedNode } from 'vs/base/browser/ui/grid/grid'; import { GroupIdentifier, IWorkbenchEditorConfiguration } from 'vs/workbench/common/editor'; @@ -28,7 +28,7 @@ import { Scope } from 'vs/workbench/common/memento'; import { ISerializedEditorGroup, isSerializedEditorGroup } from 'vs/workbench/common/editor/editorStacksModel'; import { TValueCallback, TPromise } from 'vs/base/common/winjs.base'; import { always } from 'vs/base/common/async'; -import { GroupOrientation } from 'vs/workbench/services/group/common/groupService'; +import { GroupOrientation as LegacyGroupOrientation } from 'vs/workbench/services/group/common/groupService'; import { INotificationService, Severity } from 'vs/platform/notification/common/notification'; import { IWindowService } from 'vs/platform/windows/common/windows'; import { ILifecycleService, LifecyclePhase } from 'vs/platform/lifecycle/common/lifecycle'; @@ -164,6 +164,10 @@ export class NextEditorPart extends Part implements INextEditorGroupsService, IN return this.groupViews.size; } + get orientation(): GroupOrientation { + return this.gridWidget.orientation === Orientation.VERTICAL ? GroupOrientation.VERTICAL : GroupOrientation.HORIZONTAL; + } + getGroups(sortByMostRecentlyActive?: boolean): INextEditorGroupView[] { if (!sortByMostRecentlyActive) { return this.groups; @@ -232,6 +236,10 @@ export class NextEditorPart extends Part implements INextEditorGroupsService, IN } } + setGroupOrientation(orientation: GroupOrientation): void { + this.gridWidget.orientation = (orientation === GroupOrientation.HORIZONTAL) ? Orientation.HORIZONTAL : Orientation.VERTICAL; + } + addGroup(location: INextEditorGroupView | GroupIdentifier, direction: GroupDirection, options?: IAddGroupOptions): INextEditorGroupView { const locationView = this.assertGroupView(location); @@ -538,7 +546,7 @@ export class NextEditorPart extends Part implements INextEditorGroupsService, IN interface ILegacyEditorPartUIState { ratio: number[]; - groupOrientation: GroupOrientation; + groupOrientation: LegacyGroupOrientation; } interface ISerializedLegacyEditorStacksModel { diff --git a/src/vs/workbench/services/group/common/nextEditorGroupsService.ts b/src/vs/workbench/services/group/common/nextEditorGroupsService.ts index 1b7a47f7c37..ab2771736a8 100644 --- a/src/vs/workbench/services/group/common/nextEditorGroupsService.ts +++ b/src/vs/workbench/services/group/common/nextEditorGroupsService.ts @@ -19,6 +19,11 @@ export enum GroupDirection { RIGHT } +export enum GroupOrientation { + HORIZONTAL, + VERTICAL +} + export enum GroupsArrangement { /** @@ -86,6 +91,11 @@ export interface INextEditorGroupsService { */ readonly count: number; + /** + * The current layout orientation of the root group. + */ + readonly orientation: GroupOrientation; + /** * Get all groups that are currently visible in the editor area optionally * sorted by being most recent active. @@ -117,6 +127,11 @@ export interface INextEditorGroupsService { */ arrangeGroups(arrangement: GroupsArrangement): void; + /** + * Sets the orientation of the root group to be either vertical or horizontal. + */ + setGroupOrientation(orientation: GroupOrientation): void; + /** * Add a new group to the editor area. A new group is added by splitting a provided one in * one of the four directions.