maxmustermann/vscode
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Tweak coloring and spacing in new settings editor #106897

Browse source
This commit is contained in:
Rob Lourens 2020-09-23 17:27:29 -05:00
parent 64475206ce
commit 0405841876
5 changed files with 23 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
extensions/theme-defaults/themes/dark_defaults.json
View file

@ -12,8 +12,6 @@
"activityBarBadge.background": "#007ACC",
"sideBarTitle.foreground": "#BBBBBB",
"input.placeholderForeground": "#A6A6A6",
"settings.textInputBackground": "#292929",
"settings.numberInputBackground": "#292929",
"menu.background": "#252526",
"menu.foreground": "#CCCCCC",
"statusBarItem.remoteForeground": "#FFF",

3
extensions/theme-monokai/themes/monokai-color-theme.json
View file

@ -11,8 +11,6 @@
"list.activeSelectionBackground": "#75715E",
"list.focusBackground": "#414339",
"dropdown.listBackground": "#1e1f1c",
"settings.textInputBackground": "#32342d",
"settings.numberInputBackground": "#32342d",
"list.inactiveSelectionBackground": "#414339",
"list.hoverBackground": "#3e3d32",
"list.dropBackground": "#414339",
@ -46,6 +44,7 @@
"panelTitle.activeBorder": "#75715E",
"panelTitle.inactiveForeground": "#75715E",
"panel.border": "#414339",
"settings.focusedRowBackground": "#4143395A",
"titleBar.activeBackground": "#1e1f1c",
"statusBar.background": "#414339",
"statusBar.noFolderBackground": "#414339",

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

@ -283,8 +283,8 @@
max-width: 1000px;
margin: auto;
box-sizing: border-box;
padding-left: 204px;
padding-right: 5px;
padding-left: 211px;
padding-right: 24px;
overflow: visible;
}
@ -310,7 +310,7 @@
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents {
position: relative;
padding: 12px 15px 18px;
padding: 12px 14px 18px;
white-space: normal;
}
@ -334,7 +334,7 @@
border-left-style: solid;
left: 5px;
top: 15px;
bottom: 16px;
bottom: 18px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-item-contents.is-configured .setting-item-modified-indicator,

16
src/vs/workbench/contrib/preferences/browser/settingsTree.ts
View file

@ -570,6 +570,7 @@ export abstract class AbstractSettingRenderer extends Disposable implements ITre
_container.classList.add('setting-item-' + typeClass);
const container = DOM.append(_container, $(AbstractSettingRenderer.CONTENTS_SELECTOR));
container.classList.add('settings-row-inner-container');
const titleElement = DOM.append(container, $('.setting-item-title'));
const labelCategoryContainer = DOM.append(titleElement, $('.setting-item-cat-label-container'));
const categoryElement = DOM.append(labelCategoryContainer, $('span.setting-item-category'));
@ -800,7 +801,7 @@ export class SettingGroupRenderer implements ITreeRenderer<SettingsTreeGroupElem
renderElement(element: ITreeNode<SettingsTreeGroupElement, never>, index: number, templateData: IGroupTitleTemplate): void {
templateData.parent.innerText = '';
const labelElement = DOM.append(templateData.parent, $('div.settings-group-title-label'));
const labelElement = DOM.append(templateData.parent, $('div.settings-group-title-label.settings-row-inner-container'));
labelElement.classList.add(`settings-group-level-${element.element.level}`);
labelElement.textContent = element.element.label;
@ -1417,6 +1418,7 @@ export class SettingBoolRenderer extends AbstractSettingRenderer implements ITre
_container.classList.add('setting-item-bool');
const container = DOM.append(_container, $(AbstractSettingRenderer.CONTENTS_SELECTOR));
container.classList.add('settings-row-inner-container');
const titleElement = DOM.append(container, $('.setting-item-title'));
const categoryElement = DOM.append(titleElement, $('span.setting-item-category'));
@ -1917,14 +1919,12 @@ export class SettingsTree extends WorkbenchObjectTree<SettingsTreeElement> {
const focusedRowBackgroundColor = theme.getColor(focusedRowBackground);
if (focusedRowBackgroundColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-list-row.focused .setting-item-contents,
.settings-editor > .settings-body > .settings-tree-container .monaco-list-row.focused .settings-group-title-label { background-color: ${focusedRowBackgroundColor}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-list-row.focused .settings-row-inner-container { background-color: ${focusedRowBackgroundColor}; }`);
}
const rowHoverBackgroundColor = theme.getColor(rowHoverBackground);
if (rowHoverBackgroundColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-list-row .setting-item-contents:hover,
.settings-editor > .settings-body > .settings-tree-container .monaco-list-row .settings-group-title-label:hover { background-color: ${rowHoverBackgroundColor}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-list-row:not(.focused) .settings-row-inner-container:hover { background-color: ${rowHoverBackgroundColor}; }`);
}
const focusedRowBorderColor = theme.getColor(focusedRowBorder);
@ -1945,12 +1945,6 @@ export class SettingsTree extends WorkbenchObjectTree<SettingsTreeElement> {
if (focusBorderColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-markdown a:focus { outline-color: ${focusBorderColor} }`);
}
// const listActiveSelectionBackgroundColor = theme.getColor(listActiveSelectionBackground);
// if (listActiveSelectionBackgroundColor) {
// collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-list-row.selected .setting-item-contents .setting-item-title { background-color: ${listActiveSelectionBackgroundColor}; }`);
// collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-list-row.selected .settings-group-title-label { background-color: ${listActiveSelectionBackgroundColor}; }`);
// }
}));
this.getHTMLElement().classList.add('settings-editor-tree');

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

@ -3,29 +3,28 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { BrowserFeatures } from 'vs/base/browser/canIUse';
import * as DOM from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
import { Button } from 'vs/base/browser/ui/button/button';
import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
import { SelectBox } from 'vs/base/browser/ui/selectBox/selectBox';
import { IAction } from 'vs/base/common/actions';
import { disposableTimeout } from 'vs/base/common/async';
import { Color, RGBA } from 'vs/base/common/color';
import { Emitter, Event } from 'vs/base/common/event';
import { KeyCode } from 'vs/base/common/keyCodes';
import { Disposable, DisposableStore } from 'vs/base/common/lifecycle';
import { isIOS } from 'vs/base/common/platform';
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, inputBorder, inputForeground, listActiveSelectionBackground, listActiveSelectionForeground, listHoverBackground, listHoverForeground, listInactiveSelectionBackground, listInactiveSelectionForeground, registerColor, selectBackground, selectBorder, selectForeground, textLinkForeground, textPreformatForeground, editorWidgetBorder, textLinkActiveForeground, simpleCheckboxBackground, simpleCheckboxForeground, simpleCheckboxBorder, listFocusBackground, transparent, focusBorder } from 'vs/platform/theme/common/colorRegistry';
import { editorWidgetBorder, focusBorder, foreground, inputBackground, inputBorder, inputForeground, listActiveSelectionBackground, listActiveSelectionForeground, listFocusBackground, listHoverBackground, listHoverForeground, listInactiveSelectionBackground, listInactiveSelectionForeground, registerColor, selectBackground, selectBorder, selectForeground, simpleCheckboxBackground, simpleCheckboxBorder, simpleCheckboxForeground, textLinkActiveForeground, textLinkForeground, textPreformatForeground, transparent } from 'vs/platform/theme/common/colorRegistry';
import { attachButtonStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
import { ICssStyleCollector, IColorTheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { disposableTimeout } from 'vs/base/common/async';
import { isUndefinedOrNull, isDefined } from 'vs/base/common/types';
import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { preferencesEditIcon } from 'vs/workbench/contrib/preferences/browser/preferencesWidgets';
import { SelectBox } from 'vs/base/browser/ui/selectBox/selectBox';
import { isIOS } from 'vs/base/common/platform';
import { BrowserFeatures } from 'vs/base/browser/canIUse';
import { PANEL_BORDER } from 'vs/workbench/common/theme';
const $ = DOM.$;
export const settingsHeaderForeground = registerColor('settings.headerForeground', { light: '#444444', dark: '#e7e7e7', hc: '#ffffff' }, localize('headerForeground', "The foreground color for a section header or active title."));
@ -36,7 +35,7 @@ export const modifiedItemIndicator = registerColor('settings.modifiedItemIndicat
}, localize('modifiedItemForeground', "The color of the modified setting indicator."));
// Enum control colors
export const settingsSelectBackground = registerColor('settings.dropdownBackground', { dark: selectBackground, light: selectBackground, hc: selectBackground }, localize('settingsDropdownBackground', "Settings editor dropdown background."));
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."));
export const settingsSelectListBorder = registerColor('settings.dropdownListBorder', { dark: editorWidgetBorder, light: editorWidgetBorder, hc: editorWidgetBorder }, localize('settingsDropdownListBorder', "Settings editor dropdown list border. This surrounds the options and separates the options from the description."));
@ -47,26 +46,26 @@ export const settingsCheckboxForeground = registerColor('settings.checkboxForegr
export const settingsCheckboxBorder = registerColor('settings.checkboxBorder', { dark: simpleCheckboxBorder, light: simpleCheckboxBorder, hc: simpleCheckboxBorder }, localize('settingsCheckboxBorder', "Settings editor checkbox border."));
// Text control colors
export const settingsTextInputBackground = settingsSelectBackground; //registerColor('settings.textInputBackground', { dark: inputBackground, light: inputBackground, hc: inputBackground }, localize('textInputBoxBackground', "Settings editor text input box background."));
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 = settingsSelectBackground; // registerColor('settings.numberInputBackground', { dark: inputBackground, light: inputBackground, hc: inputBackground }, localize('numberInputBoxBackground', "Settings editor number input box background."));
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."));
export const focusedRowBackground = registerColor('settings.focusedRowBackground', {
dark: transparent(PANEL_BORDER, .4),
dark: Color.fromHex('#808080').transparent(0.14),
light: transparent(listFocusBackground, .4),
hc: null
}, localize('focusedRowBackground', "The background color of a cell when the row is focused."));
}, localize('focusedRowBackground', "The background color of a settings row when focused."));
export const rowHoverBackground = registerColor('notebook.rowHoverBackground', {
dark: transparent(focusedRowBackground, .5),
light: transparent(focusedRowBackground, .7),
hc: null
}, localize('notebook.rowHoverBackground', "The background color of a row when the row is hovered."));
}, localize('notebook.rowHoverBackground', "The background color of a settings row when hovered."));
export const focusedRowBorder = registerColor('notebook.focusedRowBorder', {
dark: Color.white.transparent(0.12),