diff --git a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css index c196aa743c23d7e20d8a076a1f5655d878561280..4dc619542ca0ad5b861af6bdacc0cc084f146466 100644 --- a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css +++ b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css @@ -102,16 +102,14 @@ white-space: normal; } -.settings-editor > .settings-body > .settings-list-container .monaco-list-row.odd { +.settings-editor > .settings-body > .settings-list-container .monaco-list-row.odd:not(.focused):not(.selected):not(:hover), +.settings-editor > .settings-body > .settings-list-container .monaco-list:not(:focus) .monaco-list-row.focused.odd:not(.selected):not(:hover), +.settings-editor > .settings-body > .settings-list-container .monaco-list:not(.focused) .monaco-list-row.focused.odd:not(.selected):not(:hover) { background-color: rgba(130, 130, 130, 0.04); } -.settings-editor > .settings-body > .settings-list-container .monaco-list-row:not(.odd) { - background-color: initial; -} - .settings-editor > .settings-body > .settings-list-container .monaco-list-row.setting-item { - padding: 3px 0px; + padding: 3px; } .settings-editor > .settings-body > .settings-list-container .monaco-list-row > .setting-item-container { @@ -260,6 +258,10 @@ margin-left: -15px; } +.settings-editor > .settings-body > .settings-list-container .settings-group-title-label { + margin: 5px 3px; +} + .settings-editor > .settings-body > .settings-list-container .settings-group-title-expanded, .settings-editor > .settings-body > .settings-list-container .settings-group-title-collapsed { cursor: pointer; @@ -293,5 +295,5 @@ position: absolute; content: ' '; left: -19px; - top: 14px; + top: 4px; } \ No newline at end of file diff --git a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts index 954275292783d04e87ab96281a0ba7326310dafe..5c16b4ee707dd7dac00a7009e9348c4a6e336d99 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts @@ -105,8 +105,6 @@ export class SettingsEditor2 extends BaseEditor { private searchWidget: SearchWidget; private settingsTargetsWidget: SettingsTargetsWidget; - private showConfiguredSettingsOnly = false; - private showAllSettings = false; private showConfiguredSettingsOnlyCheckbox: HTMLInputElement; private settingsListContainer: HTMLElement; @@ -123,11 +121,15 @@ export class SettingsEditor2 extends BaseEditor { private currentLocalSearchProvider: ISearchProvider; private currentRemoteSearchProvider: ISearchProvider; - private searchResultModel: SearchResultModel; private pendingSettingModifiedReport: { key: string, value: any }; + // factor out tree/list viewmodel to somewhere outside this class + private searchResultModel: SearchResultModel; private groupExpanded = new Map(); private itemExpanded = new Map(); + private showConfiguredSettingsOnly = false; + private showAllSettings = false; + // constructor( @ITelemetryService telemetryService: ITelemetryService, @@ -265,20 +267,13 @@ export class SettingsEditor2 extends BaseEditor { const settingItemRenderer = this.instantiationService.createInstance(SettingItemRenderer, this.settingsListContainer); this._register(settingItemRenderer.onDidChangeSetting(e => this.onDidChangeSetting(e.key, e.value))); this._register(settingItemRenderer.onDidOpenSettings(() => this.openSettingsFile())); - this._register(settingItemRenderer.onDidToggleExpandSetting(e => { - this.itemExpanded.set(e.key, e.expandState === ExpandState.Expanded); - this.renderEntries(); - })); + this._register(settingItemRenderer.onDidToggleExpandSetting(e => this.toggleSettingExpanded(e))); const buttonItemRenderer = new ButtonRowRenderer(); - this._register(buttonItemRenderer.onDidClick(e => this.onShowAllSettingsClicked())); + this._register(buttonItemRenderer.onDidClick(e => this.onShowAllSettingsToggled())); const groupTitleRenderer = new GroupTitleRenderer(); - this._register(groupTitleRenderer.onDidClickGroup(e => { - const isExpanded = !!this.groupExpanded.get(e); - this.groupExpanded.set(e, !isExpanded); - this.renderEntries(); - })); + this._register(groupTitleRenderer.onDidClickGroup(id => this.toggleGroupExpanded(id))); this.settingsList = this._register(this.instantiationService.createInstance( WorkbenchList, @@ -287,18 +282,47 @@ export class SettingsEditor2 extends BaseEditor { [settingItemRenderer, groupTitleRenderer, buttonItemRenderer], { identityProvider: e => e.id, - ariaLabel: localize('settingsListLabel', "Settings"), - focusOnMouseDown: false, - selectOnMouseDown: false, - keyboardSupport: false, - mouseSupport: false + ariaLabel: localize('settingsListLabel', "Settings") }) ) as WorkbenchList; - this.settingsList.style({ listHoverBackground: Color.transparent, listFocusOutline: Color.transparent }); + this._register(this.settingsList.onDidFocus(() => { + DOM.addClass(this.settingsList.getHTMLElement(), 'focused'); + })); + this._register(this.settingsList.onDidBlur(() => { + DOM.removeClass(this.settingsList.getHTMLElement(), 'focused'); + })); + + this.settingsList.onOpen(e => { + const entry = e.elements[0]; + if (!entry) { + return; + } + + if (entry.templateId === SETTINGS_GROUP_ENTRY_TEMPLATE_ID) { + this.toggleGroupExpanded(entry.id); + } else if (entry.templateId === SETTINGS_ENTRY_TEMPLATE_ID) { + this.toggleSettingExpanded(entry); + } else if (entry.templateId === BUTTON_ROW_ENTRY_TEMPLATE) { + this.onShowAllSettingsToggled(); + } + }); + } + + private toggleGroupExpanded(id: string): void { + const isExpanded = !!this.groupExpanded.get(id); + this.groupExpanded.set(id, !isExpanded); + this.renderEntries(); + } + + private toggleSettingExpanded(entry: ISettingItemEntry): void { + if (entry.isExpandable) { + this.itemExpanded.set(entry.key, !entry.isExpanded); + this.renderEntries(); + } } - private onShowAllSettingsClicked(): void { + private onShowAllSettingsToggled(): void { this.showAllSettings = !this.showAllSettings; this.render(); } @@ -650,7 +674,7 @@ class SettingItemDelegate implements IDelegate { getHeight(entry: ListEntry) { if (entry.templateId === SETTINGS_GROUP_ENTRY_TEMPLATE_ID) { - return 42; + return 30; } if (entry.templateId === SETTINGS_ENTRY_TEMPLATE_ID) { @@ -722,11 +746,6 @@ interface ISettingChangeEvent { value: any; // undefined => reset unconfigure } -interface ISettingExpandEvent { - key: string; - expandState: ExpandState; -} - class SettingItemRenderer implements IRenderer { private readonly _onDidChangeSetting: Emitter = new Emitter(); @@ -735,8 +754,8 @@ class SettingItemRenderer implements IRenderer = new Emitter(); public readonly onDidOpenSettings: Event = this._onDidOpenSettings.event; - private readonly _onDidToggleExpandSetting: Emitter = new Emitter(); - public readonly onDidToggleExpandSetting: Event = this._onDidToggleExpandSetting.event; + private readonly _onDidToggleExpandSetting: Emitter = new Emitter(); + public readonly onDidToggleExpandSetting: Event = this._onDidToggleExpandSetting.event; get templateId(): string { return SETTINGS_ENTRY_TEMPLATE_ID; } @@ -782,8 +801,7 @@ class SettingItemRenderer implements IRenderer { const entry = template.context; if (entry && entry.isExpandable) { - const newState = entry.isExpanded ? ExpandState.Collapsed : ExpandState.Expanded; - that._onDidToggleExpandSetting.fire({ key: entry.key, expandState: newState }); + that._onDidToggleExpandSetting.fire(entry); } })); } @@ -869,6 +887,7 @@ class SettingItemRenderer implements IRendererDOM.append(template.valueElement, $('input.setting-value-checkbox.setting-value-input')); checkboxElement.type = 'checkbox'; checkboxElement.checked = entry.value; + checkboxElement.tabIndex = 0; template.toDispose.push(DOM.addDisposableListener(checkboxElement, 'change', e => onChange(checkboxElement.checked))); } @@ -879,6 +898,9 @@ class SettingItemRenderer implements IRenderer onChange(entry.enum[e.index]))); @@ -889,6 +911,7 @@ class SettingItemRenderer implements IRenderer onChange(e)));