From 864e932cd3d3f6adfd56edc6f7004b98b0c786ea Mon Sep 17 00:00:00 2001 From: SrTobi Date: Sun, 18 Feb 2018 00:57:06 +0100 Subject: [PATCH 01/17] added centered layout --- src/vs/code/electron-main/menus.ts | 2 + .../browser/actions/toggleCenteredLayout.ts | 36 ++++ .../parts/editor/editorGroupsControl.ts | 165 +++++++++++++++++- .../workbench/electron-browser/workbench.ts | 26 +++ .../services/part/common/partService.ts | 10 ++ .../workbench/test/workbenchTestServices.ts | 4 + src/vs/workbench/workbench.main.ts | 1 + 7 files changed, 241 insertions(+), 3 deletions(-) create mode 100644 src/vs/workbench/browser/actions/toggleCenteredLayout.ts diff --git a/src/vs/code/electron-main/menus.ts b/src/vs/code/electron-main/menus.ts index 6636672f4a2ca..c614533e20500 100644 --- a/src/vs/code/electron-main/menus.ts +++ b/src/vs/code/electron-main/menus.ts @@ -688,6 +688,7 @@ export class CodeMenu { const fullscreen = new MenuItem(this.withKeybinding('workbench.action.toggleFullScreen', { label: this.mnemonicLabel(nls.localize({ key: 'miToggleFullScreen', comment: ['&& denotes a mnemonic'] }, "Toggle &&Full Screen")), click: () => this.windowsMainService.getLastActiveWindow().toggleFullScreen(), enabled: this.windowsMainService.getWindowCount() > 0 })); const toggleZenMode = this.createMenuItem(nls.localize('miToggleZenMode', "Toggle Zen Mode"), 'workbench.action.toggleZenMode'); + 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'); @@ -747,6 +748,7 @@ export class CodeMenu { __separator__(), fullscreen, toggleZenMode, + toggleCenteredLayout, isWindows || isLinux ? toggleMenuBar : void 0, __separator__(), splitEditor, diff --git a/src/vs/workbench/browser/actions/toggleCenteredLayout.ts b/src/vs/workbench/browser/actions/toggleCenteredLayout.ts new file mode 100644 index 0000000000000..c2b82ed5ac1e3 --- /dev/null +++ b/src/vs/workbench/browser/actions/toggleCenteredLayout.ts @@ -0,0 +1,36 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Microsoft Corporation. All rights reserved. + * Licensed under the MIT License. See License.txt in the project root for license information. + *--------------------------------------------------------------------------------------------*/ + +import { TPromise } from 'vs/base/common/winjs.base'; +import nls = require('vs/nls'); +import { Action } from 'vs/base/common/actions'; +import { KeyCode, KeyMod, KeyChord } from 'vs/base/common/keyCodes'; +import { Registry } from 'vs/platform/registry/common/platform'; +import { SyncActionDescriptor } from 'vs/platform/actions/common/actions'; +import { IWorkbenchActionRegistry, Extensions } from 'vs/workbench/common/actions'; +import { IPartService } from 'vs/workbench/services/part/common/partService'; + +class ToggleCenteredLayout extends Action { + + public static readonly ID = 'workbench.action.toggleCenteredLayout'; + public static readonly LABEL = nls.localize('toggleCenteredLayout', "Toggle Centered Layout"); + + constructor( + id: string, + label: string, + @IPartService private partService: IPartService + ) { + super(id, label); + this.enabled = !!this.partService; + } + + public run(): TPromise { + this.partService.toggleCenteredLayout(); + return TPromise.as(null); + } +} + +const registry = Registry.as(Extensions.WorkbenchActions); +registry.registerWorkbenchAction(new SyncActionDescriptor(ToggleCenteredLayout, ToggleCenteredLayout.ID, ToggleCenteredLayout.LABEL, { primary: KeyChord(KeyMod.CtrlCmd | KeyCode.KEY_K, KeyCode.KEY_T) }), 'View: Toggle Centered Layout', nls.localize('view', "View")); \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index fde984c7ae936..50450a9a0441e 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -37,6 +37,8 @@ import { attachProgressBarStyler } from 'vs/platform/theme/common/styler'; import { IDisposable, combinedDisposable } from 'vs/base/common/lifecycle'; import { ResourcesDropHandler, LocalSelectionTransfer, DraggedEditorIdentifier } from 'vs/workbench/browser/dnd'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; +import { IPartService } from 'vs/workbench/services/part/common/partService'; +import { TextResourceEditor } from 'vs/workbench/browser/parts/editor/textResourceEditor'; export enum Rochade { NONE, @@ -101,6 +103,8 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro private static readonly EDITOR_TITLE_HEIGHT = 35; + private static readonly CENTERED_EDITOR_MIN_MARGIN = 10; + private static readonly SNAP_TO_MINIMIZED_THRESHOLD_WIDTH = 50; private static readonly SNAP_TO_MINIMIZED_THRESHOLD_HEIGHT = 20; @@ -125,6 +129,22 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro private sashTwo: Sash; private startSiloThreeSize: number; + // if the centered layout is activated, the editor inside of silo ONE is centered + // the silo will then contain: + // [left margin]|[editor]|[right margin] + // - The size of the editor is defined by centeredEditorSize + // - The position is defined by the ratio centeredEditorLeftMarginRatio = left-margin/(left-margin + editor + right-margin). + // - The two sashes can be used to control the size and position of the editor inside of the silo. + // - In order to seperate the two sashes from the sashes that control the size of bordering widgets + // CENTERED_EDITOR_MIN_MARGIN is forced as a minimum size for the two margins. + private centeredEditorActive: boolean; + private centeredEditorSashLeft: Sash; + private centeredEditorSashRight: Sash; + private centeredEditorPreferedSize: number; + private centeredEditorLeftMarginRatio: number; + private centeredEditorDragStartPosition: number; + private centeredEditorDragStartSize: number; + private visibleEditors: BaseEditor[]; private lastActiveEditor: BaseEditor; @@ -144,6 +164,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro groupOrientation: GroupOrientation, @IWorkbenchEditorService private editorService: IWorkbenchEditorService, @IEditorGroupService private editorGroupService: IEditorGroupService, + @IPartService private partService: IPartService, @IContextKeyService private contextKeyService: IContextKeyService, @IExtensionService private extensionService: IExtensionService, @IInstantiationService private instantiationService: IInstantiationService, @@ -193,6 +214,10 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro return this.layoutVertically ? EditorGroupsControl.MIN_EDITOR_WIDTH : EditorGroupsControl.MIN_EDITOR_HEIGHT; } + private get visibleSilos(): number { + return this.visibleEditors.reduce((acc, min) => min ? acc + 1 : acc, 0); + } + private isSiloMinimized(position: number): boolean { return this.silosSize[position] === this.minSize && this.silosMinimized[position]; } @@ -209,6 +234,22 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro }); } + private get centeredEditorAvailableSize(): number { + return this.silosSize[0] - EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN * 2; + } + + private get centeredEditorSize(): number { + return Math.min(this.centeredEditorAvailableSize, this.centeredEditorPreferedSize); + } + + private get centeredEditorPosition(): number { + return EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN + this.centeredEditorLeftMarginRatio * (this.centeredEditorAvailableSize - this.centeredEditorSize); + } + + private get centeredEditorEndPosition(): number { + return this.centeredEditorPosition + this.centeredEditorSize; + } + private get snapToMinimizeThresholdSize(): number { return this.layoutVertically ? EditorGroupsControl.SNAP_TO_MINIMIZED_THRESHOLD_WIDTH : EditorGroupsControl.SNAP_TO_MINIMIZED_THRESHOLD_HEIGHT; } @@ -969,6 +1010,23 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro // Silo Three this.silos[Position.THREE] = $(this.parent).div({ class: 'one-editor-silo editor-three' }); + // Center Layout stuff + this.centeredEditorSashLeft = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL }); + this.toUnbind.push(this.centeredEditorSashLeft.onDidStart(() => this.onCenterSashLeftDragStart())); + this.toUnbind.push(this.centeredEditorSashLeft.onDidChange((e: ISashEvent) => this.onCenterSashLeftDrag(e))); + this.toUnbind.push(this.centeredEditorSashLeft.onDidEnd(() => this.onCenterSashLeftDragEnd())); + this.toUnbind.push(this.centeredEditorSashLeft.onDidReset(() => this.resetCenteredEditor())); + + this.centeredEditorSashRight = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL }); + this.toUnbind.push(this.centeredEditorSashRight.onDidStart(() => this.onCenterSashRightDragStart())); + this.toUnbind.push(this.centeredEditorSashRight.onDidChange((e: ISashEvent) => this.onCenterSashRightDrag(e))); + this.toUnbind.push(this.centeredEditorSashRight.onDidEnd(() => this.onCenterSashRightDragEnd())); + this.toUnbind.push(this.centeredEditorSashRight.onDidReset(() => this.resetCenteredEditor())); + + this.centeredEditorActive = false; + this.centeredEditorLeftMarginRatio = 0.5; + this.centeredEditorPreferedSize = -1; // set this later if we know the container size + // For each position POSITIONS.forEach(position => { const silo = this.silos[position]; @@ -1858,12 +1916,70 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro this.sashTwo.layout(); } + private setCenteredEditorPositionAndSize(pos: number, size: number): void { + this.centeredEditorPreferedSize = Math.max(this.minSize, size); + pos -= EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN; + pos = Math.min(pos, this.centeredEditorAvailableSize - this.centeredEditorSize); + pos = Math.max(0, pos); + this.centeredEditorLeftMarginRatio = pos / (this.centeredEditorAvailableSize - this.centeredEditorSize); + + this.layoutContainers(); + } + + private onCenterSashLeftDragStart(): void { + this.centeredEditorDragStartPosition = this.centeredEditorPosition; + this.centeredEditorDragStartSize = this.centeredEditorSize; + } + + private onCenterSashLeftDrag(e: ISashEvent): void { + const minMargin = EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN; + const diffPos = e.currentX - e.startX; + const diffSize = -diffPos; + + const pos = this.centeredEditorDragStartPosition + diffPos; + const size = this.centeredEditorDragStartSize + diffSize; + this.setCenteredEditorPositionAndSize(pos, pos <= minMargin ? size + pos - minMargin : size); + } + + private onCenterSashLeftDragEnd(): void { + this.layoutContainers(); + } + + private onCenterSashRightDragStart(): void { + this.centeredEditorDragStartPosition = this.centeredEditorPosition; + this.centeredEditorDragStartSize = this.centeredEditorSize; + } + + private onCenterSashRightDrag(e: ISashEvent): void { + const diffPos = e.currentX - e.startX; + const diffSize = diffPos; + + const pos = this.centeredEditorDragStartPosition; + const maxSize = this.centeredEditorAvailableSize - this.centeredEditorDragStartPosition; + const size = Math.min(maxSize, this.centeredEditorDragStartSize + diffSize); + this.setCenteredEditorPositionAndSize(size < this.minSize ? pos + (size - this.minSize) : pos, size); + } + + private onCenterSashRightDragEnd(): void { + } + public getVerticalSashTop(sash: Sash): number { return 0; } public getVerticalSashLeft(sash: Sash): number { - return sash === this.sashOne ? this.silosSize[Position.ONE] : this.silosSize[Position.TWO] + this.silosSize[Position.ONE]; + switch (sash) { + case this.sashOne: + return this.silosSize[Position.ONE]; + case this.sashTwo: + return this.silosSize[Position.TWO] + this.silosSize[Position.ONE]; + case this.centeredEditorSashLeft: + return this.centeredEditorPosition; + case this.centeredEditorSashRight: + return this.centeredEditorEndPosition; + default: + return 0; + } } public getVerticalSashHeight(sash: Sash): number { @@ -2013,6 +2129,32 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro } }); + // Layout centered Editor + const doCentering = + this.layoutVertically && + this.visibleSilos === 1 && + this.partService.isCenteredLayoutActive() && + this.visibleEditors[Position.ONE] instanceof TextResourceEditor; + + if (doCentering && !this.centeredEditorActive) { + this.centeredEditorSashLeft.show(); + this.centeredEditorSashRight.show(); + + // no size set yet. Calculate a default value + if (this.centeredEditorPreferedSize === -1) { + this.resetCenteredEditor(false); + } + } else if (!doCentering && this.centeredEditorActive) { + this.centeredEditorSashLeft.hide(); + this.centeredEditorSashRight.hide(); + } + this.centeredEditorActive = doCentering; + + if (this.centeredEditorActive) { + this.centeredEditorSashLeft.layout(); + this.centeredEditorSashRight.layout(); + } + // Layout visible editors POSITIONS.forEach(position => { this.layoutEditor(position); @@ -2031,10 +2173,18 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro private layoutEditor(position: Position): void { const editorSize = this.silosSize[position]; - if (editorSize && this.visibleEditors[position]) { + const editor = this.visibleEditors[position]; + if (editorSize && editor) { let editorWidth = this.layoutVertically ? editorSize : this.dimension.width; let editorHeight = (this.layoutVertically ? this.dimension.height : this.silosSize[position]) - EditorGroupsControl.EDITOR_TITLE_HEIGHT; + let editorPosition = 0; + + if (this.centeredEditorActive) { + editorWidth = this.centeredEditorSize; + editorPosition = this.centeredEditorPosition; + } + if (position !== Position.ONE) { if (this.layoutVertically) { editorWidth--; // accomodate for 1px left-border in containers TWO, THREE when laying out vertically @@ -2043,7 +2193,16 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro } } - this.visibleEditors[position].layout(new Dimension(editorWidth, editorHeight)); + editor.getContainer().style({ 'margin-left': editorPosition + 'px', 'width': editorWidth + 'px' }); + editor.layout(new Dimension(editorWidth, editorHeight)); + } + } + + private resetCenteredEditor(layout: boolean = true) { + this.centeredEditorLeftMarginRatio = 0.5; + this.centeredEditorPreferedSize = Math.floor(this.dimension.width * 0.5); + if (layout) { + this.layoutContainers(); } } diff --git a/src/vs/workbench/electron-browser/workbench.ts b/src/vs/workbench/electron-browser/workbench.ts index 3666039dbf03f..8b1d11fa17c6e 100644 --- a/src/vs/workbench/electron-browser/workbench.ts +++ b/src/vs/workbench/electron-browser/workbench.ts @@ -155,6 +155,7 @@ export class Workbench implements IPartService { private static readonly sidebarRestoreStorageKey = 'workbench.sidebar.restore'; private static readonly panelHiddenStorageKey = 'workbench.panel.hidden'; private static readonly zenModeActiveStorageKey = 'workbench.zenmode.active'; + private static readonly centeredLayoutActiveStorageKey = 'workbench.centeredlayout.active'; private static readonly panelPositionStorageKey = 'workbench.panel.location'; private static readonly defaultPanelPositionStorageKey = 'workbench.panel.defaultLocation'; @@ -213,6 +214,7 @@ export class Workbench implements IPartService { wasSideBarVisible: boolean; wasPanelVisible: boolean; }; + private centeredLayoutActive: boolean; constructor( parent: HTMLElement, @@ -379,6 +381,11 @@ export class Workbench implements IPartService { this.toggleZenMode(true); } + // Restore Forced Center Mode + if (this.storageService.getBoolean(Workbench.centeredLayoutActiveStorageKey, StorageScope.GLOBAL, false)) { + this.centeredLayoutActive = true; + } + const onRestored = (error?: Error): IWorkbenchStartedInfo => { this.workbenchCreated = true; @@ -660,6 +667,9 @@ export class Workbench implements IPartService { wasSideBarVisible: false, wasPanelVisible: false }; + + // Centered Layout + this.centeredLayoutActive = false; } private setPanelPositionFromStorageOrConfig() { @@ -1313,6 +1323,22 @@ export class Workbench implements IPartService { } } + public isCenteredLayoutActive(): boolean { + return this.centeredLayoutActive; + } + + public toggleCenteredLayout(): void { + this.centeredLayoutActive = !this.centeredLayoutActive; + + if (this.centeredLayoutActive) { + this.storageService.store(Workbench.centeredLayoutActiveStorageKey, 'true', StorageScope.GLOBAL); + } else { + this.storageService.remove(Workbench.centeredLayoutActiveStorageKey, StorageScope.GLOBAL); + } + + this.layout(); + } + // Resize requested part along the main axis // layout will do all the math for us and adjusts the other Parts public resizePart(part: Parts, sizeChange: number): void { diff --git a/src/vs/workbench/services/part/common/partService.ts b/src/vs/workbench/services/part/common/partService.ts index 0199e49527fc7..12870719e5161 100644 --- a/src/vs/workbench/services/part/common/partService.ts +++ b/src/vs/workbench/services/part/common/partService.ts @@ -129,6 +129,16 @@ export interface IPartService { */ toggleZenMode(): void; + /** + * Returns whether the centered layout is active. + */ + isCenteredLayoutActive(): boolean; + + /** + * Toggles the workbench in and out of centered layout. + */ + toggleCenteredLayout(): void; + /** * Resizes currently focused part on main access */ diff --git a/src/vs/workbench/test/workbenchTestServices.ts b/src/vs/workbench/test/workbenchTestServices.ts index 0910cc68b0342..c9ed3f009492b 100644 --- a/src/vs/workbench/test/workbenchTestServices.ts +++ b/src/vs/workbench/test/workbenchTestServices.ts @@ -429,6 +429,10 @@ export class TestPartService implements IPartService { public toggleZenMode(): void { } + public isCenteredLayoutActive(): boolean { return false; } + public toggleCenteredLayout(): void { } + + public resizePart(part: Parts, sizeChange: number): void { } } diff --git a/src/vs/workbench/workbench.main.ts b/src/vs/workbench/workbench.main.ts index e0e2837dfc8a8..f482d74a72398 100644 --- a/src/vs/workbench/workbench.main.ts +++ b/src/vs/workbench/workbench.main.ts @@ -31,6 +31,7 @@ import 'vs/workbench/browser/actions/toggleSidebarVisibility'; import 'vs/workbench/browser/actions/toggleSidebarPosition'; import 'vs/workbench/browser/actions/toggleEditorLayout'; import 'vs/workbench/browser/actions/toggleZenMode'; +import 'vs/workbench/browser/actions/toggleCenteredLayout'; import 'vs/workbench/browser/actions/toggleTabsVisibility'; import 'vs/workbench/parts/preferences/electron-browser/preferences.contribution'; import 'vs/workbench/parts/preferences/browser/keybindingsEditorContribution'; From 76f7a51f1aa31477ff7d6ce08738154e66447cfe Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 01:22:57 +0100 Subject: [PATCH 02/17] fixed upper case consistency with other menu entries --- src/vs/code/electron-main/menus.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/code/electron-main/menus.ts b/src/vs/code/electron-main/menus.ts index c614533e20500..8d21c881d585c 100644 --- a/src/vs/code/electron-main/menus.ts +++ b/src/vs/code/electron-main/menus.ts @@ -688,7 +688,7 @@ export class CodeMenu { const fullscreen = new MenuItem(this.withKeybinding('workbench.action.toggleFullScreen', { label: this.mnemonicLabel(nls.localize({ key: 'miToggleFullScreen', comment: ['&& denotes a mnemonic'] }, "Toggle &&Full Screen")), click: () => this.windowsMainService.getLastActiveWindow().toggleFullScreen(), enabled: this.windowsMainService.getWindowCount() > 0 })); const toggleZenMode = this.createMenuItem(nls.localize('miToggleZenMode', "Toggle Zen Mode"), 'workbench.action.toggleZenMode'); - const toggleCenteredLayout = this.createMenuItem(nls.localize('miToggleCenteredLayout', "Toggle centered Layout"), 'workbench.action.toggleCenteredLayout'); + 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'); From e74a80eba7a7e9934373f627bb70c5ebbd830112 Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 01:26:12 +0100 Subject: [PATCH 03/17] removed shortcut for ToggleCenteredLayout action --- src/vs/workbench/browser/actions/toggleCenteredLayout.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/workbench/browser/actions/toggleCenteredLayout.ts b/src/vs/workbench/browser/actions/toggleCenteredLayout.ts index c2b82ed5ac1e3..952efda2bb175 100644 --- a/src/vs/workbench/browser/actions/toggleCenteredLayout.ts +++ b/src/vs/workbench/browser/actions/toggleCenteredLayout.ts @@ -33,4 +33,4 @@ class ToggleCenteredLayout extends Action { } const registry = Registry.as(Extensions.WorkbenchActions); -registry.registerWorkbenchAction(new SyncActionDescriptor(ToggleCenteredLayout, ToggleCenteredLayout.ID, ToggleCenteredLayout.LABEL, { primary: KeyChord(KeyMod.CtrlCmd | KeyCode.KEY_K, KeyCode.KEY_T) }), 'View: Toggle Centered Layout', nls.localize('view', "View")); \ No newline at end of file +registry.registerWorkbenchAction(new SyncActionDescriptor(ToggleCenteredLayout, ToggleCenteredLayout.ID, ToggleCenteredLayout.LABEL), 'View: Toggle Centered Layout', nls.localize('view', "View")); \ No newline at end of file From c6d47b5763d92671540b9f3e2593c06ca054c8b3 Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 01:28:10 +0100 Subject: [PATCH 04/17] renamed isCenteredLayoutActive -> isLayoutCentered --- src/vs/workbench/browser/parts/editor/editorGroupsControl.ts | 2 +- src/vs/workbench/electron-browser/workbench.ts | 2 +- src/vs/workbench/services/part/common/partService.ts | 2 +- src/vs/workbench/test/workbenchTestServices.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index 50450a9a0441e..c506bff0b3471 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -2133,7 +2133,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro const doCentering = this.layoutVertically && this.visibleSilos === 1 && - this.partService.isCenteredLayoutActive() && + this.partService.isLayoutCentered() && this.visibleEditors[Position.ONE] instanceof TextResourceEditor; if (doCentering && !this.centeredEditorActive) { diff --git a/src/vs/workbench/electron-browser/workbench.ts b/src/vs/workbench/electron-browser/workbench.ts index 8b1d11fa17c6e..631d89bfe1f7d 100644 --- a/src/vs/workbench/electron-browser/workbench.ts +++ b/src/vs/workbench/electron-browser/workbench.ts @@ -1323,7 +1323,7 @@ export class Workbench implements IPartService { } } - public isCenteredLayoutActive(): boolean { + public isLayoutCentered(): boolean { return this.centeredLayoutActive; } diff --git a/src/vs/workbench/services/part/common/partService.ts b/src/vs/workbench/services/part/common/partService.ts index 12870719e5161..d74cc0e6d97f1 100644 --- a/src/vs/workbench/services/part/common/partService.ts +++ b/src/vs/workbench/services/part/common/partService.ts @@ -132,7 +132,7 @@ export interface IPartService { /** * Returns whether the centered layout is active. */ - isCenteredLayoutActive(): boolean; + isLayoutCentered(): boolean; /** * Toggles the workbench in and out of centered layout. diff --git a/src/vs/workbench/test/workbenchTestServices.ts b/src/vs/workbench/test/workbenchTestServices.ts index c9ed3f009492b..55a9793b40cde 100644 --- a/src/vs/workbench/test/workbenchTestServices.ts +++ b/src/vs/workbench/test/workbenchTestServices.ts @@ -429,7 +429,7 @@ export class TestPartService implements IPartService { public toggleZenMode(): void { } - public isCenteredLayoutActive(): boolean { return false; } + public isLayoutCentered(): boolean { return false; } public toggleCenteredLayout(): void { } From 73d48daeb135a28346ce6bdf4feb5586c816277c Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 01:31:51 +0100 Subject: [PATCH 05/17] simplified store to centeredLayoutActiveStorageKey --- src/vs/workbench/electron-browser/workbench.ts | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/vs/workbench/electron-browser/workbench.ts b/src/vs/workbench/electron-browser/workbench.ts index 631d89bfe1f7d..0b402b064dc58 100644 --- a/src/vs/workbench/electron-browser/workbench.ts +++ b/src/vs/workbench/electron-browser/workbench.ts @@ -1329,13 +1329,7 @@ export class Workbench implements IPartService { public toggleCenteredLayout(): void { this.centeredLayoutActive = !this.centeredLayoutActive; - - if (this.centeredLayoutActive) { - this.storageService.store(Workbench.centeredLayoutActiveStorageKey, 'true', StorageScope.GLOBAL); - } else { - this.storageService.remove(Workbench.centeredLayoutActiveStorageKey, StorageScope.GLOBAL); - } - + this.storageService.store(Workbench.centeredLayoutActiveStorageKey, this.centeredLayoutActive, StorageScope.GLOBAL); this.layout(); } From 4c3e7198fa062e4f9f7917096990b984b9ce638b Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 01:36:49 +0100 Subject: [PATCH 06/17] removed visibleSilos getter --- .../workbench/browser/parts/editor/editorGroupsControl.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index c506bff0b3471..23ef3a2b3df04 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -214,10 +214,6 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro return this.layoutVertically ? EditorGroupsControl.MIN_EDITOR_WIDTH : EditorGroupsControl.MIN_EDITOR_HEIGHT; } - private get visibleSilos(): number { - return this.visibleEditors.reduce((acc, min) => min ? acc + 1 : acc, 0); - } - private isSiloMinimized(position: number): boolean { return this.silosSize[position] === this.minSize && this.silosMinimized[position]; } @@ -2132,7 +2128,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro // Layout centered Editor const doCentering = this.layoutVertically && - this.visibleSilos === 1 && + this.editorGroupService.getStacksModel().groups.length === 1 && this.partService.isLayoutCentered() && this.visibleEditors[Position.ONE] instanceof TextResourceEditor; From df2d56148adfee3cb8618393a93f69047c54a8ca Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 01:40:15 +0100 Subject: [PATCH 07/17] removed redundant layouting from onCenterSashLeftDragEnd --- src/vs/workbench/browser/parts/editor/editorGroupsControl.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index 23ef3a2b3df04..8865c9308f534 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -1938,7 +1938,6 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro } private onCenterSashLeftDragEnd(): void { - this.layoutContainers(); } private onCenterSashRightDragStart(): void { From dd0a60c1e08585bc4d0d09492ad3f42288639f76 Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 01:42:46 +0100 Subject: [PATCH 08/17] initialize centered editor width with golden ratio instead of 50% --- src/vs/workbench/browser/parts/editor/editorGroupsControl.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index 8865c9308f534..a8ec8e0b0113d 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -2195,7 +2195,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro private resetCenteredEditor(layout: boolean = true) { this.centeredEditorLeftMarginRatio = 0.5; - this.centeredEditorPreferedSize = Math.floor(this.dimension.width * 0.5); + this.centeredEditorPreferedSize = Math.floor(this.dimension.width * 0.61); if (layout) { this.layoutContainers(); } From e03bbe3b8f40864a99207e432147797a55fdc1b8 Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 02:28:00 +0100 Subject: [PATCH 09/17] save position and size of centered layout in the global storage scope --- .../parts/editor/editorGroupsControl.ts | 32 +++++++++++++++---- 1 file changed, 26 insertions(+), 6 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index a8ec8e0b0113d..936ca80380148 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -25,6 +25,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import { ServiceCollection } from 'vs/platform/instantiation/common/serviceCollection'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IExtensionService } from 'vs/platform/extensions/common/extensions'; +import { IStorageService, StorageScope } from 'vs/platform/storage/common/storage'; import { TabsTitleControl } from 'vs/workbench/browser/parts/editor/tabsTitleControl'; import { ITitleAreaControl } from 'vs/workbench/browser/parts/editor/titleControl'; import { NoTabsTitleControl } from 'vs/workbench/browser/parts/editor/noTabsTitleControl'; @@ -89,11 +90,18 @@ export interface IEditorGroupsControl { dispose(): void; } +interface CenteredLayoutData { + leftMarginRatio: number; + size: number; +} + /** * Helper class to manage multiple side by side editors for the editor part. */ export class EditorGroupsControl extends Themable implements IEditorGroupsControl, IVerticalSashLayoutProvider, IHorizontalSashLayoutProvider { + private static readonly CENTERED_LAYOUT_DATA_STORAGE_KEY = 'centeredLayoutData'; + private static readonly TITLE_AREA_CONTROL_KEY = '__titleAreaControl'; private static readonly PROGRESS_BAR_CONTROL_KEY = '__progressBar'; private static readonly INSTANTIATION_SERVICE_KEY = '__instantiationService'; @@ -165,6 +173,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro @IWorkbenchEditorService private editorService: IWorkbenchEditorService, @IEditorGroupService private editorGroupService: IEditorGroupService, @IPartService private partService: IPartService, + @IStorageService private storageServise: IStorageService, @IContextKeyService private contextKeyService: IContextKeyService, @IExtensionService private extensionService: IExtensionService, @IInstantiationService private instantiationService: IInstantiationService, @@ -1010,19 +1019,27 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro this.centeredEditorSashLeft = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL }); this.toUnbind.push(this.centeredEditorSashLeft.onDidStart(() => this.onCenterSashLeftDragStart())); this.toUnbind.push(this.centeredEditorSashLeft.onDidChange((e: ISashEvent) => this.onCenterSashLeftDrag(e))); - this.toUnbind.push(this.centeredEditorSashLeft.onDidEnd(() => this.onCenterSashLeftDragEnd())); + this.toUnbind.push(this.centeredEditorSashLeft.onDidEnd(() => this.saveCenterdLayoutData())); this.toUnbind.push(this.centeredEditorSashLeft.onDidReset(() => this.resetCenteredEditor())); this.centeredEditorSashRight = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL }); this.toUnbind.push(this.centeredEditorSashRight.onDidStart(() => this.onCenterSashRightDragStart())); this.toUnbind.push(this.centeredEditorSashRight.onDidChange((e: ISashEvent) => this.onCenterSashRightDrag(e))); - this.toUnbind.push(this.centeredEditorSashRight.onDidEnd(() => this.onCenterSashRightDragEnd())); + this.toUnbind.push(this.centeredEditorSashRight.onDidEnd(() => this.saveCenterdLayoutData())); this.toUnbind.push(this.centeredEditorSashRight.onDidReset(() => this.resetCenteredEditor())); this.centeredEditorActive = false; this.centeredEditorLeftMarginRatio = 0.5; this.centeredEditorPreferedSize = -1; // set this later if we know the container size + // Restore centered layout position and size + const centeredLayoutDataString = this.storageServise.get(EditorGroupsControl.CENTERED_LAYOUT_DATA_STORAGE_KEY, StorageScope.GLOBAL); + if (centeredLayoutDataString) { + const centeredLayout = JSON.parse(centeredLayoutDataString); + this.centeredEditorLeftMarginRatio = centeredLayout.leftMarginRatio; + this.centeredEditorPreferedSize = centeredLayout.size; + } + // For each position POSITIONS.forEach(position => { const silo = this.silos[position]; @@ -1937,9 +1954,6 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro this.setCenteredEditorPositionAndSize(pos, pos <= minMargin ? size + pos - minMargin : size); } - private onCenterSashLeftDragEnd(): void { - } - private onCenterSashRightDragStart(): void { this.centeredEditorDragStartPosition = this.centeredEditorPosition; this.centeredEditorDragStartSize = this.centeredEditorSize; @@ -1955,7 +1969,12 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro this.setCenteredEditorPositionAndSize(size < this.minSize ? pos + (size - this.minSize) : pos, size); } - private onCenterSashRightDragEnd(): void { + private saveCenterdLayoutData(): void { + const data: CenteredLayoutData = { + leftMarginRatio: this.centeredEditorLeftMarginRatio, + size: this.centeredEditorSize + }; + this.storageServise.store(EditorGroupsControl.CENTERED_LAYOUT_DATA_STORAGE_KEY, JSON.stringify(data), StorageScope.GLOBAL); } public getVerticalSashTop(sash: Sash): number { @@ -2199,6 +2218,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro if (layout) { this.layoutContainers(); } + this.storageServise.remove(EditorGroupsControl.CENTERED_LAYOUT_DATA_STORAGE_KEY, StorageScope.GLOBAL); } public getInstantiationService(position: Position): IInstantiationService { From ac710adc68b17e7b83fef48bb7e0146ded82f87e Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 10:15:09 +0100 Subject: [PATCH 10/17] fixed import warnings for toggle centered layout actio --- src/vs/workbench/browser/actions/toggleCenteredLayout.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/vs/workbench/browser/actions/toggleCenteredLayout.ts b/src/vs/workbench/browser/actions/toggleCenteredLayout.ts index 952efda2bb175..b1ccce816ab70 100644 --- a/src/vs/workbench/browser/actions/toggleCenteredLayout.ts +++ b/src/vs/workbench/browser/actions/toggleCenteredLayout.ts @@ -6,7 +6,6 @@ import { TPromise } from 'vs/base/common/winjs.base'; import nls = require('vs/nls'); import { Action } from 'vs/base/common/actions'; -import { KeyCode, KeyMod, KeyChord } from 'vs/base/common/keyCodes'; import { Registry } from 'vs/platform/registry/common/platform'; import { SyncActionDescriptor } from 'vs/platform/actions/common/actions'; import { IWorkbenchActionRegistry, Extensions } from 'vs/workbench/common/actions'; From 4e2f3bdbb69f99ed93902b09565235a6319acc95 Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 10:44:45 +0100 Subject: [PATCH 11/17] aligned centered layout data storage key with the one from workbench --- src/vs/workbench/browser/parts/editor/editorGroupsControl.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index 936ca80380148..584c6cfe95fb7 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -100,7 +100,7 @@ interface CenteredLayoutData { */ export class EditorGroupsControl extends Themable implements IEditorGroupsControl, IVerticalSashLayoutProvider, IHorizontalSashLayoutProvider { - private static readonly CENTERED_LAYOUT_DATA_STORAGE_KEY = 'centeredLayoutData'; + private static readonly CENTERED_LAYOUT_DATA_STORAGE_KEY = 'workbench.centeredlayout.layoutData'; private static readonly TITLE_AREA_CONTROL_KEY = '__titleAreaControl'; private static readonly PROGRESS_BAR_CONTROL_KEY = '__progressBar'; From d1a5230835b01db124dae48a983ba1f1e823c1c7 Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 11:17:14 +0100 Subject: [PATCH 12/17] renamed saveCenteredLayoutData -> storeCenteredLayoutData --- .../workbench/browser/parts/editor/editorGroupsControl.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index 584c6cfe95fb7..78c067f4ea262 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -1019,13 +1019,13 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro this.centeredEditorSashLeft = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL }); this.toUnbind.push(this.centeredEditorSashLeft.onDidStart(() => this.onCenterSashLeftDragStart())); this.toUnbind.push(this.centeredEditorSashLeft.onDidChange((e: ISashEvent) => this.onCenterSashLeftDrag(e))); - this.toUnbind.push(this.centeredEditorSashLeft.onDidEnd(() => this.saveCenterdLayoutData())); + this.toUnbind.push(this.centeredEditorSashLeft.onDidEnd(() => this.storeCenteredLayoutData())); this.toUnbind.push(this.centeredEditorSashLeft.onDidReset(() => this.resetCenteredEditor())); this.centeredEditorSashRight = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL }); this.toUnbind.push(this.centeredEditorSashRight.onDidStart(() => this.onCenterSashRightDragStart())); this.toUnbind.push(this.centeredEditorSashRight.onDidChange((e: ISashEvent) => this.onCenterSashRightDrag(e))); - this.toUnbind.push(this.centeredEditorSashRight.onDidEnd(() => this.saveCenterdLayoutData())); + this.toUnbind.push(this.centeredEditorSashRight.onDidEnd(() => this.storeCenteredLayoutData())); this.toUnbind.push(this.centeredEditorSashRight.onDidReset(() => this.resetCenteredEditor())); this.centeredEditorActive = false; @@ -1969,7 +1969,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro this.setCenteredEditorPositionAndSize(size < this.minSize ? pos + (size - this.minSize) : pos, size); } - private saveCenterdLayoutData(): void { + private storeCenteredLayoutData(): void { const data: CenteredLayoutData = { leftMarginRatio: this.centeredEditorLeftMarginRatio, size: this.centeredEditorSize From a403a53fdb2e100cd0c8a16e78b9ca48d3a28609 Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 11:19:03 +0100 Subject: [PATCH 13/17] removed instanceof-check for non normal editor widgets --- src/vs/workbench/browser/parts/editor/editorGroupsControl.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index 78c067f4ea262..b2006324da1d1 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -2147,8 +2147,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro const doCentering = this.layoutVertically && this.editorGroupService.getStacksModel().groups.length === 1 && - this.partService.isLayoutCentered() && - this.visibleEditors[Position.ONE] instanceof TextResourceEditor; + this.partService.isLayoutCentered(); if (doCentering && !this.centeredEditorActive) { this.centeredEditorSashLeft.show(); From 3e131cccc839d3bf43af7fb937b4618624a1cae5 Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 11:32:26 +0100 Subject: [PATCH 14/17] removed TextResourceEditor import --- src/vs/workbench/browser/parts/editor/editorGroupsControl.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index b2006324da1d1..5265fcdd01b31 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -39,7 +39,6 @@ import { IDisposable, combinedDisposable } from 'vs/base/common/lifecycle'; import { ResourcesDropHandler, LocalSelectionTransfer, DraggedEditorIdentifier } from 'vs/workbench/browser/dnd'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; import { IPartService } from 'vs/workbench/services/part/common/partService'; -import { TextResourceEditor } from 'vs/workbench/browser/parts/editor/textResourceEditor'; export enum Rochade { NONE, From caf6e5e5962a42adc4fca015b93fba8b74d1e7f7 Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 12:30:00 +0100 Subject: [PATCH 15/17] added a 1px border to indicate the sashes --- .../browser/parts/editor/editorGroupsControl.ts | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index 5265fcdd01b31..f665e0f86e8b7 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -1989,7 +1989,8 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro case this.centeredEditorSashLeft: return this.centeredEditorPosition; case this.centeredEditorSashRight: - return this.centeredEditorEndPosition; + // the border indicating the sash is 1px right to the end position + return this.centeredEditorEndPosition + 1; default: return 0; } @@ -2152,6 +2153,12 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro this.centeredEditorSashLeft.show(); this.centeredEditorSashRight.show(); + const centeredEditor = this.visibleEditors[Position.ONE]; + // TODO: replace the color + centeredEditor.getContainer().style('border-color', '#383838'); + centeredEditor.getContainer().style('border-left-width', '1px'); + centeredEditor.getContainer().style('border-right-width', '1px'); + // no size set yet. Calculate a default value if (this.centeredEditorPreferedSize === -1) { this.resetCenteredEditor(false); @@ -2195,6 +2202,9 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro if (this.centeredEditorActive) { editorWidth = this.centeredEditorSize; editorPosition = this.centeredEditorPosition; + + // adjust the position because of the border + editorPosition--; } if (position !== Position.ONE) { @@ -2205,6 +2215,8 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro } } + editor.getContainer().style('border-left-style', this.centeredEditorActive ? 'solid' : 'none'); + editor.getContainer().style('border-right-style', this.centeredEditorActive ? 'solid' : 'none'); editor.getContainer().style({ 'margin-left': editorPosition + 'px', 'width': editorWidth + 'px' }); editor.layout(new Dimension(editorWidth, editorHeight)); } From cdd2bde52f9ef40f1c8501a47af735ebc1924824 Mon Sep 17 00:00:00 2001 From: SrTobi Date: Tue, 20 Feb 2018 15:13:47 +0100 Subject: [PATCH 16/17] Revert "added a 1px border to indicate the sashes" This reverts commit caf6e5e5962a42adc4fca015b93fba8b74d1e7f7. --- .../browser/parts/editor/editorGroupsControl.ts | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index f665e0f86e8b7..5265fcdd01b31 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -1989,8 +1989,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro case this.centeredEditorSashLeft: return this.centeredEditorPosition; case this.centeredEditorSashRight: - // the border indicating the sash is 1px right to the end position - return this.centeredEditorEndPosition + 1; + return this.centeredEditorEndPosition; default: return 0; } @@ -2153,12 +2152,6 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro this.centeredEditorSashLeft.show(); this.centeredEditorSashRight.show(); - const centeredEditor = this.visibleEditors[Position.ONE]; - // TODO: replace the color - centeredEditor.getContainer().style('border-color', '#383838'); - centeredEditor.getContainer().style('border-left-width', '1px'); - centeredEditor.getContainer().style('border-right-width', '1px'); - // no size set yet. Calculate a default value if (this.centeredEditorPreferedSize === -1) { this.resetCenteredEditor(false); @@ -2202,9 +2195,6 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro if (this.centeredEditorActive) { editorWidth = this.centeredEditorSize; editorPosition = this.centeredEditorPosition; - - // adjust the position because of the border - editorPosition--; } if (position !== Position.ONE) { @@ -2215,8 +2205,6 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro } } - editor.getContainer().style('border-left-style', this.centeredEditorActive ? 'solid' : 'none'); - editor.getContainer().style('border-right-style', this.centeredEditorActive ? 'solid' : 'none'); editor.getContainer().style({ 'margin-left': editorPosition + 'px', 'width': editorWidth + 'px' }); editor.layout(new Dimension(editorWidth, editorHeight)); } From a0da58be96011664b34871462556bf673b87bef0 Mon Sep 17 00:00:00 2001 From: Benjamin Pasero Date: Wed, 21 Feb 2018 07:32:04 +0100 Subject: [PATCH 17/17] :lipstick: --- .../browser/actions/toggleCenteredLayout.ts | 3 +- .../parts/editor/editorGroupsControl.ts | 169 +++++++++--------- .../workbench/electron-browser/workbench.ts | 25 +-- .../services/part/common/partService.ts | 8 +- .../workbench/test/workbenchTestServices.ts | 4 +- 5 files changed, 107 insertions(+), 102 deletions(-) diff --git a/src/vs/workbench/browser/actions/toggleCenteredLayout.ts b/src/vs/workbench/browser/actions/toggleCenteredLayout.ts index b1ccce816ab70..669820dc5efdb 100644 --- a/src/vs/workbench/browser/actions/toggleCenteredLayout.ts +++ b/src/vs/workbench/browser/actions/toggleCenteredLayout.ts @@ -26,7 +26,8 @@ class ToggleCenteredLayout extends Action { } public run(): TPromise { - this.partService.toggleCenteredLayout(); + this.partService.toggleCenteredEditorLayout(); + return TPromise.as(null); } } diff --git a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts index 5265fcdd01b31..7f7049184cbba 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupsControl.ts @@ -89,7 +89,7 @@ export interface IEditorGroupsControl { dispose(): void; } -interface CenteredLayoutData { +interface CenteredEditorLayoutData { leftMarginRatio: number; size: number; } @@ -99,7 +99,7 @@ interface CenteredLayoutData { */ export class EditorGroupsControl extends Themable implements IEditorGroupsControl, IVerticalSashLayoutProvider, IHorizontalSashLayoutProvider { - private static readonly CENTERED_LAYOUT_DATA_STORAGE_KEY = 'workbench.centeredlayout.layoutData'; + private static readonly CENTERED_EDITOR_LAYOUT_DATA_STORAGE_KEY = 'workbench.centerededitorlayout.layoutData'; private static readonly TITLE_AREA_CONTROL_KEY = '__titleAreaControl'; private static readonly PROGRESS_BAR_CONTROL_KEY = '__progressBar'; @@ -136,7 +136,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro private sashTwo: Sash; private startSiloThreeSize: number; - // if the centered layout is activated, the editor inside of silo ONE is centered + // if the centered editor layout is activated, the editor inside of silo ONE is centered // the silo will then contain: // [left margin]|[editor]|[right margin] // - The size of the editor is defined by centeredEditorSize @@ -238,22 +238,6 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro }); } - private get centeredEditorAvailableSize(): number { - return this.silosSize[0] - EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN * 2; - } - - private get centeredEditorSize(): number { - return Math.min(this.centeredEditorAvailableSize, this.centeredEditorPreferedSize); - } - - private get centeredEditorPosition(): number { - return EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN + this.centeredEditorLeftMarginRatio * (this.centeredEditorAvailableSize - this.centeredEditorSize); - } - - private get centeredEditorEndPosition(): number { - return this.centeredEditorPosition + this.centeredEditorSize; - } - private get snapToMinimizeThresholdSize(): number { return this.layoutVertically ? EditorGroupsControl.SNAP_TO_MINIMIZED_THRESHOLD_WIDTH : EditorGroupsControl.SNAP_TO_MINIMIZED_THRESHOLD_HEIGHT; } @@ -1014,66 +998,74 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro // Silo Three this.silos[Position.THREE] = $(this.parent).div({ class: 'one-editor-silo editor-three' }); - // Center Layout stuff - this.centeredEditorSashLeft = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL }); - this.toUnbind.push(this.centeredEditorSashLeft.onDidStart(() => this.onCenterSashLeftDragStart())); - this.toUnbind.push(this.centeredEditorSashLeft.onDidChange((e: ISashEvent) => this.onCenterSashLeftDrag(e))); - this.toUnbind.push(this.centeredEditorSashLeft.onDidEnd(() => this.storeCenteredLayoutData())); - this.toUnbind.push(this.centeredEditorSashLeft.onDidReset(() => this.resetCenteredEditor())); - - this.centeredEditorSashRight = new Sash(this.parent.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL }); - this.toUnbind.push(this.centeredEditorSashRight.onDidStart(() => this.onCenterSashRightDragStart())); - this.toUnbind.push(this.centeredEditorSashRight.onDidChange((e: ISashEvent) => this.onCenterSashRightDrag(e))); - this.toUnbind.push(this.centeredEditorSashRight.onDidEnd(() => this.storeCenteredLayoutData())); - this.toUnbind.push(this.centeredEditorSashRight.onDidReset(() => this.resetCenteredEditor())); - - this.centeredEditorActive = false; - this.centeredEditorLeftMarginRatio = 0.5; - this.centeredEditorPreferedSize = -1; // set this later if we know the container size - - // Restore centered layout position and size - const centeredLayoutDataString = this.storageServise.get(EditorGroupsControl.CENTERED_LAYOUT_DATA_STORAGE_KEY, StorageScope.GLOBAL); - if (centeredLayoutDataString) { - const centeredLayout = JSON.parse(centeredLayoutDataString); - this.centeredEditorLeftMarginRatio = centeredLayout.leftMarginRatio; - this.centeredEditorPreferedSize = centeredLayout.size; - } - // For each position POSITIONS.forEach(position => { - const silo = this.silos[position]; - - // Containers (they contain everything and can move between silos) - const container = $(silo).div({ 'class': 'container' }); + this.createSilo(position); + }); - // InstantiationServices - const instantiationService = this.instantiationService.createChild(new ServiceCollection( - [IContextKeyService, this.contextKeyService.createScoped(container.getHTMLElement())] - )); - container.setProperty(EditorGroupsControl.INSTANTIATION_SERVICE_KEY, instantiationService); // associate with container + // Update Styles + this.updateStyles(); + } - // Title containers - const titleContainer = $(container).div({ 'class': 'title' }); - if (this.tabOptions.showTabs) { - titleContainer.addClass('tabs'); - } - if (this.tabOptions.showIcons) { - titleContainer.addClass('show-file-icons'); - } - this.hookTitleDragListener(titleContainer); + private createSilo(position: Position): void { + const silo = this.silos[position]; - // Title Control - this.createTitleControl(this.stacks.groupAt(position), silo, titleContainer, instantiationService); + // Containers (they contain everything and can move between silos) + const container = $(silo).div({ 'class': 'container' }); - // Progress Bar - const progressBar = new ProgressBar($(container)); - this.toUnbind.push(attachProgressBarStyler(progressBar, this.themeService)); - progressBar.getContainer().hide(); - container.setProperty(EditorGroupsControl.PROGRESS_BAR_CONTROL_KEY, progressBar); // associate with container - }); + // InstantiationServices + const instantiationService = this.instantiationService.createChild(new ServiceCollection( + [IContextKeyService, this.contextKeyService.createScoped(container.getHTMLElement())] + )); + container.setProperty(EditorGroupsControl.INSTANTIATION_SERVICE_KEY, instantiationService); // associate with container - // Update Styles - this.updateStyles(); + // Title containers + const titleContainer = $(container).div({ 'class': 'title' }); + if (this.tabOptions.showTabs) { + titleContainer.addClass('tabs'); + } + if (this.tabOptions.showIcons) { + titleContainer.addClass('show-file-icons'); + } + this.hookTitleDragListener(titleContainer); + + // Title Control + this.createTitleControl(this.stacks.groupAt(position), silo, titleContainer, instantiationService); + + // Progress Bar + const progressBar = new ProgressBar($(container)); + this.toUnbind.push(attachProgressBarStyler(progressBar, this.themeService)); + progressBar.getContainer().hide(); + container.setProperty(EditorGroupsControl.PROGRESS_BAR_CONTROL_KEY, progressBar); // associate with container + + // Sash for first position to support centered editor layout + if (position === Position.ONE) { + + // Center Layout stuff + this.centeredEditorSashLeft = new Sash(container.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL }); + this.toUnbind.push(this.centeredEditorSashLeft.onDidStart(() => this.onCenterSashLeftDragStart())); + this.toUnbind.push(this.centeredEditorSashLeft.onDidChange((e: ISashEvent) => this.onCenterSashLeftDrag(e))); + this.toUnbind.push(this.centeredEditorSashLeft.onDidEnd(() => this.storeCenteredLayoutData())); + this.toUnbind.push(this.centeredEditorSashLeft.onDidReset(() => this.resetCenteredEditor())); + + this.centeredEditorSashRight = new Sash(container.getHTMLElement(), this, { baseSize: 5, orientation: Orientation.VERTICAL }); + this.toUnbind.push(this.centeredEditorSashRight.onDidStart(() => this.onCenterSashRightDragStart())); + this.toUnbind.push(this.centeredEditorSashRight.onDidChange((e: ISashEvent) => this.onCenterSashRightDrag(e))); + this.toUnbind.push(this.centeredEditorSashRight.onDidEnd(() => this.storeCenteredLayoutData())); + this.toUnbind.push(this.centeredEditorSashRight.onDidReset(() => this.resetCenteredEditor())); + + this.centeredEditorActive = false; + this.centeredEditorLeftMarginRatio = 0.5; + this.centeredEditorPreferedSize = -1; // set this later if we know the container size + + // Restore centered layout position and size + const centeredLayoutDataString = this.storageServise.get(EditorGroupsControl.CENTERED_EDITOR_LAYOUT_DATA_STORAGE_KEY, StorageScope.GLOBAL); + if (centeredLayoutDataString) { + const centeredLayout = JSON.parse(centeredLayoutDataString); + this.centeredEditorLeftMarginRatio = centeredLayout.leftMarginRatio; + this.centeredEditorPreferedSize = centeredLayout.size; + } + } } protected updateStyles(): void { @@ -1928,6 +1920,22 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro this.sashTwo.layout(); } + private get centeredEditorAvailableSize(): number { + return this.silosSize[Position.ONE] - EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN * 2; + } + + private get centeredEditorSize(): number { + return Math.min(this.centeredEditorAvailableSize, this.centeredEditorPreferedSize); + } + + private get centeredEditorPosition(): number { + return EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN + this.centeredEditorLeftMarginRatio * (this.centeredEditorAvailableSize - this.centeredEditorSize); + } + + private get centeredEditorEndPosition(): number { + return this.centeredEditorPosition + this.centeredEditorSize; + } + private setCenteredEditorPositionAndSize(pos: number, size: number): void { this.centeredEditorPreferedSize = Math.max(this.minSize, size); pos -= EditorGroupsControl.CENTERED_EDITOR_MIN_MARGIN; @@ -1969,11 +1977,11 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro } private storeCenteredLayoutData(): void { - const data: CenteredLayoutData = { + const data: CenteredEditorLayoutData = { leftMarginRatio: this.centeredEditorLeftMarginRatio, size: this.centeredEditorSize }; - this.storageServise.store(EditorGroupsControl.CENTERED_LAYOUT_DATA_STORAGE_KEY, JSON.stringify(data), StorageScope.GLOBAL); + this.storageServise.store(EditorGroupsControl.CENTERED_EDITOR_LAYOUT_DATA_STORAGE_KEY, JSON.stringify(data), StorageScope.GLOBAL); } public getVerticalSashTop(sash: Sash): number { @@ -2142,12 +2150,8 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro } }); - // Layout centered Editor - const doCentering = - this.layoutVertically && - this.editorGroupService.getStacksModel().groups.length === 1 && - this.partService.isLayoutCentered(); - + // Layout centered Editor (only in vertical layout when one group is opened) + const doCentering = this.layoutVertically && this.stacks.groups.length === 1 && this.partService.isEditorLayoutCentered(); if (doCentering && !this.centeredEditorActive) { this.centeredEditorSashLeft.show(); this.centeredEditorSashRight.show(); @@ -2191,7 +2195,6 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro let editorHeight = (this.layoutVertically ? this.dimension.height : this.silosSize[position]) - EditorGroupsControl.EDITOR_TITLE_HEIGHT; let editorPosition = 0; - if (this.centeredEditorActive) { editorWidth = this.centeredEditorSize; editorPosition = this.centeredEditorPosition; @@ -2205,7 +2208,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro } } - editor.getContainer().style({ 'margin-left': editorPosition + 'px', 'width': editorWidth + 'px' }); + editor.getContainer().style({ 'margin-left': `${editorPosition}px`, 'width': `${editorWidth}px` }); editor.layout(new Dimension(editorWidth, editorHeight)); } } @@ -2216,7 +2219,7 @@ export class EditorGroupsControl extends Themable implements IEditorGroupsContro if (layout) { this.layoutContainers(); } - this.storageServise.remove(EditorGroupsControl.CENTERED_LAYOUT_DATA_STORAGE_KEY, StorageScope.GLOBAL); + this.storageServise.remove(EditorGroupsControl.CENTERED_EDITOR_LAYOUT_DATA_STORAGE_KEY, StorageScope.GLOBAL); } public getInstantiationService(position: Position): IInstantiationService { diff --git a/src/vs/workbench/electron-browser/workbench.ts b/src/vs/workbench/electron-browser/workbench.ts index 0b402b064dc58..c67b9b106693b 100644 --- a/src/vs/workbench/electron-browser/workbench.ts +++ b/src/vs/workbench/electron-browser/workbench.ts @@ -155,7 +155,7 @@ export class Workbench implements IPartService { private static readonly sidebarRestoreStorageKey = 'workbench.sidebar.restore'; private static readonly panelHiddenStorageKey = 'workbench.panel.hidden'; private static readonly zenModeActiveStorageKey = 'workbench.zenmode.active'; - private static readonly centeredLayoutActiveStorageKey = 'workbench.centeredlayout.active'; + private static readonly centeredEditorLayoutActiveStorageKey = 'workbench.centered.editorlayout.active'; private static readonly panelPositionStorageKey = 'workbench.panel.location'; private static readonly defaultPanelPositionStorageKey = 'workbench.panel.defaultLocation'; @@ -208,13 +208,13 @@ export class Workbench implements IPartService { private sideBarVisibleContext: IContextKey; private hasFilesToCreateOpenOrDiff: boolean; private fontAliasing: FontAliasingOption; + private centeredEditorLayoutActive: boolean; private zenMode: { active: boolean; transitionedToFullScreen: boolean; wasSideBarVisible: boolean; wasPanelVisible: boolean; }; - private centeredLayoutActive: boolean; constructor( parent: HTMLElement, @@ -381,9 +381,9 @@ export class Workbench implements IPartService { this.toggleZenMode(true); } - // Restore Forced Center Mode - if (this.storageService.getBoolean(Workbench.centeredLayoutActiveStorageKey, StorageScope.GLOBAL, false)) { - this.centeredLayoutActive = true; + // Restore Forced Editor Center Mode + if (this.storageService.getBoolean(Workbench.centeredEditorLayoutActiveStorageKey, StorageScope.GLOBAL, false)) { + this.centeredEditorLayoutActive = true; } const onRestored = (error?: Error): IWorkbenchStartedInfo => { @@ -668,8 +668,8 @@ export class Workbench implements IPartService { wasPanelVisible: false }; - // Centered Layout - this.centeredLayoutActive = false; + // Centered Editor Layout + this.centeredEditorLayoutActive = false; } private setPanelPositionFromStorageOrConfig() { @@ -1323,13 +1323,14 @@ export class Workbench implements IPartService { } } - public isLayoutCentered(): boolean { - return this.centeredLayoutActive; + public isEditorLayoutCentered(): boolean { + return this.centeredEditorLayoutActive; } - public toggleCenteredLayout(): void { - this.centeredLayoutActive = !this.centeredLayoutActive; - this.storageService.store(Workbench.centeredLayoutActiveStorageKey, this.centeredLayoutActive, StorageScope.GLOBAL); + public toggleCenteredEditorLayout(): void { + this.centeredEditorLayoutActive = !this.centeredEditorLayoutActive; + this.storageService.store(Workbench.centeredEditorLayoutActiveStorageKey, this.centeredEditorLayoutActive, StorageScope.GLOBAL); + this.layout(); } diff --git a/src/vs/workbench/services/part/common/partService.ts b/src/vs/workbench/services/part/common/partService.ts index d74cc0e6d97f1..b56e8c8fe1d00 100644 --- a/src/vs/workbench/services/part/common/partService.ts +++ b/src/vs/workbench/services/part/common/partService.ts @@ -130,14 +130,14 @@ export interface IPartService { toggleZenMode(): void; /** - * Returns whether the centered layout is active. + * Returns whether the centered editor layout is active. */ - isLayoutCentered(): boolean; + isEditorLayoutCentered(): boolean; /** - * Toggles the workbench in and out of centered layout. + * Toggles the workbench in and out of centered editor layout. */ - toggleCenteredLayout(): void; + toggleCenteredEditorLayout(): void; /** * Resizes currently focused part on main access diff --git a/src/vs/workbench/test/workbenchTestServices.ts b/src/vs/workbench/test/workbenchTestServices.ts index 55a9793b40cde..4740b46551291 100644 --- a/src/vs/workbench/test/workbenchTestServices.ts +++ b/src/vs/workbench/test/workbenchTestServices.ts @@ -429,8 +429,8 @@ export class TestPartService implements IPartService { public toggleZenMode(): void { } - public isLayoutCentered(): boolean { return false; } - public toggleCenteredLayout(): void { } + public isEditorLayoutCentered(): boolean { return false; } + public toggleCenteredEditorLayout(): void { } public resizePart(part: Parts, sizeChange: number): void { }