diff --git a/crates/onboarding/src/editing_page.rs b/crates/onboarding/src/editing_page.rs index 7b965facb5e8cf8e06df4fccdecf7894c51610d5..4fd968faaff8ae60ca5f862dfd13d8a3562f4c89 100644 --- a/crates/onboarding/src/editing_page.rs +++ b/crates/onboarding/src/editing_page.rs @@ -11,7 +11,7 @@ use ui::{ ButtonLike, PopoverMenu, SwitchField, ToggleButtonGroup, ToggleButtonGroupStyle, ToggleButtonSimple, ToggleState, Tooltip, prelude::*, }; -use ui_input::{NumericStepper, font_picker}; +use ui_input::{NumberField, font_picker}; use crate::{ImportCursorSettings, ImportVsCodeSettings, SettingsImportState}; @@ -411,7 +411,7 @@ fn font_picker_stepper( write_font_size: fn(Pixels, &mut App), window: &mut Window, cx: &mut App, -) -> NumericStepper { +) -> NumberField { window.with_id(id, |window| { let optimistic_font_size: gpui::Entity> = window.use_state(cx, |_, _| None); optimistic_font_size.update(cx, |optimistic_font_size, _| { @@ -426,7 +426,7 @@ fn font_picker_stepper( .read(cx) .unwrap_or_else(|| font_size.into()); - NumericStepper::new( + NumberField::new( SharedString::new(format!("{}-stepper", id)), stepper_font_size, window, @@ -437,7 +437,6 @@ fn font_picker_stepper( write_font_size(Pixels::from(*new_value), cx); }) .format(|value| format!("{value}px")) - .style(ui_input::NumericStepperStyle::Outlined) .tab_index({ *tab_index += 2; *tab_index - 2 diff --git a/crates/settings_ui/src/page_data.rs b/crates/settings_ui/src/page_data.rs index 8d8a52585a0dc5324be5d41df44495c8ecafaca6..d51060eae17e6669f5b58e519d499d4e470f2334 100644 --- a/crates/settings_ui/src/page_data.rs +++ b/crates/settings_ui/src/page_data.rs @@ -1053,7 +1053,7 @@ pub(crate) fn user_settings_data() -> Vec { }), metadata: None, }), - // todo(settings ui): add units to this numeric stepper + // todo(settings ui): add units to this Number Field SettingsPageItem::SettingItem(SettingItem { title: "Hover Popover Delay", description: "Time to wait in milliseconds before showing the informational hover box", @@ -4021,7 +4021,7 @@ pub(crate) fn project_settings_data() -> Vec { title: "Editing", items: vec![ SettingsPageItem::SectionHeader("Indentation"), - // todo(settings_ui): Needs numeric stepper + // todo(settings_ui): Needs Number Field // SettingsPageItem::SettingItem(SettingItem { // title: "Tab Size", // description: "How many columns a tab should occupy", @@ -4079,7 +4079,7 @@ pub(crate) fn project_settings_data() -> Vec { metadata: None, }), SettingsPageItem::SectionHeader("Wrapping"), - // todo(settings_ui): Needs numeric stepper + // todo(settings_ui): Needs Number Field // SettingsPageItem::SettingItem(SettingItem { // title: "Preferred Line Length", // description: "The column at which to soft-wrap lines, for buffers where soft-wrap is enabled", diff --git a/crates/settings_ui/src/settings_ui.rs b/crates/settings_ui/src/settings_ui.rs index 708dbda7ec217c8b26004b300dc997d4c992afdc..faf439eb061f6016c0482199218236bb177d946b 100644 --- a/crates/settings_ui/src/settings_ui.rs +++ b/crates/settings_ui/src/settings_ui.rs @@ -32,7 +32,7 @@ use ui::{ ContextMenu, Divider, DropdownMenu, DropdownStyle, IconButtonShape, KeyBinding, KeybindingHint, PopoverMenu, Switch, SwitchColor, TreeViewItem, WithScrollbar, prelude::*, }; -use ui_input::{NumericStepper, NumericStepperStyle, NumericStepperType}; +use ui_input::{NumberField, NumberFieldType}; use util::{ResultExt as _, paths::PathStyle, rel_path::RelPath}; use zed_actions::OpenSettingsEditor; @@ -377,31 +377,31 @@ fn init_renderers(cx: &mut App) { render_dropdown(*settings_field, file, window, cx) }) .add_renderer::(|settings_field, file, _, window, cx| { - render_numeric_stepper(*settings_field, file, window, cx) + render_number_field(*settings_field, file, window, cx) }) .add_renderer::(|settings_field, file, _, window, cx| { - render_numeric_stepper(*settings_field, file, window, cx) + render_number_field(*settings_field, file, window, cx) }) .add_renderer::(|settings_field, file, _, window, cx| { - render_numeric_stepper(*settings_field, file, window, cx) + render_number_field(*settings_field, file, window, cx) }) .add_renderer::(|settings_field, file, _, window, cx| { - render_numeric_stepper(*settings_field, file, window, cx) + render_number_field(*settings_field, file, window, cx) }) .add_renderer::>(|settings_field, file, _, window, cx| { - render_numeric_stepper(*settings_field, file, window, cx) + render_number_field(*settings_field, file, window, cx) }) .add_renderer::(|settings_field, file, _, window, cx| { - render_numeric_stepper(*settings_field, file, window, cx) + render_number_field(*settings_field, file, window, cx) }) .add_renderer::(|settings_field, file, _, window, cx| { - render_numeric_stepper(*settings_field, file, window, cx) + render_number_field(*settings_field, file, window, cx) }) .add_renderer::(|settings_field, file, _, window, cx| { - render_numeric_stepper(*settings_field, file, window, cx) + render_number_field(*settings_field, file, window, cx) }) .add_renderer::(|settings_field, file, _, window, cx| { - render_numeric_stepper(*settings_field, file, window, cx) + render_number_field(*settings_field, file, window, cx) }) .add_renderer::(|settings_field, file, _, window, cx| { render_dropdown(*settings_field, file, window, cx) @@ -1718,7 +1718,7 @@ fn render_font_picker( .into_any_element() } -fn render_numeric_stepper( +fn render_number_field( field: SettingField, file: SettingsUiFile, window: &mut Window, @@ -1726,7 +1726,7 @@ fn render_numeric_stepper( ) -> AnyElement { let (_, value) = SettingsStore::global(cx).get_value_from_file(file.to_settings(), field.pick); let value = value.copied().unwrap_or_else(T::min_value); - NumericStepper::new("numeric_stepper", value, window, cx) + NumberField::new("numeric_stepper", value, window, cx) .on_change({ move |value, _window, cx| { let value = *value; @@ -1737,7 +1737,6 @@ fn render_numeric_stepper( } }) .tab_index(0) - .style(NumericStepperStyle::Outlined) .into_any_element() } diff --git a/crates/ui_input/src/numeric_stepper.rs b/crates/ui_input/src/number_field.rs similarity index 65% rename from crates/ui_input/src/numeric_stepper.rs rename to crates/ui_input/src/number_field.rs index 35c9d2705faaa1a70c900f65b7840110b4a6e08c..1823932c7d6248d55f35d835c37b26bb1b9b826f 100644 --- a/crates/ui_input/src/numeric_stepper.rs +++ b/crates/ui_input/src/number_field.rs @@ -9,25 +9,16 @@ use editor::{Editor, EditorStyle}; use gpui::{ClickEvent, Entity, FocusHandle, Focusable, FontWeight, Modifiers}; use settings::{CodeFade, MinimumContrast}; -use ui::{IconButtonShape, prelude::*}; +use ui::prelude::*; #[derive(Debug, Default, Clone, Copy, PartialEq, Eq, Hash)] -pub enum NumericStepperStyle { - Outlined, - #[default] - Ghost, -} - -#[derive(Debug, Default, Clone, Copy, PartialEq, Eq, Hash)] -pub enum NumericStepperMode { +pub enum NumberFieldMode { #[default] Read, Edit, } -pub trait NumericStepperType: - Display + Copy + Clone + Sized + PartialOrd + FromStr + 'static -{ +pub trait NumberFieldType: Display + Copy + Clone + Sized + PartialOrd + FromStr + 'static { fn default_format(value: &Self) -> String { format!("{}", value) } @@ -40,7 +31,7 @@ pub trait NumericStepperType: fn saturating_sub(self, rhs: Self) -> Self; } -impl NumericStepperType for gpui::FontWeight { +impl NumberFieldType for gpui::FontWeight { fn default_step() -> Self { FontWeight(10.0) } @@ -64,7 +55,7 @@ impl NumericStepperType for gpui::FontWeight { } } -impl NumericStepperType for settings::CodeFade { +impl NumberFieldType for settings::CodeFade { fn default_step() -> Self { CodeFade(0.10) } @@ -88,7 +79,7 @@ impl NumericStepperType for settings::CodeFade { } } -impl NumericStepperType for settings::MinimumContrast { +impl NumberFieldType for settings::MinimumContrast { fn default_step() -> Self { MinimumContrast(1.0) } @@ -114,7 +105,7 @@ impl NumericStepperType for settings::MinimumContrast { macro_rules! impl_numeric_stepper_int { ($type:ident) => { - impl NumericStepperType for $type { + impl NumberFieldType for $type { fn default_step() -> Self { 1 } @@ -148,7 +139,7 @@ macro_rules! impl_numeric_stepper_int { macro_rules! impl_numeric_stepper_nonzero_int { ($nonzero:ty, $inner:ty) => { - impl NumericStepperType for $nonzero { + impl NumberFieldType for $nonzero { fn default_step() -> Self { <$nonzero>::new(1).unwrap() } @@ -184,7 +175,7 @@ macro_rules! impl_numeric_stepper_nonzero_int { macro_rules! impl_numeric_stepper_float { ($type:ident) => { - impl NumericStepperType for $type { + impl NumberFieldType for $type { fn default_format(value: &Self) -> String { format!("{:.2}", value) } @@ -234,12 +225,11 @@ impl_numeric_stepper_nonzero_int!(NonZeroU64, u64); impl_numeric_stepper_nonzero_int!(NonZero, usize); #[derive(RegisterComponent)] -pub struct NumericStepper { +pub struct NumberField { id: ElementId, value: T, - style: NumericStepperStyle, focus_handle: FocusHandle, - mode: Entity, + mode: Entity, format: Box String>, large_step: T, small_step: T, @@ -251,12 +241,12 @@ pub struct NumericStepper { tab_index: Option, } -impl NumericStepper { +impl NumberField { pub fn new(id: impl Into, value: T, window: &mut Window, cx: &mut App) -> Self { let id = id.into(); let (mode, focus_handle) = window.with_id(id.clone(), |window| { - let mode = window.use_state(cx, |_, _| NumericStepperMode::default()); + let mode = window.use_state(cx, |_, _| NumberFieldMode::default()); let focus_handle = window.use_state(cx, |_, cx| cx.focus_handle()); (mode, focus_handle) }); @@ -266,7 +256,6 @@ impl NumericStepper { mode, value, focus_handle: focus_handle.read(cx).clone(), - style: NumericStepperStyle::default(), format: Box::new(T::default_format), large_step: T::large_step(), step: T::default_step(), @@ -309,11 +298,6 @@ impl NumericStepper { self } - pub fn style(mut self, style: NumericStepperStyle) -> Self { - self.style = style; - self - } - pub fn on_reset( mut self, on_reset: impl Fn(&ClickEvent, &mut Window, &mut App) + 'static, @@ -333,7 +317,7 @@ impl NumericStepper { } } -impl IntoElement for NumericStepper { +impl IntoElement for NumberField { type Element = gpui::Component; fn into_element(self) -> Self::Element { @@ -341,12 +325,8 @@ impl IntoElement for NumericStepper { } } -impl RenderOnce for NumericStepper { +impl RenderOnce for NumberField { fn render(self, window: &mut Window, cx: &mut App) -> impl IntoElement { - let shape = IconButtonShape::Square; - let icon_size = IconSize::Small; - - let is_outlined = matches!(self.style, NumericStepperStyle::Outlined); let mut tab_index = self.tab_index; let get_step = { @@ -371,8 +351,7 @@ impl RenderOnce for NumericStepper { .when_some(self.on_reset, |this, on_reset| { this.child( IconButton::new("reset", IconName::RotateCcw) - .shape(shape) - .icon_size(icon_size) + .icon_size(IconSize::Small) .when_some(tab_index.as_mut(), |this, tab_index| { *tab_index += 1; this.tab_index(*tab_index - 1) @@ -382,7 +361,6 @@ impl RenderOnce for NumericStepper { }) .child( h_flex() - .when(!is_outlined, |this| this.gap_1()) .map(|decrement| { let decrement_handler = { let value = self.value; @@ -397,57 +375,42 @@ impl RenderOnce for NumericStepper { } }; - if is_outlined { - decrement.child( - h_flex() - .id("decrement_button") - .cursor(gpui::CursorStyle::PointingHand) - .p_1p5() - .size_full() - .justify_center() - .overflow_hidden() - .rounded_tl_sm() - .rounded_bl_sm() - .border_1() - .border_color(cx.theme().colors().border_variant) - .bg(cx.theme().colors().surface_background) - .hover(|s| s.bg(cx.theme().colors().element_hover)) - .child(Icon::new(IconName::Dash).size(IconSize::Small)) - .when_some(tab_index.as_mut(), |this, tab_index| { - *tab_index += 1; - this.tab_index(*tab_index - 1).focus(|style| { - style - .border_color(cx.theme().colors().border_focused) - .bg(cx.theme().colors().element_hover) - }) + decrement.child( + h_flex() + .id("decrement_button") + .cursor(gpui::CursorStyle::PointingHand) + .p_1p5() + .size_full() + .justify_center() + .overflow_hidden() + .rounded_tl_sm() + .rounded_bl_sm() + .border_1() + .border_color(cx.theme().colors().border_variant) + .bg(cx.theme().colors().surface_background) + .hover(|s| s.bg(cx.theme().colors().element_hover)) + .child(Icon::new(IconName::Dash).size(IconSize::Small)) + .when_some(tab_index.as_mut(), |this, tab_index| { + *tab_index += 1; + this.tab_index(*tab_index - 1).focus(|style| { + style + .border_color(cx.theme().colors().border_focused) + .bg(cx.theme().colors().element_hover) }) - .on_click(decrement_handler), - ) - } else { - decrement.child( - IconButton::new("decrement", IconName::Dash) - .shape(shape) - .icon_size(icon_size) - .when_some(tab_index.as_mut(), |this, tab_index| { - *tab_index += 1; - this.tab_index(*tab_index - 1) - }) - .on_click(decrement_handler), - ) - } + }) + .on_click(decrement_handler), + ) }) .child( h_flex() .min_w_16() .size_full() - .when(is_outlined, |this| { - this.border_y_1() - .border_color(cx.theme().colors().border_variant) - .bg(cx.theme().colors().surface_background) - }) + .border_y_1() + .border_color(cx.theme().colors().border_variant) + .bg(cx.theme().colors().surface_background) .in_focus(|this| this.border_color(cx.theme().colors().border_focused)) .child(match *self.mode.read(cx) { - NumericStepperMode::Read => h_flex() + NumberFieldMode::Read => h_flex() .id("numeric_stepper_label") .px_1() .flex_1() @@ -466,12 +429,12 @@ impl RenderOnce for NumericStepper { move |click, _, _cx| { if click.click_count() == 2 || click.is_keyboard() { // Edit mode is disabled until we implement center text alignment for editor - // mode.write(cx, NumericStepperMode::Edit); + // mode.write(cx, NumberFieldMode::Edit); } } }) .into_any_element(), - NumericStepperMode::Edit => h_flex() + NumberFieldMode::Edit => h_flex() .flex_1() .child(window.use_state(cx, { |window, cx| { @@ -506,7 +469,7 @@ impl RenderOnce for NumericStepper { } on_change(&new_value, window, cx); }; - mode.write(cx, NumericStepperMode::Read); + mode.write(cx, NumberFieldMode::Read); } }) .detach(); @@ -537,56 +500,43 @@ impl RenderOnce for NumericStepper { } }; - if is_outlined { - increment.child( - h_flex() - .id("increment_button") - .cursor(gpui::CursorStyle::PointingHand) - .p_1p5() - .size_full() - .justify_center() - .overflow_hidden() - .rounded_tr_sm() - .rounded_br_sm() - .border_1() - .border_color(cx.theme().colors().border_variant) - .bg(cx.theme().colors().surface_background) - .hover(|s| s.bg(cx.theme().colors().element_hover)) - .child(Icon::new(IconName::Plus).size(IconSize::Small)) - .when_some(tab_index.as_mut(), |this, tab_index| { - *tab_index += 1; - this.tab_index(*tab_index - 1).focus(|style| { - style - .border_color(cx.theme().colors().border_focused) - .bg(cx.theme().colors().element_hover) - }) - }) - .on_click(increment_handler), - ) - } else { - increment.child( - IconButton::new("increment", IconName::Plus) - .shape(shape) - .icon_size(icon_size) - .when_some(tab_index.as_mut(), |this, tab_index| { - *tab_index += 1; - this.tab_index(*tab_index - 1) + increment.child( + h_flex() + .id("increment_button") + .cursor(gpui::CursorStyle::PointingHand) + .p_1p5() + .size_full() + .justify_center() + .overflow_hidden() + .rounded_tr_sm() + .rounded_br_sm() + .border_1() + .border_color(cx.theme().colors().border_variant) + .bg(cx.theme().colors().surface_background) + .hover(|s| s.bg(cx.theme().colors().element_hover)) + .child(Icon::new(IconName::Plus).size(IconSize::Small)) + .when_some(tab_index.as_mut(), |this, tab_index| { + *tab_index += 1; + this.tab_index(*tab_index - 1).focus(|style| { + style + .border_color(cx.theme().colors().border_focused) + .bg(cx.theme().colors().element_hover) }) - .on_click(increment_handler), - ) - } + }) + .on_click(increment_handler), + ) }), ) } } -impl Component for NumericStepper { +impl Component for NumberField { fn scope() -> ComponentScope { ComponentScope::Input } fn name() -> &'static str { - "Numeric Stepper" + "Number Field" } fn sort_name() -> &'static str { @@ -594,50 +544,30 @@ impl Component for NumericStepper { } fn description() -> Option<&'static str> { - Some("A button used to increment or decrement a numeric value.") + Some("A numeric input element with increment and decrement buttons.") } fn preview(window: &mut Window, cx: &mut App) -> Option { - let first_stepper = window.use_state(cx, |_, _| 100usize); - let second_stepper = window.use_state(cx, |_, _| 100.0); + let stepper_example = window.use_state(cx, |_, _| 100.0); + Some( v_flex() .gap_6() - .children(vec![example_group_with_title( - "Styles", - vec![ - single_example( - "Default", - NumericStepper::new( - "numeric-stepper-component-preview", - *first_stepper.read(cx), - window, - cx, - ) - .on_change({ - let first_stepper = first_stepper.clone(); - move |value, _, cx| first_stepper.write(cx, *value) - }) - .into_any_element(), - ), - single_example( - "Outlined", - NumericStepper::new( - "numeric-stepper-with-border-component-preview", - *second_stepper.read(cx), - window, - cx, - ) - .on_change({ - let second_stepper = second_stepper.clone(); - move |value, _, cx| second_stepper.write(cx, *value) - }) - .min(1.0) - .max(100.0) - .style(NumericStepperStyle::Outlined) - .into_any_element(), - ), - ], + .children(vec![single_example( + "Default Numeric Stepper", + NumberField::new( + "numeric-stepper-component-preview", + *stepper_example.read(cx), + window, + cx, + ) + .on_change({ + let stepper_example = stepper_example.clone(); + move |value, _, cx| stepper_example.write(cx, *value) + }) + .min(1.0) + .max(100.0) + .into_any_element(), )]) .into_any_element(), ) diff --git a/crates/ui_input/src/ui_input.rs b/crates/ui_input/src/ui_input.rs index 0e3baec69b57469317834d0c50365c136dfebf75..56f0626f0a502c2bbf5471491441f69e7820e86e 100644 --- a/crates/ui_input/src/ui_input.rs +++ b/crates/ui_input/src/ui_input.rs @@ -5,13 +5,13 @@ //! It can't be located in the `ui` crate because it depends on `editor`. //! mod font_picker; -mod numeric_stepper; +mod number_field; use component::{example_group, single_example}; use editor::{Editor, EditorElement, EditorStyle}; pub use font_picker::*; use gpui::{App, Entity, FocusHandle, Focusable, FontStyle, Hsla, Length, TextStyle}; -pub use numeric_stepper::*; +pub use number_field::*; use settings::Settings; use std::sync::Arc; use theme::ThemeSettings;