Merge branch 'main' into feat/plugin-handle

marc2332 · Aug 30, 2024 · f8f520a · f8f520a
2 parents 5385983 + 182e1e0
commit f8f520a
Show file tree

Hide file tree

Showing 36 changed files with 1,629 additions and 966 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -12,6 +12,7 @@ devtools = ["freya/devtools"]
 use_camera = ["freya/use_camera"]
 hot-reload = ["freya/hot-reload"]
 custom-tokio-rt = ["freya/custom-tokio-rt"]
+performance-overlay = ["freya/performance-overlay"]
 
 [patch.crates-io]
 # dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
@@ -87,6 +88,7 @@ itertools = "0.13.0"
 home = "0.5.9"
 dioxus-query = "0.5.1"
 gilrs = "0.10.8"
+gl = { workspace = true }
 
 [profile.release]
 lto = true

diff --git a/README.md b/README.md
@@ -68,7 +68,7 @@ fn app() -> Element {
 
 Thanks to my sponsors for supporting this project! 😄
 
-<!-- sponsors --><a href="https://github.com/piny4man"><img src="https://github.com/piny4man.png" width="60px" alt="Alberto" /></a><a href="https://github.com/albinekb"><img src="https://github.com/albinekb.png" width="60px" alt="Albin Ekblom" /></a><!-- sponsors -->
+<!-- sponsors --><a href="https://github.com/piny4man"><img src="https://github.com/piny4man.png" width="60px" alt="" /></a><!-- sponsors -->
 
 ### Want to try it? 🤔
 

diff --git a/crates/components/src/accordion.rs b/crates/components/src/accordion.rs
@@ -4,13 +4,14 @@ use freya_elements::{
     events::MouseEvent,
 };
 use freya_hooks::{
-    use_animation_with_dependencies,
+    use_animation,
     use_applied_theme,
-    use_node,
     use_platform,
     AccordionTheme,
     AccordionThemeWith,
     AnimNum,
+    Ease,
+    Function,
 };
 use winit::window::CursorIcon;
 
@@ -43,10 +44,13 @@ pub struct AccordionProps {
 pub fn Accordion(props: AccordionProps) -> Element {
     let theme = use_applied_theme!(&props.theme, accordion);
     let mut open = use_signal(|| false);
-    let (node_ref, size) = use_node();
-
-    let animation = use_animation_with_dependencies(&size.area.height(), move |ctx, height| {
-        ctx.with(AnimNum::new(0., height).time(200))
+    let animation = use_animation(move |ctx| {
+        ctx.with(
+            AnimNum::new(0., 100.)
+                .time(300)
+                .function(Function::Expo)
+                .ease(Ease::Out),
+        )
     });
     let mut status = use_signal(AccordionStatus::default);
     let platform = use_platform();
@@ -101,13 +105,8 @@ pub fn Accordion(props: AccordionProps) -> Element {
             rect {
                 overflow: "clip",
                 width: "100%",
-                height: "{animation_value}",
-                rect {
-                    reference: node_ref,
-                    height: "auto",
-                    width: "100%",
-                    {&props.children}
-                }
+                height: "{animation_value}a",
+                {&props.children}
             }
         }
     )

diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs
@@ -242,6 +242,7 @@ where
     };
 
     let DropdownTheme {
+        width,
         font_theme,
         dropdown_background,
         background_button,
@@ -259,48 +260,56 @@ where
 
     rsx!(
         rect {
-            onmouseenter,
-            onmouseleave,
-            onclick,
-            onkeydown,
-            margin: "4",
-            focus_id,
-            background: "{button_background}",
-            color: "{font_theme.color}",
-            corner_radius: "8",
-            padding: "8 16",
-            border: "1 solid {border_fill}",
-            shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
-            direction: "horizontal",
-            main_align: "center",
-            cross_align: "center",
-            label {
-                "{selected}"
-            }
-            ArrowIcon {
-                rotate: "0",
-                fill: "{arrow_fill}",
-                theme: theme_with!(IconTheme {
-                    margin : "0 0 0 8".into(),
-                })
-            }
-        }
-        if *opened.read() {
+            direction: "vertical",
             rect {
-                height: "0",
+                width: "{width}",
+                onmouseenter,
+                onmouseleave,
+                onclick,
+                onkeydown,
+                margin: "4",
+                focus_id,
+                background: "{button_background}",
+                color: "{font_theme.color}",
+                corner_radius: "8",
+                padding: "8 16",
+                border: "1 solid {border_fill}",
+                shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
+                direction: "horizontal",
+                main_align: "center",
+                cross_align: "center",
+                label {
+                    "{selected}"
+                }
+                ArrowIcon {
+                    rotate: "0",
+                    fill: "{arrow_fill}",
+                    theme: theme_with!(IconTheme {
+                        margin : "0 0 0 8".into(),
+                    })
+                }
+            }
+            if *opened.read() {
                 rect {
-                    onglobalclick,
-                    onkeydown,
-                    layer: "-99",
-                    margin: "4",
-                    border: "1 solid {border_fill}",
-                    overflow: "clip",
-                    corner_radius: "8",
-                    background: "{dropdown_background}",
-                    shadow: "0 4 5 0 rgb(0, 0, 0, 0.3)",
-                    padding: "6",
-                    content: "fit",
-                    {props.children}
+                    height: "0",
+                    width: "0",
+                    rect {
+                        width: "100v",
+                        rect {
+                            onglobalclick,
+                            onkeydown,
+                            layer: "-99",
+                            margin: "4",
+                            border: "1 solid {border_fill}",
+                            overflow: "clip",
+                            corner_radius: "8",
+                            background: "{dropdown_background}",
+                            shadow: "0 4 5 0 rgb(0, 0, 0, 0.3)",
+                            padding: "6",
+                            content: "fit",
+                            {props.children}
+                        }
+                    }
                 }
             }
         }
@@ -344,7 +353,7 @@ mod test {
 
         let mut utils = launch_test(dropdown_app);
         let root = utils.root();
-        let label = root.get(0).get(0);
+        let label = root.get(0).get(0).get(0);
         utils.wait_for_update().await;
 
         // Currently closed