Polish onboarding page (#35367)

- 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
This commit is contained in:
Anthony Eid 2025-07-30 16:35:21 -04:00 committed by GitHub
parent afcb8f2a3f
commit 2d4afd2119
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 92 additions and 32 deletions

View file

@ -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(),
),
),
),
)

View file

@ -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)))
}
}

View file

@ -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(),
)

View file

@ -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()