Skip to content

Commit 262c24c

Browse files
bpaserobpasero
authored
Merge pull request microsoft#13883 from Microsoft/ben/horizontal
Diagonal editor layout
2 parents cfe1aa0 + c866ab6 commit 262c24c

40 files changed

Lines changed: 950 additions & 699 deletions

‎src/vs/base/browser/ui/sash/sash.ts‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -72,21 +72,14 @@ export class Sash extends EventEmitter {
7272
this.$e.on(DOM.EventType.DBLCLICK, (e: MouseEvent) => { this.emit('reset', e); });
7373
this.$e.on(EventType.Start, (e: GestureEvent) => { this.onTouchStart(e); });
7474

75-
this.orientation = options.orientation || Orientation.VERTICAL;
76-
this.$e.addClass(this.getOrientation());
77-
7875
this.size = options.baseSize || 5;
7976

8077
if (isIPad) {
8178
this.size *= 4; // see also http://ux.stackexchange.com/questions/39023/what-is-the-optimum-button-size-of-touch-screen-applications
8279
this.$e.addClass('touch');
8380
}
8481

85-
if (this.orientation === Orientation.HORIZONTAL) {
86-
this.$e.size(null, this.size);
87-
} else {
88-
this.$e.size(this.size);
89-
}
82+
this.setOrientation(options.orientation || Orientation.VERTICAL);
9083

9184
this.isDisabled = false;
9285
this.hidden = false;
@@ -97,6 +90,23 @@ export class Sash extends EventEmitter {
9790
return this.$e.getHTMLElement();
9891
}
9992

93+
public setOrientation(orientation: Orientation): void {
94+
this.orientation = orientation;
95+
96+
this.$e.removeClass('horizontal', 'vertical');
97+
this.$e.addClass(this.getOrientation());
98+
99+
if (this.orientation === Orientation.HORIZONTAL) {
100+
this.$e.size(null, this.size);
101+
} else {
102+
this.$e.size(this.size);
103+
}
104+
105+
if (this.layoutProvider) {
106+
this.layout();
107+
}
108+
}
109+
100110
private getOrientation(): 'horizontal' | 'vertical' {
101111
return this.orientation === Orientation.HORIZONTAL ? 'horizontal' : 'vertical';
102112
}

‎src/vs/code/electron-main/menus.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -487,6 +487,7 @@ export class VSCodeMenu {
487487
const fullscreen = new MenuItem({ label: mnemonicLabel(nls.localize({ key: 'miToggleFullScreen', comment: ['&& denotes a mnemonic'] }, "Toggle &&Full Screen")), accelerator: this.getAccelerator('workbench.action.toggleFullScreen'), click: () => this.windowsService.getLastActiveWindow().toggleFullScreen(), enabled: this.windowsService.getWindowCount() > 0 });
488488
const toggleMenuBar = this.createMenuItem(nls.localize({ key: 'miToggleMenuBar', comment: ['&& denotes a mnemonic'] }, "Toggle Menu &&Bar"), 'workbench.action.toggleMenuBar');
489489
const splitEditor = this.createMenuItem(nls.localize({ key: 'miSplitEditor', comment: ['&& denotes a mnemonic'] }, "Split &&Editor"), 'workbench.action.splitEditor');
490+
const toggleEditorLayout = this.createMenuItem(nls.localize({ key: 'miToggleEditorLayout', comment: ['&& denotes a mnemonic'] }, "Toggle Editor &&Layout"), 'workbench.action.toggleEditorLayout');
490491
const toggleSidebar = this.createMenuItem(nls.localize({ key: 'miToggleSidebar', comment: ['&& denotes a mnemonic'] }, "&&Toggle Side Bar"), 'workbench.action.toggleSidebarVisibility');
491492
const moveSidebar = this.createMenuItem(nls.localize({ key: 'miMoveSidebar', comment: ['&& denotes a mnemonic'] }, "&&Move Side Bar"), 'workbench.action.toggleSidebarPosition');
492493
const togglePanel = this.createMenuItem(nls.localize({ key: 'miTogglePanel', comment: ['&& denotes a mnemonic'] }, "Toggle &&Panel"), 'workbench.action.togglePanel');
@@ -519,6 +520,7 @@ export class VSCodeMenu {
519520
platform.isWindows || platform.isLinux ? toggleMenuBar : void 0,
520521
__separator__(),
521522
splitEditor,
523+
toggleEditorLayout,
522524
moveSidebar,
523525
toggleSidebar,
524526
togglePanel,
@@ -557,9 +559,9 @@ export class VSCodeMenu {
557559

558560
const switchGroupMenu = new Menu();
559561

560-
const focusFirstGroup = this.createMenuItem(nls.localize({ key: 'miFocusFirstGroup', comment: ['&& denotes a mnemonic'] }, "&&Left Group"), 'workbench.action.focusFirstEditorGroup');
561-
const focusSecondGroup = this.createMenuItem(nls.localize({ key: 'miFocusSecondGroup', comment: ['&& denotes a mnemonic'] }, "&&Center Group"), 'workbench.action.focusSecondEditorGroup');
562-
const focusThirdGroup = this.createMenuItem(nls.localize({ key: 'miFocusThirdGroup', comment: ['&& denotes a mnemonic'] }, "&&Right Group"), 'workbench.action.focusThirdEditorGroup');
562+
const focusFirstGroup = this.createMenuItem(nls.localize({ key: 'miFocusFirstGroup', comment: ['&& denotes a mnemonic'] }, "&&First Group"), 'workbench.action.focusFirstEditorGroup');
563+
const focusSecondGroup = this.createMenuItem(nls.localize({ key: 'miFocusSecondGroup', comment: ['&& denotes a mnemonic'] }, "&&Second Group"), 'workbench.action.focusSecondEditorGroup');
564+
const focusThirdGroup = this.createMenuItem(nls.localize({ key: 'miFocusThirdGroup', comment: ['&& denotes a mnemonic'] }, "&&Third Group"), 'workbench.action.focusThirdEditorGroup');
563565
const nextGroup = this.createMenuItem(nls.localize({ key: 'miNextGroup', comment: ['&& denotes a mnemonic'] }, "&&Next Group"), 'workbench.action.focusNextGroup');
564566
const previousGroup = this.createMenuItem(nls.localize({ key: 'miPreviousGroup', comment: ['&& denotes a mnemonic'] }, "&&Previous Group"), 'workbench.action.focusPreviousGroup');
565567

‎src/vs/platform/editor/common/editor.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -111,17 +111,17 @@ export interface IEditor {
111111
*/
112112
export enum Position {
113113

114-
/** Opens the editor in the LEFT most position replacing the input currently showing */
115-
LEFT = 0,
114+
/** Opens the editor in the first position replacing the input currently showing */
115+
ONE = 0,
116116

117-
/** Opens the editor in the CENTER position replacing the input currently showing */
118-
CENTER = 1,
117+
/** Opens the editor in the second position replacing the input currently showing */
118+
TWO = 1,
119119

120-
/** Opens the editor in the RIGHT most position replacing the input currently showing */
121-
RIGHT = 2
120+
/** Opens the editor in the third most position replacing the input currently showing */
121+
THREE = 2
122122
}
123123

124-
export const POSITIONS = [Position.LEFT, Position.CENTER, Position.RIGHT];
124+
export const POSITIONS = [Position.ONE, Position.TWO, Position.THREE];
125125

126126
export enum Direction {
127127
LEFT,

‎src/vs/workbench/api/node/extHostTypeConverters.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -102,13 +102,13 @@ export function toDiagnosticSeverty(value: Severity): types.DiagnosticSeverity {
102102
}
103103

104104
export function fromViewColumn(column?: vscode.ViewColumn): EditorPosition {
105-
let editorColumn = EditorPosition.LEFT;
105+
let editorColumn = EditorPosition.ONE;
106106
if (typeof column !== 'number') {
107-
// stick with LEFT
107+
// stick with ONE
108108
} else if (column === <number>types.ViewColumn.Two) {
109-
editorColumn = EditorPosition.CENTER;
109+
editorColumn = EditorPosition.TWO;
110110
} else if (column === <number>types.ViewColumn.Three) {
111-
editorColumn = EditorPosition.RIGHT;
111+
editorColumn = EditorPosition.THREE;
112112
}
113113
return editorColumn;
114114
}
@@ -117,11 +117,11 @@ export function toViewColumn(position?: EditorPosition): vscode.ViewColumn {
117117
if (typeof position !== 'number') {
118118
return;
119119
}
120-
if (position === EditorPosition.LEFT) {
120+
if (position === EditorPosition.ONE) {
121121
return <number>types.ViewColumn.One;
122-
} else if (position === EditorPosition.CENTER) {
122+
} else if (position === EditorPosition.TWO) {
123123
return <number>types.ViewColumn.Two;
124-
} else if (position === EditorPosition.RIGHT) {
124+
} else if (position === EditorPosition.THREE) {
125125
return <number>types.ViewColumn.Three;
126126
}
127127
}

‎src/vs/workbench/browser/actions/media/actions.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/*---------------------------------------------------------------------------------------------
2+
* Copyright (c) Microsoft Corporation. All rights reserved.
3+
* Licensed under the MIT License. See License.txt in the project root for license information.
4+
*--------------------------------------------------------------------------------------------*/
5+
6+
.monaco-workbench .toggle-editor-layout {
7+
background-image: url('editor-layout.svg');
8+
}
9+
10+
.vs-dark .monaco-workbench .toggle-editor-layout,
11+
.hc-black .monaco-workbench .toggle-editor-layout {
12+
background-image: url('editor-layout-inverse.svg');
13+
}

‎src/vs/workbench/browser/actions/media/editor-layout-inverse.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/vs/workbench/browser/actions/media/editor-layout.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎src/vs/workbench/browser/actions/openSettings.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,12 +74,12 @@ export class BaseTwoEditorsAction extends Action {
7474
return this.createIfNotExists(editableResource, defaultEditableContents).then(() => {
7575
return this.editorService.createInput({ resource: editableResource }).then(typedRightHandEditableInput => {
7676
const editors = [
77-
{ input: leftHandDefaultInput, position: Position.LEFT, options: { pinned: true } },
78-
{ input: typedRightHandEditableInput, position: Position.CENTER, options: { pinned: true } }
77+
{ input: leftHandDefaultInput, position: Position.ONE, options: { pinned: true } },
78+
{ input: typedRightHandEditableInput, position: Position.TWO, options: { pinned: true } }
7979
];
8080

8181
return this.editorService.openEditors(editors).then(() => {
82-
this.editorGroupService.focusGroup(Position.CENTER);
82+
this.editorGroupService.focusGroup(Position.TWO);
8383
});
8484
});
8585
});
@@ -153,7 +153,7 @@ export class OpenGlobalSettingsAction extends BaseOpenSettingsAction {
153153
const editorCount = this.editorService.getVisibleEditors().length;
154154

155155
return this.editorService.createInput({ resource: this.contextService.toResource(WORKSPACE_CONFIG_DEFAULT_PATH) }).then(typedInput => {
156-
return this.editorService.openEditor(typedInput, { pinned: true }, editorCount === 2 ? Position.RIGHT : editorCount === 1 ? Position.CENTER : void 0);
156+
return this.editorService.openEditor(typedInput, { pinned: true }, editorCount === 2 ? Position.THREE : editorCount === 1 ? Position.TWO : void 0);
157157
});
158158
}),
159159
new Action('neverShowAgain', nls.localize('neverShowAgain', "Don't show again"), null, true, () => {

‎src/vs/workbench/browser/actions/toggleEditorLayout.ts‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/*---------------------------------------------------------------------------------------------
2+
* Copyright (c) Microsoft Corporation. All rights reserved.
3+
* Licensed under the MIT License. See License.txt in the project root for license information.
4+
*--------------------------------------------------------------------------------------------*/
5+
'use strict';
6+
7+
import 'vs/css!./media/actions';
8+
import { TPromise } from 'vs/base/common/winjs.base';
9+
import nls = require('vs/nls');
10+
import { Registry } from 'vs/platform/platform';
11+
import { Action } from 'vs/base/common/actions';
12+
import { SyncActionDescriptor } from 'vs/platform/actions/common/actions';
13+
import { IMessageService, Severity } from 'vs/platform/message/common/message';
14+
import { IWorkbenchActionRegistry, Extensions } from 'vs/workbench/common/actionRegistry';
15+
import { IConfigurationEditingService, ConfigurationTarget } from 'vs/workbench/services/configuration/common/configurationEditing';
16+
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
17+
18+
export class ToggleEditorLayoutAction extends Action {
19+
20+
public static ID = 'workbench.action.toggleEditorLayout';
21+
public static LABEL = nls.localize('toggleEditorLayout', "Toggle Editor Layout");
22+
23+
private static editorLayoutConfigurationKey = 'workbench.editor.sideBySideLayout';
24+
25+
constructor(
26+
id: string,
27+
label: string,
28+
@IMessageService private messageService: IMessageService,
29+
@IConfigurationService private configurationService: IConfigurationService,
30+
@IConfigurationEditingService private configurationEditingService: IConfigurationEditingService
31+
) {
32+
super(id, label);
33+
34+
this.class = 'toggle-editor-layout';
35+
}
36+
37+
public run(): TPromise<any> {
38+
const editorLayoutVertical = this.configurationService.lookup('workbench.editor.sideBySideLayout').value !== 'horizontal';
39+
const newEditorLayout = editorLayoutVertical ? 'horizontal' : 'vertical';
40+
41+
this.configurationEditingService.writeConfiguration(ConfigurationTarget.USER, { key: ToggleEditorLayoutAction.editorLayoutConfigurationKey, value: newEditorLayout }).then(null, error => {
42+
this.messageService.show(Severity.Error, error);
43+
});
44+
45+
return TPromise.as(null);
46+
}
47+
}
48+
49+
const registry = Registry.as<IWorkbenchActionRegistry>(Extensions.WorkbenchActions);
50+
registry.registerWorkbenchAction(new SyncActionDescriptor(ToggleEditorLayoutAction, ToggleEditorLayoutAction.ID, ToggleEditorLayoutAction.LABEL), 'View: Toggle Editor Layout', nls.localize('view', "View"));

‎src/vs/workbench/browser/layout.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { IEditorGroupService } from 'vs/workbench/services/group/common/groupSer
2020

2121
const DEFAULT_MIN_PART_WIDTH = 170;
2222
const DEFAULT_MIN_PANEL_PART_HEIGHT = 77;
23-
const DEFAULT_MIN_EDITOR_PART_HEIGHT = 170;
23+
const DEFAULT_MIN_EDITOR_PART_HEIGHT = 210; /* 3 x 70px min height of editors when stacked vertically */
2424
const HIDE_SIDEBAR_WIDTH_THRESHOLD = 50;
2525
const HIDE_PANEL_HEIGHT_THRESHOLD = 50;
2626

0 commit comments

Comments
 (0)