development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-10-30 21:06:57 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor settingsWidgets (#165412)

Browse source 
* WIP Change Settings editor CSS to variables

* Refactor settingsWidgets
This commit is contained in:
Raymond Zhao 2022-11-03 12:35:06 -07:00 committed by GitHub
parent e7e403d83f
commit 3d2bd905cd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 56 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
src/vs/workbench/contrib/preferences/browser/media/settingsEditor2.css
View file

@ -76,6 +76,7 @@
.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget .action-label {
opacity: 0.9;
border-radius: 0;
color: var(--vscode-foreground);
}
.settings-editor > .settings-header > .settings-header-controls .last-synced-label {
@ -93,6 +94,8 @@
.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget .action-label.checked {
opacity: 1;
color: var(--vscode-settings-headerForeground);
border-bottom-color: var(--vscode-settings-headerForeground);
}
.settings-editor > .settings-header .settings-tabs-widget > .monaco-action-bar .action-item .action-label {
@ -333,6 +336,7 @@
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-modified-indicator {
display: none;
border-color: var(--vscode-settings-modifiedItemIndicator);
}
.settings-editor > .settings-body .settings-tree-container .setting-item-contents.is-configured .setting-item-modified-indicator {
@ -456,21 +460,35 @@
margin: 0px;
}
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a,
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a > code {
color: var(--vscode-textLink-foreground);
}
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:focus {
outline: 1px solid -webkit-focus-ring-color;
outline-offset: -1px;
text-decoration: underline;
}
.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,
.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: var(--vscode-textLink-activeForeground);
}
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a:hover {
cursor: pointer;
text-decoration: underline;
}
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown code {
line-height: 15px;
/** For some reason, this is needed, otherwise <code> will take up 20px height */
font-family: var(--monaco-monospace-font);
color: var(--vscode-textPreformat-foreground);
}
.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown .monaco-tokenized-source {
@ -543,6 +561,22 @@
padding: 2px 6px;
}
.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown code {
color: var(--vscode-textPreformat-foreground);
}
.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a,
.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a > code {
color: var(--vscode-textLink-foreground);
}
.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,
.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: var(--vscode-textLink-activeForeground);
}
.settings-editor > .settings-body .settings-tree-container .setting-item-new-extensions {
display: flex;
}

20
src/vs/workbench/contrib/preferences/browser/media/settingsWidgets.css
View file

@ -23,6 +23,11 @@
text-overflow: ellipsis;
}
.settings-editor > .settings-body .settings-tree-container .setting-item-bool .setting-value-checkbox {
background-color: var(--vscode-settings-checkboxBackground) !important;
color: var(--vscode-settings-checkboxForeground) !important;
border-color: var(--vscode-settings-checkboxBorder) !important;
}
.settings-editor > .settings-body .settings-tree-container .setting-item-bool .setting-list-object-input-key-checkbox {
margin-left: 4px;
height: 24px;
@ -92,10 +97,25 @@
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row {
display: flex;
}
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row:hover {
background-color: var(--vscode-list-hoverBackground);
color: var(--vscode-list-hoverForeground);
}
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.selected:focus {
background-color: var(--vscode-list-activeSelectionBackground);
color: var(--vscode-list-activeSelectionForeground);
}
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.selected:not(:focus) {
background-color: var(--vscode-list-inactiveSelectionBackground);
color: var(--vscode-list-inactiveSelectionForeground);
}
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.draggable {
cursor: pointer;
user-select: none;
}
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.drag-hover {
background-color: var(--vscode-list-dropBackground);
}
.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.drag-hover * {
pointer-events: none;
}

95
src/vs/workbench/contrib/preferences/browser/settingsWidgets.ts
View file

@ -22,104 +22,13 @@ import { isDefined, isUndefinedOrNull } from 'vs/base/common/types';
import 'vs/css!./media/settingsWidgets';
import { localize } from 'vs/nls';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { foreground, listActiveSelectionBackground, listActiveSelectionForeground, listDropBackground, listHoverBackground, listHoverForeground, listInactiveSelectionBackground, listInactiveSelectionForeground, textLinkActiveForeground, textLinkForeground, textPreformatForeground } from 'vs/platform/theme/common/colorRegistry';
import { attachButtonStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService';
import { IThemeService, ThemeIcon } from 'vs/platform/theme/common/themeService';
import { settingsDiscardIcon, settingsEditIcon, settingsRemoveIcon } from 'vs/workbench/contrib/preferences/browser/preferencesIcons';
import { modifiedItemIndicator, settingsCheckboxBackground, settingsCheckboxBorder, settingsCheckboxForeground, settingsHeaderForeground, settingsSelectBackground, settingsSelectBorder, settingsSelectForeground, settingsSelectListBorder, settingsTextInputBackground, settingsTextInputBorder, settingsTextInputForeground } from 'vs/workbench/contrib/preferences/common/settingsEditorColorRegistry';
import { settingsSelectBackground, settingsSelectBorder, settingsSelectForeground, settingsSelectListBorder, settingsTextInputBackground, settingsTextInputBorder, settingsTextInputForeground } from 'vs/workbench/contrib/preferences/common/settingsEditorColorRegistry';
const $ = DOM.$;
registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => {
const checkboxBackgroundColor = theme.getColor(settingsCheckboxBackground);
if (checkboxBackgroundColor) {
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-bool .setting-value-checkbox { background-color: ${checkboxBackgroundColor} !important; }`);
}
const checkboxForegroundColor = theme.getColor(settingsCheckboxForeground);
if (checkboxForegroundColor) {
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-bool .setting-value-checkbox { color: ${checkboxForegroundColor} !important; }`);
}
const checkboxBorderColor = theme.getColor(settingsCheckboxBorder);
if (checkboxBorderColor) {
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-bool .setting-value-checkbox { border-color: ${checkboxBorderColor} !important; }`);
}
const link = theme.getColor(textLinkForeground);
if (link) {
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a { color: ${link}; }`);
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-contents .setting-item-markdown a > code { color: ${link}; }`);
collector.addRule(`.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a { color: ${link}; }`);
collector.addRule(`.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a > code { color: ${link}; }`);
}
const activeLink = theme.getColor(textLinkActiveForeground);
if (activeLink) {
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}; }`);
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}; }`);
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}; }`);
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}; }`);
}
const headerForegroundColor = theme.getColor(settingsHeaderForeground);
if (headerForegroundColor) {
collector.addRule(`.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget .action-label.checked { color: ${headerForegroundColor}; border-bottom-color: ${headerForegroundColor}; }`);
}
const foregroundColor = theme.getColor(foreground);
if (foregroundColor) {
collector.addRule(`.settings-editor > .settings-header > .settings-header-controls .settings-tabs-widget .action-label { color: ${foregroundColor}; }`);
}
// List control
const listHoverBackgroundColor = theme.getColor(listHoverBackground);
if (listHoverBackgroundColor) {
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row:hover { background-color: ${listHoverBackgroundColor}; }`);
}
const listHoverForegroundColor = theme.getColor(listHoverForeground);
if (listHoverForegroundColor) {
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row:hover { color: ${listHoverForegroundColor}; }`);
}
const listDropBackgroundColor = theme.getColor(listDropBackground);
if (listDropBackgroundColor) {
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.drag-hover { background-color: ${listDropBackgroundColor}; }`);
}
const listSelectBackgroundColor = theme.getColor(listActiveSelectionBackground);
if (listSelectBackgroundColor) {
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.selected:focus { background-color: ${listSelectBackgroundColor}; }`);
}
const listInactiveSelectionBackgroundColor = theme.getColor(listInactiveSelectionBackground);
if (listInactiveSelectionBackgroundColor) {
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.selected:not(:focus) { background-color: ${listInactiveSelectionBackgroundColor}; }`);
}
const listInactiveSelectionForegroundColor = theme.getColor(listInactiveSelectionForeground);
if (listInactiveSelectionForegroundColor) {
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.selected:not(:focus) { color: ${listInactiveSelectionForegroundColor}; }`);
}
const listSelectForegroundColor = theme.getColor(listActiveSelectionForeground);
if (listSelectForegroundColor) {
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item.setting-item-list .setting-list-row.selected:focus { color: ${listSelectForegroundColor}; }`);
}
const codeTextForegroundColor = theme.getColor(textPreformatForeground);
if (codeTextForegroundColor) {
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item .setting-item-markdown code { color: ${codeTextForegroundColor} }`);
collector.addRule(`.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown code { color: ${codeTextForegroundColor} }`);
}
const modifiedItemIndicatorColor = theme.getColor(modifiedItemIndicator);
if (modifiedItemIndicatorColor) {
collector.addRule(`.settings-editor > .settings-body .settings-tree-container .setting-item-contents > .setting-item-modified-indicator { border-color: ${modifiedItemIndicatorColor}; }`);
}
});
type EditKey = 'none' | 'create' | number;
type RowElementGroup = {