From 1fc990a06f85a4263ed11641626eb6a5cd66fe1c Mon Sep 17 00:00:00 2001 From: Matthew Clifford Date: Sat, 19 Oct 2019 00:00:10 -0400 Subject: [PATCH] Add a clear button to settings editor search bar Resolves #66141 --- .../browser/media/settingsEditor2.css | 11 ++++++- .../preferences/browser/settingsEditor2.ts | 29 +++++++++++++++++-- 2 files changed, 37 insertions(+), 3 deletions(-) diff --git a/src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css index f25f2c048d4..eedd0bb68f6 100644 --- a/src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css +++ b/src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css @@ -44,7 +44,16 @@ padding: 0px 8px; border-radius: 2px; position: absolute; - right: 10px; + right: 35px; + top: 0; +} + +.settings-editor > .settings-header > .search-container > .settings-clear-widget { + margin: 6px 0px; + padding: 0px 8px; + border-radius: 2px; + position: absolute; + right: 0px; top: 0; } diff --git a/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts b/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts index 0b138ae5c23..9e77e62fd77 100644 --- a/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts +++ b/src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts @@ -36,11 +36,13 @@ import { AbstractSettingRenderer, ISettingLinkClickEvent, ISettingOverrideClickE import { ISettingsEditorViewState, parseQuery, SearchResultIdx, SearchResultModel, SettingsTreeElement, SettingsTreeGroupChild, SettingsTreeGroupElement, SettingsTreeModel, SettingsTreeSettingElement } from 'vs/workbench/contrib/preferences/browser/settingsTreeModels'; import { settingsTextInputBorder } from 'vs/workbench/contrib/preferences/browser/settingsWidgets'; import { createTOCIterator, TOCTree, TOCTreeModel } from 'vs/workbench/contrib/preferences/browser/tocTree'; -import { CONTEXT_SETTINGS_EDITOR, CONTEXT_SETTINGS_SEARCH_FOCUS, CONTEXT_TOC_ROW_FOCUS, EXTENSION_SETTING_TAG, IPreferencesSearchService, ISearchProvider, MODIFIED_SETTING_TAG, SETTINGS_EDITOR_COMMAND_SHOW_CONTEXT_MENU } from 'vs/workbench/contrib/preferences/common/preferences'; +import { CONTEXT_SETTINGS_EDITOR, CONTEXT_SETTINGS_SEARCH_FOCUS, CONTEXT_TOC_ROW_FOCUS, EXTENSION_SETTING_TAG, IPreferencesSearchService, ISearchProvider, MODIFIED_SETTING_TAG, SETTINGS_EDITOR_COMMAND_SHOW_CONTEXT_MENU, SETTINGS_EDITOR_COMMAND_CLEAR_SEARCH_RESULTS } from 'vs/workbench/contrib/preferences/common/preferences'; import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService'; import { IPreferencesService, ISearchResult, ISettingsEditorModel, ISettingsEditorOptions, SettingsEditorOptions, SettingValueType } from 'vs/workbench/services/preferences/common/preferences'; import { SettingsEditor2Input } from 'vs/workbench/services/preferences/common/preferencesEditorInput'; import { Settings2EditorModel } from 'vs/workbench/services/preferences/common/preferencesModels'; +import { Action } from 'vs/base/common/actions'; +import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar'; function createGroupIterator(group: SettingsTreeGroupElement): Iterator> { const groupsIt = Iterator.fromArray(group.children); @@ -129,6 +131,9 @@ export class SettingsEditor2 extends BaseEditor { private scheduledRefreshes: Map; private lastFocusedSettingElement: string | null = null; + private actionBar: ActionBar; + private actionsContainer: HTMLElement; + /** Don't spam warnings */ private hasWarnedMissingSettings = false; @@ -377,11 +382,18 @@ export class SettingsEditor2 extends BaseEditor { this.searchWidget.setValue(query.trim()); } + clearSearch(): void { + this.clearSearchResults(); + this.focusSearch(); + } + private createHeader(parent: HTMLElement): void { this.headerContainer = DOM.append(parent, $('.settings-header')); const searchContainer = DOM.append(this.headerContainer, $('.search-container')); + const clearInputAction = new Action(SETTINGS_EDITOR_COMMAND_CLEAR_SEARCH_RESULTS, localize('clearInput', "Clear Settings Search Input"), 'codicon-clear-all', false, () => { this.clearSearch(); return Promise.resolve(null); }); + const searchBoxLabel = localize('SearchSettings.AriaLabel', "Search settings"); this.searchWidget = this._register(this.instantiationService.createInstance(SuggestEnabledInput, `${SettingsEditor2.ID}.searchbox`, searchContainer, { triggerCharacters: ['@'], @@ -417,13 +429,26 @@ export class SettingsEditor2 extends BaseEditor { this.countElement.style.borderColor = border; })); - this._register(this.searchWidget.onInputDidChange(() => this.onSearchInputChanged())); + this._register(this.searchWidget.onInputDidChange(() => { + const searchVal = this.searchWidget.getValue(); + clearInputAction.enabled = !!searchVal; + this.onSearchInputChanged(); + })); const headerControlsContainer = DOM.append(this.headerContainer, $('.settings-header-controls')); const targetWidgetContainer = DOM.append(headerControlsContainer, $('.settings-target-container')); this.settingsTargetsWidget = this._register(this.instantiationService.createInstance(SettingsTargetsWidget, targetWidgetContainer, { enableRemoteSettings: true })); this.settingsTargetsWidget.settingsTarget = ConfigurationTarget.USER_LOCAL; this.settingsTargetsWidget.onDidTargetChange(target => this.onDidSettingsTargetChange(target)); + + this.actionsContainer = DOM.append(searchContainer, DOM.$('.settings-clear-widget')); + + this.actionBar = this._register(new ActionBar(this.actionsContainer, { + animated: false, + actionViewItemProvider: (action: Action) => { return undefined; } + })); + + this.actionBar.push([clearInputAction], { label: false, icon: true }); } private onDidSettingsTargetChange(target: SettingsTarget): void { -- GitLab