mirror of
https://github.com/Microsoft/vscode
synced 2024-08-27 21:09:43 +00:00
Use tags for filtering settings (#55198)
* Use tags for filtering settings * Separator
This commit is contained in:
parent
b4ab206963
commit
dbbfaf4110
|
@ -113,28 +113,6 @@
|
|||
background-image: url('configure-inverse.svg');
|
||||
}
|
||||
|
||||
.vs .settings-editor.showing-modified-only > .settings-header > .settings-header-controls .settings-header-controls-right .toolbar-toggle-more::before,
|
||||
.vs .settings-editor.settings-filtered-by-tag > .settings-header > .settings-header-controls .settings-header-controls-right .toolbar-toggle-more::before {
|
||||
border-color : #fff;
|
||||
}
|
||||
|
||||
.vs-dark .settings-editor.showing-modified-only > .settings-header > .settings-header-controls .settings-header-controls-right .toolbar-toggle-more::before,
|
||||
.vs-dark .settings-editor.settings-filtered-by-tag > .settings-header > .settings-header-controls .settings-header-controls-right .toolbar-toggle-more::before {
|
||||
border-color : #000;
|
||||
}
|
||||
|
||||
.settings-editor.showing-modified-only > .settings-header > .settings-header-controls .settings-header-controls-right .toolbar-toggle-more::before,
|
||||
.settings-editor.settings-filtered-by-tag > .settings-header > .settings-header-controls .settings-header-controls-right .toolbar-toggle-more::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget > .monaco-action-bar .action-item {
|
||||
padding: 0px; /* padding must be on action-label because it has the bottom-border, because that's where the .checked class is */
|
||||
}
|
||||
|
|
|
@ -14,7 +14,7 @@ import * as collections from 'vs/base/common/collections';
|
|||
import { getErrorMessage, isPromiseCanceledError } from 'vs/base/common/errors';
|
||||
import URI from 'vs/base/common/uri';
|
||||
import { TPromise } from 'vs/base/common/winjs.base';
|
||||
import { ITree, ITreeConfiguration } from 'vs/base/parts/tree/browser/tree';
|
||||
import { ITreeConfiguration } from 'vs/base/parts/tree/browser/tree';
|
||||
import { OpenMode, DefaultTreestyler } from 'vs/base/parts/tree/browser/treeDefaults';
|
||||
import 'vs/css!./media/settingsEditor2';
|
||||
import { localize } from 'vs/nls';
|
||||
|
@ -32,7 +32,7 @@ import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
|
|||
import { EditorOptions, IEditor } from 'vs/workbench/common/editor';
|
||||
import { SearchWidget, SettingsTarget, SettingsTargetsWidget } from 'vs/workbench/parts/preferences/browser/preferencesWidgets';
|
||||
import { commonlyUsedData, tocData } from 'vs/workbench/parts/preferences/browser/settingsLayout';
|
||||
import { ISettingsEditorViewState, resolveExtensionsSettings, resolveSettingsTree, SearchResultIdx, SearchResultModel, SettingsRenderer, SettingsTree, SettingsTreeElement, SettingsTreeFilter, SettingsTreeGroupElement, SettingsTreeModel, SettingsTreeSettingElement, MODIFIED_SETTING_TAG } from 'vs/workbench/parts/preferences/browser/settingsTree';
|
||||
import { ISettingsEditorViewState, resolveExtensionsSettings, resolveSettingsTree, SearchResultIdx, SearchResultModel, SettingsRenderer, SettingsTree, SettingsTreeElement, SettingsTreeFilter, SettingsTreeGroupElement, SettingsTreeModel, SettingsTreeSettingElement, MODIFIED_SETTING_TAG, BACKGROUND_ONLINE_TAG } from 'vs/workbench/parts/preferences/browser/settingsTree';
|
||||
import { TOCDataSource, TOCRenderer, TOCTreeModel } from 'vs/workbench/parts/preferences/browser/tocTree';
|
||||
import { CONTEXT_SETTINGS_EDITOR, CONTEXT_SETTINGS_FIRST_ROW_FOCUS, CONTEXT_SETTINGS_ROW_FOCUS, CONTEXT_SETTINGS_SEARCH_FOCUS, CONTEXT_TOC_ROW_FOCUS, IPreferencesSearchService, ISearchProvider } from 'vs/workbench/parts/preferences/common/preferences';
|
||||
import { IPreferencesService, ISearchResult, ISettingsEditorModel } from 'vs/workbench/services/preferences/common/preferences';
|
||||
|
@ -40,6 +40,7 @@ import { SettingsEditor2Input } from 'vs/workbench/services/preferences/common/p
|
|||
import { DefaultSettingsEditorModel } from 'vs/workbench/services/preferences/common/preferencesModels';
|
||||
import { editorBackground, foreground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { settingsHeaderForeground } from 'vs/workbench/parts/preferences/browser/settingsWidgets';
|
||||
import { Separator } from 'vs/base/browser/ui/actionbar/actionbar';
|
||||
|
||||
const $ = DOM.$;
|
||||
|
||||
|
@ -179,6 +180,12 @@ export class SettingsEditor2 extends BaseEditor {
|
|||
this.searchWidget.clear();
|
||||
}
|
||||
|
||||
filterByTag(tag: string): void {
|
||||
if (this.searchWidget) {
|
||||
this.searchWidget.setValue(`@tag:${tag}`);
|
||||
}
|
||||
}
|
||||
|
||||
private createHeader(parent: HTMLElement): void {
|
||||
this.headerContainer = DOM.append(parent, $('.settings-header'));
|
||||
|
||||
|
@ -223,17 +230,16 @@ export class SettingsEditor2 extends BaseEditor {
|
|||
});
|
||||
|
||||
const actions = [
|
||||
this.instantiationService.createInstance(ToggleFilterByTagAction,
|
||||
this.instantiationService.createInstance(FilterByTagAction,
|
||||
localize('filterModifiedLabel', "Show modified settings only"),
|
||||
MODIFIED_SETTING_TAG,
|
||||
this,
|
||||
this.viewState),
|
||||
this),
|
||||
this.instantiationService.createInstance(
|
||||
ToggleFilterByTagAction,
|
||||
FilterByTagAction,
|
||||
localize('filterBackgroundOnlineLabel', "Control background online features"),
|
||||
'backgroundOnlineFeature',
|
||||
this,
|
||||
this.viewState),
|
||||
BACKGROUND_ONLINE_TAG,
|
||||
this),
|
||||
new Separator(),
|
||||
this.instantiationService.createInstance(OpenSettingsAction)
|
||||
];
|
||||
this.toolbar.setActions([], actions)();
|
||||
|
@ -409,22 +415,6 @@ export class SettingsEditor2 extends BaseEditor {
|
|||
}));
|
||||
}
|
||||
|
||||
toggleFilterByTag(tag: string): TPromise<void> {
|
||||
// Reset other tags, toggle this tag
|
||||
const wasFiltered = this.viewState.tagFilters && this.viewState.tagFilters.has(tag);
|
||||
const isFiltered = !wasFiltered;
|
||||
this.viewState.tagFilters = new Set<string>();
|
||||
if (isFiltered) {
|
||||
this.viewState.tagFilters.add(tag);
|
||||
}
|
||||
|
||||
DOM.toggleClass(this.rootElement, 'settings-filtered-by-tag', isFiltered);
|
||||
return this.refreshTreeAndMaintainFocus().then(() => {
|
||||
this.settingsTree.setScrollPosition(0);
|
||||
this.expandAll(this.settingsTree);
|
||||
});
|
||||
}
|
||||
|
||||
private onDidChangeSetting(key: string, value: any): void {
|
||||
if (this.pendingSettingUpdate && this.pendingSettingUpdate.key !== key) {
|
||||
this.updateChangedSetting(key, value);
|
||||
|
@ -664,6 +654,14 @@ export class SettingsEditor2 extends BaseEditor {
|
|||
}
|
||||
|
||||
private triggerSearch(query: string): TPromise<void> {
|
||||
this.viewState.tagFilters = new Set<string>();
|
||||
if (query) {
|
||||
const tagMatches = query.match(/\s*@tag:(\S+)(.*)/); // For now, we support single tag at a time.
|
||||
if (tagMatches) {
|
||||
this.viewState.tagFilters.add(tagMatches[1]);
|
||||
query = tagMatches[2];
|
||||
}
|
||||
}
|
||||
if (query) {
|
||||
return this.searchInProgress = TPromise.join([
|
||||
this.localSearchDelayer.trigger(() => this.localFilterPreferences(query)),
|
||||
|
@ -689,14 +687,6 @@ export class SettingsEditor2 extends BaseEditor {
|
|||
}
|
||||
}
|
||||
|
||||
private expandAll(tree: ITree): void {
|
||||
const nav = tree.getNavigator();
|
||||
let cur;
|
||||
while (cur = nav.next()) {
|
||||
tree.expand(cur);
|
||||
}
|
||||
}
|
||||
|
||||
private reportFilteringUsed(query: string, results: ISearchResult[]): void {
|
||||
const nlpResult = results[SearchResultIdx.Remote];
|
||||
const nlpMetadata = nlpResult && nlpResult.metadata;
|
||||
|
@ -844,23 +834,19 @@ class OpenSettingsAction extends Action {
|
|||
}
|
||||
}
|
||||
|
||||
class ToggleFilterByTagAction extends Action {
|
||||
static readonly ID = 'settings.toggleFilterByTag';
|
||||
|
||||
get checked(): boolean {
|
||||
return this.viewState.tagFilters && this.viewState.tagFilters.has(this.tag);
|
||||
}
|
||||
class FilterByTagAction extends Action {
|
||||
static readonly ID = 'settings.filterByTag';
|
||||
|
||||
constructor(
|
||||
label: string,
|
||||
private tag: string,
|
||||
private settingsEditor: SettingsEditor2,
|
||||
private viewState: ISettingsEditorViewState
|
||||
private settingsEditor: SettingsEditor2
|
||||
) {
|
||||
super(ToggleFilterByTagAction.ID, label, 'toggle-filter-tag');
|
||||
super(FilterByTagAction.ID, label, 'toggle-filter-tag');
|
||||
}
|
||||
|
||||
run(): TPromise<void> {
|
||||
return this.settingsEditor.toggleFilterByTag(this.tag);
|
||||
this.settingsEditor.filterByTag(this.tag);
|
||||
return TPromise.as(null);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -41,6 +41,7 @@ import { ISearchResult, ISetting, ISettingsGroup } from 'vs/workbench/services/p
|
|||
const $ = DOM.$;
|
||||
|
||||
export const MODIFIED_SETTING_TAG = 'modified';
|
||||
export const BACKGROUND_ONLINE_TAG = 'backgroundOnlineFeature';
|
||||
|
||||
export abstract class SettingsTreeElement {
|
||||
id: string;
|
||||
|
|
|
@ -48,7 +48,6 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
|
|||
const modifiedItemForegroundColor = theme.getColor(modifiedItemForeground);
|
||||
if (modifiedItemForegroundColor) {
|
||||
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-is-configured-label { color: ${modifiedItemForegroundColor}; }`);
|
||||
collector.addRule(`.settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right .toolbar-toggle-more::before { background-color: ${modifiedItemForegroundColor}; }`);
|
||||
}
|
||||
|
||||
const checkboxBackgroundColor = theme.getColor(settingsCheckboxBackground);
|
||||
|
|
Loading…
Reference in a new issue