Polish onboarding page (#35367)

Anthony Eid created

- Added borders to the numeric stepper.
- Changed the hover mouse style for SwitchField.
- Made the edit page toggle buttons more responsive.

Release Notes:

- N/A

Change summary

crates/onboarding/src/editing_page.rs       | 66 ++++++++++++++++------
crates/onboarding/src/onboarding.rs         |  4 
crates/ui/src/components/numeric_stepper.rs | 47 +++++++++++++--
crates/ui/src/components/toggle.rs          |  7 +
4 files changed, 92 insertions(+), 32 deletions(-)

Detailed changes

crates/onboarding/src/editing_page.rs 🔗

@@ -21,6 +21,14 @@ fn read_show_mini_map(cx: &App) -> ShowMinimap {
 fn write_show_mini_map(show: ShowMinimap, cx: &mut App) {
     let fs = <dyn Fs>::global(cx);
 
+    // This is used to speed up the UI
+    // the UI reads the current values to get what toggle state to show on buttons
+    // there's a slight delay if we just call update_settings_file so we manually set
+    // the value here then call update_settings file to get around the delay
+    let mut curr_settings = EditorSettings::get_global(cx).clone();
+    curr_settings.minimap.show = show;
+    EditorSettings::override_global(curr_settings, cx);
+
     update_settings_file::<EditorSettings>(fs, cx, move |editor_settings, _| {
         editor_settings.minimap.get_or_insert_default().show = Some(show);
     });
@@ -36,6 +44,10 @@ fn read_inlay_hints(cx: &App) -> bool {
 fn write_inlay_hints(enabled: bool, cx: &mut App) {
     let fs = <dyn Fs>::global(cx);
 
+    let mut curr_settings = AllLanguageSettings::get_global(cx).clone();
+    curr_settings.defaults.inlay_hints.enabled = enabled;
+    AllLanguageSettings::override_global(curr_settings, cx);
+
     update_settings_file::<AllLanguageSettings>(fs, cx, move |all_language_settings, cx| {
         all_language_settings
             .defaults
@@ -57,6 +69,14 @@ fn read_git_blame(cx: &App) -> bool {
 fn set_git_blame(enabled: bool, cx: &mut App) {
     let fs = <dyn Fs>::global(cx);
 
+    let mut curr_settings = ProjectSettings::get_global(cx).clone();
+    curr_settings
+        .git
+        .inline_blame
+        .get_or_insert_default()
+        .enabled = enabled;
+    ProjectSettings::override_global(curr_settings, cx);
+
     update_settings_file::<ProjectSettings>(fs, cx, move |project_settings, _| {
         project_settings
             .git
@@ -171,16 +191,19 @@ pub(crate) fn render_editing_page(window: &mut Window, cx: &mut App) -> impl Int
                                         menu
                                     }),
                                 )))
-                                .child(NumericStepper::new(
-                                    "ui-font-size",
-                                    ui_font_size.to_string(),
-                                    move |_, _, cx| {
-                                        write_ui_font_size(ui_font_size - px(1.), cx);
-                                    },
-                                    move |_, _, cx| {
-                                        write_ui_font_size(ui_font_size + px(1.), cx);
-                                    },
-                                )),
+                                .child(
+                                    NumericStepper::new(
+                                        "ui-font-size",
+                                        ui_font_size.to_string(),
+                                        move |_, _, cx| {
+                                            write_ui_font_size(ui_font_size - px(1.), cx);
+                                        },
+                                        move |_, _, cx| {
+                                            write_ui_font_size(ui_font_size + px(1.), cx);
+                                        },
+                                    )
+                                    .border(),
+                                ),
                         ),
                 )
                 .child(
@@ -222,16 +245,19 @@ pub(crate) fn render_editing_page(window: &mut Window, cx: &mut App) -> impl Int
                                         menu
                                     }),
                                 ))
-                                .child(NumericStepper::new(
-                                    "buffer-font-size",
-                                    buffer_font_size.to_string(),
-                                    move |_, _, cx| {
-                                        write_buffer_font_size(buffer_font_size - px(1.), cx);
-                                    },
-                                    move |_, _, cx| {
-                                        write_buffer_font_size(buffer_font_size + px(1.), cx);
-                                    },
-                                )),
+                                .child(
+                                    NumericStepper::new(
+                                        "buffer-font-size",
+                                        buffer_font_size.to_string(),
+                                        move |_, _, cx| {
+                                            write_buffer_font_size(buffer_font_size - px(1.), cx);
+                                        },
+                                        move |_, _, cx| {
+                                            write_buffer_font_size(buffer_font_size + px(1.), cx);
+                                        },
+                                    )
+                                    .border(),
+                                ),
                         ),
                 ),
         )

crates/onboarding/src/onboarding.rs 🔗

@@ -376,7 +376,7 @@ impl Render for Onboarding {
                             ),
                     )
                     .p_1()
-                    .child(Divider::horizontal_dashed())
+                    .child(Divider::horizontal())
                     .child(
                         v_flex().gap_1().children([
                             self.render_page_nav(SelectedPage::Basics, window, cx)
@@ -388,7 +388,7 @@ impl Render for Onboarding {
                         ]),
                     ),
             )
-            // .child(Divider::vertical_dashed())
+            .child(div().child(Divider::vertical()).h_full())
             .child(div().w_2_3().h_full().child(self.render_page(window, cx)))
     }
 }

crates/ui/src/components/numeric_stepper.rs 🔗

@@ -1,6 +1,6 @@
 use gpui::ClickEvent;
 
-use crate::{IconButtonShape, prelude::*};
+use crate::{Divider, IconButtonShape, prelude::*};
 
 #[derive(IntoElement, RegisterComponent)]
 pub struct NumericStepper {
@@ -11,6 +11,7 @@ pub struct NumericStepper {
     /// Whether to reserve space for the reset button.
     reserve_space_for_reset: bool,
     on_reset: Option<Box<dyn Fn(&ClickEvent, &mut Window, &mut App) + 'static>>,
+    border: bool,
 }
 
 impl NumericStepper {
@@ -25,6 +26,7 @@ impl NumericStepper {
             value: value.into(),
             on_decrement: Box::new(on_decrement),
             on_increment: Box::new(on_increment),
+            border: false,
             reserve_space_for_reset: false,
             on_reset: None,
         }
@@ -42,6 +44,11 @@ impl NumericStepper {
         self.on_reset = Some(Box::new(on_reset));
         self
     }
+
+    pub fn border(mut self) -> Self {
+        self.border = true;
+        self
+    }
 }
 
 impl RenderOnce for NumericStepper {
@@ -74,8 +81,11 @@ impl RenderOnce for NumericStepper {
             .child(
                 h_flex()
                     .gap_1()
+                    .when(self.border, |this| {
+                        this.border_1().border_color(cx.theme().colors().border)
+                    })
                     .px_1()
-                    .rounded_xs()
+                    .rounded_sm()
                     .bg(cx.theme().colors().editor_background)
                     .child(
                         IconButton::new("decrement", IconName::Dash)
@@ -83,7 +93,13 @@ impl RenderOnce for NumericStepper {
                             .icon_size(icon_size)
                             .on_click(self.on_decrement),
                     )
+                    .when(self.border, |this| {
+                        this.child(Divider::vertical().color(super::DividerColor::Border))
+                    })
                     .child(Label::new(self.value))
+                    .when(self.border, |this| {
+                        this.child(Divider::vertical().color(super::DividerColor::Border))
+                    })
                     .child(
                         IconButton::new("increment", IconName::Plus)
                             .shape(shape)
@@ -113,12 +129,27 @@ impl Component for NumericStepper {
 
     fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
         Some(
-            div()
-                .child(NumericStepper::new(
-                    "numeric-stepper-component-preview",
-                    "10",
-                    move |_, _, _| {},
-                    move |_, _, _| {},
+            v_flex()
+                .child(single_example(
+                    "Borderless",
+                    NumericStepper::new(
+                        "numeric-stepper-component-preview",
+                        "10",
+                        move |_, _, _| {},
+                        move |_, _, _| {},
+                    )
+                    .into_any_element(),
+                ))
+                .child(single_example(
+                    "Border",
+                    NumericStepper::new(
+                        "numeric-stepper-with-border-component-preview",
+                        "10",
+                        move |_, _, _| {},
+                        move |_, _, _| {},
+                    )
+                    .border()
+                    .into_any_element(),
                 ))
                 .into_any_element(),
         )

crates/ui/src/components/toggle.rs 🔗

@@ -1,6 +1,6 @@
 use gpui::{
-    AnyElement, AnyView, ClickEvent, ElementId, Hsla, IntoElement, Styled, Window, div, hsla,
-    prelude::*,
+    AnyElement, AnyView, ClickEvent, CursorStyle, ElementId, Hsla, IntoElement, Styled, Window,
+    div, hsla, prelude::*,
 };
 use std::sync::Arc;
 
@@ -609,6 +609,9 @@ impl RenderOnce for SwitchField {
     fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
         h_flex()
             .id(SharedString::from(format!("{}-container", self.id)))
+            .when(!self.disabled, |this| {
+                this.hover(|this| this.cursor(CursorStyle::PointingHand))
+            })
             .w_full()
             .gap_4()
             .justify_between()