Skip to content

Commit f5d3ffa

Browse files
roblourensroblourens
authored
Merge pull request microsoft#82904 from smilegodly/clearButtonForSettingsEditor
Add a clear button to settings editor search bar
2 parents d15416a + 1fc990a commit f5d3ffa

2 files changed

Lines changed: 37 additions & 3 deletions

File tree

‎src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,16 @@
4444
padding: 0px 8px;
4545
border-radius: 2px;
4646
position: absolute;
47-
right: 10px;
47+
right: 35px;
48+
top: 0;
49+
}
50+
51+
.settings-editor > .settings-header > .search-container > .settings-clear-widget {
52+
margin: 6px 0px;
53+
padding: 0px 8px;
54+
border-radius: 2px;
55+
position: absolute;
56+
right: 0px;
4857
top: 0;
4958
}
5059

‎src/vs/workbench/contrib/preferences/browser/settingsEditor2.ts‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,13 @@ import { AbstractSettingRenderer, ISettingLinkClickEvent, ISettingOverrideClickE
3636
import { ISettingsEditorViewState, parseQuery, SearchResultIdx, SearchResultModel, SettingsTreeElement, SettingsTreeGroupChild, SettingsTreeGroupElement, SettingsTreeModel, SettingsTreeSettingElement } from 'vs/workbench/contrib/preferences/browser/settingsTreeModels';
3737
import { settingsTextInputBorder } from 'vs/workbench/contrib/preferences/browser/settingsWidgets';
3838
import { createTOCIterator, TOCTree, TOCTreeModel } from 'vs/workbench/contrib/preferences/browser/tocTree';
39-
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';
39+
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';
4040
import { IEditorGroupsService } from 'vs/workbench/services/editor/common/editorGroupsService';
4141
import { IPreferencesService, ISearchResult, ISettingsEditorModel, ISettingsEditorOptions, SettingsEditorOptions, SettingValueType } from 'vs/workbench/services/preferences/common/preferences';
4242
import { SettingsEditor2Input } from 'vs/workbench/services/preferences/common/preferencesEditorInput';
4343
import { Settings2EditorModel } from 'vs/workbench/services/preferences/common/preferencesModels';
44+
import { Action } from 'vs/base/common/actions';
45+
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
4446

4547
function createGroupIterator(group: SettingsTreeGroupElement): Iterator<ITreeElement<SettingsTreeGroupChild>> {
4648
const groupsIt = Iterator.fromArray(group.children);
@@ -129,6 +131,9 @@ export class SettingsEditor2 extends BaseEditor {
129131
private scheduledRefreshes: Map<string, DOM.IFocusTracker>;
130132
private lastFocusedSettingElement: string | null = null;
131133

134+
private actionBar: ActionBar;
135+
private actionsContainer: HTMLElement;
136+
132137
/** Don't spam warnings */
133138
private hasWarnedMissingSettings = false;
134139

@@ -377,11 +382,18 @@ export class SettingsEditor2 extends BaseEditor {
377382
this.searchWidget.setValue(query.trim());
378383
}
379384

385+
clearSearch(): void {
386+
this.clearSearchResults();
387+
this.focusSearch();
388+
}
389+
380390
private createHeader(parent: HTMLElement): void {
381391
this.headerContainer = DOM.append(parent, $('.settings-header'));
382392

383393
const searchContainer = DOM.append(this.headerContainer, $('.search-container'));
384394

395+
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); });
396+
385397
const searchBoxLabel = localize('SearchSettings.AriaLabel', "Search settings");
386398
this.searchWidget = this._register(this.instantiationService.createInstance(SuggestEnabledInput, `${SettingsEditor2.ID}.searchbox`, searchContainer, {
387399
triggerCharacters: ['@'],
@@ -417,13 +429,26 @@ export class SettingsEditor2 extends BaseEditor {
417429
this.countElement.style.borderColor = border;
418430
}));
419431

420-
this._register(this.searchWidget.onInputDidChange(() => this.onSearchInputChanged()));
432+
this._register(this.searchWidget.onInputDidChange(() => {
433+
const searchVal = this.searchWidget.getValue();
434+
clearInputAction.enabled = !!searchVal;
435+
this.onSearchInputChanged();
436+
}));
421437

422438
const headerControlsContainer = DOM.append(this.headerContainer, $('.settings-header-controls'));
423439
const targetWidgetContainer = DOM.append(headerControlsContainer, $('.settings-target-container'));
424440
this.settingsTargetsWidget = this._register(this.instantiationService.createInstance(SettingsTargetsWidget, targetWidgetContainer, { enableRemoteSettings: true }));
425441
this.settingsTargetsWidget.settingsTarget = ConfigurationTarget.USER_LOCAL;
426442
this.settingsTargetsWidget.onDidTargetChange(target => this.onDidSettingsTargetChange(target));
443+
444+
this.actionsContainer = DOM.append(searchContainer, DOM.$('.settings-clear-widget'));
445+
446+
this.actionBar = this._register(new ActionBar(this.actionsContainer, {
447+
animated: false,
448+
actionViewItemProvider: (action: Action) => { return undefined; }
449+
}));
450+
451+
this.actionBar.push([clearInputAction], { label: false, icon: true });
427452
}
428453

429454
private onDidSettingsTargetChange(target: SettingsTarget): void {

0 commit comments

Comments
 (0)