diff --git a/src/vs/editor/contrib/find/browser/findWidget.css b/src/vs/editor/contrib/find/browser/findWidget.css index 74d52635a45a88b57e36a396e5edcd476d8630a7..f5b3f333204bde61fee3f398685e56a6ab6f6ab7 100644 --- a/src/vs/editor/contrib/find/browser/findWidget.css +++ b/src/vs/editor/contrib/find/browser/findWidget.css @@ -51,7 +51,9 @@ height: 64px; /* find input height + replace input height */ } .monaco-editor .find-widget.replaceToggled > .replace-part { - display: inline-block; + display: flex; + display: -webkit-flex; + align-items: center; } .monaco-editor .find-widget.visible, @@ -81,6 +83,9 @@ .monaco-editor .find-widget > .replace-part { margin: 4px 0 0 17px; font-size: 12px; + display: flex; + display: -webkit-flex; + align-items: center; } .monaco-editor .find-widget > .find-part .monaco-inputbox, @@ -95,8 +100,9 @@ } .monaco-editor .find-widget .monaco-findInput { - display: inline-block; vertical-align: middle; + display: flex; + flex:1; } .monaco-editor .find-widget .matchesCount { @@ -111,6 +117,7 @@ } .monaco-editor .find-widget .button { + min-width: 20px; width: 20px; height: 20px; display: inline-block; @@ -227,7 +234,8 @@ } .monaco-editor .find-widget > .replace-part > .replace-input { - display: inline-block; + display: flex; + flex:1; vertical-align: middle; } @@ -242,12 +250,9 @@ } /* NARROW (SMALLER THAN REDUCED) */ -.monaco-editor .find-widget.narrow-find-widget > .find-part .monaco-findInput, -.monaco-editor .find-widget.narrow-find-widget > .replace-part .replace-input { - width: 171px !important; -} -.monaco-editor .find-widget.narrow-find-widget > .find-part .monaco-inputbox > .wrapper > .input { - width: 105px !important; +.monaco-editor .find-widget.narrow-find-widget > .find-part, +.monaco-editor .find-widget.narrow-find-widget > .replace-part { + width: 240px !important; } /* COLLAPSED (SMALLER THAN NARROW) */ @@ -258,10 +263,14 @@ .monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-findInput .controls { display:none; } +.monaco-editor .find-widget.collapsed-find-widget > .find-part, +.monaco-editor .find-widget.collapsed-find-widget > .replace-part { + max-width: 94px !important; +} .monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-findInput, .monaco-editor .find-widget.collapsed-find-widget > .replace-part .replace-input, .monaco-editor .find-widget.collapsed-find-widget > .find-part .monaco-inputbox > .wrapper > .input { - width: 71px !important; + max-width: 71px !important; } .monaco-editor .findMatch { @@ -275,6 +284,11 @@ animation-name: inherit !important; } +.monaco-editor .find-widget .monaco-sash { + background: grey; + margin-left: -4px; +} + .monaco-editor.hc-black .find-widget .previous, .monaco-editor.vs-dark .find-widget .previous { background-image: url('images/previous-inverse.svg'); diff --git a/src/vs/editor/contrib/find/browser/findWidget.ts b/src/vs/editor/contrib/find/browser/findWidget.ts index 145453e625e69bb1378b80e621262db58cd74c09..a36edf38b05e7c0e3df1b89d312187d3f5ba6a16 100644 --- a/src/vs/editor/contrib/find/browser/findWidget.ts +++ b/src/vs/editor/contrib/find/browser/findWidget.ts @@ -16,6 +16,7 @@ import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview import { FindInput, IFindInputStyles } from 'vs/base/browser/ui/findinput/findInput'; import { IMessage as InputBoxMessage, InputBox } from 'vs/base/browser/ui/inputbox/inputBox'; import { Widget } from 'vs/base/browser/ui/widget'; +import { Sash, IHorizontalSashLayoutProvider, ISashEvent } from 'vs/base/browser/ui/sash/sash'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition, IViewZone, OverlayWidgetPositionPreference } from 'vs/editor/browser/editorBrowser'; import { FIND_IDS, MATCHES_LIMIT } from 'vs/editor/contrib/find/common/findModel'; @@ -68,7 +69,9 @@ export class FindWidgetViewZone implements IViewZone { } } -export class FindWidget extends Widget implements IOverlayWidget { + +export class FindWidget extends Widget implements IOverlayWidget, IHorizontalSashLayoutProvider { + private static ID = 'editor.contrib.findWidget'; private static PART_WIDTH = 275; @@ -104,6 +107,8 @@ export class FindWidget extends Widget implements IOverlayWidget { private _viewZone: FindWidgetViewZone; private _viewZoneId: number; + private _resizeSash: Sash; + constructor( codeEditor: ICodeEditor, controller: IFindController, @@ -126,6 +131,26 @@ export class FindWidget extends Widget implements IOverlayWidget { this._register(this._state.addChangeListener((e) => this._onStateChanged(e))); this._buildDomNode(); + this._resizeSash = new Sash(this._domNode, this, { orientation: 0}); + let data: { startX: number; }; + let originalWidth = 411; + this._register(this._resizeSash.addListener('start', (e: ISashEvent) => { + data = { + startX: e.startX, + }; + originalWidth = dom.getTotalWidth(this._domNode); + })); + + this._register(this._resizeSash.addListener('end', () => { + data = undefined; + })); + + this._register(this._resizeSash.addListener('change', (evt: ISashEvent) => { + if (data) { + this._domNode.style.width = `${originalWidth + data.startX - evt.currentX}px`; + this._findInput.setWidth(FindWidget.FIND_INPUT_AREA_WIDTH + Math.max(0, data.startX - evt.currentX)); + } + })); this._updateButtons(); let checkEditorWidth = () => { @@ -134,18 +159,27 @@ export class FindWidget extends Widget implements IOverlayWidget { let collapsedFindWidget = false; let reducedFindWidget = false; let narrowFindWidget = false; - if (WIDGET_FIXED_WIDTH + 28 >= editorWidth + 50) { + let widgetWidth = Math.max(411, dom.getTotalWidth(this._domNode)) - 69; + if (widgetWidth + 28 >= editorWidth + 50) { collapsedFindWidget = true; } - if (WIDGET_FIXED_WIDTH + 28 >= editorWidth) { + if (widgetWidth + 28 >= editorWidth) { narrowFindWidget = true; } - if (WIDGET_FIXED_WIDTH + MAX_MATCHES_COUNT_WIDTH + 28 + minimapWidth >= editorWidth) { + if (widgetWidth + MAX_MATCHES_COUNT_WIDTH + 28 + minimapWidth >= editorWidth) { reducedFindWidget = true; } dom.toggleClass(this._domNode, 'collapsed-find-widget', collapsedFindWidget); dom.toggleClass(this._domNode, 'reduced-find-widget', reducedFindWidget); dom.toggleClass(this._domNode, 'narrow-find-widget', narrowFindWidget); + if (collapsedFindWidget) { + this._domNode.style.maxWidth = '111px'; + } else if (narrowFindWidget) { + this._domNode.style.maxWidth = '257px'; + } else { + this._domNode.style.maxWidth = `${editorWidth - 28 - minimapWidth - 15}px`; + } + }; checkEditorWidth(); @@ -552,6 +586,17 @@ export class FindWidget extends Widget implements IOverlayWidget { } } + // ----- sash + public getHorizontalSashTop(sash: Sash): number { + return 0; + } + public getHorizontalSashLeft?(sash: Sash): number { + return 0; + } + public getHorizontalSashWidth?(sash: Sash): number { + return 500; + } + // ----- initialization private _keybindingLabelFor(actionId: string): string {