From cdf32b2c046dd87154987d62714d8e08b7b9cddb Mon Sep 17 00:00:00 2001 From: Rob Lourens Date: Fri, 25 May 2018 15:39:48 -0700 Subject: [PATCH] Settings editor - replace selection indicator bar with outline. Also fix header margin --- .../browser/media/settingsEditor2.css | 46 +++---------------- .../preferences/browser/settingsEditor2.ts | 14 +++--- 2 files changed, 13 insertions(+), 47 deletions(-) diff --git a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css index 25b47c313f7..688fc6a36d9 100644 --- a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css +++ b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css @@ -4,15 +4,16 @@ *--------------------------------------------------------------------------------------------*/ .settings-editor { - padding: 11px 0px 0px 27px; + padding-top: 11px; margin: auto; } /* header styling */ - .settings-editor > .settings-header { - padding: 0px 10px 0px 0px; + padding-left: 15px; + padding-right: 5px; max-width: 800px; + box-sizing: border-box; margin: auto; } @@ -94,6 +95,7 @@ white-space: nowrap; margin-right: 10px; margin-left: 2px; + opacity: 0.7; } .settings-editor > .settings-body .settings-tree-container .monaco-tree-wrapper { @@ -129,16 +131,6 @@ min-height: 75px; } -.settings-editor > .settings-body > .settings-tree-container .monaco-tree-row .content::before { - content: ' '; - display: inline-block; - position: absolute; - width: 5px; - left: -9px; - top: 2px; - bottom: 10px; -} - .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) { @@ -153,7 +145,7 @@ .settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-right { min-width: 180px; - margin: 21px 10px 0px; + margin: 21px 10px 0px 5px; } .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title { @@ -184,14 +176,6 @@ opacity: 0.7; } -.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-key { - margin-left: 10px; - font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback"; - font-size: 90%; - opacity: 0.8; - display: none; -} - .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description { opacity: 0.7; margin-top: 3px; @@ -229,20 +213,6 @@ height: 26px; } -.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-value-checkbox { - position: relative; -} - -.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-value-checkbox::after { - content: ' '; - display: block; - height: 3px; - width: 18px; - position: absolute; - top: 15px; - left: -3px; -} - .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-reset-button.monaco-button { text-align: left; display: block; @@ -293,10 +263,6 @@ overflow: visible; } -.settings-editor .settings-body { - margin-left: -15px; -} - .settings-editor > .settings-body > .settings-tree-container .settings-group-title-label { margin: 0px; padding: 5px 0px; diff --git a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts index a6e502ee9ec..8242a53ca38 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsEditor2.ts @@ -21,7 +21,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import { WorkbenchTree } from 'vs/platform/list/browser/listService'; import { ILogService } from 'vs/platform/log/common/log'; import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry'; -import { editorBackground, foreground } from 'vs/platform/theme/common/colorRegistry'; +import { editorBackground, foreground, listActiveSelectionBackground, listInactiveSelectionBackground } from 'vs/platform/theme/common/colorRegistry'; import { attachButtonStyler, attachStyler } from 'vs/platform/theme/common/styler'; import { ICssStyleCollector, ITheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor'; @@ -215,14 +215,14 @@ export class SettingsEditor2 extends BaseEditor { }); this._register(registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => { - const activeListBackground = theme.getColor('list.activeSelectionBackground'); - if (activeListBackground) { - collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree.focused .monaco-tree-row.focused .content::before { background-color: ${activeListBackground}; }`); + const activeBorderColor = theme.getColor(listActiveSelectionBackground); + if (activeBorderColor) { + collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree:focus .monaco-tree-row.focused {outline: solid 1px ${activeBorderColor}; outline-offset: -1px; }`); } - const inactiveListBackground = theme.getColor('list.inactiveSelectionBackground'); - if (inactiveListBackground) { - collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree .monaco-tree-row.focused .content::before { background-color: ${inactiveListBackground}; }`); + const inactiveBorderColor = theme.getColor(listInactiveSelectionBackground); + if (inactiveBorderColor) { + collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree .monaco-tree-row.focused {outline: solid 1px ${inactiveBorderColor}; outline-offset: -1px; }`); } })); -- GitLab