Polish affordance to maximize panel

fixes #22135

src/vs/workbench/browser/layout.ts

@@ -71,6 +71,7 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
 	private startPanelHeight: number;
 	private panelHeight: number;
 	private panelHeightBeforeMaximized: number;
+	private panelMaximized: boolean;
 	private panelWidth: number;
 	private layoutEditorGroupsVertically: boolean;
 
@@ -107,6 +108,7 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
 		this.toUnbind = [];
 		this.partLayoutInfo = this.getPartLayoutInfo();
 		this.panelHeightBeforeMaximized = 0;
+		this.panelMaximized = false;
 
 		this.sashX = new Sash(this.workbenchContainer.getHTMLElement(), this, {
 			baseSize: 5
@@ -342,9 +344,13 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
 			panelHeight = sidebarSize.height * DEFAULT_PANEL_HEIGHT_COEFFICIENT;
 		}
 		if (options && options.toggleMaximizedPanel) {
-			const heightToSwap = panelHeight;
-			panelHeight = panelHeight === maxPanelHeight ? Math.max(this.partLayoutInfo.panel.minHeight, Math.min(this.panelHeightBeforeMaximized, maxPanelHeight)) : maxPanelHeight;
-			this.panelHeightBeforeMaximized = heightToSwap;
+			panelHeight = this.panelMaximized ? Math.max(this.partLayoutInfo.panel.minHeight, Math.min(this.panelHeightBeforeMaximized, maxPanelHeight)) : maxPanelHeight;
+		}
+		this.panelMaximized = panelHeight === maxPanelHeight;
+		if (panelHeight / maxPanelHeight < 0.7) {
+			// Remember the previous height only if the panel size is not too large.
+			// To get a nice minimize effect even if a user dragged the panel sash to maximum.
+			this.panelHeightBeforeMaximized = panelHeight;
 		}
 		const panelDimension = new Dimension(this.workbenchSize.width - sidebarSize.width - activityBarSize.width, panelHeight);
 		this.panelWidth = panelDimension.width;
@@ -529,6 +535,10 @@ export class WorkbenchLayout implements IVerticalSashLayoutProvider, IHorizontal
 		return this.panelWidth;
 	}
 
+	public isPanelMaximized(): boolean {
+		return this.panelMaximized;
+	}
+
 	public dispose(): void {
 		if (this.toUnbind) {
 			dispose(this.toUnbind);

src/vs/workbench/browser/parts/panel/media/down-inverse.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>.icon-canvas-transparent{opacity:0;fill:#2d2d30}.icon-vs-out{fill:#2d2d30}.icon-vs-bg{fill:#c5c5c5}</style><path class="icon-canvas-transparent" d="M16 16H0V0h16v16z" id="canvas"/><path class="icon-vs-out" d="M.379 5.652l2.828-2.828 4.76 4.761 4.826-4.826 2.828 2.828-7.654 7.654L.379 5.652z" id="outline" style="display: none;"/><g id="iconBg"><path class="icon-vs-bg" d="M7.967 11.827L1.793 5.652l1.414-1.414 4.76 4.761 4.826-4.826 1.414 1.414-6.24 6.24z"/></g></svg>
\ No newline at end of file

src/vs/workbench/browser/parts/panel/media/down.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>.icon-canvas-transparent{opacity:0;fill:#f6f6f6}.icon-vs-out{fill:#f6f6f6}.icon-vs-bg{fill:#424242}</style><path class="icon-canvas-transparent" d="M16 16H0V0h16v16z" id="canvas"/><path class="icon-vs-out" d="M.379 5.652l2.828-2.828 4.76 4.761 4.826-4.826 2.828 2.828-7.654 7.654L.379 5.652z" id="outline" style="display: none;"/><g id="iconBg"><path class="icon-vs-bg" d="M7.967 11.827L1.793 5.652l1.414-1.414 4.76 4.761 4.826-4.826 1.414 1.414-6.24 6.24z"/></g></svg>
\ No newline at end of file

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

@@ -70,6 +70,24 @@
 	background: url('close.svg') center center no-repeat;
 }
 
+.monaco-workbench .maximize-panel-action {
+	background: url('up.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;
+}
+
+.monaco-workbench .minimize-panel-action {
+	background: url('down.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 .hide-panel-action,
 .hc-black .monaco-workbench .hide-panel-action {
 	background: url('close-inverse.svg') center center no-repeat;

src/vs/workbench/browser/parts/panel/media/up-inverse.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>.icon-canvas-transparent{opacity:0;fill:#2d2d30}.icon-vs-out{fill:#2d2d30}.icon-vs-bg{fill:#c5c5c5}</style><path class="icon-canvas-transparent" d="M16 16H0V0h16v16z" id="canvas"/><path class="icon-vs-out" d="M7.967 2.759l7.654 7.654-2.828 2.828-4.826-4.826-4.76 4.761-2.828-2.828 7.588-7.589z" id="outline" style="display: none;"/><g id="iconBg"><path class="icon-vs-bg" d="M14.207 10.413l-1.414 1.414-4.826-4.826-4.76 4.761-1.414-1.414 6.174-6.175 6.24 6.24z"/></g></svg>
\ No newline at end of file

src/vs/workbench/browser/parts/panel/media/up.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><style>.icon-canvas-transparent{opacity:0;fill:#f6f6f6}.icon-vs-out{fill:#f6f6f6}.icon-vs-bg{fill:#424242}</style><path class="icon-canvas-transparent" d="M16 16H0V0h16v16z" id="canvas"/><path class="icon-vs-out" d="M7.967 2.759l7.654 7.654-2.828 2.828-4.826-4.826-4.76 4.761-2.828-2.828 7.588-7.589z" id="outline" style="display: none;"/><g id="iconBg"><path class="icon-vs-bg" d="M14.207 10.413l-1.414 1.414-4.826-4.826-4.76 4.761-1.414-1.414 6.174-6.175 6.24 6.24z"/></g></svg>
\ No newline at end of file

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

@@ -6,6 +6,7 @@
 import 'vs/css!./media/panelpart';
 import nls = require('vs/nls');
 import { TPromise } from 'vs/base/common/winjs.base';
+import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { KeyMod, KeyCode } from 'vs/base/common/keyCodes';
 import { Action } from 'vs/base/common/actions';
 import { Registry } from 'vs/platform/platform';
@@ -113,17 +114,22 @@ class FocusPanelAction extends Action {
 	}
 }
 
-class ToggleMaximizedPanelAction extends Action {
+export class ToggleMaximizedPanelAction extends Action {
 
 	public static ID = 'workbench.action.toggleMaximizedPanel';
 	public static LABEL = nls.localize('toggleMaximizedPanel', "Toggle Maximized Panel");
+	private toDispose: IDisposable[];
 
 	constructor(
 		id: string,
 		label: string,
 		@IPartService private partService: IPartService
 	) {
-		super(id, label);
+		super(id, label, partService.isPanelMaximized() ? 'minimize-panel-action' : 'maximize-panel-action');
+		this.toDispose = [];
+		this.toDispose.push(partService.onEditorLayout(() => {
+			this.class = this.partService.isPanelMaximized() ? 'minimize-panel-action' : 'maximize-panel-action';
+		}));
 	}
 
 	public run(): TPromise<any> {
@@ -131,6 +137,11 @@ class ToggleMaximizedPanelAction extends Action {
 		return this.partService.setPanelHidden(false)
 			.then(() => this.partService.toggleMaximizedPanel());
 	}
+
+	public dispose(): void {
+		super.dispose();
+		this.toDispose = dispose(this.toDispose);
+	}
 }
 
 const actionRegistry = Registry.as<IWorkbenchActionRegistry>(WorkbenchExtensions.WorkbenchActions);

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

@@ -23,7 +23,7 @@ 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 { ActionsOrientation, ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
-import { ClosePanelAction, PanelAction } from 'vs/workbench/browser/parts/panel/panelActions';
+import { ClosePanelAction, PanelAction, ToggleMaximizedPanelAction } from 'vs/workbench/browser/parts/panel/panelActions';
 
 export class PanelPart extends CompositePart<Panel> implements IPanelService {
 
@@ -116,7 +116,10 @@ export class PanelPart extends CompositePart<Panel> implements IPanelService {
 	}
 
 	protected getActions(): IAction[] {
-		return [this.instantiationService.createInstance(ClosePanelAction, ClosePanelAction.ID, ClosePanelAction.LABEL)];
+		return [
+			this.instantiationService.createInstance(ToggleMaximizedPanelAction, ToggleMaximizedPanelAction.ID, ToggleMaximizedPanelAction.LABEL),
+			this.instantiationService.createInstance(ClosePanelAction, ClosePanelAction.ID, ClosePanelAction.LABEL)
+		];
 	}
 
 	public getActivePanel(): IPanel {

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

@@ -799,6 +799,10 @@ export class Workbench implements IPartService {
 		this.workbenchLayout.layout({ toggleMaximizedPanel: true });
 	}
 
+	public isPanelMaximized(): boolean {
+		return this.workbenchLayout.isPanelMaximized();
+	}
+
 	public getSideBarPosition(): Position {
 		return this.sideBarPosition;
 	}

src/vs/workbench/services/part/common/partService.ts

@@ -97,6 +97,11 @@ export interface IPartService {
 	 */
 	toggleMaximizedPanel(): void;
 
+	/**
+	 * Returns true if the panel is maximized.
+	 */
+	isPanelMaximized(): boolean;
+
 	/**
 	 * Gets the current side bar position. Note that the sidebar can be hidden too.
 	 */