dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Sizable trait to impl small, xsmall, large and apply to Button, Input, Dropdown, Switch. (#113)

Browse source
This commit is contained in:
Jason Lee 2024-08-06 17:19:54 +08:00 committed by GitHub
parent 2e1a4f84fd
commit 827f57fb6a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 167 additions and 135 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
crates/app/src/story_workspace.rs
View file

@ -11,7 +11,7 @@ use std::sync::Arc;
use ui::{ use ui::{
button::{Button, ButtonStyle}, button::{Button, ButtonStyle},
theme::{ActiveTheme, Theme}, theme::{ActiveTheme, Theme},
Clickable as _, IconName, Size, Clickable as _, IconName, Sizable,
}; };
use crate::app_state::AppState; use crate::app_state::AppState;
@ -285,8 +285,8 @@ impl Render for StoryWorkspace {
this.icon(IconName::Moon) this.icon(IconName::Moon)
} }
}) })
.size(Size::Small) .small()
.style(ButtonStyle::Ghost) .ghost()
.on_click(move |_, cx| { .on_click(move |_, cx| {
let mode = match cx.theme().mode.is_dark() { let mode = match cx.theme().mode.is_dark() {
true => ui::theme::ThemeMode::Light, true => ui::theme::ThemeMode::Light,
@ -299,7 +299,7 @@ impl Render for StoryWorkspace {
.child( .child(
Button::new("github", cx) Button::new("github", cx)
.icon(IconName::GitHub) .icon(IconName::GitHub)
.size(Size::Small) .small()
.style(ButtonStyle::Ghost) .style(ButtonStyle::Ghost)
.on_click(|_, cx| { .on_click(|_, cx| {
cx.open_url("https://github.com/huacnlee/gpui-component") cx.open_url("https://github.com/huacnlee/gpui-component")

86
crates/story/src/button_story.rs
View file

@ -4,12 +4,12 @@ use gpui::{
}; };
use ui::{ use ui::{
button::{Button, ButtonCustomStyle, ButtonStyle}, button::{Button, ButtonCustomStyle},
checkbox::Checkbox, checkbox::Checkbox,
h_flex, h_flex,
prelude::FluentBuilder, prelude::FluentBuilder,
theme::ActiveTheme, 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; use crate::section;
@ -203,7 +203,7 @@ impl Render for ButtonStory {
) )
.child( .child(
Button::new("button-icon-4", cx) Button::new("button-icon-4", cx)
.style(ButtonStyle::Secondary) .primary()
.child( .child(
h_flex() h_flex()
.items_center() .items_center()
@ -220,7 +220,7 @@ impl Render for ButtonStory {
) )
.child( .child(
Button::new("button-icon-5-ghost", cx) Button::new("button-icon-5-ghost", cx)
.style(ButtonStyle::Ghost) .ghost()
.icon(IconName::Check) .icon(IconName::Check)
.label("Confirm") .label("Confirm")
.disabled(disabled) .disabled(disabled)
@ -231,7 +231,7 @@ impl Render for ButtonStory {
) )
.child( .child(
Button::new("button-icon-6-link", cx) Button::new("button-icon-6-link", cx)
.style(ButtonStyle::Link) .link()
.icon(IconName::Check) .icon(IconName::Check)
.label("Link") .label("Link")
.disabled(disabled) .disabled(disabled)
@ -250,8 +250,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("button-6", cx) Button::new("button-6", cx)
.label("Primary Button") .label("Primary Button")
.style(ButtonStyle::Primary) .primary()
.size(Size::Small) .small()
.loading(true) .loading(true)
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
@ -262,8 +262,7 @@ impl Render for ButtonStory {
.child( .child(
Button::new("button-7", cx) Button::new("button-7", cx)
.label("Secondary Button") .label("Secondary Button")
.style(ButtonStyle::Secondary) .small()
.size(Size::Small)
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -273,8 +272,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("button-8", cx) Button::new("button-8", cx)
.label("Danger Button") .label("Danger Button")
.style(ButtonStyle::Danger) .danger()
.size(Size::Small) .small()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -284,8 +283,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("button-8-outline", cx) Button::new("button-8-outline", cx)
.label("Outline Button") .label("Outline Button")
.style(ButtonStyle::Outline) .outline()
.size(Size::Small) .small()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -295,8 +294,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("button-8-ghost", cx) Button::new("button-8-ghost", cx)
.label("Ghost Button") .label("Ghost Button")
.style(ButtonStyle::Ghost) .ghost()
.size(Size::Small) .small()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -306,8 +305,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("button-8-link", cx) Button::new("button-8-link", cx)
.label("Link Button") .label("Link Button")
.style(ButtonStyle::Link) .link()
.size(Size::Small) .small()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -320,8 +319,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("button-xs-1", cx) Button::new("button-xs-1", cx)
.label("Primary Button") .label("Primary Button")
.style(ButtonStyle::Primary) .primary()
.size(Size::XSmall) .small()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -331,8 +330,7 @@ impl Render for ButtonStory {
.child( .child(
Button::new("button-xs-2", cx) Button::new("button-xs-2", cx)
.label("Secondary Button") .label("Secondary Button")
.style(ButtonStyle::Secondary) .xsmall()
.size(Size::XSmall)
.loading(true) .loading(true)
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
@ -343,8 +341,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("button-xs-3", cx) Button::new("button-xs-3", cx)
.label("Danger Button") .label("Danger Button")
.style(ButtonStyle::Danger) .danger()
.size(Size::XSmall) .xsmall()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -354,8 +352,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("button-xs-3-ghost", cx) Button::new("button-xs-3-ghost", cx)
.label("Ghost Button") .label("Ghost Button")
.style(ButtonStyle::Ghost) .ghost()
.size(Size::XSmall) .xsmall()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -365,8 +363,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("button-xs-3-outline", cx) Button::new("button-xs-3-outline", cx)
.label("Outline Button") .label("Outline Button")
.style(ButtonStyle::Outline) .outline()
.size(Size::XSmall) .xsmall()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -376,8 +374,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("button-xs-3-link", cx) Button::new("button-xs-3-link", cx)
.label("Link Button") .label("Link Button")
.style(ButtonStyle::Link) .link()
.size(Size::XSmall) .xsmall()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -391,7 +389,7 @@ impl Render for ButtonStory {
.child( .child(
Button::new("icon-button-primary", cx) Button::new("icon-button-primary", cx)
.icon(IconName::Search) .icon(IconName::Search)
.style(ButtonStyle::Primary) .primary()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -409,7 +407,7 @@ impl Render for ButtonStory {
.child( .child(
Button::new("icon-button-danger", cx) Button::new("icon-button-danger", cx)
.icon(IconName::Close) .icon(IconName::Close)
.style(ButtonStyle::Danger) .danger()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -418,8 +416,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("icon-button-small-primary", cx) Button::new("icon-button-small-primary", cx)
.icon(IconName::Search) .icon(IconName::Search)
.size(Size::Small) .small()
.style(ButtonStyle::Primary) .primary()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -428,7 +426,7 @@ impl Render for ButtonStory {
.child( .child(
Button::new("icon-button-outline", cx) Button::new("icon-button-outline", cx)
.icon(IconName::Search) .icon(IconName::Search)
.style(ButtonStyle::Outline) .outline()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -437,7 +435,7 @@ impl Render for ButtonStory {
.child( .child(
Button::new("icon-button-ghost", cx) Button::new("icon-button-ghost", cx)
.icon(IconName::ArrowLeft) .icon(IconName::ArrowLeft)
.style(ButtonStyle::Ghost) .ghost()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -449,7 +447,7 @@ impl Render for ButtonStory {
.child( .child(
Button::new("icon-button-4", cx) Button::new("icon-button-4", cx)
.icon(IconName::Info) .icon(IconName::Info)
.size(Size::Small) .small()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -458,8 +456,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("icon-button-5", cx) Button::new("icon-button-5", cx)
.icon(IconName::Close) .icon(IconName::Close)
.size(Size::Small) .small()
.style(ButtonStyle::Danger) .danger()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -468,8 +466,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("icon-button-6", cx) Button::new("icon-button-6", cx)
.icon(IconName::Search) .icon(IconName::Search)
.size(Size::XSmall) .small()
.style(ButtonStyle::Primary) .primary()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -478,7 +476,7 @@ impl Render for ButtonStory {
.child( .child(
Button::new("icon-button-7", cx) Button::new("icon-button-7", cx)
.icon(IconName::Info) .icon(IconName::Info)
.size(Size::XSmall) .xsmall()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -487,8 +485,8 @@ impl Render for ButtonStory {
.child( .child(
Button::new("icon-button-8", cx) Button::new("icon-button-8", cx)
.icon(IconName::Close) .icon(IconName::Close)
.size(Size::XSmall) .xsmall()
.style(ButtonStyle::Danger) .danger()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)
@ -498,7 +496,7 @@ impl Render for ButtonStory {
Button::new("icon-button-9", cx) Button::new("icon-button-9", cx)
.icon(IconName::Heart) .icon(IconName::Heart)
.size(px(24.)) .size(px(24.))
.style(ButtonStyle::Ghost) .ghost()
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
.loading(loading) .loading(loading)

8
crates/story/src/dropdown_story.rs
View file

@ -7,7 +7,7 @@ use ui::{
dropdown::{Dropdown, DropdownEvent, DropdownItem, SearchableVec}, dropdown::{Dropdown, DropdownEvent, DropdownItem, SearchableVec},
h_flex, h_flex,
theme::ActiveTheme, theme::ActiveTheme,
v_flex, IconName, Selection, v_flex, IconName, Selection, Sizable,
}; };
struct Country { struct Country {
@ -94,7 +94,7 @@ impl DropdownStory {
Some(0), Some(0),
cx, cx,
) )
.size(ui::Size::Small) .small()
.placeholder("UI") .placeholder("UI")
.title_prefix("UI: ") .title_prefix("UI: ")
}), }),
@ -110,13 +110,13 @@ impl DropdownStory {
None, None,
cx, cx,
) )
.size(ui::Size::Small) .small()
.placeholder("Language") .placeholder("Language")
.title_prefix("Language: ") .title_prefix("Language: ")
}), }),
simple_dropdown3: cx.new_view(|cx| { simple_dropdown3: cx.new_view(|cx| {
Dropdown::new("string-list3", Vec::<SharedString>::new(), None, cx) Dropdown::new("string-list3", Vec::<SharedString>::new(), None, cx)
.size(ui::Size::Small) .small()
.empty(|cx| { .empty(|cx| {
h_flex() h_flex()
.h_24() .h_24()

10
crates/story/src/input_story.rs
View file

@ -9,7 +9,7 @@ use ui::{
h_flex, h_flex,
input::{InputEvent, OtpInput, TextInput}, input::{InputEvent, OtpInput, TextInput},
prelude::FluentBuilder as _, prelude::FluentBuilder as _,
v_flex, Clickable, FocusableCycle, IconName, Size, v_flex, Clickable, FocusableCycle, IconName, Sizable,
}; };
use crate::section; use crate::section;
@ -107,14 +107,10 @@ impl InputStory {
input.set_disabled(true, cx); input.set_disabled(true, cx);
input input
}), }),
large_input: cx.new_view(|cx| { large_input: cx.new_view(|cx| TextInput::new(cx).large().placeholder("Large input")),
TextInput::new(cx)
.size(Size::Large)
.placeholder("Large input")
}),
small_input: cx.new_view(|cx| { small_input: cx.new_view(|cx| {
TextInput::new(cx) TextInput::new(cx)
.size(Size::Small) .small()
.validate(|s| s.parse::<f32>().is_ok()) .validate(|s| s.parse::<f32>().is_ok())
.placeholder("validate to limit float number.") .placeholder("validate to limit float number.")
}), }),

8
crates/story/src/popup_story.rs
View file

@ -13,7 +13,7 @@ use ui::{
popup_menu::PopupMenu, popup_menu::PopupMenu,
prelude::FluentBuilder, prelude::FluentBuilder,
switch::Switch, switch::Switch,
v_flex, Clickable as _, IconName, Size, v_flex, Clickable as _, IconName, Sizable,
}; };
actions!( actions!(
@ -158,7 +158,7 @@ impl Render for PopupStory {
Button::new("info1", cx) Button::new("info1", cx)
.label("Yes") .label("Yes")
.w(px(80.)) .w(px(80.))
.size(Size::Small), .small(),
) )
.into_any() .into_any()
}) })
@ -181,7 +181,7 @@ impl Render for PopupStory {
Button::new("info1", cx) Button::new("info1", cx)
.label("Yes") .label("Yes")
.w(px(80.)) .w(px(80.))
.size(Size::Small), .small(),
) )
.into_any() .into_any()
}) })
@ -250,7 +250,7 @@ impl Render for PopupStory {
Button::new("info1", cx) Button::new("info1", cx)
.label("Yes") .label("Yes")
.w(px(80.)) .w(px(80.))
.size(Size::Small), .small(),
) )
.into_any() .into_any()
}) })

10
crates/story/src/progress_story.rs
View file

@ -9,7 +9,7 @@ use ui::{
indicator::Indicator, indicator::Indicator,
progress::Progress, progress::Progress,
slider::{Slider, SliderEvent}, slider::{Slider, SliderEvent},
v_flex, Clickable, IconName, Size, v_flex, Clickable, IconName, Sizable,
}; };
pub struct ProgressStory { pub struct ProgressStory {
@ -123,16 +123,16 @@ impl Render for ProgressStory {
.child( .child(
h_flex() h_flex()
.gap_x_2() .gap_x_2()
.child(Indicator::new().size(Size::XSmall)) .child(Indicator::new().xsmall())
.child(Indicator::new().size(Size::Small)) .child(Indicator::new().small())
.child(Indicator::new()) .child(Indicator::new())
.child( .child(
Indicator::new() Indicator::new()
.size(Size::Large) .large()
.icon(IconName::LoaderCircle) .icon(IconName::LoaderCircle)
.color(ui::blue_500()), .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(Divider::horizontal().mt_10().label("Slider"))
.child(self.slider1.clone()) .child(self.slider1.clone())

4
crates/story/src/switch_story.rs
View file

@ -8,7 +8,7 @@ use ui::{
label::Label, label::Label,
switch::{LabelSide, Switch}, switch::{LabelSide, Switch},
theme::ActiveTheme, theme::ActiveTheme,
v_flex, Disableable as _, Size, StyledExt, v_flex, Disableable as _, Sizable, StyledExt,
}; };
#[derive(Default)] #[derive(Default)]
@ -115,7 +115,7 @@ impl Render for SwitchStory {
.items_start().child(title("Disabled Switchs")).child( .items_start().child(title("Disabled Switchs")).child(
h_flex().items_center() h_flex().items_center()
.gap_6() .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; view.switch3 = *checked;
cx.notify(); cx.notify();
})), })),

1
crates/story/src/text_story.rs
View file

@ -219,7 +219,6 @@ impl Render for TextStory {
h_flex() h_flex()
.w_full() .w_full()
.gap_4() .gap_4()
.items_start()
.child( .child(
Clipboard::new("clipboard1") Clipboard::new("clipboard1")
.content(|_| Label::new("Click icon to copy")) .content(|_| Label::new("Click icon to copy"))

20
crates/ui/src/button.rs
View file

@ -1,6 +1,7 @@
use crate::{ use crate::{
h_flex, h_flex,
indicator::Indicator, indicator::Indicator,
styled_ext::Sizable,
theme::{ActiveTheme, Colorize as _}, theme::{ActiveTheme, Colorize as _},
Clickable, Disableable, Icon, Selectable, Size, Clickable, Disableable, Icon, Selectable, Size,
}; };
@ -175,12 +176,6 @@ impl Button {
self self
} }
/// Set the ui::Size of the Button.
pub fn size(mut self, size: impl Into<Size>) -> Self {
self.size = size.into();
self
}
/// Set label to the Button, if no label is set, the button will be in Icon Button mode. /// 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<SharedString>) -> Self { pub fn label(mut self, label: impl Into<SharedString>) -> Self {
self.label = Some(label.into()); 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<Size>) -> Self {
self.size = size.into();
self
}
}
impl Styled for Button { impl Styled for Button {
fn style(&mut self) -> &mut gpui::StyleRefinement { fn style(&mut self) -> &mut gpui::StyleRefinement {
self.base.style() self.base.style()
@ -359,10 +361,12 @@ impl RenderOnce for Button {
_ => this.text_base(), _ => this.text_base(),
}) })
.when(!self.loading, |this| { .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| { .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)) .when_some(self.label, |this, label| this.child(label))
.children(self.children) .children(self.children)

6
crates/ui/src/clipboard.rs
View file

@ -3,7 +3,7 @@ use gpui::{
RenderOnce, SharedString, Styled, WindowContext, RenderOnce, SharedString, Styled, WindowContext,
}; };
use crate::{button::Button, h_flex, Clickable, IconName}; use crate::{button::Button, h_flex, Clickable, IconName, Sizable};
#[derive(IntoElement)] #[derive(IntoElement)]
pub struct Clipboard { pub struct Clipboard {
@ -49,7 +49,8 @@ impl Clipboard {
impl RenderOnce for Clipboard { impl RenderOnce for Clipboard {
fn render(self, cx: &mut WindowContext) -> impl IntoElement { fn render(self, cx: &mut WindowContext) -> impl IntoElement {
h_flex() h_flex()
.gap_0p5() .gap_1()
.items_center()
.when_some(self.content_builder, |this, builder| { .when_some(self.content_builder, |this, builder| {
this.child(builder(cx)) this.child(builder(cx))
}) })
@ -57,6 +58,7 @@ impl RenderOnce for Clipboard {
Button::new(self.id, cx) Button::new(self.id, cx)
.icon(IconName::Copy) .icon(IconName::Copy)
.ghost() .ghost()
.xsmall()
.on_click(move |_, cx| { .on_click(move |_, cx| {
cx.stop_propagation(); cx.stop_propagation();
cx.write_to_clipboard(ClipboardItem::new(self.value.to_string())); cx.write_to_clipboard(ClipboardItem::new(self.value.to_string()));

19
crates/ui/src/dropdown.rs
View file

@ -12,7 +12,7 @@ use crate::{
list::{self, List, ListDelegate, ListItem}, list::{self, List, ListDelegate, ListItem},
styled_ext::StyleSized, styled_ext::StyleSized,
theme::ActiveTheme, theme::ActiveTheme,
Clickable, Icon, IconName, Size, StyledExt, Clickable, Icon, IconName, Sizable, Size, StyledExt,
}; };
actions!(dropdown, [Up, Down, Enter, Escape]); actions!(dropdown, [Up, Down, Enter, Escape]);
@ -334,11 +334,6 @@ where
this this
} }
pub fn size(mut self, size: Size) -> Self {
self.size = size;
self
}
/// Set the width of the dropdown input, default: Length::Auto /// Set the width of the dropdown input, default: Length::Auto
pub fn width(mut self, width: impl Into<Length>) -> Self { pub fn width(mut self, width: impl Into<Length>) -> Self {
self.width = width.into(); self.width = width.into();
@ -519,6 +514,16 @@ fn with_style(d: Focusable<Div>, cx: &WindowContext) -> Focusable<Div> {
.shadow_md() .shadow_md()
} }
impl<D> Sizable for Dropdown<D>
where
D: DropdownDelegate + 'static,
{
fn with_size(mut self, size: impl Into<Size>) -> Self {
self.size = size.into();
self
}
}
impl<D> EventEmitter<DropdownEvent<D>> for Dropdown<D> where D: DropdownDelegate + 'static {} impl<D> EventEmitter<DropdownEvent<D>> for Dropdown<D> where D: DropdownDelegate + 'static {}
impl<D> EventEmitter<DismissEvent> for Dropdown<D> where D: DropdownDelegate + 'static {} impl<D> EventEmitter<DismissEvent> for Dropdown<D> where D: DropdownDelegate + 'static {}
impl<D> FocusableView for Dropdown<D> impl<D> FocusableView for Dropdown<D>
@ -590,7 +595,7 @@ where
Button::new("clean", cx) Button::new("clean", cx)
.icon(IconName::CircleX) .icon(IconName::CircleX)
.style(ButtonStyle::Ghost) .style(ButtonStyle::Ghost)
.size(px(14.)) .with_size(px(14.))
.cursor_pointer() .cursor_pointer()
.on_click(cx.listener(Self::clean)), .on_click(cx.listener(Self::clean)),
) )

21
crates/ui/src/icon.rs
View file

@ -1,4 +1,4 @@
use crate::{theme::ActiveTheme, Size}; use crate::{styled_ext::Sizable, theme::ActiveTheme, Size};
use gpui::{ use gpui::{
prelude::FluentBuilder as _, svg, AnyElement, Hsla, IntoElement, Render, RenderOnce, prelude::FluentBuilder as _, svg, AnyElement, Hsla, IntoElement, Render, RenderOnce,
SharedString, StyleRefinement, Styled, Svg, View, VisualContext, WindowContext, SharedString, StyleRefinement, Styled, Svg, View, VisualContext, WindowContext,
@ -142,7 +142,7 @@ impl Clone for Icon {
fn clone(&self) -> Self { fn clone(&self) -> Self {
let mut this = Self::default().path(self.path.clone()); let mut this = Self::default().path(self.path.clone());
if let Some(size) = self.size { if let Some(size) = self.size {
this = this.size(size); this = this.with_size(size);
} }
this this
} }
@ -169,16 +169,6 @@ impl Icon {
self 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<Size>) -> Self {
self.size = Some(size.into());
self
}
/// Create a new view for the icon /// Create a new view for the icon
pub fn view(self, cx: &mut WindowContext) -> View<Icon> { pub fn view(self, cx: &mut WindowContext) -> View<Icon> {
cx.new_view(|_| self) cx.new_view(|_| self)
@ -205,6 +195,13 @@ impl Styled for Icon {
} }
} }
impl Sizable for Icon {
fn with_size(mut self, size: impl Into<Size>) -> Self {
self.size = Some(size.into());
self
}
}
impl RenderOnce for Icon { impl RenderOnce for Icon {
fn render(self, cx: &mut WindowContext) -> impl IntoElement { fn render(self, cx: &mut WindowContext) -> impl IntoElement {
let text_color = self.text_color.unwrap_or_else(|| cx.text_style().color); let text_color = self.text_color.unwrap_or_else(|| cx.text_style().color);

16
crates/ui/src/indicator.rs
View file

@ -1,6 +1,6 @@
use std::time::Duration; use std::time::Duration;
use crate::{Icon, IconName, Size}; use crate::{Icon, IconName, Sizable, Size};
use gpui::{ use gpui::{
div, ease_in_out, percentage, prelude::FluentBuilder as _, Animation, AnimationExt as _, Hsla, div, ease_in_out, percentage, prelude::FluentBuilder as _, Animation, AnimationExt as _, Hsla,
IntoElement, ParentElement, RenderOnce, Styled as _, Transformation, IntoElement, ParentElement, RenderOnce, Styled as _, Transformation,
@ -24,11 +24,6 @@ impl Indicator {
} }
} }
pub fn size(mut self, size: impl Into<Size>) -> Self {
self.size = size.into();
self
}
pub fn icon(mut self, icon: IconName) -> Self { pub fn icon(mut self, icon: IconName) -> Self {
self.icon = icon; self.icon = icon;
self self
@ -40,12 +35,19 @@ impl Indicator {
} }
} }
impl Sizable for Indicator {
fn with_size(mut self, size: impl Into<Size>) -> Self {
self.size = size.into();
self
}
}
impl RenderOnce for Indicator { impl RenderOnce for Indicator {
fn render(self, _: &mut gpui::WindowContext) -> impl IntoElement { fn render(self, _: &mut gpui::WindowContext) -> impl IntoElement {
div() div()
.child( .child(
Icon::new(self.icon.clone()) Icon::new(self.icon.clone())
.size(self.size) .with_size(self.size)
.when_some(self.color, |this, color| this.text_color(color)) .when_some(self.color, |this, color| this.text_color(color))
.with_animation( .with_animation(
"circle", "circle",

17
crates/ui/src/input/input.rs
View file

@ -9,10 +9,10 @@ use super::blink_cursor::BlinkCursor;
use super::history::History; use super::history::History;
use crate::button::{Button, ButtonStyle}; use crate::button::{Button, ButtonStyle};
use crate::indicator::Indicator; use crate::indicator::Indicator;
use crate::styled_ext::StyleSized; use crate::styled_ext::{Sizable, StyleSized};
use crate::theme::ActiveTheme; use crate::theme::ActiveTheme;
use crate::{event::InteractiveElementExt as _, Size}; 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::prelude::FluentBuilder as _;
use gpui::{ use gpui::{
actions, div, fill, point, px, relative, rems, size, AnyElement, AppContext, Bounds, actions, div, fill, point, px, relative, rems, size, AnyElement, AppContext, Bounds,
@ -261,12 +261,6 @@ impl TextInput {
self self
} }
/// Set the size of the input field.
pub fn size(mut self, size: impl Into<Size>) -> Self {
self.size = size.into();
self
}
/// Set true to show the clear button when the input field is not empty. /// Set true to show the clear button when the input field is not empty.
pub fn cleanable(mut self, cleanable: bool) -> Self { pub fn cleanable(mut self, cleanable: bool) -> Self {
self.cleanable = cleanable; self.cleanable = cleanable;
@ -659,6 +653,13 @@ impl TextInput {
} }
} }
impl Sizable for TextInput {
fn with_size(mut self, size: impl Into<Size>) -> Self {
self.size = size.into();
self
}
}
impl ViewInputHandler for TextInput { impl ViewInputHandler for TextInput {
fn text_for_range( fn text_for_range(
&mut self, &mut self,

2
crates/ui/src/lib.rs
View file

@ -44,7 +44,7 @@ pub use disableable::Disableable;
pub use event::InteractiveElementExt; pub use event::InteractiveElementExt;
pub use focusable::FocusableCycle; pub use focusable::FocusableCycle;
pub use selectable::{Selectable, Selection}; pub use selectable::{Selectable, Selection};
pub use styled_ext::{Size, StyledExt}; pub use styled_ext::{Sizable, Size, StyledExt};
pub use colors::*; pub use colors::*;
pub use icon::*; pub use icon::*;

21
crates/ui/src/list/list_item.rs
View file

@ -5,7 +5,9 @@ use gpui::{
}; };
use smallvec::SmallVec; 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)] #[derive(IntoElement)]
pub struct ListItem { pub struct ListItem {
@ -144,15 +146,14 @@ impl RenderOnce for ListItem {
.gap_x_1() .gap_x_1()
.child(div().w_full().overflow_hidden().children(self.children)) .child(div().w_full().overflow_hidden().children(self.children))
.when_some(self.check_icon, |this, icon| { .when_some(self.check_icon, |this, icon| {
this.child(div().w_5().items_center().justify_center().when( this.child(
self.confirmed, div().w_5().items_center().justify_center().when(
|this| { self.confirmed,
this.child( |this| {
icon.size(Size::Small) this.child(icon.small().text_color(cx.theme().muted_foreground))
.text_color(cx.theme().muted_foreground), },
) ),
}, )
))
}), }),
) )
.when_some(self.suffix, |this, suffix| this.child(suffix(cx))) .when_some(self.suffix, |this, suffix| this.child(suffix(cx)))

6
crates/ui/src/popup_menu.rs
View file

@ -7,7 +7,9 @@ use gpui::{
VisualContext as _, WindowContext, 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]); actions!(menu, [Confirm, Dismiss, SelectNext, SelectPrev]);
@ -280,7 +282,7 @@ impl Render for PopupMenu {
.map(|this| { .map(|this| {
this.child(div().absolute().text_sm().map(|this| { this.child(div().absolute().text_sm().map(|this| {
if let Some(icon) = icon { if let Some(icon) = icon {
this.child(icon.clone().size(Size::Small).clone()) this.child(icon.clone().small().clone())
} else { } else {
this.children(icon_placeholder.clone()) this.children(icon_placeholder.clone())
} }

24
crates/ui/src/styled_ext.rs
View file

@ -194,6 +194,30 @@ impl From<Pixels> 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<Size>) -> 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)] #[allow(unused)]
pub trait StyleSized<T: Styled> { pub trait StyleSized<T: Styled> {
fn input_text_size(self, size: Size) -> Self; fn input_text_size(self, size: Size) -> Self;

15
crates/ui/src/switch.rs
View file

@ -1,7 +1,7 @@
use crate::{ use crate::{
stack::h_flex, stack::h_flex,
theme::{ActiveTheme, Colorize}, theme::{ActiveTheme, Colorize},
Disableable, Size, Disableable, Sizable, Size,
}; };
use gpui::{ use gpui::{
div, prelude::FluentBuilder as _, Div, InteractiveElement, IntoElement, ParentElement as _, div, prelude::FluentBuilder as _, Div, InteractiveElement, IntoElement, ParentElement as _,
@ -59,12 +59,6 @@ impl Switch {
self 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 { pub fn on_click(mut self, handler: impl Fn(&bool, &mut WindowContext) + 'static) -> Self {
self.on_click = Some(Box::new(handler)); self.on_click = Some(Box::new(handler));
self self
@ -76,6 +70,13 @@ impl Switch {
} }
} }
impl Sizable for Switch {
fn with_size(mut self, size: impl Into<Size>) -> Self {
self.size = size.into();
self
}
}
impl Disableable for Switch { impl Disableable for Switch {
fn disabled(mut self, disabled: bool) -> Self { fn disabled(mut self, disabled: bool) -> Self {
self.disabled = disabled; self.disabled = disabled;