From c0651a8b865dbc584983c9c1e217299abd062c1b Mon Sep 17 00:00:00 2001 From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Date: Wed, 8 Oct 2025 12:27:22 -0300 Subject: [PATCH] settings ui: Add a handful of design tweaks (#39784) Release Notes: - N/A --- crates/ui/src/components/tree_view_item.rs | 101 +++++++++++++-------- crates/ui_input/src/number_field.rs | 4 +- 2 files changed, 66 insertions(+), 39 deletions(-) diff --git a/crates/ui/src/components/tree_view_item.rs b/crates/ui/src/components/tree_view_item.rs index 5c038585eb600fbb335bb1a52be2fe65d68beffa..88fe3e5a3ec00d1b06866e3aa20910ee5b51db0f 100644 --- a/crates/ui/src/components/tree_view_item.rs +++ b/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)), + }), ) } } diff --git a/crates/ui_input/src/number_field.rs b/crates/ui_input/src/number_field.rs index 3be609bbe41ac45dac4179ad46594f731d6ac88b..b3f50584d69d9adc965028400c26fa68074b9b84 100644 --- a/crates/ui_input/src/number_field.rs +++ b/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 RenderOnce for NumberField { let base_button = |icon: IconName| { h_flex() - .cursor(CursorStyle::PointingHand) + .cursor_pointer() .p_1p5() .size_full() .justify_center()