Skip to content

V
vscode

xxadev / vscode
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vscode

体验新版 GitCode，发现更多精彩内容 >>

提交 0d2ac78d 编写于 作者: R Rob Lourens
浏览文件
操作

Settings editor - use lighter color for headings and active TOC item

上级 8e92f803
隐藏空白更改
内联 并排
Showing with 178 addition and 110 deletion
src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
浏览文件 @ 0d2ac78d
......@@ -8,16 +8,14 @@
}
.settings-editor {
padding-top: 11px;
padding-left: 5px;
max-width: 1100px;
padding: 11px 0px 24px 0px;
max-width: 1000px;
margin: auto;
}
/* header styling */
.settings-editor > .settings-header {
padding-left: 17px;
padding-right: 11px;
padding-right: 24px;
box-sizing: border-box;
margin: auto;
}
......@@ -55,17 +53,25 @@
.settings-editor > .settings-header .search-container > .settings-search-input > .monaco-inputbox .input {
font-size: 14px;
padding-left: 10px;
padding-left: 9px;
}
.settings-editor > .settings-header > .settings-header-controls {
height: 27px;
height: 29px;
display: flex;
border-bottom: solid #3c3c3c 1px;
border-bottom: solid 1px;
}
.vs .settings-editor > .settings-header > .settings-header-controls {
color: #6c6c6c;
}
.settings-editor > .settings-header .settings-tabs-widget > .monaco-action-bar .action-item:not(:first-child) .action-label {
margin-left: 14px;
.vs-dark .settings-editor > .settings-header > .settings-header-controls {
color: #3c3c3c;
}
.settings-editor > .settings-header .settings-tabs-widget > .monaco-action-bar .action-item .action-label {
margin-right: 0px;
}
.settings-editor > .settings-header .settings-tabs-widget .monaco-action-bar .action-item .dropdown-icon {
......@@ -75,7 +81,7 @@
.settings-editor > .settings-header > .settings-header-controls .settings-header-controls-right {
margin-left: auto;
padding-top: 3px;
padding-top: 4px;
display: flex;
}
......@@ -122,16 +128,16 @@
text-transform: none;
font-size: 13px;
padding-bottom: 3px;
padding-top: 6px;
padding-left: 8px;
padding-right: 8px;
padding-bottom: 4px;
padding-top: 7px;
padding-left: 9px;
padding-right: 9px;
}
.settings-editor > .settings-body {
display: flex;
margin: auto;
max-width: 1100px;
max-width: 1000px;
justify-content: space-between;
}
......@@ -141,14 +147,13 @@
.settings-editor > .settings-body .settings-tree-container .monaco-tree-wrapper,
.settings-editor > .settings-body > .settings-tree-container .setting-measure-container {
/** Allocate space for the scrollbar */
width: calc(100% - 11px)
/** Match header padding, leave room for scrollbar on the outside */
width: calc(100% - 24px)
}
.settings-editor > .settings-body .settings-toc-container {
width: 175px;
margin-right: 5px;
width: 160px;
padding-top: 8px;
box-sizing: border-box;
}
......@@ -177,15 +182,29 @@
overflow: hidden;
text-overflow: ellipsis;
line-height: 22px;
opacity: 0.7;
}
.settings-editor > .settings-body .settings-toc-container .monaco-tree-row.has-children > .content:before {
opacity: 0.7;
}
.settings-editor > .settings-body .settings-toc-container .monaco-tree-row.has-children.selected > .content:before {
opacity: 1;
}
.settings-editor > .settings-body .settings-toc-container .monaco-tree-row .settings-toc-entry.no-results {
opacity: 0.5;
}
.settings-editor > .settings-body .settings-toc-container .monaco-tree-row.selected .settings-toc-entry {
font-weight: bold;
opacity: 1;
}
.settings-editor > .settings-body .settings-tree-container {
flex: 1;
max-width: 875px;
max-width: 792px;
margin-right: 1px; /* So the item doesn't blend into the edge of the view container */
padding-top: 8px;
box-sizing: border-box;
......
src/vs/workbench/parts/preferences/browser/settingsEditor2.ts
浏览文件 @ 0d2ac78d
......@@ -11,12 +11,11 @@ import * as arrays from 'vs/base/common/arrays';
import { Delayer, ThrottledDelayer } from 'vs/base/common/async';
import { CancellationToken } from 'vs/base/common/cancellation';
import * as collections from 'vs/base/common/collections';
import { Color, RGBA } from 'vs/base/common/color';
import { getErrorMessage, isPromiseCanceledError } from 'vs/base/common/errors';
import URI from 'vs/base/common/uri';
import { TPromise } from 'vs/base/common/winjs.base';
import { ITree, ITreeConfiguration } from 'vs/base/parts/tree/browser/tree';
import { DefaultTreestyler, OpenMode } from 'vs/base/parts/tree/browser/treeDefaults';
import { OpenMode, DefaultTreestyler } from 'vs/base/parts/tree/browser/treeDefaults';
import 'vs/css!./media/settingsEditor2';
import { localize } from 'vs/nls';
import { ConfigurationTarget, IConfigurationOverrides, IConfigurationService } from 'vs/platform/configuration/common/configuration';
......@@ -27,28 +26,22 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
import { WorkbenchTree, WorkbenchTreeController } from 'vs/platform/list/browser/listService';
import { ILogService } from 'vs/platform/log/common/log';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { editorBackground, focusBorder, foreground, registerColor } from 'vs/platform/theme/common/colorRegistry';
import { attachButtonStyler, attachStyler } from 'vs/platform/theme/common/styler';
import { ICssStyleCollector, ITheme, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
import { EditorOptions, IEditor } from 'vs/workbench/common/editor';
import { SearchWidget, SettingsTarget, SettingsTargetsWidget } from 'vs/workbench/parts/preferences/browser/preferencesWidgets';
import { commonlyUsedData, tocData } from 'vs/workbench/parts/preferences/browser/settingsLayout';
import { ISettingsEditorViewState, NonExpandableTree, resolveExtensionsSettings, resolveSettingsTree, SearchResultIdx, SearchResultModel, SettingsAccessibilityProvider, SettingsDataSource, SettingsRenderer, SettingsTreeController, SettingsTreeElement, SettingsTreeFilter, SettingsTreeGroupElement, SettingsTreeModel, SettingsTreeSettingElement } from 'vs/workbench/parts/preferences/browser/settingsTree';
import { ISettingsEditorViewState, resolveExtensionsSettings, resolveSettingsTree, SearchResultIdx, SearchResultModel, SettingsRenderer, SettingsTree, SettingsTreeElement, SettingsTreeFilter, SettingsTreeGroupElement, SettingsTreeModel, SettingsTreeSettingElement, settingsHeaderForeground } from 'vs/workbench/parts/preferences/browser/settingsTree';
import { TOCDataSource, TOCRenderer, TOCTreeModel } from 'vs/workbench/parts/preferences/browser/tocTree';
import { CONTEXT_SETTINGS_EDITOR, CONTEXT_SETTINGS_FIRST_ROW_FOCUS, CONTEXT_SETTINGS_ROW_FOCUS, CONTEXT_SETTINGS_SEARCH_FOCUS, CONTEXT_TOC_ROW_FOCUS, IPreferencesSearchService, ISearchProvider } from 'vs/workbench/parts/preferences/common/preferences';
import { IPreferencesService, ISearchResult, ISettingsEditorModel } from 'vs/workbench/services/preferences/common/preferences';
import { SettingsEditor2Input } from 'vs/workbench/services/preferences/common/preferencesEditorInput';
import { DefaultSettingsEditorModel } from 'vs/workbench/services/preferences/common/preferencesModels';
import { editorBackground, foreground } from 'vs/platform/theme/common/colorRegistry';
const $ = DOM.$;
export const settingItemInactiveSelectionBorder = registerColor('settings.inactiveSelectedItemBorder', {
dark: '#3F3F46',
light: '#CCCEDB',
hc: null
}, localize('settingItemInactiveSelectionBorder', "The color of the selected setting row border, when the settings list does not have focus."));
export class SettingsEditor2 extends BaseEditor {
public static readonly ID: string = 'workbench.editor.settings2';
......@@ -63,7 +56,6 @@ export class SettingsEditor2 extends BaseEditor {
private settingsTreeContainer: HTMLElement;
private settingsTree: WorkbenchTree;
private treeDataSource: SettingsDataSource;
private tocTreeModel: TOCTreeModel;
private settingsTreeModel: SettingsTreeModel;
......@@ -282,12 +274,29 @@ export class SettingsEditor2 extends BaseEditor {
dataSource: tocDataSource,
renderer: tocRenderer,
controller: this.instantiationService.createInstance(WorkbenchTreeController, { openMode: OpenMode.DOUBLE_CLICK }),
filter: this.instantiationService.createInstance(SettingsTreeFilter, this.viewState)
filter: this.instantiationService.createInstance(SettingsTreeFilter, this.viewState),
styler: new DefaultTreestyler(DOM.createStyleSheet(), 'settings-toc-tree'),
},
{
showLoading: false,
twistiePixels: 15
});
this.tocTree.getHTMLElement().classList.add('settings-toc-tree');
this._register(attachStyler(this.themeService, {
listActiveSelectionBackground: editorBackground,
listActiveSelectionForeground: settingsHeaderForeground,
listFocusAndSelectionBackground: editorBackground,
listFocusAndSelectionForeground: settingsHeaderForeground,
listFocusBackground: editorBackground,
listFocusForeground: settingsHeaderForeground,
listHoverForeground: foreground,
listHoverBackground: editorBackground,
listInactiveSelectionBackground: editorBackground,
listInactiveSelectionForeground: settingsHeaderForeground,
}, colors => {
this.tocTree.style(colors);
}));
this._register(this.tocTree.onDidChangeFocus(e => {
const element = e.focus;
......@@ -301,7 +310,6 @@ export class SettingsEditor2 extends BaseEditor {
this.settingsTree.setFocus(element);
}
}
}));
this._register(this.tocTree.onDidFocus(() => {
......@@ -323,66 +331,18 @@ export class SettingsEditor2 extends BaseEditor {
private createSettingsTree(parent: HTMLElement): void {
this.settingsTreeContainer = DOM.append(parent, $('.settings-tree-container'));
this.treeDataSource = this.instantiationService.createInstance(SettingsDataSource, this.viewState);
const renderer = this.instantiationService.createInstance(SettingsRenderer, this.settingsTreeContainer);
this._register(renderer.onDidChangeSetting(e => this.onDidChangeSetting(e.key, e.value)));
this._register(renderer.onDidOpenSettings(() => this.openSettingsFile()));
this._register(renderer.onDidClickSettingLink(settingName => this.revealSetting(settingName)));
const treeClass = 'settings-editor-tree';
this.settingsTree = this.instantiationService.createInstance(NonExpandableTree, this.settingsTreeContainer,
<ITreeConfiguration>{
dataSource: this.treeDataSource,
renderer,
controller: this.instantiationService.createInstance(SettingsTreeController),
accessibilityProvider: this.instantiationService.createInstance(SettingsAccessibilityProvider),
filter: this.instantiationService.createInstance(SettingsTreeFilter, this.viewState),
styler: new DefaultTreestyler(DOM.createStyleSheet(), treeClass)
},
this.settingsTree = this.instantiationService.createInstance(SettingsTree,
this.settingsTreeContainer,
this.viewState,
{
ariaLabel: localize('treeAriaLabel', "Settings"),
showLoading: false,
indentPixels: 0,
twistiePixels: 0,
renderer
});
this._register(registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const activeBorderColor = theme.getColor(focusBorder);
if (activeBorderColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree:focus .monaco-tree-row.focused {outline: solid 1px ${activeBorderColor}; outline-offset: -1px; }`);
}
const inactiveBorderColor = theme.getColor(settingItemInactiveSelectionBorder);
if (inactiveBorderColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree .monaco-tree-row.focused {outline: solid 1px ${inactiveBorderColor}; outline-offset: -1px; }`);
}
const foregroundColor = theme.getColor(foreground);
if (foregroundColor) {
// Links appear inside other elements in markdown. CSS opacity acts like a mask. So we have to dynamically compute the description color to avoid
// applying an opacity to the link color.
const fgWithOpacity = new Color(new RGBA(foregroundColor.rgba.r, foregroundColor.rgba.g, foregroundColor.rgba.b, .7));
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description { color: ${fgWithOpacity}; }`);
}
}));
this.settingsTree.getHTMLElement().classList.add(treeClass);
this._register(attachStyler(this.themeService, {
listActiveSelectionBackground: editorBackground,
listActiveSelectionForeground: foreground,
listFocusAndSelectionBackground: editorBackground,
listFocusAndSelectionForeground: foreground,
listFocusBackground: editorBackground,
listFocusForeground: foreground,
listHoverForeground: foreground,
listHoverBackground: editorBackground,
listInactiveSelectionBackground: editorBackground,
listInactiveSelectionForeground: foreground
}, colors => {
this.settingsTree.style(colors);
}));
this._register(this.settingsTree.onDidChangeFocus(e => {
this.settingsTree.setSelection([e.focus]);
if (this.selectedElement) {
......
src/vs/workbench/parts/preferences/browser/settingsTree.ts
浏览文件 @ 0d2ac78d
......@@ -12,6 +12,7 @@ import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
import { SelectBox } from 'vs/base/browser/ui/selectBox/selectBox';
import * as arrays from 'vs/base/common/arrays';
import { Color, RGBA } from 'vs/base/common/color';
import { onUnexpectedError } from 'vs/base/common/errors';
import { Emitter, Event } from 'vs/base/common/event';
import { KeyCode } from 'vs/base/common/keyCodes';
......@@ -20,47 +21,47 @@ import * as objects from 'vs/base/common/objects';
import { escapeRegExpCharacters, startsWith } from 'vs/base/common/strings';
import URI from 'vs/base/common/uri';
import { TPromise } from 'vs/base/common/winjs.base';
import { IAccessibilityProvider, IDataSource, IFilter, ITree, IRenderer } from 'vs/base/parts/tree/browser/tree';
import { IAccessibilityProvider, IDataSource, IFilter, IRenderer, ITree, ITreeConfiguration } from 'vs/base/parts/tree/browser/tree';
import { DefaultTreestyler } from 'vs/base/parts/tree/browser/treeDefaults';
import { localize } from 'vs/nls';
import { ConfigurationTarget, IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { WorkbenchTree, WorkbenchTreeController } from 'vs/platform/list/browser/listService';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
import { IListService, WorkbenchTree, WorkbenchTreeController } from 'vs/platform/list/browser/listService';
import { IOpenerService } from 'vs/platform/opener/common/opener';
import { inputBackground, inputBorder, inputForeground, registerColor, selectBackground, selectBorder, selectForeground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
import { attachInputBoxStyler, attachSelectBoxStyler, attachButtonStyler } from 'vs/platform/theme/common/styler';
import { editorBackground, focusBorder, foreground, inputBackground, inputBorder, inputForeground, registerColor, selectBackground, selectBorder, selectForeground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
import { attachButtonStyler, attachInputBoxStyler, attachSelectBoxStyler, attachStyler } 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';
import { ITOCEntry } from 'vs/workbench/parts/preferences/browser/settingsLayout';
import { ISearchResult, ISetting, ISettingsGroup } from 'vs/workbench/services/preferences/common/preferences';
import { Color } from 'vs/base/common/color';
const $ = DOM.$;
export const modifiedItemForeground = registerColor('settings.modifiedItemForeground', {
light: '#019001',
dark: '#73C991',
hc: '#73C991'
}, localize('modifiedItemForeground', "(For settings editor preview) The foreground color for a modified setting."));
export const settingsHeaderForeground = registerColor('settings.headerForeground', { light: '#444444', dark: '#e7e7e7', hc: '#ffffff' }, localize('headerForeground', "(For settings editor preview) The foreground color for a section header/title."));
export const modifiedItemForeground = registerColor('settings.modifiedItemForeground', { light: '#019001', dark: '#73C991', hc: '#73C991' }, localize('modifiedItemForeground', "(For settings editor preview) The foreground color for a modified setting."));
export const settingItemInactiveSelectionBorder = registerColor('settings.inactiveSelectedItemBorder', { dark: '#3F3F46', light: '#CCCEDB', hc: null }, localize('settingItemInactiveSelectionBorder', "(For settings editor preview) The color of the selected setting row border, when the settings list does not have focus."));
// 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."));
export const settingsSelectBackground = registerColor('settings.dropdownBackground', { dark: selectBackground, light: selectBackground, hc: selectBackground }, localize('settingsDropdownBackground', "(For settings editor preview) Settings editor dropdown background."));
export const settingsSelectForeground = registerColor('settings.dropdownForeground', { dark: selectForeground, light: selectForeground, hc: selectForeground }, localize('settingsDropdownForeground', "(For settings editor preview) Settings editor dropdown foreground."));
export const settingsSelectBorder = registerColor('settings.dropdownBorder', { dark: selectBorder, light: selectBorder, hc: selectBorder }, localize('settingsDropdownBorder', "(For settings editor preview) 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."));
export const settingsCheckboxBackground = registerColor('settings.checkboxBackground', { dark: selectBackground, light: selectBackground, hc: selectBackground }, localize('settingsCheckboxBackground', "(For settings editor preview) Settings editor checkbox background."));
export const settingsCheckboxForeground = registerColor('settings.checkboxForeground', { dark: selectForeground, light: selectForeground, hc: selectForeground }, localize('settingsCheckboxForeground', "(For settings editor preview) Settings editor checkbox foreground."));
export const settingsCheckboxBorder = registerColor('settings.checkboxBorder', { dark: selectBorder, light: selectBorder, hc: selectBorder }, localize('settingsCheckboxBorder', "(For settings editor preview) 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."));
export const settingsTextInputBackground = registerColor('settings.textInputBackground', { dark: inputBackground, light: inputBackground, hc: inputBackground }, localize('textInputBoxBackground', "(For settings editor preview) Settings editor text input box background."));
export const settingsTextInputForeground = registerColor('settings.textInputForeground', { dark: inputForeground, light: inputForeground, hc: inputForeground }, localize('textInputBoxForeground', "(For settings editor preview) Settings editor text input box foreground."));
export const settingsTextInputBorder = registerColor('settings.textInputBorder', { dark: inputBorder, light: inputBorder, hc: inputBorder }, localize('textInputBoxBorder', "(For settings editor preview) 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."));
export const settingsNumberInputBackground = registerColor('settings.numberInputBackground', { dark: inputBackground, light: inputBackground, hc: inputBackground }, localize('numberInputBoxBackground', "(For settings editor preview) Settings editor number input box background."));
export const settingsNumberInputForeground = registerColor('settings.numberInputForeground', { dark: inputForeground, light: inputForeground, hc: inputForeground }, localize('numberInputBoxForeground', "(For settings editor preview) Settings editor number input box foreground."));
export const settingsNumberInputBorder = registerColor('settings.numberInputBorder', { dark: inputBorder, light: inputBorder, hc: inputBorder }, localize('numberInputBoxBorder', "(For settings editor preview) Settings editor number input box border."));
registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const modifiedItemForegroundColor = theme.getColor(modifiedItemForeground);
......@@ -84,6 +85,11 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description a { color: ${link}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description a > code { color: ${link}; }`);
}
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} };`);
}
});
export abstract class SettingsTreeElement {
......@@ -1157,7 +1163,7 @@ export class SearchResultModel {
}
}
export class NonExpandableTree extends WorkbenchTree {
class NonExpandableTree extends WorkbenchTree {
expand(): TPromise<any, any> {
return TPromise.wrap(null);
}
......@@ -1166,3 +1172,86 @@ export class NonExpandableTree extends WorkbenchTree {
return TPromise.wrap(null);
}
}
export class SettingsTree extends NonExpandableTree {
constructor(
container: HTMLElement,
viewState: ISettingsEditorViewState,
configuration: Partial<ITreeConfiguration>,
@IContextKeyService contextKeyService: IContextKeyService,
@IListService listService: IListService,
@IThemeService themeService: IThemeService,
@IInstantiationService instantiationService: IInstantiationService,
@IConfigurationService configurationService: IConfigurationService
) {
const treeClass = 'settings-editor-tree';
const fullConfiguration = <ITreeConfiguration>{
dataSource: instantiationService.createInstance(SettingsDataSource, viewState),
controller: instantiationService.createInstance(SettingsTreeController),
accessibilityProvider: instantiationService.createInstance(SettingsAccessibilityProvider),
filter: instantiationService.createInstance(SettingsTreeFilter, viewState),
styler: new DefaultTreestyler(DOM.createStyleSheet(), treeClass),
...configuration
};
const options = {
ariaLabel: localize('treeAriaLabel', "Settings"),
showLoading: false,
indentPixels: 0,
twistiePixels: 0,
};
super(container,
fullConfiguration,
options,
contextKeyService,
listService,
themeService,
instantiationService,
configurationService);
this.disposables.push(registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const activeBorderColor = theme.getColor(focusBorder);
if (activeBorderColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree:focus .monaco-tree-row.focused {outline: solid 1px ${activeBorderColor}; outline-offset: -1px; }`);
}
const inactiveBorderColor = theme.getColor(settingItemInactiveSelectionBorder);
if (inactiveBorderColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .monaco-tree .monaco-tree-row.focused {outline: solid 1px ${inactiveBorderColor}; outline-offset: -1px; }`);
}
const foregroundColor = theme.getColor(foreground);
if (foregroundColor) {
// Links appear inside other elements in markdown. CSS opacity acts like a mask. So we have to dynamically compute the description color to avoid
// applying an opacity to the link color.
const fgWithOpacity = new Color(new RGBA(foregroundColor.rgba.r, foregroundColor.rgba.g, foregroundColor.rgba.b, .7));
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description { color: ${fgWithOpacity}; }`);
}
const headerForegroundColor = theme.getColor(settingsHeaderForeground);
if (headerForegroundColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .settings-group-title-label { color: ${headerForegroundColor} };`);
}
}));
this.getHTMLElement().classList.add(treeClass);
this.disposables.push(attachStyler(themeService, {
listActiveSelectionBackground: editorBackground,
listActiveSelectionForeground: foreground,
listFocusAndSelectionBackground: editorBackground,
listFocusAndSelectionForeground: foreground,
listFocusBackground: editorBackground,
listFocusForeground: foreground,
listHoverForeground: foreground,
listHoverBackground: editorBackground,
listInactiveSelectionBackground: editorBackground,
listInactiveSelectionForeground: foreground
}, colors => {
this.style(colors);
}));
}
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或