From b41f18116fc047aca3aee807928e6533723452bd Mon Sep 17 00:00:00 2001 From: isidor Date: Tue, 14 Mar 2017 11:20:10 +0100 Subject: [PATCH] Polish affordance to maximize panel fixes #22135 --- src/vs/workbench/browser/layout.ts | 16 +++++++++++++--- .../browser/parts/panel/media/down-inverse.svg | 1 + .../browser/parts/panel/media/down.svg | 1 + .../browser/parts/panel/media/panelpart.css | 18 ++++++++++++++++++ .../browser/parts/panel/media/up-inverse.svg | 1 + .../workbench/browser/parts/panel/media/up.svg | 1 + .../browser/parts/panel/panelActions.ts | 15 +++++++++++++-- .../workbench/browser/parts/panel/panelPart.ts | 7 +++++-- src/vs/workbench/electron-browser/workbench.ts | 4 ++++ .../services/part/common/partService.ts | 5 +++++ 10 files changed, 62 insertions(+), 7 deletions(-) create mode 100755 src/vs/workbench/browser/parts/panel/media/down-inverse.svg create mode 100755 src/vs/workbench/browser/parts/panel/media/down.svg create mode 100755 src/vs/workbench/browser/parts/panel/media/up-inverse.svg create mode 100755 src/vs/workbench/browser/parts/panel/media/up.svg diff --git a/src/vs/workbench/browser/layout.ts b/src/vs/workbench/browser/layout.ts index 3d2d3eaa5c8..cb2f7c3e7c1 100644 --- a/src/vs/workbench/browser/layout.ts +++ b/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); diff --git a/src/vs/workbench/browser/parts/panel/media/down-inverse.svg b/src/vs/workbench/browser/parts/panel/media/down-inverse.svg new file mode 100755 index 00000000000..d436c7e2735 --- /dev/null +++ b/src/vs/workbench/browser/parts/panel/media/down-inverse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/panel/media/down.svg b/src/vs/workbench/browser/parts/panel/media/down.svg new file mode 100755 index 00000000000..279f3570dc8 --- /dev/null +++ b/src/vs/workbench/browser/parts/panel/media/down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/panel/media/panelpart.css b/src/vs/workbench/browser/parts/panel/media/panelpart.css index a804b25e8aa..5df1755a733 100644 --- a/src/vs/workbench/browser/parts/panel/media/panelpart.css +++ b/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; diff --git a/src/vs/workbench/browser/parts/panel/media/up-inverse.svg b/src/vs/workbench/browser/parts/panel/media/up-inverse.svg new file mode 100755 index 00000000000..33b7f7c65f6 --- /dev/null +++ b/src/vs/workbench/browser/parts/panel/media/up-inverse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/panel/media/up.svg b/src/vs/workbench/browser/parts/panel/media/up.svg new file mode 100755 index 00000000000..0033a327163 --- /dev/null +++ b/src/vs/workbench/browser/parts/panel/media/up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/browser/parts/panel/panelActions.ts b/src/vs/workbench/browser/parts/panel/panelActions.ts index df0640c695f..e8f4284ac3c 100644 --- a/src/vs/workbench/browser/parts/panel/panelActions.ts +++ b/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 { @@ -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(WorkbenchExtensions.WorkbenchActions); diff --git a/src/vs/workbench/browser/parts/panel/panelPart.ts b/src/vs/workbench/browser/parts/panel/panelPart.ts index 7f9f6078958..3fc8c7302ba 100644 --- a/src/vs/workbench/browser/parts/panel/panelPart.ts +++ b/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 implements IPanelService { @@ -116,7 +116,10 @@ export class PanelPart extends CompositePart 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 { diff --git a/src/vs/workbench/electron-browser/workbench.ts b/src/vs/workbench/electron-browser/workbench.ts index ac9f8a85337..55dccbd91e5 100644 --- a/src/vs/workbench/electron-browser/workbench.ts +++ b/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; } diff --git a/src/vs/workbench/services/part/common/partService.ts b/src/vs/workbench/services/part/common/partService.ts index e52358f54b8..e4423ffa844 100644 --- a/src/vs/workbench/services/part/common/partService.ts +++ b/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. */ -- GitLab