提交 1b3fdcf7 编写于 作者: R Rob Lourens

Settings exclude control - implement adding patterns

上级 4f053d82
......@@ -78,35 +78,30 @@
margin-right: 10px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .monaco-text-button.setting-exclude-addButton {
display: none;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude.is-expanded .monaco-text-button.setting-exclude-addButton {
display: inline-block;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .setting-exclude-new-row.setting-exclude-newExcludeItem {
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .setting-exclude-edit-row.setting-exclude-newExcludeItem {
display: flex;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .setting-exclude-new-row.setting-exclude-newExcludeItem .setting-exclude-patternInput,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .setting-exclude-new-row.setting-exclude-newExcludeItem .setting-exclude-siblingInput {
display: none;
flex: 1;
max-width: 200px;
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .setting-exclude-patternInput {
max-width: 300px;
display: inline-block;
margin-right: 10px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .setting-exclude-new-row.setting-exclude-newPattern .setting-exclude-patternInput {
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .setting-exclude-edit-row.setting-exclude-newPattern .setting-exclude-patternInput {
display: inline-block;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .setting-exclude-new-row.setting-exclude-newPatternWithSibling .setting-exclude-patternInput {
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .setting-exclude-edit-row.setting-exclude-newPatternWithSibling .setting-exclude-patternInput {
margin-right: 5px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .setting-exclude-new-row.setting-exclude-newPatternWithSibling .setting-exclude-patternInput,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .setting-exclude-new-row.setting-exclude-newPatternWithSibling .setting-exclude-siblingInput {
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .setting-exclude-edit-row.setting-exclude-newPatternWithSibling .setting-exclude-patternInput,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-exclude .setting-exclude-edit-row.setting-exclude-newPatternWithSibling .setting-exclude-siblingInput {
display: inline-block;
}
......
......@@ -35,7 +35,7 @@ import { attachButtonStyler, attachInputBoxStyler, attachSelectBoxStyler, attach
import { ICssStyleCollector, ITheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { SettingsTarget } from 'vs/workbench/parts/preferences/browser/preferencesWidgets';
import { ITOCEntry } from 'vs/workbench/parts/preferences/browser/settingsLayout';
import { ExcludeSettingWidget, settingsNumberInputBackground, settingsNumberInputBorder, settingsNumberInputForeground, settingsSelectBackground, settingsSelectBorder, settingsSelectForeground, settingsTextInputBackground, settingsTextInputBorder, settingsTextInputForeground, settingItemInactiveSelectionBorder, settingsHeaderForeground } from 'vs/workbench/parts/preferences/browser/settingsWidgets';
import { ExcludeSettingWidget, settingsNumberInputBackground, settingsNumberInputBorder, settingsNumberInputForeground, settingsSelectBackground, settingsSelectBorder, settingsSelectForeground, settingsTextInputBorder, settingsTextInputForeground, settingItemInactiveSelectionBorder, settingsHeaderForeground, settingsTextInputBackground } from 'vs/workbench/parts/preferences/browser/settingsWidgets';
import { ISearchResult, ISetting, ISettingsGroup } from 'vs/workbench/services/preferences/common/preferences';
const $ = DOM.$;
......@@ -551,7 +551,7 @@ export class SettingsRenderer implements ITreeRenderer {
_getExcludeSettingHeight(element: SettingsTreeSettingElement): number {
const displayValue = getExcludeDisplayValue(element);
return (Object.keys(displayValue).length + 1) * 22 + 70;
return (Object.keys(displayValue).length + 1) * 22 + 72;
}
_getUnexpandedSettingHeight(element: SettingsTreeSettingElement): number {
......@@ -825,15 +825,6 @@ export class SettingsRenderer implements ITreeRenderer {
const excludeWidget = this.instantiationService.createInstance(ExcludeSettingWidget, common.controlElement);
common.toDispose.push(excludeWidget);
// common.toDispose.push(excludeWidget.onDidClick(() => this._onDidOpenSettings.fire()));
// excludeWidget.label = localize('editInSettingsJson', "Edit in settings.json");
// excludeWidget.element.classList.add('edit-in-settings-button');
// common.toDispose.push(attachButtonStyler(excludeWidget, this.themeService, {
// buttonBackground: Color.transparent.toString(),
// buttonHoverBackground: Color.transparent.toString(),
// buttonForeground: 'foreground'
// }));
const template: ISettingExcludeItemTemplate = {
...common,
......@@ -851,16 +842,19 @@ export class SettingsRenderer implements ITreeRenderer {
// editing something present in the value
newValue[e.pattern] = newValue[e.originalPattern];
delete newValue[e.originalPattern];
} else {
} else if (e.originalPattern) {
// editing a default
newValue[e.originalPattern] = false;
newValue[e.pattern] = template.context.defaultValue[e.originalPattern];
} else {
// adding a new pattern
newValue[e.pattern] = true;
}
} else {
if (e.originalPattern in newValue) {
// deleting a configured pattern
delete newValue[e.originalPattern];
} else {
} else if (e.originalPattern) {
// "deleting" a default by overriding it
newValue[e.originalPattern] = false;
}
......
......@@ -98,10 +98,10 @@ export class ExcludeSettingListModel {
...this._dataItems
];
items.push(<INewExcludeItem>{
id: 'newItem',
mode: this._newItem
});
// items.push(<INewExcludeItem>{
// id: 'newItem',
// mode: this._newItem
// });
return items;
}
......@@ -136,7 +136,8 @@ interface IExcludeChangeEvent {
export class ExcludeSettingWidget extends Disposable {
private listElement: HTMLElement;
private renderedDisposables: IDisposable[] = [];
private listDisposables: IDisposable[] = [];
private patternInput: InputBox;
private model = new ExcludeSettingListModel();
......@@ -151,27 +152,19 @@ export class ExcludeSettingWidget extends Disposable {
super();
this.listElement = DOM.append(container, $('.setting-exclude-widget'));
const addPatternButton = this._register(new Button(container));
addPatternButton.label = localize('addPattern', "Add Pattern");
addPatternButton.element.classList.add('setting-exclude-addPattern', 'setting-exclude-addButton');
this._register(attachButtonStyler(addPatternButton, this.themeService));
this._register(addPatternButton.onDidClick(() => {
this.model.setAddItemMode(AddItemMode.Pattern);
this.update();
}));
DOM.append(container, this.renderAddItem());
this.update();
}
setValue(excludeValue: any): void {
this.model.setValue(excludeValue, void 0);
this.patternInput.value = '';
this.update();
}
private update(): void {
DOM.clearNode(this.listElement);
this.renderedDisposables = dispose(this.renderedDisposables);
this.listDisposables = dispose(this.listDisposables);
this.model.items
.map(item => this.renderItem(item))
......@@ -204,13 +197,13 @@ export class ExcludeSettingWidget extends Disposable {
private renderItem(item: IExcludeItem): HTMLElement {
return isExcludeDataItem(item) ?
this.renderDataItem(item) :
this.renderNewItem(item);
this.renderEditItem(item);
}
private renderDataItem(item: IExcludeDataItem): HTMLElement {
const rowElement = $('.setting-exclude-row');
const actionBar = new ActionBar(rowElement);
this.renderedDisposables.push(actionBar);
this.listDisposables.push(actionBar);
const patternElement = DOM.append(rowElement, $('.setting-exclude-pattern'));
const siblingElement = DOM.append(rowElement, $('.setting-exclude-sibling'));
......@@ -229,15 +222,49 @@ export class ExcludeSettingWidget extends Disposable {
return rowElement;
}
private renderNewItem(item: INewExcludeItem): HTMLElement {
private renderAddItem(): HTMLElement {
const rowElement = $('.setting-exclude-new-row');
this.patternInput = new InputBox(rowElement, this.contextViewService, {
placeholder: localize('excludePatternInputPlaceholder', "Exclude Pattern...")
});
this.patternInput.element.classList.add('setting-exclude-patternInput');
this._register(attachInputBoxStyler(this.patternInput, this.themeService, {
inputBackground: settingsTextInputBackground,
inputForeground: settingsTextInputForeground,
inputBorder: settingsTextInputBorder
}));
this._register(this.patternInput);
const addPatternButton = this._register(new Button(rowElement));
addPatternButton.label = localize('addPattern', "Add Pattern");
addPatternButton.element.classList.add('setting-exclude-addPattern', 'setting-exclude-addButton');
this._register(attachButtonStyler(addPatternButton, this.themeService));
const addItem = () => this._onDidChangeExclude.fire({
originalPattern: undefined,
pattern: this.patternInput.value
});
this._register(addPatternButton.onDidClick(addItem));
const onKeydown = (e: StandardKeyboardEvent) => {
if (e.equals(KeyCode.Enter)) {
addItem();
}
};
this._register(DOM.addStandardDisposableListener(this.patternInput.inputElement, DOM.EventType.KEY_DOWN, onKeydown));
return rowElement;
}
private renderEditItem(item: INewExcludeItem): HTMLElement {
const rowElement = $('.setting-exclude-edit-row');
const onKeydown = (e: StandardKeyboardEvent) => {
if (e.equals(KeyCode.Enter)) {
this._onDidChangeExclude.fire({
originalPattern: undefined,
pattern: patternInput.value,
// sibling: siblingInput.value
pattern: patternInput.value
});
}
};
......@@ -246,25 +273,25 @@ export class ExcludeSettingWidget extends Disposable {
placeholder: localize('excludePatternInputPlaceholder', "Exclude Pattern...")
});
patternInput.element.classList.add('setting-exclude-patternInput');
this.renderedDisposables.push(attachInputBoxStyler(patternInput, this.themeService, {
this.listDisposables.push(attachInputBoxStyler(patternInput, this.themeService, {
inputBackground: settingsTextInputBackground,
inputForeground: settingsTextInputForeground,
inputBorder: settingsTextInputBorder
}));
this.renderedDisposables.push(patternInput);
this.renderedDisposables.push(DOM.addStandardDisposableListener(patternInput.inputElement, DOM.EventType.KEY_DOWN, onKeydown));
this.listDisposables.push(patternInput);
this.listDisposables.push(DOM.addStandardDisposableListener(patternInput.inputElement, DOM.EventType.KEY_DOWN, onKeydown));
const siblingInput = new InputBox(rowElement, this.contextViewService, {
placeholder: localize('excludeSiblingInputPlaceholder', "When Pattern Is Present...")
});
siblingInput.element.classList.add('setting-exclude-siblingInput');
this.renderedDisposables.push(siblingInput);
this.renderedDisposables.push(attachInputBoxStyler(siblingInput, this.themeService, {
this.listDisposables.push(siblingInput);
this.listDisposables.push(attachInputBoxStyler(siblingInput, this.themeService, {
inputBackground: settingsTextInputBackground,
inputForeground: settingsTextInputForeground,
inputBorder: settingsTextInputBorder
}));
this.renderedDisposables.push(DOM.addStandardDisposableListener(siblingInput.inputElement, DOM.EventType.KEY_DOWN, onKeydown));
this.listDisposables.push(DOM.addStandardDisposableListener(siblingInput.inputElement, DOM.EventType.KEY_DOWN, onKeydown));
rowElement.classList.add('setting-exclude-newExcludeItem');
......@@ -283,7 +310,7 @@ export class ExcludeSettingWidget extends Disposable {
dispose() {
super.dispose();
this.renderedDisposables = dispose(this.renderedDisposables);
this.listDisposables = dispose(this.listDisposables);
}
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册