diff --git a/src/vs/base/browser/ui/grid/gridview.ts b/src/vs/base/browser/ui/grid/gridview.ts index 083156d7eb8531d40ebf494acb3b0dc75750f957..4a9e900c3b0dde69c8ca2ffa62a7755d1a2ce75c 100644 --- a/src/vs/base/browser/ui/grid/gridview.ts +++ b/src/vs/base/browser/ui/grid/gridview.ts @@ -7,7 +7,7 @@ import 'vs/css!./gridview'; import { Event, anyEvent, Emitter, mapEvent, Relay } from 'vs/base/common/event'; -import { Orientation, Sash } from 'vs/base/browser/ui/sash/sash'; +import { Orientation } from 'vs/base/browser/ui/sash/sash'; import { SplitView, IView as ISplitView, Sizing, ISplitViewStyles } from 'vs/base/browser/ui/splitview/splitview'; import { empty as EmptyDisposable, IDisposable } from 'vs/base/common/lifecycle'; import { $, append } from 'vs/base/browser/dom'; @@ -136,11 +136,6 @@ class BranchNode implements ISplitView, IDisposable { private splitviewSashResetDisposable: IDisposable = EmptyDisposable; private childrenSashResetDisposable: IDisposable = EmptyDisposable; - get orthogonalStartSash(): Sash | undefined { return this.splitview.orthogonalStartSash; } - set orthogonalStartSash(sash: Sash | undefined) { this.splitview.orthogonalStartSash = sash; } - get orthogonalEndSash(): Sash | undefined { return this.splitview.orthogonalEndSash; } - set orthogonalEndSash(sash: Sash | undefined) { this.splitview.orthogonalEndSash = sash; } - constructor( readonly orientation: Orientation, styles: IGridViewStyles, @@ -155,7 +150,7 @@ class BranchNode implements ISplitView, IDisposable { this.children = []; this.element = $('.monaco-grid-branch-node'); - this.splitview = new SplitView(this.element, { orientation, styles }); + this.splitview = new SplitView(this.element, { orientation: this.orientation, styles }); this.splitview.layout(size); const onDidSashReset = mapEvent(this.splitview.onDidSashReset, i => [i]); @@ -193,8 +188,6 @@ class BranchNode implements ISplitView, IDisposable { this.splitview.addView(node, size, index); this.children.splice(index, 0, node); - node.orthogonalStartSash = this.splitview.sashes[index - 1]; - node.orthogonalEndSash = this.splitview.sashes[index]; this.onDidChildrenChange(); } @@ -222,7 +215,6 @@ class BranchNode implements ISplitView, IDisposable { } this.splitview.swapViews(from, to); - [this.children[from].orthogonalStartSash, this.children[from].orthogonalEndSash, this.children[to].orthogonalStartSash, this.children[to].orthogonalEndSash] = [this.children[to].orthogonalStartSash, this.children[to].orthogonalEndSash, this.children[from].orthogonalStartSash, this.children[from].orthogonalEndSash]; [this.children[from], this.children[to]] = [this.children[to], this.children[from]]; } @@ -320,14 +312,6 @@ class LeafNode implements ISplitView, IDisposable { return mapEvent(this.view.onDidChange, this.orientation === Orientation.HORIZONTAL ? ({ width }) => width : ({ height }) => height); } - set orthogonalStartSash(sash: Sash) { - // noop - } - - set orthogonalEndSash(sash: Sash) { - // noop - } - layout(size: number): void { this._size = size; return this.view.layout(this.width, this.height); diff --git a/src/vs/base/browser/ui/sash/sash.css b/src/vs/base/browser/ui/sash/sash.css index 9178909bb502af4b7f21f7f3579b26648f77aeec..91888dd1e9e2b2d4fdfe41f4a742df264c4d7707 100644 --- a/src/vs/base/browser/ui/sash/sash.css +++ b/src/vs/base/browser/ui/sash/sash.css @@ -9,49 +9,16 @@ touch-action: none; } -.monaco-sash.disabled { - pointer-events: none; -} - .monaco-sash.vertical { cursor: ew-resize; - top: 0; - width: 4px; height: 100%; + top: 0; } .monaco-sash.horizontal { cursor: ns-resize; - left: 0; width: 100%; - height: 4px; -} - -.monaco-sash:not(.disabled).orthogonal-start::before, -.monaco-sash:not(.disabled).orthogonal-end::after { - content: ' '; - height: 4px; - width: 4px; - z-index: 100; - display: block; - cursor: all-scroll; - position: absolute; -} - -.monaco-sash.orthogonal-start.vertical::before { - top: -2px; -} - -.monaco-sash.orthogonal-end.vertical::after { - bottom: -2px; -} - -.monaco-sash.orthogonal-start.horizontal::before { - left: -2px; -} - -.monaco-sash.orthogonal-end.horizontal::after { - right: -2px; + left: 0; } .monaco-sash.disabled { @@ -66,14 +33,4 @@ .monaco-sash.mac.horizontal { cursor: row-resize; -} - -/** Touch **/ - -.monaco-sash.touch.vertical { - width: 20px; -} - -.monaco-sash.touch.horizontal { - height: 20px; -} +} \ No newline at end of file diff --git a/src/vs/base/browser/ui/sash/sash.ts b/src/vs/base/browser/ui/sash/sash.ts index 7e7b413c8385c9148051217074aa2be82c505ac2..d0a2d30d3e20324583d6ec4a4743be05352bc1b3 100644 --- a/src/vs/base/browser/ui/sash/sash.ts +++ b/src/vs/base/browser/ui/sash/sash.ts @@ -7,14 +7,14 @@ import 'vs/css!./sash'; import { IDisposable, Disposable, dispose } from 'vs/base/common/lifecycle'; +import { Builder, $ } from 'vs/base/browser/builder'; import { isIPad } from 'vs/base/browser/browser'; import { isMacintosh } from 'vs/base/common/platform'; import * as types from 'vs/base/common/types'; import { EventType, GestureEvent, Gesture } from 'vs/base/browser/touch'; import { StandardMouseEvent } from 'vs/base/browser/mouseEvent'; import { Event, Emitter } from 'vs/base/common/event'; -import { getElementsByTagName, EventHelper, createStyleSheet, addDisposableListener, Dimension, append, $, addClass, removeClass } from 'vs/base/browser/dom'; -import { domEvent } from 'vs/base/browser/event'; +import { getElementsByTagName, EventHelper, EventType as DOMEventType, createStyleSheet, addDisposableListener, Dimension } from 'vs/base/browser/dom'; export interface ISashLayoutProvider { } @@ -39,9 +39,8 @@ export interface ISashEvent { } export interface ISashOptions { + baseSize?: number; orientation?: Orientation; - orthogonalStartSash?: Sash; - orthogonalEndSash?: Sash; } export enum Orientation { @@ -51,109 +50,70 @@ export enum Orientation { export class Sash { - private el: HTMLElement; + private $e: Builder; private layoutProvider: ISashLayoutProvider; + private isDisabled: boolean; private hidden: boolean; private orientation: Orientation; - private disposables: IDisposable[] = []; + private size: number; - private _enabled = true; - get enabled(): boolean { return this._enabled; } - set enabled(enabled: boolean) { - this._enabled = enabled; - - if (enabled) { - removeClass(this.el, 'disabled'); - } else { - addClass(this.el, 'disabled'); - } - - this._onDidEnablementChange.fire(enabled); - } - - private readonly _onDidEnablementChange = new Emitter(); - readonly onDidEnablementChange: Event = this._onDidEnablementChange.event; - - private readonly _onDidStart = new Emitter(); - readonly onDidStart: Event = this._onDidStart.event; - - private readonly _onDidChange = new Emitter(); - readonly onDidChange: Event = this._onDidChange.event; - - private readonly _onDidReset = new Emitter(); - readonly onDidReset: Event = this._onDidReset.event; - - private readonly _onDidEnd = new Emitter(); - readonly onDidEnd: Event = this._onDidEnd.event; - - private orthogonalStartSashDisposables: IDisposable[] = []; - private _orthogonalStartSash: Sash | undefined; - get orthogonalStartSash(): Sash | undefined { return this._orthogonalStartSash; } - set orthogonalStartSash(sash: Sash | undefined) { - this.orthogonalStartSashDisposables = dispose(this.orthogonalStartSashDisposables); - - if (sash) { - sash.onDidEnablementChange(this.onOrthogonalStartSashEnablementChange, this, this.orthogonalStartSashDisposables); - this.onOrthogonalStartSashEnablementChange(sash.enabled); - } else { - this.onOrthogonalStartSashEnablementChange(false); - } - - this._orthogonalStartSash = sash; - } - - private orthogonalEndSashDisposables: IDisposable[] = []; - private _orthogonalEndSash: Sash | undefined; - get orthogonalEndSash(): Sash | undefined { return this._orthogonalEndSash; } - set orthogonalEndSash(sash: Sash | undefined) { - this.orthogonalEndSashDisposables = dispose(this.orthogonalEndSashDisposables); - - if (sash) { - sash.onDidEnablementChange(this.onOrthogonalEndSashEnablementChange, this, this.orthogonalEndSashDisposables); - this.onOrthogonalEndSashEnablementChange(sash.enabled); - } else { - this.onOrthogonalEndSashEnablementChange(false); - } - - this._orthogonalEndSash = sash; - } + private _onDidStart = new Emitter(); + private _onDidChange = new Emitter(); + private _onDidReset = new Emitter(); + private _onDidEnd = new Emitter(); constructor(container: HTMLElement, layoutProvider: ISashLayoutProvider, options: ISashOptions = {}) { - this.el = append(container, $('.monaco-sash')); + this.$e = $('.monaco-sash').appendTo(container); if (isMacintosh) { - addClass(this.el, 'mac'); + this.$e.addClass('mac'); } - domEvent(this.el, 'mousedown')(this.onMouseDown, this, this.disposables); - domEvent(this.el, 'dblclick')(this.onMouseDoubleClick, this, this.disposables); + this.$e.on(DOMEventType.MOUSE_DOWN, (e) => { this.onMouseDown(e as MouseEvent); }); + this.$e.on(DOMEventType.DBLCLICK, (e) => this._onDidReset.fire()); + Gesture.addTarget(this.$e.getHTMLElement()); + this.$e.on(EventType.Start, (e) => { this.onTouchStart(e as GestureEvent); }); - Gesture.addTarget(this.el); - domEvent(this.el, EventType.Start)(this.onTouchStart, this, this.disposables); + this.size = options.baseSize || 5; if (isIPad) { - // see also http://ux.stackexchange.com/questions/39023/what-is-the-optimum-button-size-of-touch-screen-applications - addClass(this.el, 'touch'); + this.size *= 4; // see also http://ux.stackexchange.com/questions/39023/what-is-the-optimum-button-size-of-touch-screen-applications + this.$e.addClass('touch'); } this.setOrientation(options.orientation || Orientation.VERTICAL); + this.isDisabled = false; this.hidden = false; this.layoutProvider = layoutProvider; + } + + public get onDidStart(): Event { + return this._onDidStart.event; + } + + public get onDidChange(): Event { + return this._onDidChange.event; + } - this.orthogonalStartSash = options.orthogonalStartSash; - this.orthogonalEndSash = options.orthogonalEndSash; + public get onDidReset(): Event { + return this._onDidReset.event; } - setOrientation(orientation: Orientation): void { + public get onDidEnd(): Event { + return this._onDidEnd.event; + } + + public setOrientation(orientation: Orientation): void { this.orientation = orientation; + this.$e.removeClass('horizontal', 'vertical'); + this.$e.addClass(this.getOrientation()); + if (this.orientation === Orientation.HORIZONTAL) { - addClass(this.el, 'horizontal'); - removeClass(this.el, 'vertical'); + this.$e.size(null, this.size); } else { - removeClass(this.el, 'horizontal'); - addClass(this.el, 'vertical'); + this.$e.size(this.size); } if (this.layoutProvider) { @@ -161,39 +121,20 @@ export class Sash { } } + private getOrientation(): 'horizontal' | 'vertical' { + return this.orientation === Orientation.HORIZONTAL ? 'horizontal' : 'vertical'; + } + private onMouseDown(e: MouseEvent): void { EventHelper.stop(e, false); - if (!(e as any).__orthogonalSashEvent) { - let orthogonalSash: Sash | undefined; - - if (this.orientation === Orientation.VERTICAL) { - if (e.offsetY <= 2) { - orthogonalSash = this.orthogonalStartSash; - } else if (e.offsetY >= this.el.clientHeight - 2) { - orthogonalSash = this.orthogonalEndSash; - } - } else { - if (e.offsetX <= 2) { - orthogonalSash = this.orthogonalStartSash; - } else if (e.offsetX >= this.el.clientWidth - 2) { - orthogonalSash = this.orthogonalEndSash; - } - } - - if (orthogonalSash) { - (e as any).__orthogonalSashEvent = true; - orthogonalSash.onMouseDown(e); - } - } - - if (!this.enabled) { + if (this.isDisabled) { return; } - const iframes = getElementsByTagName('iframe'); - for (const iframe of iframes) { - iframe.style.pointerEvents = 'none'; // disable mouse events on iframes as long as we drag the sash + const iframes = $(getElementsByTagName('iframe')); + if (iframes) { + iframes.style('pointer-events', 'none'); // disable mouse events on iframes as long as we drag the sash } const mouseDownEvent = new StandardMouseEvent(e); @@ -209,20 +150,20 @@ export class Sash { altKey }; - addClass(this.el, 'active'); + this.$e.addClass('active'); this._onDidStart.fire(startEvent); + const $window = $(window); + // fix https://github.com/Microsoft/vscode/issues/21675 - const globalStyle = createStyleSheet(this.el); + const globalStyle = createStyleSheet(this.$e.getHTMLElement()); if (this.orientation === Orientation.HORIZONTAL) { globalStyle.innerHTML = `* { cursor: ${isMacintosh ? 'row-resize' : 'ns-resize'}; }`; } else { globalStyle.innerHTML = `* { cursor: ${isMacintosh ? 'col-resize' : 'ew-resize'}; }`; } - const disposables: IDisposable[] = []; - - const onMouseMove = (e: MouseEvent) => { + $window.on('mousemove', (e) => { EventHelper.stop(e, false); const mouseMoveEvent = new StandardMouseEvent(e as MouseEvent); @@ -235,30 +176,21 @@ export class Sash { }; this._onDidChange.fire(event); - }; - - const onMouseUp = (e: MouseEvent) => { + }).once('mouseup', (e) => { EventHelper.stop(e, false); - this.el.removeChild(globalStyle); + this.$e.getHTMLElement().removeChild(globalStyle); - removeClass(this.el, 'active'); + this.$e.removeClass('active'); this._onDidEnd.fire(); - dispose(disposables); + $window.off('mousemove'); - const iframes = getElementsByTagName('iframe'); - for (const iframe of iframes) { - iframe.style.pointerEvents = 'auto'; + const iframes = $(getElementsByTagName('iframe')); + if (iframes) { + iframes.style('pointer-events', 'auto'); } - }; - - domEvent(window, 'mousemove')(onMouseMove, null, disposables); - domEvent(window, 'mouseup')(onMouseUp, null, disposables); - } - - private onMouseDoubleClick(event: MouseEvent): void { - this._onDidReset.fire(); + }); } private onTouchStart(event: GestureEvent): void { @@ -279,7 +211,7 @@ export class Sash { altKey }); - listeners.push(addDisposableListener(this.el, EventType.Change, (event: GestureEvent) => { + listeners.push(addDisposableListener(this.$e.getHTMLElement(), EventType.Change, (event: GestureEvent) => { if (types.isNumber(event.pageX) && types.isNumber(event.pageY)) { this._onDidChange.fire({ startX: startX, @@ -291,82 +223,75 @@ export class Sash { } })); - listeners.push(addDisposableListener(this.el, EventType.End, (event: GestureEvent) => { + listeners.push(addDisposableListener(this.$e.getHTMLElement(), EventType.End, (event: GestureEvent) => { this._onDidEnd.fire(); dispose(listeners); })); } - layout(): void { - const size = isIPad ? 20 : 4; + public layout(): void { + let style: { top?: string; left?: string; height?: string; width?: string; }; if (this.orientation === Orientation.VERTICAL) { const verticalProvider = (this.layoutProvider); - this.el.style.left = verticalProvider.getVerticalSashLeft(this) - (size / 2) + 'px'; + style = { left: verticalProvider.getVerticalSashLeft(this) - (this.size / 2) + 'px' }; if (verticalProvider.getVerticalSashTop) { - this.el.style.top = verticalProvider.getVerticalSashTop(this) + 'px'; + style.top = verticalProvider.getVerticalSashTop(this) + 'px'; } if (verticalProvider.getVerticalSashHeight) { - this.el.style.height = verticalProvider.getVerticalSashHeight(this) + 'px'; + style.height = verticalProvider.getVerticalSashHeight(this) + 'px'; } } else { const horizontalProvider = (this.layoutProvider); - this.el.style.top = horizontalProvider.getHorizontalSashTop(this) - (size / 2) + 'px'; + style = { top: horizontalProvider.getHorizontalSashTop(this) - (this.size / 2) + 'px' }; if (horizontalProvider.getHorizontalSashLeft) { - this.el.style.left = horizontalProvider.getHorizontalSashLeft(this) + 'px'; + style.left = horizontalProvider.getHorizontalSashLeft(this) + 'px'; } if (horizontalProvider.getHorizontalSashWidth) { - this.el.style.width = horizontalProvider.getHorizontalSashWidth(this) + 'px'; + style.width = horizontalProvider.getHorizontalSashWidth(this) + 'px'; } } + + this.$e.style(style); } - show(): void { + public show(): void { this.hidden = false; - this.el.style.removeProperty('display'); - this.el.setAttribute('aria-hidden', 'false'); + this.$e.show(); } - hide(): void { + public hide(): void { this.hidden = true; - this.el.style.display = 'none'; - this.el.setAttribute('aria-hidden', 'true'); + this.$e.hide(); } - isHidden(): boolean { + public isHidden(): boolean { return this.hidden; } - private onOrthogonalStartSashEnablementChange(enabled: boolean): void { - if (enabled) { - addClass(this.el, 'orthogonal-start'); - } else { - removeClass(this.el, 'orthogonal-start'); - } + public enable(): void { + this.$e.removeClass('disabled'); + this.isDisabled = false; } - private onOrthogonalEndSashEnablementChange(enabled: boolean): void { - if (enabled) { - addClass(this.el, 'orthogonal-end'); - } else { - removeClass(this.el, 'orthogonal-end'); - } + public disable(): void { + this.$e.addClass('disabled'); + this.isDisabled = true; } - dispose(): void { - this.orthogonalStartSashDisposables = dispose(this.orthogonalStartSashDisposables); - this.orthogonalEndSashDisposables = dispose(this.orthogonalEndSashDisposables); + get enabled(): boolean { + return !this.isDisabled; + } - if (this.el && this.el.parentElement) { - this.el.parentElement.removeChild(this.el); + public dispose(): void { + if (this.$e) { + this.$e.destroy(); + this.$e = null; } - - this.el = null; - this.disposables = dispose(this.disposables); } } @@ -382,7 +307,7 @@ export class VSash extends Disposable implements IVerticalSashLayoutProvider { private dimension: Dimension; private readonly _onPositionChange: Emitter = new Emitter(); - get onPositionChange(): Event { return this._onPositionChange.event; } + public get onPositionChange(): Event { return this._onPositionChange.event; } constructor(container: HTMLElement, private minWidth: number) { super(); @@ -396,19 +321,19 @@ export class VSash extends Disposable implements IVerticalSashLayoutProvider { this._register(this.sash.onDidReset(() => this.onSashReset())); } - getVerticalSashTop(): number { + public getVerticalSashTop(): number { return 0; } - getVerticalSashLeft(): number { + public getVerticalSashLeft(): number { return this.position; } - getVerticalSashHeight(): number { + public getVerticalSashHeight(): number { return this.dimension.height; } - setDimenesion(dimension: Dimension) { + public setDimenesion(dimension: Dimension) { this.dimension = dimension; this.compute(this.ratio); } diff --git a/src/vs/base/browser/ui/splitview/splitview.css b/src/vs/base/browser/ui/splitview/splitview.css index d75480ba68137c28c4ccd448982b40df8b4606f8..20157f1ed3bd2901cb1b4e9264d2949454801f0e 100644 --- a/src/vs/base/browser/ui/splitview/splitview.css +++ b/src/vs/base/browser/ui/splitview/splitview.css @@ -5,32 +5,19 @@ .monaco-split-view2 { position: relative; - width: 100%; - height: 100%; -} - -.monaco-split-view2 > .sash-container { - position: absolute; + overflow: hidden; width: 100%; height: 100%; } .monaco-split-view2 > .split-view-container { - display: flex; width: 100%; height: 100%; white-space: nowrap; } -.monaco-split-view2.vertical > .split-view-container { - flex-direction: column; -} - -.monaco-split-view2.horizontal > .split-view-container { - flex-direction: row; -} - .monaco-split-view2 > .split-view-container > .split-view-view { + overflow: hidden; white-space: initial; } diff --git a/src/vs/base/browser/ui/splitview/splitview.ts b/src/vs/base/browser/ui/splitview/splitview.ts index 4290d4b4ab1a33bace66e904627ae417d258cc95..b42ed90234194623e8c46d98a8989d18567c61aa 100644 --- a/src/vs/base/browser/ui/splitview/splitview.ts +++ b/src/vs/base/browser/ui/splitview/splitview.ts @@ -27,8 +27,6 @@ const defaultStyles: ISplitViewStyles = { export interface ISplitViewOptions { orientation?: Orientation; // default Orientation.VERTICAL styles?: ISplitViewStyles; - orthogonalStartSash?: Sash; - orthogonalEndSash?: Sash; } export interface IView { @@ -119,9 +117,8 @@ export namespace Sizing { export class SplitView implements IDisposable { - readonly orientation: Orientation; + private orientation: Orientation; private el: HTMLElement; - private sashContainer: HTMLElement; private viewContainer: HTMLElement; private size = 0; private contentSize = 0; @@ -139,30 +136,6 @@ export class SplitView implements IDisposable { return this.viewItems.length; } - private _orthogonalStartSash: Sash | undefined; - get orthogonalStartSash(): Sash | undefined { return this._orthogonalStartSash; } - set orthogonalStartSash(sash: Sash | undefined) { - for (const sashItem of this.sashItems) { - sashItem.sash.orthogonalStartSash = sash; - } - - this._orthogonalStartSash = sash; - } - - private _orthogonalEndSash: Sash | undefined; - get orthogonalEndSash(): Sash | undefined { return this._orthogonalEndSash; } - set orthogonalEndSash(sash: Sash | undefined) { - for (const sashItem of this.sashItems) { - sashItem.sash.orthogonalEndSash = sash; - } - - this._orthogonalEndSash = sash; - } - - get sashes(): Sash[] { - return this.sashItems.map(s => s.sash); - } - constructor(container: HTMLElement, options: ISplitViewOptions = {}) { this.orientation = types.isUndefined(options.orientation) ? Orientation.VERTICAL : options.orientation; @@ -171,8 +144,9 @@ export class SplitView implements IDisposable { dom.addClass(this.el, this.orientation === Orientation.VERTICAL ? 'vertical' : 'horizontal'); container.appendChild(this.el); - this.sashContainer = dom.append(this.el, dom.$('.sash-container')); - this.viewContainer = dom.append(this.el, dom.$('.split-view-container')); + this.viewContainer = document.createElement('div'); + dom.addClass(this.viewContainer, 'split-view-container'); + this.el.appendChild(this.viewContainer); this.style(options.styles || defaultStyles); } @@ -233,11 +207,7 @@ export class SplitView implements IDisposable { if (this.viewItems.length > 1) { const orientation = this.orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL; const layoutProvider = this.orientation === Orientation.VERTICAL ? { getHorizontalSashTop: sash => this.getSashPosition(sash) } : { getVerticalSashLeft: sash => this.getSashPosition(sash) }; - const sash = new Sash(this.sashContainer, layoutProvider, { - orientation, - orthogonalStartSash: this.orthogonalStartSash, - orthogonalEndSash: this.orthogonalEndSash - }); + const sash = new Sash(this.el, layoutProvider, { orientation }); const sashEventMapper = this.orientation === Orientation.VERTICAL ? (e: IBaseSashEvent) => ({ sash, start: e.startY, current: e.currentY }) : (e: IBaseSashEvent) => ({ sash, start: e.startX, current: e.currentX }); @@ -513,7 +483,11 @@ export class SplitView implements IDisposable { const expandsUp = reverseViews.map(i => previous = (i.view.maximumSize - i.size > 0) || previous).reverse(); this.sashItems.forEach((s, i) => { - s.sash.enabled = (collapsesDown[i] && expandsUp[i + 1]) || (expandsDown[i] && collapsesUp[i + 1]); + if ((collapsesDown[i] && expandsUp[i + 1]) || (expandsDown[i] && collapsesUp[i + 1])) { + s.sash.enable(); + } else { + s.sash.disable(); + } }); } diff --git a/src/vs/base/test/browser/ui/splitview/splitview.test.ts b/src/vs/base/test/browser/ui/splitview/splitview.test.ts index 24cf6baddf8b293e4d3636c34181a5a574627e88..f5ccb28b57c8657f6c61188aa2011eeb0c0c4572 100644 --- a/src/vs/base/test/browser/ui/splitview/splitview.test.ts +++ b/src/vs/base/test/browser/ui/splitview/splitview.test.ts @@ -94,7 +94,7 @@ suite('Splitview', () => { let viewQuery = container.querySelectorAll('.monaco-split-view2 > .split-view-container > .split-view-view'); assert.equal(viewQuery.length, 3, 'split view should have 3 views'); - let sashQuery = container.querySelectorAll('.monaco-split-view2 > .sash-container > .monaco-sash'); + let sashQuery = container.querySelectorAll('.monaco-split-view2 > .monaco-sash'); assert.equal(sashQuery.length, 2, 'split view should have 2 sashes'); splitview.removeView(2); @@ -102,7 +102,7 @@ suite('Splitview', () => { viewQuery = container.querySelectorAll('.monaco-split-view2 > .split-view-container > .split-view-view'); assert.equal(viewQuery.length, 2, 'split view should have 2 views'); - sashQuery = container.querySelectorAll('.monaco-split-view2 > .sash-container > .monaco-sash'); + sashQuery = container.querySelectorAll('.monaco-split-view2 > .monaco-sash'); assert.equal(sashQuery.length, 1, 'split view should have 1 sash'); splitview.removeView(0); @@ -110,7 +110,7 @@ suite('Splitview', () => { viewQuery = container.querySelectorAll('.monaco-split-view2 > .split-view-container > .split-view-view'); assert.equal(viewQuery.length, 1, 'split view should have 1 view'); - sashQuery = container.querySelectorAll('.monaco-split-view2 > .sash-container > .monaco-sash'); + sashQuery = container.querySelectorAll('.monaco-split-view2 > .monaco-sash'); assert.equal(sashQuery.length, 0, 'split view should have no sashes'); splitview.removeView(0); @@ -118,7 +118,7 @@ suite('Splitview', () => { viewQuery = container.querySelectorAll('.monaco-split-view2 > .split-view-container > .split-view-view'); assert.equal(viewQuery.length, 0, 'split view should have no views'); - sashQuery = container.querySelectorAll('.monaco-split-view2 > .sash-container > .monaco-sash'); + sashQuery = container.querySelectorAll('.monaco-split-view2 > .monaco-sash'); assert.equal(sashQuery.length, 0, 'split view should have no sashes'); splitview.dispose(); diff --git a/src/vs/editor/browser/widget/diffEditorWidget.ts b/src/vs/editor/browser/widget/diffEditorWidget.ts index 76a2ebb47a38c76043c306b4c39e9e9df8674eea..ad3e05691970738361800bd7eb734cad1aefb520 100644 --- a/src/vs/editor/browser/widget/diffEditorWidget.ts +++ b/src/vs/editor/browser/widget/diffEditorWidget.ts @@ -1520,7 +1520,7 @@ class DiffEdtorWidgetSideBySide extends DiffEditorWidgetStyle implements IDiffEd this._sash = this._register(new Sash(this._dataSource.getContainerDomNode(), this)); if (this._disableSash) { - this._sash.enabled = false; + this._sash.disable(); } this._sash.onDidStart(() => this.onSashDragStart()); @@ -1539,9 +1539,9 @@ class DiffEdtorWidgetSideBySide extends DiffEditorWidgetStyle implements IDiffEd this._disableSash = newDisableSash; if (this._disableSash) { - this._sash.enabled = false; + this._sash.disable(); } else { - this._sash.enabled = true; + this._sash.enable(); } } } diff --git a/src/vs/editor/contrib/zoneWidget/zoneWidget.ts b/src/vs/editor/contrib/zoneWidget/zoneWidget.ts index 832bbfe86b1bb89abfa3df02fac63cc0c3833e2d..784aac39e55a2110505b3b6e03ef97878c1c1068 100644 --- a/src/vs/editor/contrib/zoneWidget/zoneWidget.ts +++ b/src/vs/editor/contrib/zoneWidget/zoneWidget.ts @@ -459,7 +459,7 @@ export abstract class ZoneWidget implements IHorizontalSashLayoutProvider { if (!this.options.isResizeable) { this._resizeSash.hide(); - this._resizeSash.enabled = false; + this._resizeSash.disable(); } let data: { startY: number; heightInLines: number; }; diff --git a/src/vs/workbench/browser/layout.ts b/src/vs/workbench/browser/layout.ts index d28eade122655bbb0b2c9727d801f84d67638662..b00b97c525aa246560576440cc23efcee0cb46fc 100644 --- a/src/vs/workbench/browser/layout.ts +++ b/src/vs/workbench/browser/layout.ts @@ -98,9 +98,9 @@ export class WorkbenchLayout extends Disposable implements IVerticalSashLayoutPr this.restorePreviousState(); // Create layout sashes - this.sashXOne = new Sash(this.workbenchContainer, this); - this.sashXTwo = new Sash(this.workbenchContainer, this); - this.sashY = new Sash(this.workbenchContainer, this, { orientation: Orientation.HORIZONTAL }); + this.sashXOne = new Sash(this.workbenchContainer, this, { baseSize: 5 }); + this.sashXTwo = new Sash(this.workbenchContainer, this, { baseSize: 5 }); + this.sashY = new Sash(this.workbenchContainer, this, { baseSize: 4, orientation: Orientation.HORIZONTAL }); this.registerListeners(); }