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

button: Fix Button click prevent_default. (#84)

Browse source 
- Use icon in title_bar for switch theme, and add GitHub icon.
This commit is contained in:
Jason Lee 2024-07-30 00:28:18 +08:00 committed by GitHub
parent 8aaeb9383d
commit f496c241d7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 45 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1 @@
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/></svg>
Side by side

After

Width:  |  Height:  |  Size: 790 B

1
assets/icons/moon.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-moon"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 260 B

1
assets/icons/sun.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-sun"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="m4.93 4.93 1.41 1.41"/><path d="m17.66 17.66 1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="m6.34 17.66-1.41 1.41"/><path d="m19.07 4.93-1.41 1.41"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 454 B

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

@ -9,9 +9,9 @@ use workspace::{TitleBar, Workspace};
use std::sync::Arc;
use ui::{
switch::{LabelSide, Switch},
button::{Button, ButtonStyle},
theme::{ActiveTheme, Theme},
Size,
Clickable as _, IconName, Size,
};
use crate::app_state::AppState;
@ -275,20 +275,33 @@ impl Render for StoryWorkspace {
.justify_end()
.px_2()
.mr_3()
.gap_2()
.child(
Switch::new("theme-mode")
Button::new("theme-mode", cx)
.when_else(
cx.theme().mode.is_dark(),
|this| this.icon(IconName::Moon),
|this| this.icon(IconName::Sun),
)
.size(Size::Small)
.checked(cx.theme().mode.is_dark())
.label_side(LabelSide::Left)
.label("Dark Mode")
.on_click(move |checked, cx| {
let mode = match checked {
true => ui::theme::ThemeMode::Dark,
false => ui::theme::ThemeMode::Light,
.style(ButtonStyle::Ghost)
.on_click(move |_, cx| {
let mode = match cx.theme().mode.is_dark() {
true => ui::theme::ThemeMode::Light,
false => ui::theme::ThemeMode::Dark,
};
Theme::change(mode, cx);
}),
)
.child(
Button::new("github", cx)
.icon(IconName::GitHub)
.size(Size::Small)
.style(ButtonStyle::Ghost)
.on_click(|_, cx| {
cx.open_url("https://github.com/huacnlee/gpui-component")
}),
),
),
)

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

@ -245,12 +245,13 @@ impl RenderOnce for Button {
.when_some(
self.on_click.filter(|_| !self.disabled),
|this, on_click| {
this.on_mouse_down(MouseButton::Left, |_, cx| cx.stop_propagation())
.on_click(move |event, cx| {
cx.prevent_default();
cx.stop_propagation();
(on_click)(event, cx)
})
this.on_mouse_down(MouseButton::Left, |_, cx| {
cx.prevent_default();
cx.stop_propagation()
})
.on_click(move |event, cx| {
(on_click)(event, cx);
})
},
)
.when(self.disabled, |this| {

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

@ -14,8 +14,8 @@ pub enum IconName {
ChevronDown,
ChevronLeft,
ChevronRight,
ChevronUp,
ChevronsUpDown,
ChevronUp,
CircleX,
Close,
Dash,
@ -24,6 +24,7 @@ pub enum IconName {
EllipsisVertical,
Eye,
EyeOff,
GitHub,
Heart,
HeartOff,
Inbox,
@ -33,12 +34,14 @@ pub enum IconName {
Maximize,
Minimize,
Minus,
Moon,
Plus,
Search,
Star,
StarOff,
SortAscending,
SortDescending,
Star,
StarOff,
Sun,
ThumbsDown,
ThumbsUp,
}
@ -54,8 +57,8 @@ impl IconName {
IconName::ChevronDown => "icons/chevron-down.svg",
IconName::ChevronLeft => "icons/chevron-left.svg",
IconName::ChevronRight => "icons/chevron-right.svg",
IconName::ChevronUp => "icons/chevron-up.svg",
IconName::ChevronsUpDown => "icons/chevrons-up-down.svg",
IconName::ChevronUp => "icons/chevron-up.svg",
IconName::CircleX => "icons/circle-x.svg",
IconName::Close => "icons/close.svg",
IconName::Dash => "icons/dash.svg",
@ -64,6 +67,7 @@ impl IconName {
IconName::EllipsisVertical => "icons/ellipsis-vertical.svg",
IconName::Eye => "icons/eye.svg",
IconName::EyeOff => "icons/eye-off.svg",
IconName::GitHub => "icons/github.svg",
IconName::Heart => "icons/heart.svg",
IconName::HeartOff => "icons/heart-off.svg",
IconName::Inbox => "icons/inbox.svg",
@ -73,12 +77,14 @@ impl IconName {
IconName::Maximize => "icons/maximize.svg",
IconName::Minimize => "icons/minimize.svg",
IconName::Minus => "icons/minus.svg",
IconName::Moon => "icons/moon.svg",
IconName::Plus => "icons/plus.svg",
IconName::Search => "icons/search.svg",
IconName::Star => "icons/star.svg",
IconName::StarOff => "icons/star-off.svg",
IconName::SortAscending => "icons/sort-ascending.svg",
IconName::SortDescending => "icons/sort-descending.svg",
IconName::Star => "icons/star.svg",
IconName::StarOff => "icons/star-off.svg",
IconName::Sun => "icons/sun.svg",
IconName::ThumbsDown => "icons/thumbs-down.svg",
IconName::ThumbsUp => "icons/thumbs-up.svg",
}