From 3233f1aae075c2c1f8fa61c3a7882753f5441ca0 Mon Sep 17 00:00:00 2001 From: Joao Moreno Date: Mon, 18 Sep 2017 10:45:46 +0200 Subject: [PATCH] panelview: hide/show headers --- src/vs/base/browser/ui/splitview/panelview.ts | 105 ++++++++++-------- 1 file changed, 60 insertions(+), 45 deletions(-) diff --git a/src/vs/base/browser/ui/splitview/panelview.ts b/src/vs/base/browser/ui/splitview/panelview.ts index 2715c1cc0b3..7bd8c7af6aa 100644 --- a/src/vs/base/browser/ui/splitview/panelview.ts +++ b/src/vs/base/browser/ui/splitview/panelview.ts @@ -16,16 +16,11 @@ import { firstIndex } from 'vs/base/common/arrays'; import { Color, RGBA } from 'vs/base/common/color'; import { SplitView, IView } from './splitview2'; -enum PanelState { - Expanded, - Collapsed -} - export interface IPanelOptions { ariaHeaderLabel?: string; minimumBodySize?: number; maximumBodySize?: number; - collapsed?: boolean; + expanded?: boolean; } export interface IPanelStyles { @@ -36,7 +31,8 @@ export abstract class Panel implements IView { private static HEADER_SIZE = 22; - private state: PanelState = PanelState.Expanded; + private _expanded: boolean; + private _headerVisible: boolean; private _onDidChange = new Emitter(); private _minimumBodySize: number; private _maximumBodySize: number; @@ -63,20 +59,56 @@ export abstract class Panel implements IView { } get minimumSize(): number { - return Panel.HEADER_SIZE + (this.state === PanelState.Collapsed ? 0 : this._minimumBodySize); + const headerSize = this.headerVisible ? Panel.HEADER_SIZE : 0; + const expanded = !this.headerVisible || this.expanded; + const minimumBodySize = expanded ? this._minimumBodySize : 0; + + return headerSize + minimumBodySize; } get maximumSize(): number { - return Panel.HEADER_SIZE + (this.state === PanelState.Collapsed ? 0 : this._maximumBodySize); + const headerSize = this.headerVisible ? Panel.HEADER_SIZE : 0; + const expanded = !this.headerVisible || this.expanded; + const maximumBodySize = expanded ? this._maximumBodySize : 0; + + return headerSize + maximumBodySize; } readonly onDidChange: Event = this._onDidChange.event; constructor(options: IPanelOptions = {}) { + this._expanded = typeof options.expanded === 'undefined' ? true : !!options.expanded; this.ariaHeaderLabel = options.ariaHeaderLabel || ''; this._minimumBodySize = typeof options.minimumBodySize === 'number' ? options.minimumBodySize : 44; this._maximumBodySize = typeof options.maximumBodySize === 'number' ? options.maximumBodySize : Number.POSITIVE_INFINITY; - this.state = options.collapsed ? PanelState.Collapsed : PanelState.Expanded; + } + + get expanded(): boolean { + return this._expanded; + } + + set expanded(expanded: boolean) { + if (this._expanded === !!expanded) { + return; + } + + this._expanded = !!expanded; + this.renderHeader(); + this._onDidChange.fire(); + } + + get headerVisible(): boolean { + return this._headerVisible; + } + + set headerVisible(visible: boolean) { + if (this._headerVisible === !!visible) { + return; + } + + this._headerVisible = !!visible; + this.renderHeader(); + this._onDidChange.fire(); } render(container: HTMLElement): void { @@ -92,15 +124,16 @@ export abstract class Panel implements IView { .map(e => new StandardKeyboardEvent(e)); onHeaderKeyDown.filter(e => e.keyCode === KeyCode.Enter || e.keyCode === KeyCode.Space) - .event(this.toggleExpansion, this, this.disposables); + .event(() => this.expanded = !this.expanded, null, this.disposables); onHeaderKeyDown.filter(e => e.keyCode === KeyCode.LeftArrow) - .event(this.collapse, this, this.disposables); + .event(() => this.expanded = false, null, this.disposables); onHeaderKeyDown.filter(e => e.keyCode === KeyCode.RightArrow) - .event(this.expand, this, this.disposables); + .event(() => this.expanded = true, null, this.disposables); - domEvent(header, 'click')(this.toggleExpansion, this, this.disposables); + domEvent(header, 'click') + (() => this.expanded = !this.expanded, null, this.disposables); // TODO@Joao move this down to panelview // onHeaderKeyDown.filter(e => e.keyCode === KeyCode.UpArrow) @@ -114,42 +147,20 @@ export abstract class Panel implements IView { } layout(size: number): void { - this.layoutBody(size - Panel.HEADER_SIZE); + const headerSize = this.headerVisible ? Panel.HEADER_SIZE : 0; + this.layoutBody(size - headerSize); } focus(): void { // TODO@joao what to do } - toggleExpansion(): void { - if (this.state === PanelState.Expanded) { - return this.collapse(); - } else { - return this.expand(); - } - } - - expand(): void { - if (this.state === PanelState.Expanded) { - return; - } - - this.renderHeader(); - this._onDidChange.fire(); - } - - collapse(): void { - if (this.state === PanelState.Collapsed) { - return; - } - - this.renderHeader(); - this._onDidChange.fire(); - } - private renderHeader(): void { - toggleClass(this.header, 'expanded', this.state === PanelState.Expanded); - this.header.setAttribute('aria-expanded', String(this.state === PanelState.Expanded)); + const expanded = !this.headerVisible || this.expanded; + + toggleClass(this.header, 'hidden', !this.headerVisible); + toggleClass(this.header, 'expanded', expanded); + this.header.setAttribute('aria-expanded', String(expanded)); } protected abstract renderBody(container: HTMLElement): void; @@ -273,6 +284,9 @@ export class PanelView implements IDisposable { private splitview: SplitView; private animationTimer: number | null = null; + private _onDidDrop = new Emitter<{ from: Panel, to: Panel }>(); + readonly onDidDrop: Event<{ from: Panel, to: Panel }> = this._onDidDrop.event; + constructor(private container: HTMLElement, options?: IPanelViewOptions) { this.dnd = !!options.dnd; this.el = append(container, $('.monaco-panel-view')); @@ -286,7 +300,7 @@ export class PanelView implements IDisposable { if (this.dnd) { const draggable = new PanelDraggable(panel, this.dndContext); disposables.push(draggable); - draggable.onDidDrop(({ from, to }) => this.movePanel(from, to), null, disposables); + draggable.onDidDrop(this._onDidDrop.fire, this._onDidDrop, disposables); } const panelItem = { panel, disposable: combinedDisposable(disposables) }; @@ -340,6 +354,7 @@ export class PanelView implements IDisposable { } dispose(): void { - + this.panelItems.forEach(i => i.disposable.dispose()); + this.splitview.dispose(); } } -- GitLab