button: Fix Button click prevent_default. (#84)

- Use icon in title_bar for switch theme, and add GitHub icon.

assets/icons/github.svg

@@ -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>

assets/icons/moon.svg

@@ -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>

assets/icons/sun.svg

@@ -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>

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())
+                                    .style(ButtonStyle::Ghost)
-                                    .label_side(LabelSide::Left)
+                                    .on_click(move |_, cx| {
-                                    .label("Dark Mode")
+                                        let mode = match cx.theme().mode.is_dark() {
-                                    .on_click(move |checked, cx| {
+                                            true => ui::theme::ThemeMode::Light,
-                                        let mode = match checked {
+                                            false => ui::theme::ThemeMode::Dark,
-                                            true => ui::theme::ThemeMode::Dark,
-                                            false => ui::theme::ThemeMode::Light,
                                         };
 
                                         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")
+                                    }),
                             ),
                     ),
             )

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())
+                    this.on_mouse_down(MouseButton::Left, |_, cx| {
-                        .on_click(move |event, cx| {
+                        cx.prevent_default();
-                            cx.prevent_default();
+                        cx.stop_propagation()
-                            cx.stop_propagation();
+                    })
-                            (on_click)(event, cx)
+                    .on_click(move |event, cx| {
-                        })
+                        (on_click)(event, cx);
+                    })
                 },
             )
             .when(self.disabled, |this| {

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",
         }