Add Sizable trait to impl small, xsmall, large and apply to Button, Input, Dropdown, Switch. (#113)
This commit is contained in:
Jason Lee
GitHub
parent
2e1a4f84fd
commit
827f57fb6a
19 changed files with 167 additions and 135 deletions
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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::<SharedString>::new(), None, cx)
|
||||
.size(ui::Size::Small)
|
||||
.small()
|
||||
.empty(|cx| {
|
||||
h_flex()
|
||||
.h_24()
|
||||
|
|
|
|||
|
|
@ -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::<f32>().is_ok())
|
||||
.placeholder("validate to limit float number.")
|
||||
}),
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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())
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
})),
|
||||
|
|
|
|||
|
|
@ -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"))
|
||||
|
|
|
|||
|
|
@ -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<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.
|
||||
pub fn label(mut self, label: impl Into<SharedString>) -> 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<Size>) -> 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)
|
||||
|
|
|
|||
|
|
@ -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()));
|
||||
|
|
|
|||
|
|
@ -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<Length>) -> Self {
|
||||
self.width = width.into();
|
||||
|
|
@ -519,6 +514,16 @@ fn with_style(d: Focusable<Div>, cx: &WindowContext) -> Focusable<Div> {
|
|||
.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<DismissEvent> for Dropdown<D> where D: DropdownDelegate + 'static {}
|
||||
impl<D> FocusableView for Dropdown<D>
|
||||
|
|
@ -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)),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -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<Size>) -> Self {
|
||||
self.size = Some(size.into());
|
||||
|
||||
self
|
||||
}
|
||||
|
||||
/// Create a new view for the icon
|
||||
pub fn view(self, cx: &mut WindowContext) -> View<Icon> {
|
||||
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 {
|
||||
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
|
||||
let text_color = self.text_color.unwrap_or_else(|| cx.text_style().color);
|
||||
|
|
|
|||
|
|
@ -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<Size>) -> 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<Size>) -> 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",
|
||||
|
|
|
|||
|
|
@ -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<Size>) -> 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<Size>) -> Self {
|
||||
self.size = size.into();
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl ViewInputHandler for TextInput {
|
||||
fn text_for_range(
|
||||
&mut self,
|
||||
|
|
|
|||
|
|
@ -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::*;
|
||||
|
|
|
|||
|
|
@ -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)))
|
||||
|
|
|
|||
|
|
@ -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())
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)]
|
||||
pub trait StyleSized<T: Styled> {
|
||||
fn input_text_size(self, size: Size) -> Self;
|
||||
|
|
|
|||
|
|
@ -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<Size>) -> Self {
|
||||
self.size = size.into();
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl Disableable for Switch {
|
||||
fn disabled(mut self, disabled: bool) -> Self {
|
||||
self.disabled = disabled;
|
||||
|
|
|
|||
Loading…
Reference in a new issue