diff --git a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css index ed7f7d4b70816ccb5052d2e4aa1b7d5e3a21bae9..d8f13862c20fe308a62a8d43f3e6db7a07ea2dba 100644 --- a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css +++ b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css @@ -5,45 +5,40 @@ .settings-editor { padding-top: 11px; - display: flex; - margin: auto; max-width: 1000px; -} - -.settings-editor > .settings-editor-right { - flex: 1; + margin: auto; } /* header styling */ -.settings-editor > .settings-editor-right > .settings-header { +.settings-editor > .settings-header { padding-left: 5px; padding-right: 5px; - max-width: 1000px; box-sizing: border-box; + margin: auto; } -.settings-editor > .settings-editor-right > .settings-header > .settings-preview-header { +.settings-editor > .settings-header > .settings-preview-header { margin-bottom: 5px; } -.settings-editor > .settings-editor-right > .settings-header > .settings-preview-header .settings-preview-label { +.settings-editor > .settings-header > .settings-preview-header .settings-preview-label { opacity: .7; } -.settings-editor > .settings-editor-right > .settings-header > .settings-advanced-customization .open-settings-button, -.settings-editor > .settings-editor-right > .settings-header > .settings-advanced-customization .open-settings-button:hover, -.settings-editor > .settings-editor-right > .settings-header > .settings-advanced-customization .open-settings-button:active { +.settings-editor > .settings-header > .settings-advanced-customization .open-settings-button, +.settings-editor > .settings-header > .settings-advanced-customization .open-settings-button:hover, +.settings-editor > .settings-header > .settings-advanced-customization .open-settings-button:active { padding: 0; text-decoration: underline; display: inline; } -.settings-editor > .settings-editor-right > .settings-header > .settings-advanced-customization { +.settings-editor > .settings-header > .settings-advanced-customization { opacity: .7; margin-top: 10px; } -.settings-editor > .settings-editor-right > .settings-header > .settings-preview-header > .settings-preview-warning { +.settings-editor > .settings-header > .settings-preview-header > .settings-preview-warning { text-align: right; text-transform: uppercase; background: rgba(136, 136, 136, 0.3); @@ -53,140 +48,133 @@ margin-right: 7px; } -.settings-editor > .settings-editor-right > .settings-header > .search-container { +.settings-editor > .settings-header > .search-container { position: relative; } -.settings-editor > .settings-editor-right > .settings-header .search-container > .settings-search-input { +.settings-editor > .settings-header .search-container > .settings-search-input { vertical-align: middle; } -.settings-editor > .settings-editor-right > .settings-header .search-container > .settings-search-input > .monaco-inputbox { +.settings-editor > .settings-header .search-container > .settings-search-input > .monaco-inputbox { height: 30px; width: 100%; } -.settings-editor > .settings-editor-right > .settings-header .search-container > .settings-search-input > .monaco-inputbox .input { +.settings-editor > .settings-header .search-container > .settings-search-input > .monaco-inputbox .input { font-size: 14px; padding-left: 10px; } -.settings-editor > .settings-editor-right > .settings-header > .settings-header-controls { +.settings-editor > .settings-header > .settings-header-controls { margin-top: 2px; height: 30px; display: flex; } -.settings-editor > .settings-editor-right > .settings-header .settings-tabs-widget > .monaco-action-bar .action-item:not(:first-child) .action-label { +.settings-editor > .settings-header .settings-tabs-widget > .monaco-action-bar .action-item:not(:first-child) .action-label { margin-left: 14px; } -.settings-editor > .settings-editor-right > .settings-header .settings-tabs-widget .monaco-action-bar .action-item .dropdown-icon { +.settings-editor > .settings-header .settings-tabs-widget .monaco-action-bar .action-item .dropdown-icon { /** The tab widget container height is shorter than elsewhere, need to tweak this */ padding-top: 3px; } -.settings-editor > .settings-editor-right > .settings-header > .settings-header-controls .settings-header-controls-right { +.settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right { margin-left: auto; padding-top: 3px; display: flex; } -.settings-editor > .settings-editor-right > .settings-header > .settings-header-controls .settings-header-controls-right #configured-only-checkbox { +.settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right #configured-only-checkbox { flex-shrink: 0; } -.settings-editor > .settings-editor-right > .settings-header > .settings-header-controls .settings-header-controls-right .configured-only-label { +.settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right .configured-only-label { white-space: nowrap; margin-right: 10px; margin-left: 2px; opacity: 0.7; } -.settings-editor > .settings-editor-right > .settings-body { +.settings-editor > .settings-body { display: flex; + margin: auto; + margin-top: 5px; max-width: 1000px; } -.settings-editor > .settings-editor-right > .settings-body .settings-tree-container .monaco-tree-wrapper { - max-width: 800px; -} - -.settings-editor > .settings-editor-right > .settings-body .settings-tree-container .monaco-scrollable-element .shadow.top-left-corner { - left: calc((100% - 800px)/2); -} - -.settings-editor > .settings-editor-right > .settings-body .settings-tree-container .monaco-scrollable-element .shadow { - left: calc((100% - 794px)/2); - width: 800px; -} - -.settings-editor > .settings-editor-right > .settings-body .settings-tree-container .monaco-tree::before { +.settings-editor > .settings-body .settings-tree-container .monaco-tree::before { outline: none !important; } -.settings-editor > .settings-toc-container { - width: 175px; - margin-top: 114px; +.settings-editor > .settings-body .settings-toc-container { + width: 200px; margin-right: 5px; } -.settings-editor.search-mode > .settings-toc-container .monaco-tree { +.search-mode .settings-toc-container .monaco-tree { display: none; } -.settings-editor > .settings-toc-container .monaco-tree-row .settings-toc-entry { +.settings-editor > .settings-body .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 { +.settings-editor > .settings-body .settings-tree-container { flex: 1; border-spacing: 0; border-collapse: separate; position: relative; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item { - padding-top: 4px; - padding-left: 5px; +.settings-editor > .settings-body > .settings-tree-container .setting-item { + padding-top: 5px; cursor: default; white-space: normal; height: 100%; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item.odd:not(.focused):not(.selected):not(:hover), -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .monaco-tree:not(:focus) .setting-item.focused.odd:not(.selected):not(:hover), -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .monaco-tree:not(.focused) .setting-item.focused.odd:not(.selected):not(:hover) { +.settings-editor > .settings-body > .settings-tree-container .setting-item.odd:not(.focused):not(.selected):not(:hover), +.settings-editor > .settings-body > .settings-tree-container .monaco-tree:not(:focus) .setting-item.focused.odd:not(.selected):not(:hover), +.settings-editor > .settings-body > .settings-tree-container .monaco-tree:not(.focused) .setting-item.focused.odd:not(.selected):not(:hover) { background-color: rgba(130, 130, 130, 0.04); } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-is-configured-label { +.settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-left { + flex: 1; + padding-top: 3px; + padding-bottom: 12px; +} + +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-is-configured-label { font-style: italic; opacity: 0.8; margin-right: 7px; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-overrides { +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-overrides { opacity: 0.5; font-style: italic; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-label { +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-label { margin-right: 7px; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-label, -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-category { +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-label, +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category { font-weight: bold; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-category { +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category { opacity: 0.7; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-description { +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description { opacity: 0.7; margin-top: 3px; overflow: hidden; @@ -195,59 +183,53 @@ height: 18px; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-measure-container.monaco-tree-row { - padding-left: 15px; - opacity: 0; - max-width: 800px; -} - -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item.is-expanded .setting-item-description, -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item.setting-measure-helper .setting-item-description { +.settings-editor > .settings-body > .settings-tree-container .setting-item.is-expanded .setting-item-description, +.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-measure-helper .setting-item-description { height: initial; white-space: pre-wrap; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value { +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value { margin-top: 5px; margin-bottom: 7px; /* Needed when measuring an expanded row */ display: flex; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-number { +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-number { min-width: 200px; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum, -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-string { +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum, +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-string { flex: 1; min-width: initial; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum > *:first-child { +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum > *:first-child { width: 100%; min-width: 250px; display: inline-block; } -.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 { +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button, +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button:hover, +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .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 > .setting-item-control > .edit-in-settings-button + .setting-reset-button.monaco-button { +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button + .setting-reset-button.monaco-button { display: none; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .monaco-select-box { +.settings-editor > .settings-body > .settings-tree-container .setting-item .monaco-select-box { width: initial; font: inherit; height: 26px; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-reset-button.monaco-button { +.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-reset-button.monaco-button { text-align: left; display: inline-block; visibility: hidden; @@ -256,39 +238,43 @@ padding-top: 2px; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-value > .setting-reset-button.monaco-button { +.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-value > .setting-reset-button.monaco-button { visibility: visible; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .all-settings { +.settings-editor > .settings-body > .settings-tree-container .all-settings { display: flex; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .all-settings .all-settings-button { +.settings-editor > .settings-body > .settings-tree-container .all-settings .all-settings-button { margin: auto; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .all-settings .all-settings-button .monaco-button { +.settings-editor > .settings-body > .settings-tree-container .all-settings .all-settings-button .monaco-button { padding-left: 10px; padding-right: 10px; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .settings-group-title-label { +.settings-editor > .settings-body > .settings-tree-container .settings-group-title, +.settings-editor > .settings-body > .settings-tree-container .setting-item { + padding-left: 5px; +} + +.settings-editor > .settings-body > .settings-tree-container .settings-group-title-label { margin: 0px; - padding-left: 5px !important; } -.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .settings-group-level-1 { +.settings-editor > .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 { +.settings-editor > .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 { +.settings-editor > .settings-body .settings-feedback-button { color: rgb(255, 255, 255); background-color: rgb(14, 99, 156); position: absolute; diff --git a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts index a9f7a982a6e84ac5d1167e489af3c288b458716c..d05e2d6a2bf4f45d4b813777b6125dc5cd3ce5f1 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts @@ -102,11 +102,9 @@ export class SettingsEditor2 extends BaseEditor { createEditor(parent: HTMLElement): void { this.rootElement = DOM.append(parent, $('.settings-editor')); - this.createTOC(this.rootElement); - const settingsEditorRightElement = DOM.append(this.rootElement, $('.settings-editor-right')); - this.createHeader(settingsEditorRightElement); - this.createBody(settingsEditorRightElement); + this.createHeader(this.rootElement); + this.createBody(this.rootElement); } setInput(input: SettingsEditor2Input, options: EditorOptions, token: CancellationToken): Thenable { @@ -217,6 +215,7 @@ export class SettingsEditor2 extends BaseEditor { private createBody(parent: HTMLElement): void { const bodyContainer = DOM.append(parent, $('.settings-body')); + this.createTOC(bodyContainer); this.createSettingsTree(bodyContainer); if (this.environmentService.appQuality !== 'stable') { @@ -237,7 +236,8 @@ export class SettingsEditor2 extends BaseEditor { filter: this.instantiationService.createInstance(SettingsTreeFilter, this.viewState) }, { - showLoading: false + showLoading: false, + twistiePixels: 15 }); this._register(this.tocTree.onDidChangeSelection(e => { @@ -291,12 +291,12 @@ export class SettingsEditor2 extends BaseEditor { this._register(registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const activeBorderColor = theme.getColor(listActiveSelectionBackground); if (activeBorderColor) { - collector.addRule(`.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .monaco-tree:focus .monaco-tree-row.focused {outline: solid 1px ${activeBorderColor}; outline-offset: -1px; }`); + collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree:focus .monaco-tree-row.focused {outline: solid 1px ${activeBorderColor}; outline-offset: -1px; }`); } const inactiveBorderColor = theme.getColor(listInactiveSelectionBackground); if (inactiveBorderColor) { - collector.addRule(`.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .monaco-tree .monaco-tree-row.focused {outline: solid 1px ${inactiveBorderColor}; outline-offset: -1px; }`); + collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree .monaco-tree-row.focused {outline: solid 1px ${inactiveBorderColor}; outline-offset: -1px; }`); } })); diff --git a/src/vs/workbench/parts/preferences/browser/settingsTree.ts b/src/vs/workbench/parts/preferences/browser/settingsTree.ts index 5cd8fd536e460716833bfdd1cd4ffee0d9a906ff..57e2808f647c0c1356c2ab89f23f24ff68d78c95 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsTree.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsTree.ts @@ -41,7 +41,7 @@ export const modifiedItemForeground = registerColor('settings.modifiedItemForegr registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { const modifiedItemForegroundColor = theme.getColor(modifiedItemForeground); if (modifiedItemForegroundColor) { - collector.addRule(`.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-is-configured-label { color: ${modifiedItemForegroundColor}; }`); + collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-is-configured-label { color: ${modifiedItemForegroundColor}; }`); } });