diff --git a/src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.css b/src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.css index 78257ce690893c20a6a8dd726e754c9fb2f81af1..2432e997364710154f053f9324e0af86f67e1e2a 100644 --- a/src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.css +++ b/src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.css @@ -33,10 +33,6 @@ padding: 3em 0; } -.monaco-editor .reference-zone-widget .preview { - width: 80%; -} - .monaco-editor .reference-zone-widget, .monaco-editor .reference-zone-widget .preview .monaco-editor, .monaco-editor .reference-zone-widget .preview .glyph-margin, @@ -52,7 +48,6 @@ .monaco-editor .reference-zone-widget .ref-tree { background-color: #F3F3F3; - width: 20%; color: #646465; line-height: 22px; font-size: 13px; diff --git a/src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.ts b/src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.ts index 7d911ec760e00f4067db7ae736a2a5d46f017424..7842be41c7065c770608854949d5df62e85e11e7 100644 --- a/src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.ts +++ b/src/vs/editor/contrib/referenceSearch/browser/referenceSearchWidget.ts @@ -10,13 +10,14 @@ import * as collections from 'vs/base/common/collections'; import {onUnexpectedError} from 'vs/base/common/errors'; import {getPathLabel} from 'vs/base/common/labels'; import Event, {Emitter} from 'vs/base/common/event'; -import {IDisposable, cAll, dispose} from 'vs/base/common/lifecycle'; +import {IDisposable, cAll, dispose, Disposables} from 'vs/base/common/lifecycle'; import {Schemas} from 'vs/base/common/network'; import * as strings from 'vs/base/common/strings'; import URI from 'vs/base/common/uri'; import {TPromise} from 'vs/base/common/winjs.base'; import {$, Builder} from 'vs/base/browser/builder'; import * as dom from 'vs/base/browser/dom'; +import {Sash, ISashEvent, IVerticalSashLayoutProvider} from 'vs/base/browser/ui/sash/sash'; import {IKeyboardEvent} from 'vs/base/browser/keyboardEvent'; import {IMouseEvent} from 'vs/base/browser/mouseEvent'; import {CountBadge} from 'vs/base/browser/ui/countBadge/countBadge'; @@ -365,6 +366,65 @@ class Renderer extends LegacyRenderer { } +class VSash { + + private _disposables = new Disposables(); + private _sash: Sash; + private _ratio: number; + private _height: number; + private _width: number; + private _onDidChangePercentages = new Emitter(); + + constructor(container: HTMLElement, ratio:number) { + this._ratio = ratio; + this._sash = new Sash(container, { + getVerticalSashLeft: () => this._width * this._ratio, + getVerticalSashHeight: () => this._height + }); + + let data: { startX: number, startRatio: number }; + this._disposables.add(this._sash.addListener2('start', (e: ISashEvent) => { + data = { startX: e.startX, startRatio: this._ratio }; + })); + + this._disposables.add(this._sash.addListener2('change', (e: ISashEvent) => { + let {currentX} = e; + let newRatio = data.startRatio * (currentX / data.startX); + if (newRatio > .05 && newRatio < .95) { + this._ratio = newRatio; + this._sash.layout(); + this._onDidChangePercentages.fire(this); + } + })); + } + + dispose() { + this._sash.dispose(); + this._onDidChangePercentages.dispose(); + this._disposables.dispose(); + } + + get onDidChangePercentages() { + return this._onDidChangePercentages.event; + } + + set width(value: number) { + this._width = value; + this._sash.layout(); + } + + set height(value: number) { + this._height = value; + this._sash.layout(); + } + + get percentages() { + let left = 100 * this._ratio; + let right = 100 - left; + return [`${left}%`, `${right}%`]; + } +} + /** * ZoneWidget that is shown inside the editor */ @@ -383,6 +443,7 @@ export class ReferenceWidget extends PeekViewWidget { private _tree: Tree; private _treeContainer: Builder; + private _sash: VSash; private _preview: ICodeEditor; private _previewNotAvailableMessage: Model; private _previewContainer: Builder; @@ -413,6 +474,12 @@ export class ReferenceWidget extends PeekViewWidget { this.create(); } + public dispose(): void { + this.setModel(null); + dispose(this._preview, this._previewNotAvailableMessage, this._tree, this._sash); + super.dispose(); + } + get onDidDoubleClick():Event<{ reference: URI, range: Range, originalEvent: MouseEvent }> { return this._onDidDoubleClick.event; } @@ -452,6 +519,16 @@ export class ReferenceWidget extends PeekViewWidget { this._previewNotAvailableMessage = new Model(nls.localize('missingPreviewMessage', "no preview available"), Model.DEFAULT_CREATION_OPTIONS, null); }); + // sash + this._sash = new VSash(containerElement, .8); + this._sash.onDidChangePercentages(() => { + let [left, right] = this._sash.percentages; + this._previewContainer.style({ width: left}); + this._treeContainer.style({ width: right }); + this._preview.layout(); + this._tree.layout(); + }); + // tree container.div({ 'class': 'ref-tree inline' }, (div: Builder) => { var config = { @@ -472,26 +549,31 @@ export class ReferenceWidget extends PeekViewWidget { }); } - protected _doLayoutBody(heightInPixel: number): void { - super._doLayoutBody(heightInPixel); + protected _doLayoutBody(heightInPixel: number, widthInPixel: number): void { + super._doLayoutBody(heightInPixel, widthInPixel); - var h = heightInPixel + 'px'; - if (h === this._lastHeight) { + const height = heightInPixel + 'px'; + if (height === this._lastHeight) { return; } - // set height - this._treeContainer.style({ height: h }); - this._previewContainer.style({ height: h }); + this._sash.height = heightInPixel; + this._sash.width = widthInPixel; + + // set height/width + const [left, right] = this._sash.percentages; + this._previewContainer.style({ height, width: left}); + this._treeContainer.style({ height, width: right }); // forward this._tree.layout(heightInPixel); this._preview.layout(); - this._lastHeight = h; + this._lastHeight = height; } public onWidth(widthInPixel: number): void { + this._sash.width = widthInPixel; this._preview.layout(); } @@ -618,9 +700,4 @@ export class ReferenceWidget extends PeekViewWidget { .done(null, onUnexpectedError); } - public dispose(): void { - this.setModel(null); - dispose([this._preview, this._previewNotAvailableMessage, this._tree]); - super.dispose(); - } } diff --git a/src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.css b/src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.css index fcb56e051904454e61d7e052f64e75e06c2f3eac..014e9a741808da9a61872c63777753930b09023e 100644 --- a/src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.css +++ b/src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.css @@ -49,6 +49,7 @@ .monaco-editor .peekview-widget > .body { border-top: 1px solid #007ACC; border-bottom: 1px solid #007ACC; + position: relative; } /* Dark Theme */ diff --git a/src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.ts b/src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.ts index 46242868f953762e147abe377425a10ae0e356d9..1f31c132b362ae66a3e5739578167db49d7d23f3 100644 --- a/src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.ts +++ b/src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.ts @@ -140,7 +140,7 @@ export class PeekViewWidget extends ZoneWidget implements IPeekViewService { // implement me } - public doLayout(heightInPixel: number): void { + public doLayout(heightInPixel: number, widthInPixel: number): void { if (heightInPixel < 0) { // Looks like the view zone got folded away! @@ -152,16 +152,16 @@ export class PeekViewWidget extends ZoneWidget implements IPeekViewService { var headHeight = Math.ceil(this.editor.getConfiguration().lineHeight * 1.2), bodyHeight = heightInPixel - (headHeight + 2 /* the border-top/bottom width*/); - this._doLayoutHead(headHeight); - this._doLayoutBody(bodyHeight); + this._doLayoutHead(headHeight, widthInPixel); + this._doLayoutBody(bodyHeight, widthInPixel); } - protected _doLayoutHead(heightInPixel: number): void { + protected _doLayoutHead(heightInPixel: number, widthInPixel: number): void { this._headElement.style.height = strings.format('{0}px', heightInPixel); this._headElement.style.lineHeight = this._headElement.style.height; } - protected _doLayoutBody(heightInPixel: number): void { + protected _doLayoutBody(heightInPixel: number, widthInPixel: number): void { this._bodyElement.style.height = strings.format('{0}px', heightInPixel); } } diff --git a/src/vs/editor/contrib/zoneWidget/browser/zoneWidget.ts b/src/vs/editor/contrib/zoneWidget/browser/zoneWidget.ts index 6db8565964f918dc74f17cb4965119ba2bae5c8c..4d4fd7134f7c7ac8188ad8092bf3d29d2f1d6e41 100644 --- a/src/vs/editor/contrib/zoneWidget/browser/zoneWidget.ts +++ b/src/vs/editor/contrib/zoneWidget/browser/zoneWidget.ts @@ -93,7 +93,7 @@ export class ZoneWidget implements IHorizontalSashLayoutProvider { private _viewZone: ViewZoneDelegate = null; private _overlayWidget: OverlayWidgetDelegate = null; - private _sash: Sash; + private _resizeSash: Sash; private _disposables = new Disposables(); public container: HTMLElement = null; @@ -144,9 +144,9 @@ export class ZoneWidget implements IHorizontalSashLayoutProvider { let containerHeight = height - this._decoratingElementsHeight(); this.container.style.height = `${containerHeight}px`; - this.doLayout(containerHeight); + this.doLayout(containerHeight, this._getWidth()); - this._sash.layout(); + this._resizeSash.layout(); } public show(rangeOrPos: IRange | IPosition, heightInLines: number): void { @@ -180,7 +180,8 @@ export class ZoneWidget implements IHorizontalSashLayoutProvider { column: where.startColumn }; - this.domNode.style.width = this._getWidth() + 'px'; + const width = this._getWidth(); + this.domNode.style.width = `${width}px`; // Reveal position, to get the line rendered, such that the arrow can be positioned properly this.editor.revealPosition(position); @@ -247,7 +248,7 @@ export class ZoneWidget implements IHorizontalSashLayoutProvider { this.container.style.overflow = 'hidden'; - this.doLayout(containerHeight); + this.doLayout(containerHeight, width); this.editor.setSelection(where); @@ -283,22 +284,22 @@ export class ZoneWidget implements IHorizontalSashLayoutProvider { // implement in subclass } - public doLayout(heightInPixel: number): void { + public doLayout(heightInPixel: number, widthInPixel: number): void { // implement in subclass } // --- sash private _initSash(): void{ - this._sash = new Sash(this.domNode, this, { orientation: Orientation.HORIZONTAL }); + this._resizeSash = new Sash(this.domNode, this, { orientation: Orientation.HORIZONTAL }); if (!this.options.isResizeable) { - this._sash.hide(); - this._sash.disable(); + this._resizeSash.hide(); + this._resizeSash.disable(); } let data: { startY: number; heightInLines: number; }; - this._disposables.add(this._sash.addListener2('start', (e: ISashEvent) => { + this._disposables.add(this._resizeSash.addListener2('start', (e: ISashEvent) => { if (this._viewZone) { data = { startY: e.startY, @@ -307,11 +308,11 @@ export class ZoneWidget implements IHorizontalSashLayoutProvider { } })); - this._disposables.add(this._sash.addListener2('end', () => { + this._disposables.add(this._resizeSash.addListener2('end', () => { data = undefined; })); - this._disposables.add(this._sash.addListener2('change', (evt: ISashEvent) => { + this._disposables.add(this._resizeSash.addListener2('change', (evt: ISashEvent) => { if (data) { let lineDelta = (evt.currentY - data.startY) / this.editor.getConfiguration().lineHeight; let roundedLineDelta = lineDelta < 0 ? Math.ceil(lineDelta) : Math.floor(lineDelta);