Add large variant for buttons

This commit is contained in:
Marshall Bowers 2023-12-20 18:47:22 -05:00
parent 93c8bee747
commit 11807bb82d
3 changed files with 13 additions and 0 deletions

View file

@ -255,6 +255,7 @@ impl Render for BufferSearchBar {
.child( .child(
ToggleButton::new("search-mode-text", SearchMode::Text.label()) ToggleButton::new("search-mode-text", SearchMode::Text.label())
.style(ButtonStyle::Filled) .style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.selected(self.current_mode == SearchMode::Text) .selected(self.current_mode == SearchMode::Text)
.on_click(cx.listener(move |_, _event, cx| { .on_click(cx.listener(move |_, _event, cx| {
cx.dispatch_action(SearchMode::Text.action()) cx.dispatch_action(SearchMode::Text.action())
@ -271,6 +272,7 @@ impl Render for BufferSearchBar {
.child( .child(
ToggleButton::new("search-mode-regex", SearchMode::Regex.label()) ToggleButton::new("search-mode-regex", SearchMode::Regex.label())
.style(ButtonStyle::Filled) .style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.selected(self.current_mode == SearchMode::Regex) .selected(self.current_mode == SearchMode::Regex)
.on_click(cx.listener(move |_, _event, cx| { .on_click(cx.listener(move |_, _event, cx| {
cx.dispatch_action(SearchMode::Regex.action()) cx.dispatch_action(SearchMode::Regex.action())

View file

@ -233,6 +233,7 @@ impl ButtonStyle {
/// that are consistently sized with buttons. /// that are consistently sized with buttons.
#[derive(Default, PartialEq, Clone, Copy)] #[derive(Default, PartialEq, Clone, Copy)]
pub enum ButtonSize { pub enum ButtonSize {
Large,
#[default] #[default]
Default, Default,
Compact, Compact,
@ -242,6 +243,7 @@ pub enum ButtonSize {
impl ButtonSize { impl ButtonSize {
fn height(self) -> Rems { fn height(self) -> Rems {
match self { match self {
ButtonSize::Large => rems(32. / 16.),
ButtonSize::Default => rems(22. / 16.), ButtonSize::Default => rems(22. / 16.),
ButtonSize::Compact => rems(18. / 16.), ButtonSize::Compact => rems(18. / 16.),
ButtonSize::None => rems(16. / 16.), ButtonSize::None => rems(16. / 16.),
@ -377,6 +379,7 @@ impl RenderOnce for ButtonLike {
}) })
.gap_1() .gap_1()
.map(|this| match self.size { .map(|this| match self.size {
ButtonSize::Large => this.px_2(),
ButtonSize::Default | ButtonSize::Compact => this.px_1(), ButtonSize::Default | ButtonSize::Compact => this.px_1(),
ButtonSize::None => this, ButtonSize::None => this,
}) })

View file

@ -31,21 +31,25 @@ impl Render for ToggleButtonStory {
.child( .child(
ToggleButton::new(1, "Apple") ToggleButton::new(1, "Apple")
.style(ButtonStyle::Filled) .style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.first(), .first(),
) )
.child( .child(
ToggleButton::new(2, "Banana") ToggleButton::new(2, "Banana")
.style(ButtonStyle::Filled) .style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.middle(), .middle(),
) )
.child( .child(
ToggleButton::new(3, "Cherry") ToggleButton::new(3, "Cherry")
.style(ButtonStyle::Filled) .style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.middle(), .middle(),
) )
.child( .child(
ToggleButton::new(4, "Dragonfruit") ToggleButton::new(4, "Dragonfruit")
.style(ButtonStyle::Filled) .style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.last(), .last(),
), ),
) )
@ -61,22 +65,26 @@ impl Render for ToggleButtonStory {
.child( .child(
ToggleButton::new(1, "Apple") ToggleButton::new(1, "Apple")
.style(ButtonStyle::Filled) .style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.first(), .first(),
) )
.child( .child(
ToggleButton::new(2, "Banana") ToggleButton::new(2, "Banana")
.style(ButtonStyle::Filled) .style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.selected(true) .selected(true)
.middle(), .middle(),
) )
.child( .child(
ToggleButton::new(3, "Cherry") ToggleButton::new(3, "Cherry")
.style(ButtonStyle::Filled) .style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.middle(), .middle(),
) )
.child( .child(
ToggleButton::new(4, "Dragonfruit") ToggleButton::new(4, "Dragonfruit")
.style(ButtonStyle::Filled) .style(ButtonStyle::Filled)
.size(ButtonSize::Large)
.last(), .last(),
), ),
) )