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

Fix button icon color support (#57)

Browse source
This commit is contained in:
Jason Lee 2024-07-23 13:45:34 +08:00 committed by GitHub
parent 652efd187c
commit 30f34dc780
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 44 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/icons/heart-off.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart-off"><line x1="2" y1="2" x2="22" y2="22"/><path d="M16.5 16.5 12 21l-7-7c-1.5-1.45-3-3.2-3-5.5a5.5 5.5 0 0 1 2.14-4.35"/><path d="M8.76 3.1c1.15.22 2.13.78 3.24 1.9 1.5-1.5 2.74-2 4.5-2A5.5 5.5 0 0 1 22 8.5c0 2.12-1.3 3.78-2.67 5.17"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 450 B

1
assets/icons/heart.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 364 B

1
assets/icons/star-off.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star-off"><path d="M8.34 8.34 2 9.27l5 4.87L5.82 21 12 17.77 18.18 21l-.59-3.43"/><path d="M18.42 12.76 22 9.27l-6.91-1L12 2l-1.44 2.91"/><line x1="2" x2="22" y1="2" y2="22"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 384 B

1
assets/icons/star.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-star"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 329 B

1
assets/icons/thumbs-down.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-down"><path d="M17 14V2"/><path d="M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 405 B

1
assets/icons/thumbs-up.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-thumbs-up"><path d="M7 10v12"/><path d="M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 404 B

25
crates/story/src/icon_story.rs
View file

@ -1,5 +1,10 @@
use gpui::{px, rems, ParentElement, Render, Styled, View, VisualContext as _, WindowContext};
use ui::{h_flex, theme::ActiveTheme as _, v_flex, Icon, IconName};
use ui::{
button::{Button, ButtonStyle},
h_flex,
theme::ActiveTheme as _,
v_flex, Icon, IconName,
};
pub struct IconStory {}
@ -25,6 +30,24 @@ impl Render for IconStory {
.text_color(ui::green_500()),
)
.child(Icon::new(IconName::Maximize).size(px(55.)))
.child(
Button::new("like1", cx)
.icon(
Icon::new(IconName::Heart)
.text_color(ui::gray_500())
.size_6(),
)
.style(ButtonStyle::Ghost),
)
.child(
Button::new("like2", cx)
.icon(
Icon::new(IconName::HeartOff)
.text_color(ui::red_500())
.size_6(),
)
.style(ButtonStyle::Ghost),
)
.child(
Icon::new(IconName::Plus)
.w(rems(3.))

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

@ -267,7 +267,7 @@ impl RenderOnce for Button {
.text_color(text_color)
.when(!self.loading, |this| {
this.when_some(self.icon, |this, icon| {
this.child(icon.size(self.size).text_color(text_color))
this.child(div().text_color(text_color).child(icon.size(self.size)))
})
})
.when(self.loading, |this| {

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

@ -30,6 +30,12 @@ pub enum IconName {
Eye,
EyeOff,
Inbox,
Heart,
HeartOff,
Star,
StarOff,
ThumbsUp,
ThumbsDown,
}
impl IconName {
@ -59,6 +65,12 @@ impl IconName {
IconName::Eye => "icons/eye.svg",
IconName::EyeOff => "icons/eye-off.svg",
IconName::Inbox => "icons/inbox.svg",
IconName::Heart => "icons/heart.svg",
IconName::HeartOff => "icons/heart-off.svg",
IconName::Star => "icons/star.svg",
IconName::StarOff => "icons/star-off.svg",
IconName::ThumbsUp => "icons/thumbs-up.svg",
IconName::ThumbsDown => "icons/thumbs-down.svg",
}
.into()
}
@ -171,7 +183,7 @@ impl Styled for Icon {
impl RenderOnce for Icon {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
let text_color = self.text_color.unwrap_or_else(|| cx.theme().foreground);
let text_color = self.text_color.unwrap_or_else(|| cx.text_style().color);
self.base
.text_color(text_color)