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

Add text style to Button with no padding. (#122)

Browse source
This commit is contained in:
Jason Lee 2024-08-08 20:13:52 +08:00 committed by GitHub
parent 966ce4c2dd
commit 2c531fa3ef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 49 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -150,6 +150,16 @@ impl Render for ButtonStory {
.when(compact, |this| this.compact())
.on_click(Self::on_click),
)
.child(
Button::new("button-5-text", cx)
.text()
.label("Text Button")
.disabled(disabled)
.selected(selected)
.loading(loading)
.when(compact, |this| this.compact())
.on_click(Self::on_click),
)
.child(
Button::new("button-6-custom", cx)
.custom(
@ -239,6 +249,17 @@ impl Render for ButtonStory {
.loading(loading)
.when(compact, |this| this.compact())
.on_click(Self::on_click),
)
.child(
Button::new("button-icon-6-text", cx)
.text()
.icon(IconName::Check)
.label("Text Button")
.disabled(disabled)
.selected(selected)
.loading(loading)
.when(compact, |this| this.compact())
.on_click(Self::on_click),
),
),
)

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

@ -79,6 +79,7 @@ pub enum ButtonStyle {
Outline,
Ghost,
Link,
Text,
Custom(ButtonCustomStyle),
}
@ -86,6 +87,14 @@ impl ButtonStyle {
fn is_link(&self) -> bool {
matches!(self, Self::Link)
}
fn is_text(&self) -> bool {
matches!(self, Self::Text)
}
fn no_padding(&self) -> bool {
self.is_link() || self.is_text()
}
}
#[derive(IntoElement)]
@ -164,6 +173,12 @@ impl Button {
self
}
/// With the text style for the Button, it will no padding look like a normal text.
pub fn text(mut self) -> Self {
self.style = ButtonStyle::Text;
self
}
/// With the custom style for the Button.
pub fn custom(mut self, custom: ButtonCustomStyle) -> Self {
self.style = ButtonStyle::Custom(custom);
@ -270,7 +285,7 @@ impl RenderOnce for Button {
.items_center()
.justify_center()
.cursor_pointer()
.when(!style.is_link(), |this| {
.when(!style.no_padding(), |this| {
if self.label.is_none() && self.children.is_empty() {
// Icon Button
match self.size {
@ -387,7 +402,9 @@ impl ButtonStyle {
ButtonStyle::Primary => cx.theme().primary,
ButtonStyle::Secondary => cx.theme().secondary,
ButtonStyle::Danger => cx.theme().destructive,
ButtonStyle::Outline | ButtonStyle::Ghost | ButtonStyle::Link => cx.theme().transparent,
ButtonStyle::Outline | ButtonStyle::Ghost | ButtonStyle::Link | ButtonStyle::Text => {
cx.theme().transparent
}
ButtonStyle::Custom(colors) => colors.color,
}
}
@ -400,6 +417,7 @@ impl ButtonStyle {
}
ButtonStyle::Danger => cx.theme().destructive_foreground,
ButtonStyle::Link => cx.theme().link,
ButtonStyle::Text => cx.theme().foreground,
ButtonStyle::Custom(colors) => colors.foreground,
}
}
@ -410,7 +428,7 @@ impl ButtonStyle {
ButtonStyle::Secondary => cx.theme().border,
ButtonStyle::Danger => cx.theme().destructive,
ButtonStyle::Outline => cx.theme().border,
ButtonStyle::Ghost | ButtonStyle::Link => cx.theme().transparent,
ButtonStyle::Ghost | ButtonStyle::Link | ButtonStyle::Text => cx.theme().transparent,
ButtonStyle::Custom(colors) => colors.border,
}
}
@ -443,6 +461,7 @@ impl ButtonStyle {
ButtonStyle::Danger => cx.theme().destructive_hover,
ButtonStyle::Ghost => cx.theme().secondary,
ButtonStyle::Link => cx.theme().transparent,
ButtonStyle::Text => cx.theme().transparent,
ButtonStyle::Custom(colors) => colors.hover,
};
let border = self.border_color(cx);
@ -468,11 +487,13 @@ impl ButtonStyle {
}
ButtonStyle::Danger => cx.theme().destructive_active,
ButtonStyle::Link => cx.theme().transparent,
ButtonStyle::Text => cx.theme().transparent,
ButtonStyle::Custom(colors) => colors.active,
};
let border = self.border_color(cx);
let fg = match self {
ButtonStyle::Link => cx.theme().link_active,
ButtonStyle::Text => cx.theme().foreground.opacity(0.7),
_ => self.text_color(cx),
};
let underline = self.underline(cx);
@ -493,11 +514,13 @@ impl ButtonStyle {
}
ButtonStyle::Danger => cx.theme().destructive_active,
ButtonStyle::Link => cx.theme().transparent,
ButtonStyle::Text => cx.theme().transparent,
ButtonStyle::Custom(colors) => colors.active,
};
let border = self.border_color(cx);
let fg = match self {
ButtonStyle::Link => cx.theme().link_active,
ButtonStyle::Text => cx.theme().foreground.opacity(0.7),
_ => self.text_color(cx),
};
let underline = self.underline(cx);
@ -512,11 +535,11 @@ impl ButtonStyle {
fn disabled(&self, cx: &WindowContext) -> ButtonStyles {
let bg = match self {
ButtonStyle::Link | ButtonStyle::Ghost => cx.theme().transparent,
ButtonStyle::Link | ButtonStyle::Ghost | ButtonStyle::Text => cx.theme().transparent,
_ => cx.theme().secondary.darken(0.2).grayscale(),
};
let fg = match self {
ButtonStyle::Link | ButtonStyle::Ghost => cx.theme().link.grayscale(),
ButtonStyle::Link | ButtonStyle::Text => cx.theme().link.grayscale(),
_ => cx.theme().secondary_foreground.darken(0.2).grayscale(),
};