From a048bbcd3a1093a50e1dbf4c599ff4fac5f5e0bd Mon Sep 17 00:00:00 2001 From: Rob Lourens Date: Thu, 14 Jun 2018 20:11:58 -0700 Subject: [PATCH] Settings editor - make enum and string type controls full width. Also lots of pixel pushing --- .../browser/media/settingsEditor2.css | 43 +++++++++------- .../parts/preferences/browser/settingsTree.ts | 49 ++++++++++--------- 2 files changed, 53 insertions(+), 39 deletions(-) diff --git a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css index d5fb0268648..d93de6e6e0a 100644 --- a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css +++ b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css @@ -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,18 +175,19 @@ opacity: 0.7; } +.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: nowrap; + white-space: pre; text-overflow: ellipsis; -} - -.settings-editor > .settings-body > .settings-tree-container .setting-measure-container.monaco-tree-row { - padding-left: 15px; - opacity: 0; - max-width: 800px; + height: 18px; } .settings-editor > .settings-body > .settings-tree-container .setting-item.is-expanded .setting-item-description, @@ -196,15 +196,24 @@ 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 { diff --git a/src/vs/workbench/parts/preferences/browser/settingsTree.ts b/src/vs/workbench/parts/preferences/browser/settingsTree.ts index 85b2494347e..446bf45b84f 100644 --- a/src/vs/workbench/parts/preferences/browser/settingsTree.ts +++ b/src/vs/workbench/parts/preferences/browser/settingsTree.ts @@ -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 = 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 = 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'); -- GitLab