From 827f57fb6a5ea73f633339431e97e8c6fb1139a1 Mon Sep 17 00:00:00 2001 From: Jason Lee Date: Tue, 6 Aug 2024 17:19:54 +0800 Subject: [PATCH] Add `Sizable` trait to impl `small`, `xsmall`, `large` and apply to Button, Input, Dropdown, Switch. (#113) --- crates/app/src/story_workspace.rs | 8 +-- crates/story/src/button_story.rs | 86 +++++++++++++++--------------- crates/story/src/dropdown_story.rs | 8 +-- crates/story/src/input_story.rs | 10 ++-- crates/story/src/popup_story.rs | 8 +-- crates/story/src/progress_story.rs | 10 ++-- crates/story/src/switch_story.rs | 4 +- crates/story/src/text_story.rs | 1 - crates/ui/src/button.rs | 20 ++++--- crates/ui/src/clipboard.rs | 6 ++- crates/ui/src/dropdown.rs | 19 ++++--- crates/ui/src/icon.rs | 21 ++++---- crates/ui/src/indicator.rs | 16 +++--- crates/ui/src/input/input.rs | 17 +++--- crates/ui/src/lib.rs | 2 +- crates/ui/src/list/list_item.rs | 21 ++++---- crates/ui/src/popup_menu.rs | 6 ++- crates/ui/src/styled_ext.rs | 24 +++++++++ crates/ui/src/switch.rs | 15 +++--- 19 files changed, 167 insertions(+), 135 deletions(-) diff --git a/crates/app/src/story_workspace.rs b/crates/app/src/story_workspace.rs index 8472d7b0..e5449fb4 100644 --- a/crates/app/src/story_workspace.rs +++ b/crates/app/src/story_workspace.rs @@ -11,7 +11,7 @@ use std::sync::Arc; use ui::{ button::{Button, ButtonStyle}, theme::{ActiveTheme, Theme}, - Clickable as _, IconName, Size, + Clickable as _, IconName, Sizable, }; use crate::app_state::AppState; @@ -285,8 +285,8 @@ impl Render for StoryWorkspace { this.icon(IconName::Moon) } }) - .size(Size::Small) - .style(ButtonStyle::Ghost) + .small() + .ghost() .on_click(move |_, cx| { let mode = match cx.theme().mode.is_dark() { true => ui::theme::ThemeMode::Light, @@ -299,7 +299,7 @@ impl Render for StoryWorkspace { .child( Button::new("github", cx) .icon(IconName::GitHub) - .size(Size::Small) + .small() .style(ButtonStyle::Ghost) .on_click(|_, cx| { cx.open_url("https://github.com/huacnlee/gpui-component") diff --git a/crates/story/src/button_story.rs b/crates/story/src/button_story.rs index e1cb01de..78fe1c95 100644 --- a/crates/story/src/button_story.rs +++ b/crates/story/src/button_story.rs @@ -4,12 +4,12 @@ use gpui::{ }; use ui::{ - button::{Button, ButtonCustomStyle, ButtonStyle}, + button::{Button, ButtonCustomStyle}, checkbox::Checkbox, h_flex, prelude::FluentBuilder, theme::ActiveTheme, - v_flex, Clickable, Disableable as _, Icon, IconName, Selectable as _, Size, + v_flex, Clickable, Disableable as _, Icon, IconName, Selectable as _, Sizable as _, }; use crate::section; @@ -203,7 +203,7 @@ impl Render for ButtonStory { ) .child( Button::new("button-icon-4", cx) - .style(ButtonStyle::Secondary) + .primary() .child( h_flex() .items_center() @@ -220,7 +220,7 @@ impl Render for ButtonStory { ) .child( Button::new("button-icon-5-ghost", cx) - .style(ButtonStyle::Ghost) + .ghost() .icon(IconName::Check) .label("Confirm") .disabled(disabled) @@ -231,7 +231,7 @@ impl Render for ButtonStory { ) .child( Button::new("button-icon-6-link", cx) - .style(ButtonStyle::Link) + .link() .icon(IconName::Check) .label("Link") .disabled(disabled) @@ -250,8 +250,8 @@ impl Render for ButtonStory { .child( Button::new("button-6", cx) .label("Primary Button") - .style(ButtonStyle::Primary) - .size(Size::Small) + .primary() + .small() .loading(true) .disabled(disabled) .selected(selected) @@ -262,8 +262,7 @@ impl Render for ButtonStory { .child( Button::new("button-7", cx) .label("Secondary Button") - .style(ButtonStyle::Secondary) - .size(Size::Small) + .small() .disabled(disabled) .selected(selected) .loading(loading) @@ -273,8 +272,8 @@ impl Render for ButtonStory { .child( Button::new("button-8", cx) .label("Danger Button") - .style(ButtonStyle::Danger) - .size(Size::Small) + .danger() + .small() .disabled(disabled) .selected(selected) .loading(loading) @@ -284,8 +283,8 @@ impl Render for ButtonStory { .child( Button::new("button-8-outline", cx) .label("Outline Button") - .style(ButtonStyle::Outline) - .size(Size::Small) + .outline() + .small() .disabled(disabled) .selected(selected) .loading(loading) @@ -295,8 +294,8 @@ impl Render for ButtonStory { .child( Button::new("button-8-ghost", cx) .label("Ghost Button") - .style(ButtonStyle::Ghost) - .size(Size::Small) + .ghost() + .small() .disabled(disabled) .selected(selected) .loading(loading) @@ -306,8 +305,8 @@ impl Render for ButtonStory { .child( Button::new("button-8-link", cx) .label("Link Button") - .style(ButtonStyle::Link) - .size(Size::Small) + .link() + .small() .disabled(disabled) .selected(selected) .loading(loading) @@ -320,8 +319,8 @@ impl Render for ButtonStory { .child( Button::new("button-xs-1", cx) .label("Primary Button") - .style(ButtonStyle::Primary) - .size(Size::XSmall) + .primary() + .small() .disabled(disabled) .selected(selected) .loading(loading) @@ -331,8 +330,7 @@ impl Render for ButtonStory { .child( Button::new("button-xs-2", cx) .label("Secondary Button") - .style(ButtonStyle::Secondary) - .size(Size::XSmall) + .xsmall() .loading(true) .disabled(disabled) .selected(selected) @@ -343,8 +341,8 @@ impl Render for ButtonStory { .child( Button::new("button-xs-3", cx) .label("Danger Button") - .style(ButtonStyle::Danger) - .size(Size::XSmall) + .danger() + .xsmall() .disabled(disabled) .selected(selected) .loading(loading) @@ -354,8 +352,8 @@ impl Render for ButtonStory { .child( Button::new("button-xs-3-ghost", cx) .label("Ghost Button") - .style(ButtonStyle::Ghost) - .size(Size::XSmall) + .ghost() + .xsmall() .disabled(disabled) .selected(selected) .loading(loading) @@ -365,8 +363,8 @@ impl Render for ButtonStory { .child( Button::new("button-xs-3-outline", cx) .label("Outline Button") - .style(ButtonStyle::Outline) - .size(Size::XSmall) + .outline() + .xsmall() .disabled(disabled) .selected(selected) .loading(loading) @@ -376,8 +374,8 @@ impl Render for ButtonStory { .child( Button::new("button-xs-3-link", cx) .label("Link Button") - .style(ButtonStyle::Link) - .size(Size::XSmall) + .link() + .xsmall() .disabled(disabled) .selected(selected) .loading(loading) @@ -391,7 +389,7 @@ impl Render for ButtonStory { .child( Button::new("icon-button-primary", cx) .icon(IconName::Search) - .style(ButtonStyle::Primary) + .primary() .disabled(disabled) .selected(selected) .loading(loading) @@ -409,7 +407,7 @@ impl Render for ButtonStory { .child( Button::new("icon-button-danger", cx) .icon(IconName::Close) - .style(ButtonStyle::Danger) + .danger() .disabled(disabled) .selected(selected) .loading(loading) @@ -418,8 +416,8 @@ impl Render for ButtonStory { .child( Button::new("icon-button-small-primary", cx) .icon(IconName::Search) - .size(Size::Small) - .style(ButtonStyle::Primary) + .small() + .primary() .disabled(disabled) .selected(selected) .loading(loading) @@ -428,7 +426,7 @@ impl Render for ButtonStory { .child( Button::new("icon-button-outline", cx) .icon(IconName::Search) - .style(ButtonStyle::Outline) + .outline() .disabled(disabled) .selected(selected) .loading(loading) @@ -437,7 +435,7 @@ impl Render for ButtonStory { .child( Button::new("icon-button-ghost", cx) .icon(IconName::ArrowLeft) - .style(ButtonStyle::Ghost) + .ghost() .disabled(disabled) .selected(selected) .loading(loading) @@ -449,7 +447,7 @@ impl Render for ButtonStory { .child( Button::new("icon-button-4", cx) .icon(IconName::Info) - .size(Size::Small) + .small() .disabled(disabled) .selected(selected) .loading(loading) @@ -458,8 +456,8 @@ impl Render for ButtonStory { .child( Button::new("icon-button-5", cx) .icon(IconName::Close) - .size(Size::Small) - .style(ButtonStyle::Danger) + .small() + .danger() .disabled(disabled) .selected(selected) .loading(loading) @@ -468,8 +466,8 @@ impl Render for ButtonStory { .child( Button::new("icon-button-6", cx) .icon(IconName::Search) - .size(Size::XSmall) - .style(ButtonStyle::Primary) + .small() + .primary() .disabled(disabled) .selected(selected) .loading(loading) @@ -478,7 +476,7 @@ impl Render for ButtonStory { .child( Button::new("icon-button-7", cx) .icon(IconName::Info) - .size(Size::XSmall) + .xsmall() .disabled(disabled) .selected(selected) .loading(loading) @@ -487,8 +485,8 @@ impl Render for ButtonStory { .child( Button::new("icon-button-8", cx) .icon(IconName::Close) - .size(Size::XSmall) - .style(ButtonStyle::Danger) + .xsmall() + .danger() .disabled(disabled) .selected(selected) .loading(loading) @@ -498,7 +496,7 @@ impl Render for ButtonStory { Button::new("icon-button-9", cx) .icon(IconName::Heart) .size(px(24.)) - .style(ButtonStyle::Ghost) + .ghost() .disabled(disabled) .selected(selected) .loading(loading) diff --git a/crates/story/src/dropdown_story.rs b/crates/story/src/dropdown_story.rs index bf29a85d..df0fecab 100644 --- a/crates/story/src/dropdown_story.rs +++ b/crates/story/src/dropdown_story.rs @@ -7,7 +7,7 @@ use ui::{ dropdown::{Dropdown, DropdownEvent, DropdownItem, SearchableVec}, h_flex, theme::ActiveTheme, - v_flex, IconName, Selection, + v_flex, IconName, Selection, Sizable, }; struct Country { @@ -94,7 +94,7 @@ impl DropdownStory { Some(0), cx, ) - .size(ui::Size::Small) + .small() .placeholder("UI") .title_prefix("UI: ") }), @@ -110,13 +110,13 @@ impl DropdownStory { None, cx, ) - .size(ui::Size::Small) + .small() .placeholder("Language") .title_prefix("Language: ") }), simple_dropdown3: cx.new_view(|cx| { Dropdown::new("string-list3", Vec::::new(), None, cx) - .size(ui::Size::Small) + .small() .empty(|cx| { h_flex() .h_24() diff --git a/crates/story/src/input_story.rs b/crates/story/src/input_story.rs index 9b70f6fa..a3e391a9 100644 --- a/crates/story/src/input_story.rs +++ b/crates/story/src/input_story.rs @@ -9,7 +9,7 @@ use ui::{ h_flex, input::{InputEvent, OtpInput, TextInput}, prelude::FluentBuilder as _, - v_flex, Clickable, FocusableCycle, IconName, Size, + v_flex, Clickable, FocusableCycle, IconName, Sizable, }; use crate::section; @@ -107,14 +107,10 @@ impl InputStory { input.set_disabled(true, cx); input }), - large_input: cx.new_view(|cx| { - TextInput::new(cx) - .size(Size::Large) - .placeholder("Large input") - }), + large_input: cx.new_view(|cx| TextInput::new(cx).large().placeholder("Large input")), small_input: cx.new_view(|cx| { TextInput::new(cx) - .size(Size::Small) + .small() .validate(|s| s.parse::().is_ok()) .placeholder("validate to limit float number.") }), diff --git a/crates/story/src/popup_story.rs b/crates/story/src/popup_story.rs index e163c6c9..907874d8 100644 --- a/crates/story/src/popup_story.rs +++ b/crates/story/src/popup_story.rs @@ -13,7 +13,7 @@ use ui::{ popup_menu::PopupMenu, prelude::FluentBuilder, switch::Switch, - v_flex, Clickable as _, IconName, Size, + v_flex, Clickable as _, IconName, Sizable, }; actions!( @@ -158,7 +158,7 @@ impl Render for PopupStory { Button::new("info1", cx) .label("Yes") .w(px(80.)) - .size(Size::Small), + .small(), ) .into_any() }) @@ -181,7 +181,7 @@ impl Render for PopupStory { Button::new("info1", cx) .label("Yes") .w(px(80.)) - .size(Size::Small), + .small(), ) .into_any() }) @@ -250,7 +250,7 @@ impl Render for PopupStory { Button::new("info1", cx) .label("Yes") .w(px(80.)) - .size(Size::Small), + .small(), ) .into_any() }) diff --git a/crates/story/src/progress_story.rs b/crates/story/src/progress_story.rs index e8b57706..56fd7741 100644 --- a/crates/story/src/progress_story.rs +++ b/crates/story/src/progress_story.rs @@ -9,7 +9,7 @@ use ui::{ indicator::Indicator, progress::Progress, slider::{Slider, SliderEvent}, - v_flex, Clickable, IconName, Size, + v_flex, Clickable, IconName, Sizable, }; pub struct ProgressStory { @@ -123,16 +123,16 @@ impl Render for ProgressStory { .child( h_flex() .gap_x_2() - .child(Indicator::new().size(Size::XSmall)) - .child(Indicator::new().size(Size::Small)) + .child(Indicator::new().xsmall()) + .child(Indicator::new().small()) .child(Indicator::new()) .child( Indicator::new() - .size(Size::Large) + .large() .icon(IconName::LoaderCircle) .color(ui::blue_500()), ) - .child(Indicator::new().size(px(64.))), + .child(Indicator::new().with_size(px(64.))), ) .child(Divider::horizontal().mt_10().label("Slider")) .child(self.slider1.clone()) diff --git a/crates/story/src/switch_story.rs b/crates/story/src/switch_story.rs index ea0e48b2..466541c4 100644 --- a/crates/story/src/switch_story.rs +++ b/crates/story/src/switch_story.rs @@ -8,7 +8,7 @@ use ui::{ label::Label, switch::{LabelSide, Switch}, theme::ActiveTheme, - v_flex, Disableable as _, Size, StyledExt, + v_flex, Disableable as _, Sizable, StyledExt, }; #[derive(Default)] @@ -115,7 +115,7 @@ impl Render for SwitchStory { .items_start().child(title("Disabled Switchs")).child( h_flex().items_center() .gap_6() - .child(Switch::new("switch3").checked(self.switch3).label("Small Size").size(Size::Small).on_click(cx.listener(move |view, checked, cx| { + .child(Switch::new("switch3").checked(self.switch3).label("Small Size").small().on_click(cx.listener(move |view, checked, cx| { view.switch3 = *checked; cx.notify(); })), diff --git a/crates/story/src/text_story.rs b/crates/story/src/text_story.rs index 1f01ae64..905d7ffc 100644 --- a/crates/story/src/text_story.rs +++ b/crates/story/src/text_story.rs @@ -219,7 +219,6 @@ impl Render for TextStory { h_flex() .w_full() .gap_4() - .items_start() .child( Clipboard::new("clipboard1") .content(|_| Label::new("Click icon to copy")) diff --git a/crates/ui/src/button.rs b/crates/ui/src/button.rs index 949e8108..875d4b8b 100644 --- a/crates/ui/src/button.rs +++ b/crates/ui/src/button.rs @@ -1,6 +1,7 @@ use crate::{ h_flex, indicator::Indicator, + styled_ext::Sizable, theme::{ActiveTheme, Colorize as _}, Clickable, Disableable, Icon, Selectable, Size, }; @@ -175,12 +176,6 @@ impl Button { self } - /// Set the ui::Size of the Button. - pub fn size(mut self, size: impl Into) -> Self { - self.size = size.into(); - self - } - /// Set label to the Button, if no label is set, the button will be in Icon Button mode. pub fn label(mut self, label: impl Into) -> Self { self.label = Some(label.into()); @@ -239,6 +234,13 @@ impl Clickable for Button { } } +impl Sizable for Button { + fn with_size(mut self, size: impl Into) -> Self { + self.size = size.into(); + self + } +} + impl Styled for Button { fn style(&mut self) -> &mut gpui::StyleRefinement { self.base.style() @@ -359,10 +361,12 @@ impl RenderOnce for Button { _ => this.text_base(), }) .when(!self.loading, |this| { - this.when_some(self.icon, |this, icon| this.child(icon.size(icon_size))) + this.when_some(self.icon, |this, icon| { + this.child(icon.with_size(icon_size)) + }) }) .when(self.loading, |this| { - this.child(Indicator::new().size(self.size)) + this.child(Indicator::new().with_size(self.size)) }) .when_some(self.label, |this, label| this.child(label)) .children(self.children) diff --git a/crates/ui/src/clipboard.rs b/crates/ui/src/clipboard.rs index a2e278f2..902613ef 100644 --- a/crates/ui/src/clipboard.rs +++ b/crates/ui/src/clipboard.rs @@ -3,7 +3,7 @@ use gpui::{ RenderOnce, SharedString, Styled, WindowContext, }; -use crate::{button::Button, h_flex, Clickable, IconName}; +use crate::{button::Button, h_flex, Clickable, IconName, Sizable}; #[derive(IntoElement)] pub struct Clipboard { @@ -49,7 +49,8 @@ impl Clipboard { impl RenderOnce for Clipboard { fn render(self, cx: &mut WindowContext) -> impl IntoElement { h_flex() - .gap_0p5() + .gap_1() + .items_center() .when_some(self.content_builder, |this, builder| { this.child(builder(cx)) }) @@ -57,6 +58,7 @@ impl RenderOnce for Clipboard { Button::new(self.id, cx) .icon(IconName::Copy) .ghost() + .xsmall() .on_click(move |_, cx| { cx.stop_propagation(); cx.write_to_clipboard(ClipboardItem::new(self.value.to_string())); diff --git a/crates/ui/src/dropdown.rs b/crates/ui/src/dropdown.rs index 87fec5ff..221a72b4 100644 --- a/crates/ui/src/dropdown.rs +++ b/crates/ui/src/dropdown.rs @@ -12,7 +12,7 @@ use crate::{ list::{self, List, ListDelegate, ListItem}, styled_ext::StyleSized, theme::ActiveTheme, - Clickable, Icon, IconName, Size, StyledExt, + Clickable, Icon, IconName, Sizable, Size, StyledExt, }; actions!(dropdown, [Up, Down, Enter, Escape]); @@ -334,11 +334,6 @@ where this } - pub fn size(mut self, size: Size) -> Self { - self.size = size; - self - } - /// Set the width of the dropdown input, default: Length::Auto pub fn width(mut self, width: impl Into) -> Self { self.width = width.into(); @@ -519,6 +514,16 @@ fn with_style(d: Focusable
, cx: &WindowContext) -> Focusable
{ .shadow_md() } +impl Sizable for Dropdown +where + D: DropdownDelegate + 'static, +{ + fn with_size(mut self, size: impl Into) -> Self { + self.size = size.into(); + self + } +} + impl EventEmitter> for Dropdown where D: DropdownDelegate + 'static {} impl EventEmitter for Dropdown where D: DropdownDelegate + 'static {} impl FocusableView for Dropdown @@ -590,7 +595,7 @@ where Button::new("clean", cx) .icon(IconName::CircleX) .style(ButtonStyle::Ghost) - .size(px(14.)) + .with_size(px(14.)) .cursor_pointer() .on_click(cx.listener(Self::clean)), ) diff --git a/crates/ui/src/icon.rs b/crates/ui/src/icon.rs index 1968f1d1..fc64d0f7 100644 --- a/crates/ui/src/icon.rs +++ b/crates/ui/src/icon.rs @@ -1,4 +1,4 @@ -use crate::{theme::ActiveTheme, Size}; +use crate::{styled_ext::Sizable, theme::ActiveTheme, Size}; use gpui::{ prelude::FluentBuilder as _, svg, AnyElement, Hsla, IntoElement, Render, RenderOnce, SharedString, StyleRefinement, Styled, Svg, View, VisualContext, WindowContext, @@ -142,7 +142,7 @@ impl Clone for Icon { fn clone(&self) -> Self { let mut this = Self::default().path(self.path.clone()); if let Some(size) = self.size { - this = this.size(size); + this = this.with_size(size); } this } @@ -169,16 +169,6 @@ impl Icon { self } - /// Set the size of the icon, default is `IconSize::Medium` - /// - /// Also can receive a `ButtonSize` to convert to `IconSize`, - /// Or a `Pixels` to set a custom size: `px(30.)` - pub fn size(mut self, size: impl Into) -> Self { - self.size = Some(size.into()); - - self - } - /// Create a new view for the icon pub fn view(self, cx: &mut WindowContext) -> View { cx.new_view(|_| self) @@ -205,6 +195,13 @@ impl Styled for Icon { } } +impl Sizable for Icon { + fn with_size(mut self, size: impl Into) -> Self { + self.size = Some(size.into()); + self + } +} + impl RenderOnce for Icon { fn render(self, cx: &mut WindowContext) -> impl IntoElement { let text_color = self.text_color.unwrap_or_else(|| cx.text_style().color); diff --git a/crates/ui/src/indicator.rs b/crates/ui/src/indicator.rs index 7b3cb3cb..d42c0f3a 100644 --- a/crates/ui/src/indicator.rs +++ b/crates/ui/src/indicator.rs @@ -1,6 +1,6 @@ use std::time::Duration; -use crate::{Icon, IconName, Size}; +use crate::{Icon, IconName, Sizable, Size}; use gpui::{ div, ease_in_out, percentage, prelude::FluentBuilder as _, Animation, AnimationExt as _, Hsla, IntoElement, ParentElement, RenderOnce, Styled as _, Transformation, @@ -24,11 +24,6 @@ impl Indicator { } } - pub fn size(mut self, size: impl Into) -> Self { - self.size = size.into(); - self - } - pub fn icon(mut self, icon: IconName) -> Self { self.icon = icon; self @@ -40,12 +35,19 @@ impl Indicator { } } +impl Sizable for Indicator { + fn with_size(mut self, size: impl Into) -> Self { + self.size = size.into(); + self + } +} + impl RenderOnce for Indicator { fn render(self, _: &mut gpui::WindowContext) -> impl IntoElement { div() .child( Icon::new(self.icon.clone()) - .size(self.size) + .with_size(self.size) .when_some(self.color, |this, color| this.text_color(color)) .with_animation( "circle", diff --git a/crates/ui/src/input/input.rs b/crates/ui/src/input/input.rs index b6427320..daa83b40 100644 --- a/crates/ui/src/input/input.rs +++ b/crates/ui/src/input/input.rs @@ -9,10 +9,10 @@ use super::blink_cursor::BlinkCursor; use super::history::History; use crate::button::{Button, ButtonStyle}; use crate::indicator::Indicator; -use crate::styled_ext::StyleSized; +use crate::styled_ext::{Sizable, StyleSized}; use crate::theme::ActiveTheme; use crate::{event::InteractiveElementExt as _, Size}; -use crate::{Clickable, IconName, StyledExt as _}; +use crate::{Clickable as _, IconName, StyledExt as _}; use gpui::prelude::FluentBuilder as _; use gpui::{ actions, div, fill, point, px, relative, rems, size, AnyElement, AppContext, Bounds, @@ -261,12 +261,6 @@ impl TextInput { self } - /// Set the size of the input field. - pub fn size(mut self, size: impl Into) -> Self { - self.size = size.into(); - self - } - /// Set true to show the clear button when the input field is not empty. pub fn cleanable(mut self, cleanable: bool) -> Self { self.cleanable = cleanable; @@ -659,6 +653,13 @@ impl TextInput { } } +impl Sizable for TextInput { + fn with_size(mut self, size: impl Into) -> Self { + self.size = size.into(); + self + } +} + impl ViewInputHandler for TextInput { fn text_for_range( &mut self, diff --git a/crates/ui/src/lib.rs b/crates/ui/src/lib.rs index c5f0dc14..f4528879 100644 --- a/crates/ui/src/lib.rs +++ b/crates/ui/src/lib.rs @@ -44,7 +44,7 @@ pub use disableable::Disableable; pub use event::InteractiveElementExt; pub use focusable::FocusableCycle; pub use selectable::{Selectable, Selection}; -pub use styled_ext::{Size, StyledExt}; +pub use styled_ext::{Sizable, Size, StyledExt}; pub use colors::*; pub use icon::*; diff --git a/crates/ui/src/list/list_item.rs b/crates/ui/src/list/list_item.rs index 21c92150..efdbe4ab 100644 --- a/crates/ui/src/list/list_item.rs +++ b/crates/ui/src/list/list_item.rs @@ -5,7 +5,9 @@ use gpui::{ }; use smallvec::SmallVec; -use crate::{h_flex, theme::ActiveTheme, Disableable, Icon, IconName, Selectable, Size}; +use crate::{ + h_flex, styled_ext::Sizable as _, theme::ActiveTheme, Disableable, Icon, IconName, Selectable, +}; #[derive(IntoElement)] pub struct ListItem { @@ -144,15 +146,14 @@ impl RenderOnce for ListItem { .gap_x_1() .child(div().w_full().overflow_hidden().children(self.children)) .when_some(self.check_icon, |this, icon| { - this.child(div().w_5().items_center().justify_center().when( - self.confirmed, - |this| { - this.child( - icon.size(Size::Small) - .text_color(cx.theme().muted_foreground), - ) - }, - )) + this.child( + div().w_5().items_center().justify_center().when( + self.confirmed, + |this| { + this.child(icon.small().text_color(cx.theme().muted_foreground)) + }, + ), + ) }), ) .when_some(self.suffix, |this, suffix| this.child(suffix(cx))) diff --git a/crates/ui/src/popup_menu.rs b/crates/ui/src/popup_menu.rs index 8404eddc..e858cb5a 100644 --- a/crates/ui/src/popup_menu.rs +++ b/crates/ui/src/popup_menu.rs @@ -7,7 +7,9 @@ use gpui::{ VisualContext as _, WindowContext, }; -use crate::{h_flex, list::ListItem, theme::ActiveTheme, v_flex, Icon, IconName, Size}; +use crate::{ + h_flex, list::ListItem, styled_ext::Sizable as _, theme::ActiveTheme, v_flex, Icon, IconName, +}; actions!(menu, [Confirm, Dismiss, SelectNext, SelectPrev]); @@ -280,7 +282,7 @@ impl Render for PopupMenu { .map(|this| { this.child(div().absolute().text_sm().map(|this| { if let Some(icon) = icon { - this.child(icon.clone().size(Size::Small).clone()) + this.child(icon.clone().small().clone()) } else { this.children(icon_placeholder.clone()) } diff --git a/crates/ui/src/styled_ext.rs b/crates/ui/src/styled_ext.rs index 2f6b3299..842f07e6 100644 --- a/crates/ui/src/styled_ext.rs +++ b/crates/ui/src/styled_ext.rs @@ -194,6 +194,30 @@ impl From for Size { } } +/// A trait for setting the size of an element. +pub trait Sizable: Sized { + /// Set the ui::Size of this element. + /// + /// Also can receive a `ButtonSize` to convert to `IconSize`, + /// Or a `Pixels` to set a custom size: `px(30.)` + fn with_size(self, size: impl Into) -> Self; + + /// Set to Size::Small + fn small(self) -> Self { + self.with_size(Size::Small) + } + + /// Set to Size::XSmall + fn xsmall(self) -> Self { + self.with_size(Size::XSmall) + } + + /// Set to Size::Medium + fn large(self) -> Self { + self.with_size(Size::Large) + } +} + #[allow(unused)] pub trait StyleSized { fn input_text_size(self, size: Size) -> Self; diff --git a/crates/ui/src/switch.rs b/crates/ui/src/switch.rs index a1152f3a..00253036 100644 --- a/crates/ui/src/switch.rs +++ b/crates/ui/src/switch.rs @@ -1,7 +1,7 @@ use crate::{ stack::h_flex, theme::{ActiveTheme, Colorize}, - Disableable, Size, + Disableable, Sizable, Size, }; use gpui::{ div, prelude::FluentBuilder as _, Div, InteractiveElement, IntoElement, ParentElement as _, @@ -59,12 +59,6 @@ impl Switch { self } - /// Only supported XSmall, Small, Medium - pub fn size(mut self, size: Size) -> Self { - self.size = size; - self - } - pub fn on_click(mut self, handler: impl Fn(&bool, &mut WindowContext) + 'static) -> Self { self.on_click = Some(Box::new(handler)); self @@ -76,6 +70,13 @@ impl Switch { } } +impl Sizable for Switch { + fn with_size(mut self, size: impl Into) -> Self { + self.size = size.into(); + self + } +} + impl Disableable for Switch { fn disabled(mut self, disabled: bool) -> Self { self.disabled = disabled;