diff --git a/assets/icons/github.svg b/assets/icons/github.svg
new file mode 100644
index 00000000..92adec97
--- /dev/null
+++ b/assets/icons/github.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/icons/moon.svg b/assets/icons/moon.svg
new file mode 100644
index 00000000..dfadc201
--- /dev/null
+++ b/assets/icons/moon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/assets/icons/sun.svg b/assets/icons/sun.svg
new file mode 100644
index 00000000..668d7789
--- /dev/null
+++ b/assets/icons/sun.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/crates/app/src/story_workspace.rs b/crates/app/src/story_workspace.rs
index 10c310aa..72e26cbd 100644
--- a/crates/app/src/story_workspace.rs
+++ b/crates/app/src/story_workspace.rs
@@ -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")
+ }),
),
),
)
diff --git a/crates/ui/src/button.rs b/crates/ui/src/button.rs
index a633ae65..a23c0271 100644
--- a/crates/ui/src/button.rs
+++ b/crates/ui/src/button.rs
@@ -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| {
diff --git a/crates/ui/src/icon.rs b/crates/ui/src/icon.rs
index b2531684..008a899b 100644
--- a/crates/ui/src/icon.rs
+++ b/crates/ui/src/icon.rs
@@ -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",
}