From 8fde47f31a484e35d8f8722a77ff3f830a67baa3 Mon Sep 17 00:00:00 2001 From: Rob Lourens Date: Mon, 18 Jun 2018 16:33:29 -0700 Subject: [PATCH] Settings editor - Flatten settings list and style --- .../browser/media/settingsEditor2.css | 58 +++++++------------ .../preferences/browser/settingsEditor2.ts | 4 +- .../parts/preferences/browser/settingsTree.ts | 26 ++++++--- 3 files changed, 42 insertions(+), 46 deletions(-) diff --git a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css index de847d0ee26..ed7f7d4b708 100644 --- a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css +++ b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css @@ -16,7 +16,7 @@ /* header styling */ .settings-editor > .settings-editor-right > .settings-header { - padding-left: 15px; + padding-left: 5px; padding-right: 5px; max-width: 1000px; box-sizing: border-box; @@ -128,6 +128,7 @@ .settings-editor > .settings-toc-container { width: 175px; margin-top: 114px; + margin-right: 5px; } .settings-editor.search-mode > .settings-toc-container .monaco-tree { @@ -137,6 +138,7 @@ .settings-editor > .settings-toc-container .monaco-tree-row .settings-toc-entry { overflow: hidden; text-overflow: ellipsis; + line-height: 22px; } .settings-editor > .settings-editor-right > .settings-body .settings-tree-container { @@ -147,7 +149,8 @@ } .settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item { - padding-top: 5px; + padding-top: 4px; + padding-left: 5px; cursor: default; white-space: normal; height: 100%; @@ -159,22 +162,6 @@ background-color: rgba(130, 130, 130, 0.04); } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item > .setting-item-left { - flex: 1; - padding-top: 3px; - padding-bottom: 12px; -} - -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item > .setting-item-right { - min-width: 180px; - margin: 21px 10px 0px 5px; -} - -/* .settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-title { - margin-top: 2px; - line-height: initial; -} */ - .settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-is-configured-label { font-style: italic; opacity: 0.8; @@ -222,7 +209,7 @@ .settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value { margin-top: 5px; - margin-bottom: 9px; /* Needed when measuring an expanded row */ + margin-bottom: 7px; /* Needed when measuring an expanded row */ display: flex; } @@ -242,15 +229,15 @@ display: inline-block; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button, -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button:hover, -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button:active { +.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control > .edit-in-settings-button, +.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control > .edit-in-settings-button:hover, +.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control > .edit-in-settings-button:active { margin: auto; text-align: left; text-decoration: underline; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button + .setting-reset-button.monaco-button { +.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control > .edit-in-settings-button + .setting-reset-button.monaco-button { display: none; } @@ -286,22 +273,19 @@ padding-right: 10px; } -/* - Ensure the is-configured indicators can appear outside of the list items themselves: - - Disable overflow: hidden on the listrow - - Allocate some space with a margin on the list-row - - Make up for that space with a negative margin on the settings-body - - This is risky, consider a different approach -*/ -.settings-editor .settings-tree-container .setting-item { - overflow: visible; -} - .settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .settings-group-title-label { margin: 0px; - padding: 5px 0px; - font-size: 13px; + padding-left: 5px !important; +} + +.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .settings-group-level-1 { + padding-top: 16px; + font-size: 24px; +} + +.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .settings-group-level-2 { + padding-top: 16px; + font-size: 20px; } .settings-editor > .settings-editor-right > .settings-body .settings-feedback-button { diff --git a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts index e761a4d82c2..975e8fe8401 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts @@ -284,8 +284,8 @@ export class SettingsEditor2 extends BaseEditor { { ariaLabel: localize('treeAriaLabel', "Settings"), showLoading: false, - // indentPixels: 0, - twistiePixels: 15, + indentPixels: 0, + twistiePixels: 0, }); this._register(registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { diff --git a/src/vs/workbench/parts/preferences/browser/settingsTree.ts b/src/vs/workbench/parts/preferences/browser/settingsTree.ts index 2ed588ef106..1594d647c7b 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsTree.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsTree.ts @@ -53,6 +53,7 @@ export abstract class SettingsTreeElement { export class SettingsTreeGroupElement extends SettingsTreeElement { children: (SettingsTreeGroupElement | SettingsTreeSettingElement)[]; label: string; + level: number; } export class SettingsTreeSettingElement extends SettingsTreeElement { @@ -110,6 +111,7 @@ export class SettingsTreeModel { element.id = tocEntry.id; element.label = tocEntry.label; element.parent = parent; + element.level = this.getDepth(element); if (tocEntry.children) { element.children = tocEntry.children.map(child => this.createSettingsTreeGroupElement(child, element)); @@ -121,6 +123,14 @@ export class SettingsTreeModel { return element; } + private getDepth(element: SettingsTreeElement): number { + if (element.parent) { + return 1 + this.getDepth(element.parent); + } else { + return 0; + } + } + private createSettingsTreeSettingElement(setting: ISetting, parent: SettingsTreeGroupElement): SettingsTreeSettingElement { const element = createSettingsTreeSettingElement(setting, parent, this.viewState.settingsTarget, this.configurationService); this._treeElementsById.set(element.id, element); @@ -371,7 +381,6 @@ interface ISettingItemTemplate extends IDisposableTemplate { interface IGroupTitleTemplate extends IDisposableTemplate { context?: SettingsTreeGroupElement; parent: HTMLElement; - labelElement: HTMLElement; } const SETTINGS_ELEMENT_TEMPLATE_ID = 'settings.entry.template'; @@ -404,7 +413,7 @@ export class SettingsRenderer implements IRenderer { getHeight(tree: ITree, element: SettingsTreeElement): number { if (element instanceof SettingsTreeGroupElement) { - return 30; + return 40 + (4 * element.level); } if (element instanceof SettingsTreeSettingElement) { @@ -457,12 +466,9 @@ export class SettingsRenderer implements IRenderer { private renderGroupTitleTemplate(container: HTMLElement): IGroupTitleTemplate { DOM.addClass(container, 'group-title'); - const labelElement = DOM.append(container, $('h3.settings-group-title-label')); - const toDispose = []; const template: IGroupTitleTemplate = { parent: container, - labelElement, toDispose }; @@ -514,11 +520,17 @@ export class SettingsRenderer implements IRenderer { } if (templateId === SETTINGS_GROUP_ELEMENT_TEMPLATE_ID) { - (template).labelElement.textContent = (element).label; - return; + return this.renderGroupElement(element, template); } } + private renderGroupElement(element: SettingsTreeGroupElement, template: IGroupTitleTemplate): void { + template.parent.innerHTML = ''; + const labelElement = DOM.append(template.parent, $('h3.settings-group-title-label')); + labelElement.classList.add(`settings-group-level-${element.level}`); + labelElement.textContent = (element).label; + } + private elementIsSelected(tree: ITree, element: SettingsTreeElement): boolean { const selection = tree.getSelection(); const selectedElement: SettingsTreeElement = selection && selection[0];