mirror of
https://github.com/Microsoft/vscode
synced 2024-10-30 21:06:57 +00:00
Refactor settingsWidgets (#165412)
* WIP Change Settings editor CSS to variables * Refactor settingsWidgets
This commit is contained in:
parent
e7e403d83f
commit
3d2bd905cd
3 changed files with 56 additions and 93 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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 = {
|
||||
|
|
Loading…
Reference in a new issue