ui: Adjust tree view item alignment (#52776)

Danilo Leal created 1 week ago

Adjusting the alignment of things in the tree view item given it got
affected after I took out the square shape from the disclosure button in
https://github.com/zed-industries/zed/pull/52322. Now, the indent line
and the labels are back to being fully aligned.

Release Notes:

- N/A

Change summary

crates/ui/src/components/tree_view_item.rs | 50 ++++++++++++-----------
1 file changed, 26 insertions(+), 24 deletions(-)

Detailed changes

crates/ui/src/components/tree_view_item.rs

@@ -139,12 +139,17 @@ impl RenderOnce for TreeViewItem {
         let focused_border = cx.theme().colors().border_focused;
 
         let item_size = rems_from_px(28.);
-        let indentation_line = h_flex().size(item_size).flex_none().justify_center().child(
-            div()
-                .w_px()
-                .h_full()
-                .bg(cx.theme().colors().border.opacity(0.5)),
-        );
+        let indentation_line = h_flex()
+            .h(item_size)
+            .w(px(22.))
+            .flex_none()
+            .justify_center()
+            .child(
+                div()
+                    .w_px()
+                    .h_full()
+                    .bg(cx.theme().colors().border.opacity(0.5)),
+            );
 
         h_flex()
             .id(self.id)
@@ -156,6 +161,9 @@ impl RenderOnce for TreeViewItem {
                     .cursor_pointer()
                     .size_full()
                     .h(item_size)
+                    .pl_0p5()
+                    .pr_1()
+                    .gap_2()
                     .rounded_sm()
                     .border_1()
                     .border_color(transparent_border)
@@ -168,30 +176,24 @@ impl RenderOnce for TreeViewItem {
                         let label = self.label;
 
                         if self.root_item {
-                            this.px_1()
-                                .gap_2p5()
-                                .child(
-                                    Disclosure::new("toggle", self.expanded)
-                                        .when_some(
-                                            self.on_toggle.clone(),
-                                            |disclosure, on_toggle| {
-                                                disclosure.on_toggle_expanded(on_toggle)
-                                            },
-                                        )
-                                        .opened_icon(IconName::ChevronDown)
-                                        .closed_icon(IconName::ChevronRight),
-                                )
-                                .child(
-                                    Label::new(label)
-                                        .when(!self.selected, |this| this.color(Color::Muted)),
-                                )
+                            this.child(
+                                Disclosure::new("toggle", self.expanded)
+                                    .when_some(self.on_toggle.clone(), |disclosure, on_toggle| {
+                                        disclosure.on_toggle_expanded(on_toggle)
+                                    })
+                                    .opened_icon(IconName::ChevronDown)
+                                    .closed_icon(IconName::ChevronRight),
+                            )
+                            .child(
+                                Label::new(label)
+                                    .when(!self.selected, |this| this.color(Color::Muted)),
+                            )
                         } else {
                             this.child(indentation_line).child(
                                 h_flex()
                                     .id("nested_inner_tree_view_item")
                                     .w_full()
                                     .flex_grow()
-                                    .px_1()
                                     .child(
                                         Label::new(label)
                                             .when(!self.selected, |this| this.color(Color::Muted)),