Skip to content

Commit

Permalink
Fix microsoft#66151 - refactor settings editor layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@roblourens
roblourens committed Feb 5, 2019
1 parent a9a726a commit c064781
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 93 deletions.
44 changes: 25 additions & 19 deletions src/vs/workbench/parts/preferences/browser/settingsTree.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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'));
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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'));
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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}; }`);
}

Expand All @@ -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} }`);
}
}));

Expand Down
10 changes: 5 additions & 5 deletions src/vs/workbench/parts/preferences/browser/settingsWidgets.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}; }`);
}
Expand Down Expand Up @@ -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}; }`);
}
});

Expand Down
Loading

0 comments on commit c064781

Please sign in to comment.