From 888bd5377ddff7d09cdf46efdbfb37f780845729 Mon Sep 17 00:00:00 2001 From: Rob Lourens Date: Wed, 11 Jul 2018 18:23:03 -0700 Subject: [PATCH] Fix #53908 - make settings tree themeable, add default colors --- .../theme-defaults/themes/dark_defaults.json | 4 +- .../theme-defaults/themes/light_defaults.json | 4 +- .../themes/kimbie-dark-color-theme.json | 1 + .../themes/monokai-color-theme.json | 2 + .../parts/preferences/browser/settingsTree.ts | 77 ++++++++++++++----- 5 files changed, 68 insertions(+), 20 deletions(-) diff --git a/extensions/theme-defaults/themes/dark_defaults.json b/extensions/theme-defaults/themes/dark_defaults.json index cb9e20066b5..93a316fc8f9 100644 --- a/extensions/theme-defaults/themes/dark_defaults.json +++ b/extensions/theme-defaults/themes/dark_defaults.json @@ -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" } } \ No newline at end of file diff --git a/extensions/theme-defaults/themes/light_defaults.json b/extensions/theme-defaults/themes/light_defaults.json index 2ee46debb3a..6403ded6bcb 100644 --- a/extensions/theme-defaults/themes/light_defaults.json +++ b/extensions/theme-defaults/themes/light_defaults.json @@ -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" } } \ No newline at end of file diff --git a/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json b/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json index 9a93b5e73e9..41d9d0b2d8e 100644 --- a/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json +++ b/extensions/theme-kimbie-dark/themes/kimbie-dark-color-theme.json @@ -3,6 +3,7 @@ "type": "dark", "colors": { "input.background": "#51412c", + "dropdown.background": "#51412c", "editor.background": "#221a0f", "editor.foreground": "#d3af86", "focusBorder": "#a57a4c", diff --git a/extensions/theme-monokai/themes/monokai-color-theme.json b/extensions/theme-monokai/themes/monokai-color-theme.json index 7321af7b015..e7f00d712e6 100644 --- a/extensions/theme-monokai/themes/monokai-color-theme.json +++ b/extensions/theme-monokai/themes/monokai-color-theme.json @@ -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", diff --git a/src/vs/workbench/parts/preferences/browser/settingsTree.ts b/src/vs/workbench/parts/preferences/browser/settingsTree.ts index fd8b06d0a25..498bec1e652 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsTree.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsTree.ts @@ -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"); -- GitLab