Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-09-26 01:38:40 +01:00
Code Issues Packages Projects Releases Wiki Activity

Settings editor - make enum and string type controls full width. Also lots of pixel pushing

Browse Source
This commit is contained in:
Rob Lourens
2018-06-18 11:59:08 -07:00
parent 5ea546e557
commit a048bbcd3a
2 changed files with 54 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
+27 -18
View File
@@ -124,10 +124,10 @@
}
.settings-editor > .settings-body > .settings-tree-container .setting-item {
padding-top: 5px;
cursor: default;
white-space: normal;
height: 100%;
min-height: 75px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.odd:not(.focused):not(.selected):not(:hover),
@@ -148,7 +148,6 @@
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title {
margin-top: 2px;
line-height: initial;
}
@@ -176,35 +175,45 @@
opacity: 0.7;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description {
opacity: 0.7;
margin-top: 3px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.settings-editor > .settings-body > .settings-tree-container .setting-measure-container.monaco-tree-row {
padding-left: 15px;
opacity: 0;
max-width: 800px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description {
opacity: 0.7;
margin-top: 3px;
overflow: hidden;
white-space: pre;
text-overflow: ellipsis;
height: 18px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.is-expanded .setting-item-description,
.settings-editor > .settings-body > .settings-tree-container .setting-item.setting-measure-helper .setting-item-description {
height: initial;
white-space: pre-wrap;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > *:first-child {
min-width: 250px;
display: inline-block;
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value {
margin-top: 5px;
margin-bottom: 9px; /* Needed when measuring an expanded row */
display: flex;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value {
margin-top: 10px;
margin-bottom: 8px;
display: inline-block;
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-number {
min-width: 200px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum,
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-string {
flex: 1;
min-width: initial;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control.setting-type-enum > *:first-child {
width: 100%;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button,
@@ -231,7 +240,7 @@
visibility: hidden;
width: initial;
padding-top: 0px; /* So focus outline doesn't overlap the control above */
padding-top: 2px;
}
.settings-editor > .settings-body > .settings-tree-container .setting-item.is-configured .setting-item-value > .setting-reset-button.monaco-button {
src/vs/workbench/parts/preferences/browser/settingsTree.ts
+27 -22
View File
@@ -298,7 +298,7 @@ export class SettingsRenderer implements IRenderer {
this.renderSettingElement(tree, element, template);
const height = measureHelper.offsetHeight;
this.measureContainer.removeChild(measureHelper);
this.measureContainer.removeChild(this.measureContainer.firstChild);
return Math.max(height, SettingsRenderer.SETTING_ROW_HEIGHT);
}
@@ -448,56 +448,61 @@ export class SettingsRenderer implements IRenderer {
private renderValue(element: ISettingElement, isSelected: boolean, template: ISettingItemTemplate): void {
const onChange = value => this._onDidChangeSetting.fire({ key: element.setting.key, value });
template.valueElement.innerHTML = '';
const valueControlElement = DOM.append(template.valueElement, $('.setting-item-control'));
if (element.enum && (element.valueType === 'string' || !element.valueType)) {
this.renderEnum(element, isSelected, template, onChange);
valueControlElement.classList.add('setting-type-enum');
this.renderEnum(element, isSelected, template, valueControlElement, onChange);
} else if (element.valueType === 'boolean') {
this.renderBool(element, isSelected, template, onChange);
valueControlElement.classList.add('setting-type-boolean');
this.renderBool(element, isSelected, template, valueControlElement, onChange);
} else if (element.valueType === 'string') {
this.renderText(element, isSelected, template, onChange);
valueControlElement.classList.add('setting-type-string');
this.renderText(element, isSelected, template, valueControlElement, onChange);
} else if (element.valueType === 'number' || element.valueType === 'integer') {
this.renderText(element, isSelected, template, value => onChange(parseInt(value)));
valueControlElement.classList.add('setting-type-number');
this.renderText(element, isSelected, template, valueControlElement, value => onChange(parseInt(value)));
} else {
this.renderEditInSettingsJson(element, isSelected, template);
valueControlElement.classList.add('setting-type-complex');
this.renderEditInSettingsJson(element, isSelected, template, valueControlElement);
}
}
private renderBool(element: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, onChange: (value: boolean) => void): void {
const checkboxElement = <HTMLInputElement>DOM.append(template.valueElement, $('input.setting-value-checkbox.setting-value-input'));
private renderBool(dataElement: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement, onChange: (value: boolean) => void): void {
const checkboxElement = <HTMLInputElement>DOM.append(element, $('input.setting-value-checkbox.setting-value-input'));
checkboxElement.type = 'checkbox';
checkboxElement.checked = element.value;
checkboxElement.checked = dataElement.value;
checkboxElement.tabIndex = isSelected ? 0 : -1;
template.toDispose.push(DOM.addDisposableListener(checkboxElement, 'change', e => onChange(checkboxElement.checked)));
}
private renderEnum(element: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, onChange: (value: string) => void): void {
const idx = element.enum.indexOf(element.value);
const displayOptions = element.enum.map(escapeInvisibleChars);
private renderEnum(dataElement: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement, onChange: (value: string) => void): void {
const idx = dataElement.enum.indexOf(dataElement.value);
const displayOptions = dataElement.enum.map(escapeInvisibleChars);
const selectBox = new SelectBox(displayOptions, idx, this.contextViewService);
template.toDispose.push(selectBox);
template.toDispose.push(attachSelectBoxStyler(selectBox, this.themeService));
selectBox.render(template.valueElement);
if (template.valueElement.firstElementChild) {
template.valueElement.firstElementChild.setAttribute('tabindex', isSelected ? '0' : '-1');
selectBox.render(element);
if (element.firstElementChild) {
element.firstElementChild.setAttribute('tabindex', isSelected ? '0' : '-1');
}
template.toDispose.push(
selectBox.onDidSelect(e => onChange(element.enum[e.index])));
selectBox.onDidSelect(e => onChange(dataElement.enum[e.index])));
}
private renderText(element: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, onChange: (value: string) => void): void {
const inputBox = new InputBox(template.valueElement, this.contextViewService);
private renderText(dataElement: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement, onChange: (value: string) => void): void {
const inputBox = new InputBox(element, this.contextViewService);
template.toDispose.push(attachInputBoxStyler(inputBox, this.themeService));
template.toDispose.push(inputBox);
inputBox.value = element.value;
inputBox.value = dataElement.value;
inputBox.inputElement.tabIndex = isSelected ? 0 : -1;
template.toDispose.push(
inputBox.onDidChange(e => onChange(e)));
}
private renderEditInSettingsJson(element: ISettingElement, isSelected: boolean, template: ISettingItemTemplate): void {
const openSettingsButton = new Button(template.valueElement, { title: true, buttonBackground: null, buttonHoverBackground: null });
private renderEditInSettingsJson(dataElement: ISettingElement, isSelected: boolean, template: ISettingItemTemplate, element: HTMLElement): void {
const openSettingsButton = new Button(element, { title: true, buttonBackground: null, buttonHoverBackground: null });
openSettingsButton.onDidClick(() => this._onDidOpenSettings.fire());
openSettingsButton.label = localize('editInSettingsJson', "Edit in settings.json");
openSettingsButton.element.classList.add('edit-in-settings-button');