compact cozy

Author: vladitasev

packages/main/src/TreeListItem.hbs

@@ -1,7 +1,7 @@
 {{>include "./ListItem.hbs"}}
 
 {{#*inline "listItemPreContent"}}
-	<div class="ui5-li-tree-toggle-box" style="{{styles.toggleBox}}">
+	<div class="ui5-li-tree-toggle-box" style="padding-left: {{effectiveLevel}}rem; padding-left: calc(var(--_ui5-tree-indent-step) * {{effectiveLevel}});">
 		{{#if showToggleButton}}
 			<ui5-icon
 				class="ui5-li-tree-toggle-icon"

packages/main/src/TreeListItem.js

@@ -154,14 +154,14 @@ class TreeListItem extends ListItem {
 		await Icon.define();
 	}
 
-	get styles() {
-		const indent = this.level * 0.5;
+	get classes() {
+		const allClasses = super.classes;
+		allClasses.main["ui5-li-root-tree"] = true;
+		return allClasses;
+	}
 
-		return {
-			toggleBox: {
-				"padding-left": `${indent}rem`,
-			},
-		};
+	get effectiveLevel() {
+		return this.level - 1;
 	}
 
 	get hasParent() {

packages/main/src/themes/TreeListItem.css

@@ -2,9 +2,25 @@
 	display: block;
 }
 
+.ui5-li-root-tree {
+    padding-left: 0;
+}
+
 .ui5-li-tree-toggle-box {
-    width: 1rem;
-    margin-right: 0.5rem;
+    width: var(--_ui5-tree-toggle-box-width);
+    height: var(--_ui5-tree-toggle-box-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.ui5-li-tree-toggle-icon {
+    width: var(--_ui5-tree-toggle-icon-size);
+    height: var(--_ui5-tree-toggle-icon-size);
+}
+
+:host([actionable]) .ui5-li-tree-toggle-icon {
+    color: var(--sapButton_TextColor);
 }
 
 :host([active][actionable]) .ui5-li-tree-toggle-icon {

packages/main/src/themes/base/sizes-parameters.css

@@ -4,7 +4,6 @@
 	--_ui5_calendar_header_arrow_button_width: 2.5rem;
 	--_ui5_calendar_header_padding: 0.25rem 0;
 	--_ui5_checkbox_root_side_padding: .6875rem;
-	--_ui5_checkbox_root_side_padding: .6875rem;
 	--_ui5_checkbox_icon_size: 1rem;
 	--_ui5_custom_list_item_height: 3rem;
 	--_ui5_custom_list_item_rb_min_width: 3rem;
@@ -59,6 +58,12 @@
 
 	/* Responsive Popover */
 	--_ui5-responnsive_popover_header_height: 2.75rem;
+
+	/* Tree */
+	--_ui5-tree-indent-step: 1.5rem;
+	--_ui5-tree-toggle-box-width: 2.75rem;
+	--_ui5-tree-toggle-box-height: 2.25rem;
+	--_ui5-tree-toggle-icon-size: 1.0625rem;
 }
 
 [data-ui5-compact-size],
@@ -74,26 +79,14 @@
 	--_ui5_calendar_header_arrow_button_width: 2rem;
 
 	/* CheckBox */
-	--_ui5_checkbox_wrapper_padding: 0;
-	--_ui5_checkbox_root_side_padding: var(--_ui5_checkbox_wrapped_focus_padding);
 	--_ui5_checkbox_root_side_padding: var(--_ui5_checkbox_wrapped_focus_padding);
 	--_ui5_checkbox_wrapped_content_margin_top: var(--_ui5_checkbox_compact_wrapped_label_margin_top);
 	--_ui5_checkbox_wrapped_focus_left_top_bottom_position: var(--_ui5_checkbox_compact_focus_position);
 	--_ui5_checkbox_width_height: var(--_ui5_checkbox_compact_width_height);
-	--_ui5_checkbox_width_height: var(--_ui5_checkbox_compact_width_height);
 	--_ui5_checkbox_wrapper_padding: var(--_ui5_checkbox_compact_wrapper_padding);
 	--_ui5_checkbox_focus_position: var(--_ui5_checkbox_compact_focus_position);
-	--_ui5_checkbox_focus_position: var(--_ui5_checkbox_compact_focus_position);
-	--_ui5_checkbox_focus_position: var(--_ui5_checkbox_compact_focus_position);
-	--_ui5_checkbox_focus_position: var(--_ui5_checkbox_compact_focus_position);
-	--_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size);
 	--_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size);
-	--_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size);
-	--_ui5_checkbox_inner_width_height: var(--_ui5_checkbox_compact_inner_size);
-	--_ui5_checkbox_wrapper_padding: var(--_ui5_checkbox_compact_wrapper_padding);
 	--_ui5_checkbox_icon_size: .75rem;
-	--_ui5_checkbox_wrapper_padding: var(--_ui5_checkbox_compact_wrapper_padding);
-	--_ui5_checkbox_focus_position: var(--_ui5_checkbox_compact_focus_position);
 
 
 	/* Custom List Item */
@@ -182,4 +175,10 @@
 
 	/* Responsive Popover */
 	--_ui5-responnsive_popover_header_height: 2.5rem;
-}
+
+	/* Tree */
+	--_ui5-tree-indent-step: 0.5rem;
+	--_ui5-tree-toggle-box-width: 2rem;
+	--_ui5-tree-toggle-box-height: 1.5rem;
+	--_ui5-tree-toggle-icon-size: 0.8125rem;
+}

packages/main/test/pages/Tree.html

@@ -42,8 +42,12 @@
 	</style>
 </head>
 
-<body style="background-color: var(--sapBackgroundColor);">
+<body style="padding: 5px; background-color: var(--sapBackgroundColor);">
 
+	<ui5-segmentedbutton id="density">
+		<ui5-togglebutton pressed>Cozy</ui5-togglebutton>
+		<ui5-togglebutton>Compact</ui5-togglebutton>
+	</ui5-segmentedbutton>
 
 	<br><br>
 
@@ -105,6 +109,16 @@
 	</ui5-tree>
 
 	<script>
+
+		document.getElementById("density").addEventListener("selectionChange", function(event) {
+			var selectedButton = event.detail.selectedButton;
+			if (selectedButton.textContent === "Compact") {
+				document.body.classList.add("sapUiSizeCompact");
+			} else {
+				document.body.classList.remove("sapUiSizeCompact");
+			}
+		});
+
 		document.getElementById("tree").addEventListener("itemClick", function(event) {
 			console.log("Item clicked: ", event.detail.item);
 		});