Update examples, add css

examples/window_event.rs

@@ -1,3 +1,14 @@
+//! This example demonstrates how to handle window events and change window properties.
+//!
+//! We're able to do things like:
+//! - implement window dragging
+//! - toggle fullscreen
+//! - toggle always on top
+//! - toggle window decorations
+//! - change the window title
+//!
+//! The entire featuresuite of wry and tao is available to you
+
 use dioxus::desktop::{window, Config, WindowBuilder};
 use dioxus::prelude::*;
 
@@ -14,29 +25,40 @@ fn main() {
 }
 
 fn app() -> Element {
-    let mut fullscreen = use_signal(|| false);
-    let mut always_on_top = use_signal(|| false);
-    let mut decorations = use_signal(|| false);
-
     rsx!(
-        link {
-            href: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css",
-            rel: "stylesheet"
+        link { href: "https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css", rel: "stylesheet" }
+        Header {}
+        div { class: "container mx-auto",
+            div { class: "grid grid-cols-5",
+                SetOnTop {}
+                SetDecorations {}
+                SetTitle {}
+            }
         }
-        header {
-            class: "text-gray-400 bg-gray-900 body-font",
-            onmousedown: move |_| window().drag(),
+    )
+}
+
+#[component]
+fn Header() -> Element {
+    let mut fullscreen = use_signal(|| false);
+
+    rsx! {
+        header { class: "text-gray-400 bg-gray-900 body-font", onmousedown: move |_| window().drag(),
             div { class: "container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center",
                 a { class: "flex title-font font-medium items-center text-white mb-4 md:mb-0",
                     span { class: "ml-3 text-xl", "Dioxus" }
                 }
                 nav { class: "md:ml-auto flex flex-wrap items-center text-base justify-center" }
+
+                // Set the window to minimized
                 button {
                     class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0",
                     onmousedown: |evt| evt.stop_propagation(),
                     onclick: move |_| window().set_minimized(true),
                     "Minimize"
                 }
+
+                // Toggle fullscreen
                 button {
                     class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0",
                     onmousedown: |evt| evt.stop_propagation(),
@@ -47,6 +69,9 @@ fn app() -> Element {
                     },
                     "Fullscreen"
                 }
+
+                // Close the window
+                // If the window is the last window open, the app will close, if you configured the close behavior to do so
                 button {
                     class: "inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0",
                     onmousedown: |evt| evt.stop_propagation(),
@@ -55,40 +80,57 @@ fn app() -> Element {
                 }
             }
         }
-        br {}
-        div { class: "container mx-auto",
-            div { class: "grid grid-cols-5",
-                div {
-                    button {
-                        class: "inline-flex items-center text-white bg-green-500 border-0 py-1 px-3 hover:bg-green-700 rounded",
-                        onmousedown: |evt| evt.stop_propagation(),
-                        onclick: move |_| {
-                            window().set_always_on_top(!always_on_top());
-                            always_on_top.toggle();
-                        },
-                        "Always On Top"
-                    }
-                }
-                div {
-                    button {
-                        class: "inline-flex items-center text-white bg-blue-500 border-0 py-1 px-3 hover:bg-green-700 rounded",
-                        onmousedown: |evt| evt.stop_propagation(),
-                        onclick: move |_| {
-                            window().set_decorations(!decorations());
-                            decorations.toggle();
-                        },
-                        "Set Decorations"
-                    }
-                }
-                div {
-                    button {
-                        class: "inline-flex items-center text-white bg-blue-500 border-0 py-1 px-3 hover:bg-green-700 rounded",
-                        onmousedown: |evt| evt.stop_propagation(),
-                        onclick: move |_| window().set_title("Dioxus Application"),
-                        "Change Title"
-                    }
-                }
+    }
+}
+
+#[component]
+fn SetOnTop() -> Element {
+    let mut always_on_top = use_signal(|| false);
+
+    rsx! {
+        div {
+            button {
+                class: "inline-flex items-center text-white bg-green-500 border-0 py-1 px-3 hover:bg-green-700 rounded",
+                onmousedown: |evt| evt.stop_propagation(),
+                onclick: move |_| {
+                    window().set_always_on_top(!always_on_top());
+                    always_on_top.toggle();
+                },
+                "Always On Top"
             }
         }
-    )
+    }
+}
+
+#[component]
+fn SetDecorations() -> Element {
+    let mut decorations = use_signal(|| false);
+
+    rsx! {
+        div {
+            button {
+                class: "inline-flex items-center text-white bg-blue-500 border-0 py-1 px-3 hover:bg-green-700 rounded",
+                onmousedown: |evt| evt.stop_propagation(),
+                onclick: move |_| {
+                    window().set_decorations(!decorations());
+                    decorations.toggle();
+                },
+                "Set Decorations"
+            }
+        }
+    }
+}
+
+#[component]
+fn SetTitle() -> Element {
+    rsx! {
+        div {
+            button {
+                class: "inline-flex items-center text-white bg-blue-500 border-0 py-1 px-3 hover:bg-green-700 rounded",
+                onmousedown: |evt| evt.stop_propagation(),
+                onclick: move |_| window().set_title("Dioxus Application"),
+                "Change Title"
+            }
+        }
+    }
 }