From 267f7c6d329704a037bf943f9ab349206b297679 Mon Sep 17 00:00:00 2001 From: Rob Lourens Date: Tue, 17 Oct 2017 12:59:41 -0700 Subject: [PATCH] Add fuzzy toggle button and correctly hide ranges for most relevant section --- .../preferences/browser/media/preferences.css | 22 +++++++++++++-- .../preferences/browser/media/regex-dark.svg | 1 + .../parts/preferences/browser/media/regex.svg | 1 + .../preferences/browser/preferencesEditor.ts | 8 +++--- .../browser/preferencesRenderers.ts | 5 +++- .../preferences/browser/preferencesSearch.ts | 8 +++--- .../preferences/browser/preferencesWidgets.ts | 28 +++++++++++++++++-- 7 files changed, 58 insertions(+), 15 deletions(-) create mode 100644 src/vs/workbench/parts/preferences/browser/media/regex-dark.svg create mode 100644 src/vs/workbench/parts/preferences/browser/media/regex.svg diff --git a/src/vs/workbench/parts/preferences/browser/media/preferences.css b/src/vs/workbench/parts/preferences/browser/media/preferences.css index 22b490dcd6b..31bdd157519 100644 --- a/src/vs/workbench/parts/preferences/browser/media/preferences.css +++ b/src/vs/workbench/parts/preferences/browser/media/preferences.css @@ -73,18 +73,34 @@ padding-right: 32px; } -.settings-header-widget > .settings-count-widget { +.settings-header-widget > .settings-search-controls > .settings-count-widget { margin: 6px 0px; padding: 0px 8px; + border-radius: 2px; + float: left; +} + +.settings-header-widget > .settings-search-controls { position: absolute; right: 10px; - border-radius: 2px; } -.settings-header-widget > .settings-count-widget.hide { +.settings-header-widget > .settings-search-controls > .settings-count-widget.hide { display: none; } +.settings-header-widget>.settings-search-controls>.prefs-fuzzy-search-toggle { + margin: 5px 3px 5px 0px; +} + +.vs .settings-header-widget > .settings-search-controls > .prefs-fuzzy-search-toggle { + background: url('regex.svg') center center no-repeat; +} + +.vs-dark .settings-header-widget > .settings-search-controls > .prefs-fuzzy-search-toggle { + background: url('regex-dark.svg') center center no-repeat; +} + .settings-header-widget > .settings-search-container { flex: 1; } diff --git a/src/vs/workbench/parts/preferences/browser/media/regex-dark.svg b/src/vs/workbench/parts/preferences/browser/media/regex-dark.svg new file mode 100644 index 00000000000..c303032e6a9 --- /dev/null +++ b/src/vs/workbench/parts/preferences/browser/media/regex-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/parts/preferences/browser/media/regex.svg b/src/vs/workbench/parts/preferences/browser/media/regex.svg new file mode 100644 index 00000000000..c677843beef --- /dev/null +++ b/src/vs/workbench/parts/preferences/browser/media/regex.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/vs/workbench/parts/preferences/browser/preferencesEditor.ts b/src/vs/workbench/parts/preferences/browser/preferencesEditor.ts index 4b8815d42b2..d7ed4a88d12 100644 --- a/src/vs/workbench/parts/preferences/browser/preferencesEditor.ts +++ b/src/vs/workbench/parts/preferences/browser/preferencesEditor.ts @@ -247,7 +247,7 @@ export class PreferencesEditor extends BaseEditor { } private onInputChanged(): void { - if (this.searchProvider.remoteSearchEnabled) { + if (this.searchWidget.fuzzyEnabled) { this.onInput.fire(); } else { this.filterPreferences(); @@ -319,7 +319,7 @@ export class PreferencesEditor extends BaseEditor { private filterPreferences() { const filter = this.searchWidget.getValue().trim(); - this.preferencesRenderers.filterPreferences(filter, this.searchProvider).then(count => { + this.preferencesRenderers.filterPreferences(filter, this.searchProvider, this.searchWidget.fuzzyEnabled).then(count => { const message = filter ? this.showSearchResultsMessage(count) : nls.localize('totalSettingsMessage', "Total {0} Settings", count); this.searchWidget.showMessage(message, count); if (count === 0) { @@ -426,14 +426,14 @@ class PreferencesRenderers extends Disposable { this._editablePreferencesRenderer = editableSettingsRenderer; } - public filterPreferences(filter: string, searchProvider: PreferencesSearchProvider): TPromise { + public filterPreferences(filter: string, searchProvider: PreferencesSearchProvider, fuzzy: boolean): TPromise { if (this._filtersInProgress) { // Resolved/rejected promises have no .cancel() this._filtersInProgress.forEach(p => p.cancel && p.cancel()); } if (filter) { - const searchModel = searchProvider.startSearch(filter); + const searchModel = searchProvider.startSearch(filter, fuzzy); this._filtersInProgress = [ this._filterPreferences(filter, searchModel, this._defaultPreferencesRenderer), this._filterPreferences(filter, searchModel, this._editablePreferencesRenderer)]; diff --git a/src/vs/workbench/parts/preferences/browser/preferencesRenderers.ts b/src/vs/workbench/parts/preferences/browser/preferencesRenderers.ts index e1faed05340..cb462596395 100644 --- a/src/vs/workbench/parts/preferences/browser/preferencesRenderers.ts +++ b/src/vs/workbench/parts/preferences/browser/preferencesRenderers.ts @@ -563,7 +563,10 @@ export class MostRelevantMatchesRenderer extends Disposable implements HiddenAre public render(result: IFilterResult): void { if (result && result.metadata) { - // TODO - Hide unused portion of most relevant results section + const lineCount = this.editor.getModel().getLineCount(); + this.hiddenAreas = [new Range(DefaultSettingsEditorModel.MOST_RELEVANT_END_LINE, 1, lineCount - 1, 1)]; + } else { + this.hiddenAreas = [new Range(DefaultSettingsEditorModel.MOST_RELEVANT_START_LINE, 1, DefaultSettingsEditorModel.MOST_RELEVANT_END_LINE, 1)]; } } } diff --git a/src/vs/workbench/parts/preferences/browser/preferencesSearch.ts b/src/vs/workbench/parts/preferences/browser/preferencesSearch.ts index c17704a9b75..653587b7920 100644 --- a/src/vs/workbench/parts/preferences/browser/preferencesSearch.ts +++ b/src/vs/workbench/parts/preferences/browser/preferencesSearch.ts @@ -23,8 +23,8 @@ export class PreferencesSearchProvider { return !!this.configurationService.getConfiguration().workbench.settings.useExperimentalRemoteSearch; } - startSearch(filter: string): PreferencesSearchModel { - return new PreferencesSearchModel(this, filter); + startSearch(filter: string, remote: boolean): PreferencesSearchModel { + return new PreferencesSearchModel(this, filter, remote); } } @@ -32,10 +32,10 @@ export class PreferencesSearchModel { private _localProvider: LocalSearchProvider; private _remoteProvider: RemoteSearchProvider; - constructor(private provider: PreferencesSearchProvider, filter: string) { + constructor(private provider: PreferencesSearchProvider, filter: string, remote: boolean) { this._localProvider = new LocalSearchProvider(filter); - if (this.provider.remoteSearchEnabled) { + if (remote) { this._remoteProvider = new RemoteSearchProvider(filter); } } diff --git a/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts b/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts index 81cc7dbdf4f..b0ba7a9763b 100644 --- a/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts +++ b/src/vs/workbench/parts/preferences/browser/preferencesWidgets.ts @@ -10,6 +10,7 @@ import * as DOM from 'vs/base/browser/dom'; import { TPromise } from 'vs/base/common/winjs.base'; import { Disposable } from 'vs/base/common/lifecycle'; import { Widget } from 'vs/base/browser/ui/widget'; +import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox'; import Event, { Emitter } from 'vs/base/common/event'; import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { KeyCode } from 'vs/base/common/keyCodes'; @@ -399,6 +400,8 @@ export class SearchWidget extends Widget { private countElement: HTMLElement; private searchContainer: HTMLElement; private inputBox: InputBox; + private fuzzyToggle: Checkbox; + private controlsDiv: HTMLElement; private _onDidChange: Emitter = this._register(new Emitter()); public readonly onDidChange: Event = this._onDidChange.event; @@ -416,10 +419,25 @@ export class SearchWidget extends Widget { this.create(parent); } + public get fuzzyEnabled(): boolean { + return this.fuzzyToggle.checked; + } + private create(parent: HTMLElement) { this.domNode = DOM.append(parent, DOM.$('div.settings-header-widget')); this.createSearchContainer(DOM.append(this.domNode, DOM.$('div.settings-search-container'))); - this.countElement = DOM.append(this.domNode, DOM.$('.settings-count-widget')); + this.controlsDiv = DOM.append(this.domNode, DOM.$('div.settings-search-controls')); + this.fuzzyToggle = this._register(new Checkbox({ + actionClassName: 'prefs-fuzzy-search-toggle', + isChecked: false, + onChange: () => { + console.log(`onChange`); + }, + title: 'Enable experimental fuzzy search' + })); + DOM.append(this.controlsDiv, this.fuzzyToggle.domNode); + + this.countElement = DOM.append(this.controlsDiv, DOM.$('.settings-count-widget')); this._register(attachStylerCallback(this.themeService, { badgeBackground, contrastBorder }, colors => { const background = colors.badgeBackground ? colors.badgeBackground.toString() : null; const border = colors.contrastBorder ? colors.contrastBorder.toString() : null; @@ -461,7 +479,7 @@ export class SearchWidget extends Widget { this.countElement.textContent = message; this.inputBox.inputElement.setAttribute('aria-label', message); DOM.toggleClass(this.countElement, 'no-results', count === 0); - this.inputBox.inputElement.style.paddingRight = DOM.getTotalWidth(this.countElement) + 20 + 'px'; + this.inputBox.inputElement.style.paddingRight = this.getControlsWidth() + 'px'; this.styleCountElementForeground(); } @@ -477,10 +495,14 @@ export class SearchWidget extends Widget { this.inputBox.inputElement.style.paddingRight = '0px'; } else { DOM.removeClass(this.countElement, 'hide'); - this.inputBox.inputElement.style.paddingRight = DOM.getTotalWidth(this.countElement) + 20 + 'px'; + this.inputBox.inputElement.style.paddingRight = this.getControlsWidth() + 'px'; } } + private getControlsWidth(): number { + return DOM.getTotalWidth(this.countElement) + DOM.getTotalWidth(this.fuzzyToggle.domNode) + 20; + } + public focus() { this.inputBox.focus(); if (this.getValue()) { -- GitLab