mirror of
https://github.com/Microsoft/vscode
synced 2024-10-05 19:02:54 +00:00
Fix #53908 - make settings tree themeable, add default colors
This commit is contained in:
parent
b60c434a2b
commit
888bd5377d
|
@ -10,6 +10,8 @@
|
|||
"editor.selectionHighlightBackground": "#ADD6FF26",
|
||||
"list.dropBackground": "#383B3D",
|
||||
"activityBarBadge.background": "#007ACC",
|
||||
"sideBarTitle.foreground": "#BBBBBB"
|
||||
"sideBarTitle.foreground": "#BBBBBB",
|
||||
"settings.textInputBackground": "#292929",
|
||||
"settings.numberInputBackground": "#292929"
|
||||
}
|
||||
}
|
|
@ -12,6 +12,8 @@
|
|||
"activityBarBadge.background": "#007ACC",
|
||||
"sideBarTitle.foreground": "#6F6F6F",
|
||||
"list.hoverBackground": "#E8E8E8",
|
||||
"input.placeholderForeground": "#ADADAD"
|
||||
"input.placeholderForeground": "#ADADAD",
|
||||
"settings.textInputBorder": "#CECECE",
|
||||
"settings.numberInputBorder": "#CECECE"
|
||||
}
|
||||
}
|
|
@ -3,6 +3,7 @@
|
|||
"type": "dark",
|
||||
"colors": {
|
||||
"input.background": "#51412c",
|
||||
"dropdown.background": "#51412c",
|
||||
"editor.background": "#221a0f",
|
||||
"editor.foreground": "#d3af86",
|
||||
"focusBorder": "#a57a4c",
|
||||
|
|
|
@ -11,6 +11,8 @@
|
|||
"list.activeSelectionBackground": "#75715E",
|
||||
"list.focusBackground": "#414339",
|
||||
"dropdown.listBackground": "#1e1f1c",
|
||||
"settings.textInputBackground": "#32342d",
|
||||
"settings.numberInputBackground": "#32342d",
|
||||
"list.inactiveSelectionBackground": "#414339",
|
||||
"list.hoverBackground": "#3e3d32",
|
||||
"list.dropBackground": "#414339",
|
||||
|
|
|
@ -27,7 +27,7 @@ import { ConfigurationTarget, IConfigurationService } from 'vs/platform/configur
|
|||
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
|
||||
import { WorkbenchTree, WorkbenchTreeController } from 'vs/platform/list/browser/listService';
|
||||
import { IOpenerService } from 'vs/platform/opener/common/opener';
|
||||
import { registerColor, selectBackground, selectBorder, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { inputBackground, inputBorder, inputForeground, registerColor, selectBackground, selectBorder, selectForeground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
|
||||
import { attachButtonStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
|
||||
import { ICssStyleCollector, ITheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
|
||||
import { SettingsTarget } from 'vs/workbench/parts/preferences/browser/preferencesWidgets';
|
||||
|
@ -42,23 +42,40 @@ export const modifiedItemForeground = registerColor('settings.modifiedItemForegr
|
|||
hc: '#73C991'
|
||||
}, localize('modifiedItemForeground', "(For settings editor preview) The foreground color for a modified setting."));
|
||||
|
||||
// Enum control colors
|
||||
export const settingsSelectBackground = registerColor('settings.dropdownBackground', { dark: selectBackground, light: selectBackground, hc: selectBackground }, localize('settingsDropdownBackground', "Settings editor dropdown background."));
|
||||
export const settingsSelectForeground = registerColor('settings.dropdownForeground', { dark: selectForeground, light: selectForeground, hc: selectForeground }, localize('settingsDropdownForeground', "Settings editor dropdown foreground."));
|
||||
export const settingsSelectBorder = registerColor('settings.dropdownBorder', { dark: selectBorder, light: selectBorder, hc: selectBorder }, localize('settingsDropdownBorder', "Settings editor dropdown border."));
|
||||
|
||||
// Bool control colors
|
||||
export const settingsCheckboxBackground = registerColor('settings.checkboxBackground', { dark: selectBackground, light: selectBackground, hc: selectBackground }, localize('settingsCheckboxBackground', "Settings editor checkbox background."));
|
||||
export const settingsCheckboxForeground = registerColor('settings.checkboxForeground', { dark: selectForeground, light: selectForeground, hc: selectForeground }, localize('settingsCheckboxForeground', "Settings editor checkbox foreground."));
|
||||
export const settingsCheckboxBorder = registerColor('settings.checkboxBorder', { dark: selectBorder, light: selectBorder, hc: selectBorder }, localize('settingsCheckboxBorder', "Settings editor checkbox border."));
|
||||
|
||||
// Text control colors
|
||||
export const settingsTextInputBackground = registerColor('settings.textInputBackground', { dark: inputBackground, light: inputBackground, hc: inputBackground }, localize('textInputBoxBackground', "Settings editor text input box background."));
|
||||
export const settingsTextInputForeground = registerColor('settings.textInputForeground', { dark: inputForeground, light: inputForeground, hc: inputForeground }, localize('textInputBoxForeground', "Settings editor text input box foreground."));
|
||||
export const settingsTextInputBorder = registerColor('settings.textInputBorder', { dark: inputBorder, light: inputBorder, hc: inputBorder }, localize('textInputBoxBorder', "Settings editor text input box border."));
|
||||
|
||||
// Number control colors
|
||||
export const settingsNumberInputBackground = registerColor('settings.numberInputBackground', { dark: inputBackground, light: inputBackground, hc: inputBackground }, localize('numberInputBoxBackground', "Settings editor number input box background."));
|
||||
export const settingsNumberInputForeground = registerColor('settings.numberInputForeground', { dark: inputForeground, light: inputForeground, hc: inputForeground }, localize('numberInputBoxForeground', "Settings editor number input box foreground."));
|
||||
export const settingsNumberInputBorder = registerColor('settings.numberInputBorder', { dark: inputBorder, light: inputBorder, hc: inputBorder }, localize('numberInputBoxBorder', "Settings editor number input box border."));
|
||||
|
||||
registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
|
||||
const modifiedItemForegroundColor = theme.getColor(modifiedItemForeground);
|
||||
if (modifiedItemForegroundColor) {
|
||||
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-is-configured-label { color: ${modifiedItemForegroundColor}; }`);
|
||||
}
|
||||
|
||||
// TODO@roblou Hacks! Make checkbox background themeable
|
||||
const selectBackgroundColor = theme.getColor(selectBackground);
|
||||
if (selectBackgroundColor) {
|
||||
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-value-checkbox { background-color: ${selectBackgroundColor} !important; }`);
|
||||
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; }`);
|
||||
}
|
||||
|
||||
// TODO@roblou Hacks! Use proper inputbox theming instead of !important
|
||||
const selectBorderColor = theme.getColor(selectBorder);
|
||||
if (selectBorderColor) {
|
||||
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-value-checkbox { border-color: ${selectBorderColor} !important; }`);
|
||||
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-control > .monaco-inputbox { border: solid 1px ${selectBorderColor} !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);
|
||||
|
@ -749,17 +766,12 @@ export class SettingsRenderer implements IRenderer {
|
|||
|
||||
valueControlElement.setAttribute('class', 'setting-item-control');
|
||||
if (element.enum && (element.valueType === 'string' || !element.valueType)) {
|
||||
valueControlElement.classList.add('setting-type-enum');
|
||||
this.renderEnum(element, isSelected, template, valueControlElement, onChange);
|
||||
} else if (element.valueType === 'string') {
|
||||
valueControlElement.classList.add('setting-type-string');
|
||||
this.renderText(element, isSelected, template, valueControlElement, onChange);
|
||||
} else if (element.valueType === 'number' || element.valueType === 'integer') {
|
||||
valueControlElement.classList.add('setting-type-number');
|
||||
const parseFn = element.valueType === 'integer' ? parseInt : parseFloat;
|
||||
this.renderText(element, isSelected, template, valueControlElement, value => onChange(parseFn(value)));
|
||||
this.renderNumber(element, isSelected, template, valueControlElement, onChange);
|
||||
} else {
|
||||
valueControlElement.classList.add('setting-type-complex');
|
||||
this.renderEditInSettingsJson(element, isSelected, template, valueControlElement);
|
||||
}
|
||||
}
|
||||
|
@ -773,10 +785,15 @@ export class SettingsRenderer implements IRenderer {
|
|||
}
|
||||
|
||||
private renderEnum(dataElement: SettingsTreeSettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement, onChange: (value: string) => void): void {
|
||||
element.classList.add('setting-type-enum');
|
||||
const idx = dataElement.enum.indexOf(dataElement.value);
|
||||
const displayOptions = dataElement.enum.map(escapeInvisibleChars);
|
||||
const selectBox = new SelectBox(displayOptions, idx, this.contextViewService);
|
||||
template.toDispose.push(attachSelectBoxStyler(selectBox, this.themeService));
|
||||
template.toDispose.push(attachSelectBoxStyler(selectBox, this.themeService, {
|
||||
selectBackground: settingsSelectBackground,
|
||||
selectForeground: settingsSelectForeground,
|
||||
selectBorder: settingsSelectBorder
|
||||
}));
|
||||
selectBox.render(element);
|
||||
if (element.firstElementChild) {
|
||||
element.firstElementChild.setAttribute('tabindex', isSelected ? '0' : '-1');
|
||||
|
@ -787,8 +804,13 @@ export class SettingsRenderer implements IRenderer {
|
|||
}
|
||||
|
||||
private renderText(dataElement: SettingsTreeSettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement, onChange: (value: string) => void): void {
|
||||
element.classList.add('setting-type-string');
|
||||
const inputBox = new InputBox(element, this.contextViewService);
|
||||
template.toDispose.push(attachInputBoxStyler(inputBox, this.themeService));
|
||||
template.toDispose.push(attachInputBoxStyler(inputBox, this.themeService, {
|
||||
inputBackground: settingsTextInputBackground,
|
||||
inputForeground: settingsTextInputForeground,
|
||||
inputBorder: settingsTextInputBorder
|
||||
}));
|
||||
template.toDispose.push(inputBox);
|
||||
inputBox.value = dataElement.value;
|
||||
inputBox.inputElement.tabIndex = isSelected ? 0 : -1;
|
||||
|
@ -797,7 +819,26 @@ export class SettingsRenderer implements IRenderer {
|
|||
inputBox.onDidChange(e => onChange(e)));
|
||||
}
|
||||
|
||||
private renderNumber(dataElement: SettingsTreeSettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement, onChange: (value: number) => void): void {
|
||||
element.classList.add('setting-type-number');
|
||||
const parseFn = dataElement.valueType === 'integer' ? parseInt : parseFloat;
|
||||
|
||||
const inputBox = new InputBox(element, this.contextViewService);
|
||||
template.toDispose.push(attachInputBoxStyler(inputBox, this.themeService, {
|
||||
inputBackground: settingsNumberInputBackground,
|
||||
inputForeground: settingsNumberInputForeground,
|
||||
inputBorder: settingsNumberInputBorder
|
||||
}));
|
||||
template.toDispose.push(inputBox);
|
||||
inputBox.value = dataElement.value;
|
||||
inputBox.inputElement.tabIndex = isSelected ? 0 : -1;
|
||||
|
||||
template.toDispose.push(
|
||||
inputBox.onDidChange(value => onChange(parseFn(value))));
|
||||
}
|
||||
|
||||
private renderEditInSettingsJson(dataElement: SettingsTreeSettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement): void {
|
||||
element.classList.add('setting-type-complex');
|
||||
const openSettingsButton = new Button(element, { title: true, buttonBackground: null, buttonHoverBackground: null });
|
||||
openSettingsButton.onDidClick(() => this._onDidOpenSettings.fire());
|
||||
openSettingsButton.label = localize('editInSettingsJson', "Edit in settings.json");
|
||||
|
|
Loading…
Reference in a new issue