Settings editor as tree - fix expand sizing and padding

roblourens · roblourens · commit e26ef4c2ccea · 2018-05-23T10:35:54.000-07:00
diff --git a/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css b/src/vs/workbench/parts/preferences/browser/media/settingsEditor2.css
@@ -111,6 +111,7 @@
 	white-space: normal;
 	display: flex;
 	height: 100%;
+	min-height: 75px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item.odd:not(.focused):not(.selected):not(:hover),
@@ -121,11 +122,13 @@
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-left {
 	flex: 1;
+	padding-top: 3px;
+	padding-bottom: 12px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item > .setting-item-right {
 	min-width: 180px;
-	margin: 21px 10px;
+	margin: 21px 10px 0px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-title {
@@ -138,12 +141,13 @@
 	font-style: italic;
 }
 
-.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-label {
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-label,
+.settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category {
 	font-weight: bold;
+	font-size: 14px;
 }
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-category {
-	font-weight: bold;
 	opacity: 0.7;
 }
 
@@ -157,7 +161,7 @@
 
 .settings-editor > .settings-body > .settings-tree-container .setting-item .setting-item-description {
 	opacity: 0.7;
-	margin-top: 5px;
+	margin-top: 3px;
 	height: 36px;
 	overflow: hidden;
 	white-space: pre-wrap;
@@ -225,7 +229,7 @@
 .settings-editor > .settings-body > .settings-tree-container .setting-item .expand-indicator {
 	visibility: hidden;
 	position: absolute;
-	bottom: 3px;
+	bottom: -1px;
 	width: calc(100% - 190px);
 	text-align: center;
 	opacity: .5;
diff --git a/src/vs/workbench/parts/preferences/browser/settingsTree.ts b/src/vs/workbench/parts/preferences/browser/settingsTree.ts
@@ -242,6 +242,8 @@ export interface ISettingChangeEvent {
 
 export class SettingsRenderer implements IRenderer {
 
+	private static readonly SETTING_ROW_HEIGHT = 75;
+
 	private readonly _onDidClickButton: Emitter<string> = new Emitter<string>();
 	public readonly onDidClickButton: Event<string> = this._onDidClickButton.event;
 
@@ -272,7 +274,7 @@ export class SettingsRenderer implements IRenderer {
 			if (isSelected) {
 				return this.measureSettingElementHeight(tree, element);
 			} else {
-				return 68;
+				return SettingsRenderer.SETTING_ROW_HEIGHT;
 			}
 		}
 
@@ -431,11 +433,10 @@ export class SettingsRenderer implements IRenderer {
 		template.labelElement.textContent = settingKeyDisplay.label;
 		template.labelElement.title = titleTooltip;
 		template.descriptionElement.textContent = element.description;
-		template.descriptionElement.title = element.description;
 
 		if (!measuring) {
 			const expandedHeight = this.measureSettingElementHeight(tree, element);
-			const isExpandable = expandedHeight > 68;
+			const isExpandable = expandedHeight > SettingsRenderer.SETTING_ROW_HEIGHT;
 			DOM.toggleClass(template.parent, 'is-expandable', isExpandable);
 
 			if (isSelected) {
