Skip to content

Commit 3d2bd90

Browse files
rzhao271rzhao271
authored
Refactor settingsWidgets (microsoft#165412)
* WIP Change Settings editor CSS to variables * Refactor settingsWidgets
1 parent e7e403d commit 3d2bd90

File tree

3 files changed

+56
-93
lines changed

3 files changed

+56
-93
lines changed

‎src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@
7676
.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget .action-label {
7777
opacity: 0.9;
7878
border-radius: 0;
79+
color: var(--vscode-foreground);
7980
}
8081

8182
.settings-editor > .settings-header > .settings-header-controls .last-synced-label {
@@ -93,6 +94,8 @@
9394

9495
.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget .action-label.checked {
9596
opacity: 1;
97+
color: var(--vscode-settings-headerForeground);
98+
border-bottom-color: var(--vscode-settings-headerForeground);
9699
}
97100

98101
.settings-editor > .settings-header .settings-tabs-widget > .monaco-action-bar .action-item .action-label {
@@ -333,6 +336,7 @@
333336

334337
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-modified-indicator {
335338
display: none;
339+
border-color: var(--vscode-settings-modifiedItemIndicator);
336340
}
337341

338342
.settings-editor > .settings-body .settings-tree-container .setting-item-contents.is-configured .setting-item-modified-indicator {
@@ -456,21 +460,35 @@
456460
margin: 0px;
457461
}
458462

463+
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a,
464+
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a > code {
465+
color: var(--vscode-textLink-foreground);
466+
}
467+
459468
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:focus {
460469
outline: 1px solid -webkit-focus-ring-color;
461470
outline-offset: -1px;
462471
text-decoration: underline;
463472
}
464473

474+
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:hover,
475+
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:active,
476+
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:hover > code,
477+
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:active > code {
478+
color: var(--vscode-textLink-activeForeground);
479+
}
480+
465481
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:hover {
466482
cursor: pointer;
467483
text-decoration: underline;
468484
}
469485

486+
470487
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown code {
471488
line-height: 15px;
472489
/** For some reason, this is needed, otherwise <code> will take up 20px height */
473490
font-family: var(--monaco-monospace-font);
491+
color: var(--vscode-textPreformat-foreground);
474492
}
475493

476494
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown .monaco-tokenized-source {
@@ -543,6 +561,22 @@
543561
padding: 2px 6px;
544562
}
545563

564+
.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown code {
565+
color: var(--vscode-textPreformat-foreground);
566+
}
567+
568+
.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a,
569+
.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a > code {
570+
color: var(--vscode-textLink-foreground);
571+
}
572+
573+
.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:hover,
574+
.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:active,
575+
.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:hover > code,
576+
.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:active > code {
577+
color: var(--vscode-textLink-activeForeground);
578+
}
579+
546580
.settings-editor > .settings-body .settings-tree-container .setting-item-new-extensions {
547581
display: flex;
548582
}

‎src/vs/workbench/contrib/preferences/browser/media/settingsWidgets.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@
2323
text-overflow: ellipsis;
2424
}
2525

26+
.settings-editor > .settings-body .settings-tree-container .setting-item-bool .setting-value-checkbox {
27+
background-color: var(--vscode-settings-checkboxBackground) !important;
28+
color: var(--vscode-settings-checkboxForeground) !important;
29+
border-color: var(--vscode-settings-checkboxBorder) !important;
30+
}
2631
.settings-editor > .settings-body .settings-tree-container .setting-item-bool .setting-list-object-input-key-checkbox {
2732
margin-left: 4px;
2833
height: 24px;
@@ -92,10 +97,25 @@
9297
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row {
9398
display: flex;
9499
}
100+
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row:hover {
101+
background-color: var(--vscode-list-hoverBackground);
102+
color: var(--vscode-list-hoverForeground);
103+
}
104+
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.selected:focus {
105+
background-color: var(--vscode-list-activeSelectionBackground);
106+
color: var(--vscode-list-activeSelectionForeground);
107+
}
108+
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.selected:not(:focus) {
109+
background-color: var(--vscode-list-inactiveSelectionBackground);
110+
color: var(--vscode-list-inactiveSelectionForeground);
111+
}
95112
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.draggable {
96113
cursor: pointer;
97114
user-select: none;
98115
}
116+
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.drag-hover {
117+
background-color: var(--vscode-list-dropBackground);
118+
}
99119
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.drag-hover * {
100120
pointer-events: none;
101121
}

‎src/vs/workbench/contrib/preferences/browser/settingsWidgets.ts‎

Lines changed: 2 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -22,104 +22,13 @@ import { isDefined, isUndefinedOrNull } from 'vs/base/common/types';
2222
import 'vs/css!./media/settingsWidgets';
2323
import { localize } from 'vs/nls';
2424
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
25-
import { foreground, listActiveSelectionBackground, listActiveSelectionForeground, listDropBackground, listHoverBackground, listHoverForeground, listInactiveSelectionBackground, listInactiveSelectionForeground, textLinkActiveForeground, textLinkForeground, textPreformatForeground } from 'vs/platform/theme/common/colorRegistry';
2625
import { attachButtonStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
27-
import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService';
26+
import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
2827
import { settingsDiscardIcon, settingsEditIcon, settingsRemoveIcon } from 'vs/workbench/contrib/preferences/browser/preferencesIcons';
29-
import { modifiedItemIndicator, settingsCheckboxBackground, settingsCheckboxBorder, settingsCheckboxForeground, settingsHeaderForeground, settingsSelectBackground, settingsSelectBorder, settingsSelectForeground, settingsSelectListBorder, settingsTextInputBackground, settingsTextInputBorder, settingsTextInputForeground } from 'vs/workbench/contrib/preferences/common/settingsEditorColorRegistry';
28+
import { settingsSelectBackground, settingsSelectBorder, settingsSelectForeground, settingsSelectListBorder, settingsTextInputBackground, settingsTextInputBorder, settingsTextInputForeground } from 'vs/workbench/contrib/preferences/common/settingsEditorColorRegistry';
3029

3130
const $ = DOM.$;
3231

33-
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
34-
const checkboxBackgroundColor = theme.getColor(settingsCheckboxBackground);
35-
if (checkboxBackgroundColor) {
36-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-bool .setting-value-checkbox { background-color: ${checkboxBackgroundColor} !important; }`);
37-
}
38-
39-
const checkboxForegroundColor = theme.getColor(settingsCheckboxForeground);
40-
if (checkboxForegroundColor) {
41-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-bool .setting-value-checkbox { color: ${checkboxForegroundColor} !important; }`);
42-
}
43-
44-
const checkboxBorderColor = theme.getColor(settingsCheckboxBorder);
45-
if (checkboxBorderColor) {
46-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-bool .setting-value-checkbox { border-color: ${checkboxBorderColor} !important; }`);
47-
}
48-
49-
const link = theme.getColor(textLinkForeground);
50-
if (link) {
51-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a { color: ${link}; }`);
52-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a > code { color: ${link}; }`);
53-
collector.addRule(`.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a { color: ${link}; }`);
54-
collector.addRule(`.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a > code { color: ${link}; }`);
55-
}
56-
57-
const activeLink = theme.getColor(textLinkActiveForeground);
58-
if (activeLink) {
59-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:hover, .settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:active { color: ${activeLink}; }`);
60-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:hover > code, .settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:active > code { color: ${activeLink}; }`);
61-
collector.addRule(`.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:hover, .monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:active { color: ${activeLink}; }`);
62-
collector.addRule(`.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:hover > code, .monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:active > code { color: ${activeLink}; }`);
63-
}
64-
65-
const headerForegroundColor = theme.getColor(settingsHeaderForeground);
66-
if (headerForegroundColor) {
67-
collector.addRule(`.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget .action-label.checked { color: ${headerForegroundColor}; border-bottom-color: ${headerForegroundColor}; }`);
68-
}
69-
70-
const foregroundColor = theme.getColor(foreground);
71-
if (foregroundColor) {
72-
collector.addRule(`.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget .action-label { color: ${foregroundColor}; }`);
73-
}
74-
75-
// List control
76-
const listHoverBackgroundColor = theme.getColor(listHoverBackground);
77-
if (listHoverBackgroundColor) {
78-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row:hover { background-color: ${listHoverBackgroundColor}; }`);
79-
}
80-
81-
const listHoverForegroundColor = theme.getColor(listHoverForeground);
82-
if (listHoverForegroundColor) {
83-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row:hover { color: ${listHoverForegroundColor}; }`);
84-
}
85-
86-
const listDropBackgroundColor = theme.getColor(listDropBackground);
87-
if (listDropBackgroundColor) {
88-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.drag-hover { background-color: ${listDropBackgroundColor}; }`);
89-
}
90-
91-
const listSelectBackgroundColor = theme.getColor(listActiveSelectionBackground);
92-
if (listSelectBackgroundColor) {
93-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.selected:focus { background-color: ${listSelectBackgroundColor}; }`);
94-
}
95-
96-
const listInactiveSelectionBackgroundColor = theme.getColor(listInactiveSelectionBackground);
97-
if (listInactiveSelectionBackgroundColor) {
98-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.selected:not(:focus) { background-color: ${listInactiveSelectionBackgroundColor}; }`);
99-
}
100-
101-
const listInactiveSelectionForegroundColor = theme.getColor(listInactiveSelectionForeground);
102-
if (listInactiveSelectionForegroundColor) {
103-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.selected:not(:focus) { color: ${listInactiveSelectionForegroundColor}; }`);
104-
}
105-
106-
const listSelectForegroundColor = theme.getColor(listActiveSelectionForeground);
107-
if (listSelectForegroundColor) {
108-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.selected:focus { color: ${listSelectForegroundColor}; }`);
109-
}
110-
111-
const codeTextForegroundColor = theme.getColor(textPreformatForeground);
112-
if (codeTextForegroundColor) {
113-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item .setting-item-markdown code { color: ${codeTextForegroundColor} }`);
114-
collector.addRule(`.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown code { color: ${codeTextForegroundColor} }`);
115-
}
116-
117-
const modifiedItemIndicatorColor = theme.getColor(modifiedItemIndicator);
118-
if (modifiedItemIndicatorColor) {
119-
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-contents > .setting-item-modified-indicator { border-color: ${modifiedItemIndicatorColor}; }`);
120-
}
121-
});
122-
12332
type EditKey = 'none' | 'create' | number;
12433

12534
type RowElementGroup = {

0 commit comments

Comments
 (0)