Merge pull request #36827 from Microsoft/isidorn/vertical_panel

Isidorn/vertical panel

src/vs/workbench/browser/parts/compositebar/compositeBar.ts

@@ -281,7 +281,7 @@ export class CompositeBar implements ICompositeBar {
 		}
 
 		// Add overflow action as needed
-		if (visibleCompositesChange && overflows) {
+		if ((visibleCompositesChange && overflows) || this.compositeSwitcherBar.length() === 0) {
 			this.compositeOverflowAction = this.instantiationService.createInstance(CompositeOverflowActivityAction, () => this.compositeOverflowActionItem.showMenu());
 			this.compositeOverflowActionItem = this.instantiationService.createInstance(
 				CompositeOverflowActivityActionItem,

src/vs/workbench/browser/parts/panel/media/panelpart.css

@@ -13,15 +13,23 @@
 }
 
 .monaco-workbench > .part.panel .title {
-	border-top-width: 1px;
-	border-top-style: solid;
 	padding-right: 0px;
 	height: 35px;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 }
 
+.monaco-workbench > .part.panel.bottom .title {
+	border-top-width: 1px;
+	border-top-style: solid;
+}
+
+.monaco-workbench > .part.panel.right {
+	border-left-width: 1px;
+	border-left-style: solid;
+}
+
 .monaco-workbench > .part.panel > .composite.title > .title-actions {
 	flex: 0;
 }
@@ -88,22 +96,22 @@
 	background: url('close.svg') center center no-repeat;
 }
 
-.monaco-workbench .maximize-panel-action {
-	background: url('up.svg') center center no-repeat;
+.monaco-workbench .move-panel-to-right {
+	background: url('panel-right.svg') center center no-repeat;
 }
 
-.vs-dark .monaco-workbench .maximize-panel-action,
-.hc-black .monaco-workbench .maximize-panel-action {
-	background: url('up-inverse.svg') center center no-repeat;
+.vs-dark .monaco-workbench .move-panel-to-right,
+.hc-black .monaco-workbench .move-panel-to-right {
+	background: url('panel-right-inverse.svg') center center no-repeat;
 }
 
-.monaco-workbench .minimize-panel-action {
-	background: url('down.svg') center center no-repeat;
+.monaco-workbench .move-panel-to-bottom {
+	background: url('panel-bottom.svg') center center no-repeat;
 }
 
-.vs-dark .monaco-workbench .minimize-panel-action,
-.hc-black .monaco-workbench .minimize-panel-action {
-	background: url('down-inverse.svg') center center no-repeat;
+.vs-dark .monaco-workbench .move-panel-to-bottom,
+.hc-black .monaco-workbench .move-panel-to-bottom {
+	background: url('panel-bottom-inverse.svg') center center no-repeat;
 }
 
 .vs-dark .monaco-workbench .hide-panel-action,

src/vs/workbench/browser/parts/panel/panelActions.ts

@@ -13,10 +13,11 @@ import { Registry } from 'vs/platform/registry/common/platform';
 import { SyncActionDescriptor } from 'vs/platform/actions/common/actions';
 import { IWorkbenchActionRegistry, Extensions as WorkbenchExtensions } from 'vs/workbench/common/actions';
 import { IPanelService, IPanelIdentifier } from 'vs/workbench/services/panel/common/panelService';
-import { IPartService, Parts } from 'vs/workbench/services/part/common/partService';
+import { IPartService, Parts, Position } from 'vs/workbench/services/part/common/partService';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { ActivityAction } from 'vs/workbench/browser/parts/compositebar/compositeBarActions';
 import { IActivity } from 'vs/workbench/common/activity';
+import { IConfigurationService, ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 
 export class OpenPanelAction extends Action {
 
@@ -117,32 +118,36 @@ class FocusPanelAction extends Action {
 	}
 }
 
-export class ToggleMaximizedPanelAction extends Action {
+export class TogglePanelPositionAction extends Action {
 
-	public static ID = 'workbench.action.toggleMaximizedPanel';
-	public static LABEL = nls.localize('toggleMaximizedPanel', "Toggle Maximized Panel");
-	private static MAXIMIZE_LABEL = nls.localize('maximizePanel', "Maximize Panel Size");
-	private static RESTORE_LABEL = nls.localize('minimizePanel', "Restore Panel Size");
+	public static ID = 'workbench.action.togglePanelPosition';
+	public static LABEL = nls.localize('toggledPanelPosition', "Toggle Panel Position");
+	private static MOVE_TO_RIGHT_LABEL = nls.localize('moveToRight', "Move to Right");
+	private static MOVE_TO_BOTTOM_LABEL = nls.localize('moveToBottom', "Move to Bottom");
+	private static panelPositionConfigurationKey = 'workbench.panel.location';
 	private toDispose: IDisposable[];
 
 	constructor(
 		id: string,
 		label: string,
-		@IPartService private partService: IPartService
+		@IPartService private partService: IPartService,
+		@IConfigurationService private configurationService: IConfigurationService
+
 	) {
-		super(id, label, partService.isPanelMaximized() ? 'minimize-panel-action' : 'maximize-panel-action');
+		super(id, label, partService.getPanelPosition() === Position.RIGHT ? 'move-panel-to-bottom' : 'move-panel-to-right');
 		this.toDispose = [];
 		this.toDispose.push(partService.onEditorLayout(() => {
-			const maximized = this.partService.isPanelMaximized();
-			this.class = maximized ? 'minimize-panel-action' : 'maximize-panel-action';
-			this.label = maximized ? ToggleMaximizedPanelAction.RESTORE_LABEL : ToggleMaximizedPanelAction.MAXIMIZE_LABEL;
+			const positionRight = this.partService.getPanelPosition() === Position.RIGHT;
+			this.class = positionRight ? 'move-panel-to-bottom' : 'move-panel-to-right';
+			this.label = positionRight ? TogglePanelPositionAction.MOVE_TO_BOTTOM_LABEL : TogglePanelPositionAction.MOVE_TO_RIGHT_LABEL;
 		}));
 	}
 
 	public run(): TPromise<any> {
-		// Show panel
-		return this.partService.setPanelHidden(false)
-			.then(() => this.partService.toggleMaximizedPanel());
+		const position = this.partService.getPanelPosition();
+		const newPositionValue = (position === Position.BOTTOM) ? 'right' : 'bottom';
+
+		return this.configurationService.updateValue(TogglePanelPositionAction.panelPositionConfigurationKey, newPositionValue, ConfigurationTarget.USER);
 	}
 
 	public dispose(): void {
@@ -168,5 +173,5 @@ export class PanelActivityAction extends ActivityAction {
 const actionRegistry = Registry.as<IWorkbenchActionRegistry>(WorkbenchExtensions.WorkbenchActions);
 actionRegistry.registerWorkbenchAction(new SyncActionDescriptor(TogglePanelAction, TogglePanelAction.ID, TogglePanelAction.LABEL, { primary: KeyMod.CtrlCmd | KeyCode.KEY_J }), 'View: Toggle Panel', nls.localize('view', "View"));
 actionRegistry.registerWorkbenchAction(new SyncActionDescriptor(FocusPanelAction, FocusPanelAction.ID, FocusPanelAction.LABEL), 'View: Focus into Panel', nls.localize('view', "View"));
-actionRegistry.registerWorkbenchAction(new SyncActionDescriptor(ToggleMaximizedPanelAction, ToggleMaximizedPanelAction.ID, ToggleMaximizedPanelAction.LABEL), 'View: Toggle Maximized Panel', nls.localize('view', "View"));
-actionRegistry.registerWorkbenchAction(new SyncActionDescriptor(ClosePanelAction, ClosePanelAction.ID, ClosePanelAction.LABEL), 'View: Close Panel', nls.localize('view', "View"));
+actionRegistry.registerWorkbenchAction(new SyncActionDescriptor(ClosePanelAction, ClosePanelAction.ID, ClosePanelAction.LABEL), 'View: Close Panel', nls.localize('view', "View"));
+actionRegistry.registerWorkbenchAction(new SyncActionDescriptor(TogglePanelPositionAction, TogglePanelPositionAction.ID, TogglePanelPositionAction.LABEL), 'View: Toggle Panel Position', nls.localize('view', "View"));

src/vs/workbench/browser/parts/panel/panelPart.ts

@@ -22,7 +22,7 @@ import { IMessageService } from 'vs/platform/message/common/message';
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
 import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
-import { ClosePanelAction, ToggleMaximizedPanelAction, PanelActivityAction, OpenPanelAction } from 'vs/workbench/browser/parts/panel/panelActions';
+import { ClosePanelAction, TogglePanelPositionAction, PanelActivityAction, OpenPanelAction } from 'vs/workbench/browser/parts/panel/panelActions';
 import { IThemeService, registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
 import { PANEL_BACKGROUND, PANEL_BORDER, PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER, PANEL_DRAG_AND_DROP_BACKGROUND } from 'vs/workbench/common/theme';
 import { activeContrastBorder, focusBorder, contrastBorder, editorBackground, badgeBackground, badgeForeground } from 'vs/platform/theme/common/colorRegistry';
@@ -36,6 +36,7 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 
 	public static activePanelSettingsKey = 'workbench.panelpart.activepanelid';
 	private static readonly PINNED_PANELS = 'workbench.panel.pinnedPanels';
+	private static readonly MIN_COMPOSITE_BAR_WIDTH = 50;
 
 	public _serviceBrand: any;
 
@@ -120,11 +121,12 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 		return this._onDidCompositeClose.event;
 	}
 
-	protected updateStyles(): void {
+	public updateStyles(): void {
 		super.updateStyles();
 
 		const container = this.getContainer();
 		container.style('background-color', this.getColor(PANEL_BACKGROUND));
+		container.style('border-left-color', this.getColor(PANEL_BORDER) || this.getColor(contrastBorder));
 
 		const title = this.getTitleArea();
 		title.style('border-top-color', this.getColor(PANEL_BORDER) || this.getColor(contrastBorder));
@@ -175,7 +177,7 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 
 	protected getActions(): IAction[] {
 		return [
-			this.instantiationService.createInstance(ToggleMaximizedPanelAction, ToggleMaximizedPanelAction.ID, ToggleMaximizedPanelAction.LABEL),
+			this.instantiationService.createInstance(TogglePanelPositionAction, TogglePanelPositionAction.ID, TogglePanelPositionAction.LABEL),
 			this.instantiationService.createInstance(ClosePanelAction, ClosePanelAction.ID, ClosePanelAction.LABEL)
 		];
 	}
@@ -224,7 +226,7 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 			let availableWidth = this.dimension.width - 8; // take padding into account
 			if (this.toolBar) {
 				// adjust height for global actions showing
-				availableWidth -= this.toolBar.getContainer().getHTMLElement().offsetWidth;
+				availableWidth = Math.max(PanelPart.MIN_COMPOSITE_BAR_WIDTH, availableWidth - this.toolBar.getContainer().getHTMLElement().offsetWidth);
 			}
 			this.compositeBar.layout(new Dimension(availableWidth, this.dimension.height));
 		}

src/vs/workbench/electron-browser/main.contribution.ts

@@ -222,6 +222,12 @@ let workbenchProperties: { [path: string]: IJSONSchema; } = {
 		'default': 'left',
 		'description': nls.localize('sideBarLocation', "Controls the location of the sidebar. It can either show on the left or right of the workbench.")
 	},
+	'workbench.panel.location': {
+		'type': 'string',
+		'enum': ['bottom', 'right'],
+		'default': 'bottom',
+		'description': nls.localize('panelLocation', "Controls the location of the panel. It can either show on the bottom or right of the workbench.")
+	},
 	'workbench.statusBar.visible': {
 		'type': 'boolean',
 		'default': true,