Skip to content

V
vscode

xxadev / vscode
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
V
vscode

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

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

Fix #66151 - refactor settings editor layout

上级 a9a726aa
隐藏空白更改
内联 并排
Showing with 82 addition and 93 deletion
src/vs/workbench/parts/preferences/browser/settingsTree.ts
浏览文件 @ c064781f
......@@ -256,6 +256,8 @@ export abstract class AbstractSettingRenderer implements ITreeRenderer<SettingsT
static readonly CONTROL_CLASS = 'setting-control-focus-target';
static readonly CONTROL_SELECTOR = '.' + AbstractSettingRenderer.CONTROL_CLASS;
static readonly CONTENTS_CLASS = 'setting-item-contents';
static readonly CONTENTS_SELECTOR = '.' + AbstractSettingRenderer.CONTENTS_CLASS;
static readonly SETTING_KEY_ATTR = 'data-key';
static readonly SETTING_ID_ATTR = 'data-id';
......@@ -296,9 +298,11 @@ export abstract class AbstractSettingRenderer implements ITreeRenderer<SettingsT
throw new Error('to override');
}
protected renderCommonTemplate(tree: any, container: HTMLElement, typeClass: string): ISettingItemTemplate {
DOM.addClass(container, 'setting-item');
DOM.addClass(container, 'setting-item-' + typeClass);
protected renderCommonTemplate(tree: any, _container: HTMLElement, typeClass: string): ISettingItemTemplate {
DOM.addClass(_container, 'setting-item');
DOM.addClass(_container, 'setting-item-' + typeClass);
const container = DOM.append(_container, $(AbstractSettingRenderer.CONTENTS_SELECTOR));
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'));
......@@ -729,9 +733,9 @@ export class SettingExcludeRenderer extends AbstractSettingRenderer implements I
export class SettingTextRenderer extends AbstractSettingRenderer implements ITreeRenderer<SettingsTreeSettingElement, never, ISettingTextItemTemplate> {
templateId = SETTINGS_TEXT_TEMPLATE_ID;
renderTemplate(container: HTMLElement): ISettingTextItemTemplate {
const common = this.renderCommonTemplate(null, container, 'text');
const validationErrorMessageElement = DOM.append(container, $('.setting-item-validation-message'));
renderTemplate(_container: HTMLElement): ISettingTextItemTemplate {
const common = this.renderCommonTemplate(null, _container, 'text');
const validationErrorMessageElement = DOM.append(common.containerElement, $('.setting-item-validation-message'));
const inputBox = new InputBox(common.controlElement, this._contextViewService);
common.toDispose.push(inputBox);
......@@ -851,9 +855,9 @@ export class SettingEnumRenderer extends AbstractSettingRenderer implements ITre
export class SettingNumberRenderer extends AbstractSettingRenderer implements ITreeRenderer<SettingsTreeSettingElement, never, ISettingNumberItemTemplate> {
templateId = SETTINGS_NUMBER_TEMPLATE_ID;
renderTemplate(container: HTMLElement): ISettingNumberItemTemplate {
const common = super.renderCommonTemplate(null, container, 'number');
const validationErrorMessageElement = DOM.append(container, $('.setting-item-validation-message'));
renderTemplate(_container: HTMLElement): ISettingNumberItemTemplate {
const common = super.renderCommonTemplate(null, _container, 'number');
const validationErrorMessageElement = DOM.append(common.containerElement, $('.setting-item-validation-message'));
const inputBox = new InputBox(common.controlElement, this._contextViewService, { type: 'number' });
common.toDispose.push(inputBox);
......@@ -906,9 +910,11 @@ export class SettingNumberRenderer extends AbstractSettingRenderer implements IT
export class SettingBoolRenderer extends AbstractSettingRenderer implements ITreeRenderer<SettingsTreeSettingElement, never, ISettingBoolItemTemplate> {
templateId = SETTINGS_BOOL_TEMPLATE_ID;
renderTemplate(container: HTMLElement): ISettingBoolItemTemplate {
DOM.addClass(container, 'setting-item');
DOM.addClass(container, 'setting-item-bool');
renderTemplate(_container: HTMLElement): ISettingBoolItemTemplate {
DOM.addClass(_container, 'setting-item');
DOM.addClass(_container, 'setting-item-bool');
const container = DOM.append(_container, $(AbstractSettingRenderer.CONTENTS_SELECTOR));
const titleElement = DOM.append(container, $('.setting-item-title'));
const categoryElement = DOM.append(titleElement, $('span.setting-item-category'));
......@@ -1073,7 +1079,7 @@ export class SettingTreeRenderers {
}
getSettingDOMElementForDOMElement(domElement: HTMLElement): HTMLElement {
const parent = DOM.findParentWithClass(domElement, 'setting-item');
const parent = DOM.findParentWithClass(domElement, AbstractSettingRenderer.CONTENTS_CLASS);
if (parent) {
return parent;
}
......@@ -1324,27 +1330,27 @@ export class SettingsTree extends ObjectTree<SettingsTreeElement> {
// 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, 0.9));
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description { color: ${fgWithOpacity}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description { color: ${fgWithOpacity}; }`);
}
const errorColor = theme.getColor(errorForeground);
if (errorColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-deprecation-message { color: ${errorColor}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-deprecation-message { color: ${errorColor}; }`);
}
const invalidInputBackground = theme.getColor(inputValidationErrorBackground);
if (invalidInputBackground) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-validation-message { background-color: ${invalidInputBackground}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-validation-message { background-color: ${invalidInputBackground}; }`);
}
const invalidInputForeground = theme.getColor(inputValidationErrorForeground);
if (invalidInputForeground) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-validation-message { color: ${invalidInputForeground}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-validation-message { color: ${invalidInputForeground}; }`);
}
const invalidInputBorder = theme.getColor(inputValidationErrorBorder);
if (invalidInputBorder) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-validation-message { border-style:solid; border-width: 1px; border-color: ${invalidInputBorder}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-validation-message { border-style:solid; border-width: 1px; border-color: ${invalidInputBorder}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item.invalid-input .setting-item-control .monaco-inputbox.idle { outline-width: 0; border-style:solid; border-width: 1px; border-color: ${invalidInputBorder}; }`);
}
......@@ -1356,7 +1362,7 @@ export class SettingsTree extends ObjectTree<SettingsTreeElement> {
const focusBorderColor = theme.getColor(focusBorder);
if (focusBorderColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description-markdown a:focus { outline-color: ${focusBorderColor} }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description-markdown a:focus { outline-color: ${focusBorderColor} }`);
}
}));
......
src/vs/workbench/parts/preferences/browser/settingsWidgets.ts
浏览文件 @ c064781f
......@@ -63,16 +63,16 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const link = theme.getColor(textLinkForeground);
if (link) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description-markdown a { color: ${link}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description-markdown a > code { color: ${link}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description-markdown a { color: ${link}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description-markdown a > code { color: ${link}; }`);
collector.addRule(`.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a { color: ${link}; }`);
collector.addRule(`.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a > code { color: ${link}; }`);
}
const activeLink = theme.getColor(textLinkActiveForeground);
if (activeLink) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description-markdown a:hover, .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description-markdown a:active { color: ${activeLink}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description-markdown a:hover > code, .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description-markdown a:active > code { color: ${activeLink}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description-markdown a:hover, .settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description-markdown a:active { color: ${activeLink}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description-markdown a:hover > code, .settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description-markdown a:active > code { color: ${activeLink}; }`);
collector.addRule(`.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:hover, .monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:active { color: ${activeLink}; }`);
collector.addRule(`.monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:hover > code, .monaco-select-box-dropdown-container > .select-box-details-pane > .select-box-description-markdown a:active > code { color: ${activeLink}; }`);
}
......@@ -127,7 +127,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
const modifiedItemIndicatorColor = theme.getColor(modifiedItemIndicator);
if (modifiedItemIndicatorColor) {
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-modified-indicator { border-color: ${modifiedItemIndicatorColor}; }`);
collector.addRule(`.settings-editor > .settings-body > .settings-tree-container .setting-item-contents > .setting-item-modified-indicator { border-color: ${modifiedItemIndicatorColor}; }`);
}
});
......
src/vs/workbench/parts/preferences/electron-browser/media/settingsEditor2.css
浏览文件 @ c064781f
......@@ -122,31 +122,9 @@
text-decoration: underline;
}
.settings-editor.narrow-width > .settings-body .settings-tree-container .monaco-list-rows {
margin-left: 0px;
}
.settings-editor > .settings-body .settings-tree-container .monaco-list-rows {
max-width: 1000px;
margin: auto;
}
.settings-editor > .settings-body .settings-tree-container .monaco-list-row {
line-height: 1.4em !important; /* TODO */
padding-left: 208px;
padding-right: 24px;
/* box-sizing: border-box; */
}
.settings-editor > .settings-body .settings-tree-container .monaco-list-row .monaco-tl-row {
position: relative;
}
.settings-editor.no-toc-search > .settings-body .settings-tree-container .monaco-list-row,
.settings-editor.narrow-width > .settings-body .settings-tree-container .monaco-list-row {
/* 3 margin + 20 padding + 2 border */
width: calc(100% - 25px);
padding-left: 25px;
.settings-editor.no-toc-search > .settings-body .settings-tree-container .monaco-list-row .monaco-tl-contents,
.settings-editor.narrow-width > .settings-body .settings-tree-container .monaco-list-row .monaco-tl-contents {
padding-left: 33px;
}
.settings-editor > .settings-body .settings-tree-container .monaco-list-row .monaco-tl-twistie {
......@@ -162,14 +140,15 @@
.settings-editor > .settings-body > .settings-tree-container .shadow.top {
left: 50%;
max-width: 952px; /* 1000 - 24*2 padding */
max-width: 952px;
/* 1000 - 24*2 padding */
margin-left: -476px;
z-index: 1000;
}
.settings-editor > .settings-body .settings-tree-container .setting-toolbar-container {
position: absolute;
left: -23px;
left: -32px;
top: 11px;
bottom: 0px;
width: 26px;
......@@ -270,7 +249,6 @@
padding-left: 31px;
}
.settings-editor > .settings-body .settings-tree-container .monaco-list-rows,
.settings-editor > .settings-body .settings-toc-wrapper {
height: 100%;
max-width: 1000px;
......@@ -283,94 +261,105 @@
}
.settings-editor > .settings-body > .settings-tree-container .monaco-list-row {
line-height: 1.4em !important;
/* so validation messages don't get clipped */
overflow: visible;
/* so validation messages dont get clipped */
cursor: default;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item {
.settings-editor > .settings-body .settings-tree-container .monaco-list-row .monaco-tl-contents {
max-width: 1000px;
margin: auto;
box-sizing: border-box;
padding-left: 217px;
padding-right: 20px;
overflow: visible;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents {
position: relative;
padding-top: 12px;
padding-bottom: 18px;
box-sizing: border-box;
white-space: normal;
height: 100%;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block; /* size to contents for hover to show context button */
display: inline-block;
/* size to contents for hover to show context button */
}
.settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-modified-indicator {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-modified-indicator {
display: none;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured > .setting-item-modified-indicator {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents.is-configured .setting-item-modified-indicator {
display: block;
content: ' ';
position: absolute;
width: 6px;
border-left-width: 2px;
border-left-style: solid;
left: 0px;
left: -9px;
top: 15px;
bottom: 16px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item-bool.is-configured > .setting-item-modified-indicator {
.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-item-contents.is-configured .setting-item-modified-indicator {
bottom: 23px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-overrides {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-title .setting-item-overrides {
opacity: 0.5;
font-style: italic;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-overrides a.modified-scope {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-title .setting-item-overrides a.modified-scope {
text-decoration: underline;
cursor: pointer;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-label {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-label {
margin-right: 7px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-cat-label-container {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-cat-label-container {
float: left;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-label,
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-label,
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-category {
font-weight: 600;
user-select: text;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-category {
opacity: 0.9;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-deprecation-message {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-deprecation-message {
margin-top: 3px;
user-select: text;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description {
margin-top: -1px;
user-select: text;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-deprecation-message {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-deprecation-message {
position: absolute;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-validation-message {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-validation-message {
display: none;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.invalid-input .setting-item-validation-message {
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-contents.invalid-input .setting-item-validation-message {
display: block;
position: absolute;
padding: 5px;
......@@ -392,35 +381,35 @@
-webkit-appearance: none !important;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description-markdown * {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description-markdown * {
margin: 0px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description-markdown a:focus {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description-markdown a:focus {
outline: 1px solid -webkit-focus-ring-color;
outline-offset: -1px;
text-decoration: underline;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description-markdown a:hover {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description-markdown a:hover {
text-decoration: underline;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description-markdown code {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-description-markdown code {
line-height: 15px;
/** For some reason, this is needed, otherwise <code> will take up 20px height */
font-family: Menlo, Monaco, Consolas, "Droid Sans Mono", "Courier New", monospace, "Droid Sans Fallback";
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-enumDescription {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-enumDescription {
display: none;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-enumDescription {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-enumDescription {
display: block;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-item-bool {
.settings-editor > .settings-body > .settings-tree-container .setting-item-bool .setting-item-contents {
padding-bottom: 26px;
}
......@@ -449,7 +438,7 @@
background: url('check-inverse.svg') center center no-repeat;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-value {
margin-top: 9px;
display: flex;
}
......@@ -471,15 +460,15 @@
width: 320px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value .edit-in-settings-button,
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value .edit-in-settings-button:hover,
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value .edit-in-settings-button:active {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-value .edit-in-settings-button,
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-value .edit-in-settings-button:hover,
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .setting-item-value .edit-in-settings-button:active {
text-align: left;
text-decoration: underline;
padding-left: 0px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .monaco-select-box {
.settings-editor > .settings-body > .settings-tree-container .setting-item-contents .monaco-select-box {
width: initial;
font: inherit;
height: 26px;
......@@ -495,12 +484,6 @@
padding: 4px 10px;
}
.settings-editor > .settings-body > .settings-tree-container .group-title,
.settings-editor > .settings-body > .settings-tree-container .setting-item {
padding-left: 9px;
padding-right: 9px;
}
.settings-editor > .settings-body > .settings-tree-container .group-title {
cursor: default;
}
......
src/vs/workbench/parts/preferences/electron-browser/settingsEditor2.ts
浏览文件 @ c064781f
......@@ -664,7 +664,7 @@ export class SettingsEditor2 extends BaseEditor {
}
// Hack, see https://github.com/Microsoft/vscode/issues/64749
const settingItems = this.settingsTree.getHTMLElement().querySelectorAll('.setting-item');
const settingItems = this.settingsTree.getHTMLElement().querySelectorAll(AbstractSettingRenderer.CONTENTS_SELECTOR);
const firstEl = settingItems[1] || settingItems[0];
if (!firstEl) {
return;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或