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

Settings editor - Flatten settings list and style

Browse Source
This commit is contained in:
Rob Lourens
2018-06-18 16:33:29 -07:00
parent 1e300c4162
commit 8fde47f31a
3 changed files with 42 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
+21 -37
View File
@@ -16,7 +16,7 @@
/* header styling */
.settings-editor > .settings-editor-right > .settings-header {
padding-left: 15px;
padding-left: 5px;
padding-right: 5px;
max-width: 1000px;
box-sizing: border-box;
@@ -128,6 +128,7 @@
.settings-editor > .settings-toc-container {
width: 175px;
margin-top: 114px;
margin-right: 5px;
}
.settings-editor.search-mode > .settings-toc-container .monaco-tree {
@@ -137,6 +138,7 @@
.settings-editor > .settings-toc-container .monaco-tree-row .settings-toc-entry {
overflow: hidden;
text-overflow: ellipsis;
line-height: 22px;
}
.settings-editor > .settings-editor-right > .settings-body .settings-tree-container {
@@ -147,7 +149,8 @@
}
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item {
padding-top: 5px;
padding-top: 4px;
padding-left: 5px;
cursor: default;
white-space: normal;
height: 100%;
@@ -159,22 +162,6 @@
background-color: rgba(130, 130, 130, 0.04);
}
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item > .setting-item-left {
flex: 1;
padding-top: 3px;
padding-bottom: 12px;
}
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item > .setting-item-right {
min-width: 180px;
margin: 21px 10px 0px 5px;
}
/* .settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-title {
margin-top: 2px;
line-height: initial;
} */
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-title .setting-item-is-configured-label {
font-style: italic;
opacity: 0.8;
@@ -222,7 +209,7 @@
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value {
margin-top: 5px;
margin-bottom: 9px; /* Needed when measuring an expanded row */
margin-bottom: 7px; /* Needed when measuring an expanded row */
display: flex;
}
@@ -242,15 +229,15 @@
display: inline-block;
}
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button,
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button:hover,
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button:active {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control > .edit-in-settings-button,
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control > .edit-in-settings-button:hover,
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control > .edit-in-settings-button:active {
margin: auto;
text-align: left;
text-decoration: underline;
}
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .edit-in-settings-button + .setting-reset-button.monaco-button {
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .setting-item .setting-item-value > .setting-item-control > .edit-in-settings-button + .setting-reset-button.monaco-button {
display: none;
}
@@ -286,22 +273,19 @@
padding-right: 10px;
}
/*
Ensure the is-configured indicators can appear outside of the list items themselves:
- Disable overflow: hidden on the listrow
- Allocate some space with a margin on the list-row
- Make up for that space with a negative margin on the settings-body
This is risky, consider a different approach
*/
.settings-editor .settings-tree-container .setting-item {
overflow: visible;
}
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .settings-group-title-label {
margin: 0px;
padding: 5px 0px;
font-size: 13px;
padding-left: 5px !important;
}
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .settings-group-level-1 {
padding-top: 16px;
font-size: 24px;
}
.settings-editor > .settings-editor-right > .settings-body > .settings-tree-container .settings-group-level-2 {
padding-top: 16px;
font-size: 20px;
}
.settings-editor > .settings-editor-right > .settings-body .settings-feedback-button {
src/vs/workbench/parts/preferences/browser/settingsEditor2.ts
+2 -2
View File
@@ -284,8 +284,8 @@ export class SettingsEditor2 extends BaseEditor {
{
ariaLabel: localize('treeAriaLabel', "Settings"),
showLoading: false,
// indentPixels: 0,
twistiePixels: 15,
indentPixels: 0,
twistiePixels: 0,
});
this._register(registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
src/vs/workbench/parts/preferences/browser/settingsTree.ts
+19 -7
View File
@@ -53,6 +53,7 @@ export abstract class SettingsTreeElement {
export class SettingsTreeGroupElement extends SettingsTreeElement {
children: (SettingsTreeGroupElement | SettingsTreeSettingElement)[];
label: string;
level: number;
}
export class SettingsTreeSettingElement extends SettingsTreeElement {
@@ -110,6 +111,7 @@ export class SettingsTreeModel {
element.id = tocEntry.id;
element.label = tocEntry.label;
element.parent = parent;
element.level = this.getDepth(element);
if (tocEntry.children) {
element.children = tocEntry.children.map(child => this.createSettingsTreeGroupElement(child, element));
@@ -121,6 +123,14 @@ export class SettingsTreeModel {
return element;
}
private getDepth(element: SettingsTreeElement): number {
if (element.parent) {
return 1 + this.getDepth(element.parent);
} else {
return 0;
}
}
private createSettingsTreeSettingElement(setting: ISetting, parent: SettingsTreeGroupElement): SettingsTreeSettingElement {
const element = createSettingsTreeSettingElement(setting, parent, this.viewState.settingsTarget, this.configurationService);
this._treeElementsById.set(element.id, element);
@@ -371,7 +381,6 @@ interface ISettingItemTemplate extends IDisposableTemplate {
interface IGroupTitleTemplate extends IDisposableTemplate {
context?: SettingsTreeGroupElement;
parent: HTMLElement;
labelElement: HTMLElement;
}
const SETTINGS_ELEMENT_TEMPLATE_ID = 'settings.entry.template';
@@ -404,7 +413,7 @@ export class SettingsRenderer implements IRenderer {
getHeight(tree: ITree, element: SettingsTreeElement): number {
if (element instanceof SettingsTreeGroupElement) {
return 30;
return 40 + (4 * element.level);
}
if (element instanceof SettingsTreeSettingElement) {
@@ -457,12 +466,9 @@ export class SettingsRenderer implements IRenderer {
private renderGroupTitleTemplate(container: HTMLElement): IGroupTitleTemplate {
DOM.addClass(container, 'group-title');
const labelElement = DOM.append(container, $('h3.settings-group-title-label'));
const toDispose = [];
const template: IGroupTitleTemplate = {
parent: container,
labelElement,
toDispose
};
@@ -514,11 +520,17 @@ export class SettingsRenderer implements IRenderer {
}
if (templateId === SETTINGS_GROUP_ELEMENT_TEMPLATE_ID) {
(<IGroupTitleTemplate>template).labelElement.textContent = (<SettingsTreeGroupElement>element).label;
return;
return this.renderGroupElement(<SettingsTreeGroupElement>element, template);
}
}
private renderGroupElement(element: SettingsTreeGroupElement, template: IGroupTitleTemplate): void {
template.parent.innerHTML = '';
const labelElement = DOM.append(template.parent, $('h3.settings-group-title-label'));
labelElement.classList.add(`settings-group-level-${element.level}`);
labelElement.textContent = (<SettingsTreeGroupElement>element).label;
}
private elementIsSelected(tree: ITree, element: SettingsTreeElement): boolean {
const selection = tree.getSelection();
const selectedElement: SettingsTreeElement = selection && selection[0];