settings ui: Add a handful of design tweaks (#39784)

Danilo Leal created 3 weeks ago

Release Notes:

- N/A

Change summary

crates/ui/src/components/tree_view_item.rs | 101 +++++++++++++++--------
crates/ui_input/src/number_field.rs        |   4 
2 files changed, 66 insertions(+), 39 deletions(-)

Detailed changes

crates/ui/src/components/tree_view_item.rs

@@ -127,6 +127,7 @@ impl RenderOnce for TreeViewItem {
     fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
         let selected_bg = cx.theme().colors().element_active.opacity(0.5);
 
+        let transparent_border = cx.theme().colors().border.opacity(0.);
         let selected_border = cx.theme().colors().border.opacity(0.6);
         let focused_border = cx.theme().colors().border_focused;
 
@@ -145,17 +146,8 @@ impl RenderOnce for TreeViewItem {
             .child(
                 h_flex()
                     .id("inner_tree_view_item")
-                    .group("tree_view_item")
                     .cursor_pointer()
                     .size_full()
-                    .relative()
-                    .border_1()
-                    .focus(|s| s.border_color(focused_border))
-                    .when_some(self.tab_index, |this, index| this.tab_index(index))
-                    .when(self.selected, |this| {
-                        this.border_color(selected_border).bg(selected_bg)
-                    })
-                    .hover(|s| s.bg(cx.theme().colors().element_hover))
                     .map(|this| {
                         let label = self.label;
 
@@ -164,6 +156,14 @@ impl RenderOnce for TreeViewItem {
                                 .px_1()
                                 .gap_2p5()
                                 .rounded_sm()
+                                .border_1()
+                                .border_color(transparent_border)
+                                .when(self.selected, |this| {
+                                    this.border_color(selected_border).bg(selected_bg)
+                                })
+                                .focus(|s| s.border_color(focused_border))
+                                .hover(|s| s.bg(cx.theme().colors().element_hover))
+                                .when_some(self.tab_index, |this, index| this.tab_index(index))
                                 .child(
                                     Disclosure::new("toggle", self.expanded)
                                         .when_some(
@@ -179,6 +179,33 @@ impl RenderOnce for TreeViewItem {
                                     Label::new(label)
                                         .when(!self.selected, |this| this.color(Color::Muted)),
                                 )
+                                .when_some(self.on_hover, |this, on_hover| this.on_hover(on_hover))
+                                .when_some(
+                                    self.on_click.filter(|_| !self.disabled),
+                                    |this, on_click| {
+                                        if self.root_item
+                                            && let Some(on_toggle) = self.on_toggle.clone()
+                                        {
+                                            this.on_click(move |event, window, cx| {
+                                                if event.is_keyboard() {
+                                                    on_click(event, window, cx);
+                                                    on_toggle(event, window, cx);
+                                                } else {
+                                                    on_click(event, window, cx);
+                                                }
+                                            })
+                                        } else {
+                                            this.on_click(on_click)
+                                        }
+                                    },
+                                )
+                                .when_some(self.on_secondary_mouse_down, |this, on_mouse_down| {
+                                    this.on_mouse_down(
+                                        MouseButton::Right,
+                                        move |event, window, cx| (on_mouse_down)(event, window, cx),
+                                    )
+                                })
+                                .when_some(self.tooltip, |this, tooltip| this.tooltip(tooltip))
                         } else {
                             this.child(indentation_line).child(
                                 h_flex()
@@ -187,40 +214,40 @@ impl RenderOnce for TreeViewItem {
                                     .flex_grow()
                                     .px_1()
                                     .rounded_sm()
+                                    .border_1()
+                                    .border_color(transparent_border)
+                                    .when(self.selected, |this| {
+                                        this.border_color(selected_border).bg(selected_bg)
+                                    })
+                                    .focus(|s| s.border_color(focused_border))
                                     .hover(|s| s.bg(cx.theme().colors().element_hover))
+                                    .when_some(self.tab_index, |this, index| this.tab_index(index))
                                     .child(
                                         Label::new(label)
                                             .when(!self.selected, |this| this.color(Color::Muted)),
-                                    ),
+                                    )
+                                    .when_some(self.on_hover, |this, on_hover| {
+                                        this.on_hover(on_hover)
+                                    })
+                                    .when_some(
+                                        self.on_click.filter(|_| !self.disabled),
+                                        |this, on_click| this.on_click(on_click),
+                                    )
+                                    .when_some(
+                                        self.on_secondary_mouse_down,
+                                        |this, on_mouse_down| {
+                                            this.on_mouse_down(
+                                                MouseButton::Right,
+                                                move |event, window, cx| {
+                                                    (on_mouse_down)(event, window, cx)
+                                                },
+                                            )
+                                        },
+                                    )
+                                    .when_some(self.tooltip, |this, tooltip| this.tooltip(tooltip)),
                             )
                         }
-                    })
-                    .when_some(self.on_hover, |this, on_hover| this.on_hover(on_hover))
-                    .when_some(
-                        self.on_click.filter(|_| !self.disabled),
-                        |this, on_click| {
-                            if self.root_item
-                                && let Some(on_toggle) = self.on_toggle.clone()
-                            {
-                                this.on_click(move |event, window, cx| {
-                                    if event.is_keyboard() {
-                                        on_click(event, window, cx);
-                                        on_toggle(event, window, cx);
-                                    } else {
-                                        on_click(event, window, cx);
-                                    }
-                                })
-                            } else {
-                                this.on_click(on_click)
-                            }
-                        },
-                    )
-                    .when_some(self.on_secondary_mouse_down, |this, on_mouse_down| {
-                        this.on_mouse_down(MouseButton::Right, move |event, window, cx| {
-                            (on_mouse_down)(event, window, cx)
-                        })
-                    })
-                    .when_some(self.tooltip, |this, tooltip| this.tooltip(tooltip)),
+                    }),
             )
     }
 }

crates/ui_input/src/number_field.rs

@@ -6,7 +6,7 @@ use std::{
 };
 
 use editor::{Editor, EditorStyle};
-use gpui::{ClickEvent, CursorStyle, Entity, FocusHandle, Focusable, FontWeight, Modifiers};
+use gpui::{ClickEvent, Entity, FocusHandle, Focusable, FontWeight, Modifiers};
 
 use settings::{CodeFade, MinimumContrast};
 use ui::prelude::*;
@@ -352,7 +352,7 @@ impl<T: NumberFieldType> RenderOnce for NumberField<T> {
 
         let base_button = |icon: IconName| {
             h_flex()
-                .cursor(CursorStyle::PointingHand)
+                .cursor_pointer()
                 .p_1p5()
                 .size_full()
                 .justify_center()