chore: add transparency and overlay

Cargo.toml

@@ -40,7 +40,7 @@ publish = false
 
 [dev-dependencies]
 dioxus = { path = "./packages/dioxus" }
-dioxus-desktop = { path = "./packages/desktop" }
+dioxus-desktop = { path = "./packages/desktop", features = ["transparent"] }
 dioxus-ssr = { path = "./packages/ssr" }
 dioxus-router = { path = "./packages/router" }
 fermi = { path = "./packages/fermi" }

examples/overlay.rs

@@ -1,8 +1,8 @@
 use dioxus::prelude::*;
-use dioxus_desktop::{use_window, WindowBuilder};
+use dioxus_desktop::{tao::dpi::PhysicalPosition, use_window, Config, LogicalSize, WindowBuilder};
 
 fn main() {
-    dioxus_desktop::launch(app);
+    dioxus_desktop::launch_cfg(app, make_config());
 }
 
 fn app(cx: Scope) -> Element {
@@ -10,25 +10,54 @@ fn app(cx: Scope) -> Element {
 
     cx.render(rsx! {
         div {
-            button {
+            width: "100%",
-                onclick: move |_| {
+            height: "100%",
-                    let dom = VirtualDom::new(app);
+            background_color: "red",
-                    window.new_window(dom, Default::default());
+            border: "1px solid black",
-                },
+
-                "Open overlay"
+            div {
+                width: "100%",
+                height: "10px",
+                background_color: "black",
+                onmousedown: move |_| window.drag(),
             }
+
+            "This is an overlay!"
         }
     })
 }
 
-fn popup(cx: Scope) -> Element {
+fn make_config() -> dioxus_desktop::Config {
-    cx.render(rsx! {
+    dioxus_desktop::Config::default()
-        div {
+        .with_window(make_window())
-            width: "200px",
+        .with_custom_head(
-            height: "200px",
+            r#"
-            background: "white",
+<style type="text/css">
-            border: "1px solid black",
+    html, body {
-            "This is a popup!"
+        height: 100px;
-        }
+        margin: 0;
-    })
+        overscroll-behavior-y: none;
+        overscroll-behavior-x: none;
+        overflow: hidden;
+    }
+    #main, #bodywrap {
+        height: 100%;
+        margin: 0;
+        overscroll-behavior-x: none;
+        overscroll-behavior-y: none;
+    }
+</style>
+"#
+            .to_owned(),
+        )
+}
+
+fn make_window() -> WindowBuilder {
+    WindowBuilder::new()
+        .with_transparent(true)
+        .with_decorations(false)
+        .with_resizable(false)
+        .with_always_on_top(true)
+        .with_position(PhysicalPosition::new(0, 0))
+        .with_max_inner_size(LogicalSize::new(100000, 50))
 }

packages/desktop/src/desktop_context.rs

@@ -96,7 +96,9 @@ impl DesktopContext {
         let window = self.webview.window();
 
         // if the drag_window has any errors, we don't do anything
-        window.fullscreen().is_none().then(|| window.drag_window());
+        if window.fullscreen().is_none() {
+            window.drag_window().unwrap();
+        }
     }
 
     /// Toggle whether the window is maximized or not