mirror of
https://github.com/Microsoft/vscode
synced 2024-10-05 19:02:54 +00:00
Tweak coloring and spacing in new settings editor #106897
This commit is contained in:
parent
64475206ce
commit
0405841876
|
@ -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",
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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),
|
||||
|
|
Loading…
Reference in a new issue