Merge branch 'main' of https://github.com/marc2332/freya into docs/co…

…mponents-previews
marc2332 · Sep 30, 2024 · 6ddd706 · 6ddd706
2 parents dbe2dc1 + 3078a28
commit 6ddd706
Show file tree

Hide file tree

Showing 87 changed files with 2,268 additions and 1,252 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -14,6 +14,7 @@ hot-reload = ["freya/hot-reload"]
 custom-tokio-rt = ["freya/custom-tokio-rt"]
 performance-overlay = ["freya/performance-overlay"]
 fade-cached-incremental-areas = ["freya/fade-cached-incremental-areas"]
+disable-zoom-shortcuts = ["freya/disable-zoom-shortcuts"]
 
 [patch.crates-io]
 # dioxus = { git = "https://github.com/DioxusLabs/dioxus", rev = "7beacdf9c76ae5412d3c2bcd55f7c5d87f486a0f" }
@@ -94,6 +95,7 @@ tree-sitter-highlight = "0.23.0"
 tree-sitter-rust = "0.23.0"
 rfd = "0.14.1"
 bytes = "1.5.0"
+dioxus-sdk = { workspace = true }
 
 [profile.release]
 lto = true

diff --git a/README.md b/README.md
@@ -25,7 +25,7 @@
 fn app() -> Element {
     let mut count = use_signal(|| 0);
 
-    render!(
+    rsx!(
         rect {
             height: "50%",
             width: "100%",

diff --git a/book/src/setup.md b/book/src/setup.md
@@ -31,6 +31,10 @@ sudo dnf install openssl-devel pkgconf cmake gtk3-devel clang-devel -y
 sudo dnf groupinstall "Development Tools" "C Development Tools and Libraries" -y
 ```
 
+#### NixOS
+
+Copy this [flake.nix](https://github.com/kuba375/freya-flake) into your project root. Then you can enter a dev shell by `nix develop`. 
+
 Don't hesitate to contribute so other distros can be added here.
 
 ### MacOS

diff --git a/crates/components/src/accordion.rs b/crates/components/src/accordion.rs
@@ -100,7 +100,7 @@ pub fn Accordion(props: AccordionProps) -> Element {
             height: "auto",
             background: "{background}",
             onclick,
-            border: "1 solid {border_fill}",
+            border: "1 inner {border_fill}",
             {&props.summary}
             rect {
                 overflow: "clip",

diff --git a/crates/components/src/button.rs b/crates/components/src/button.rs
@@ -186,9 +186,9 @@ pub fn Button(
         ButtonStatus::Idle => background,
     };
     let border = if focus.is_selected() {
-        format!("2 solid {focus_border_fill}")
+        format!("2 inner {focus_border_fill}")
     } else {
-        format!("1 solid {border_fill}")
+        format!("1 inner {border_fill}")
     };
 
     rsx!(
@@ -212,7 +212,6 @@ pub fn Button(
             text_align: "center",
             main_align: "center",
             cross_align: "center",
-            line_height: "1.1",
             {&children}
         }
     )

diff --git a/crates/components/src/checkbox.rs b/crates/components/src/checkbox.rs
@@ -1,7 +1,11 @@
 use dioxus::prelude::*;
-use freya_elements::elements as dioxus_elements;
+use freya_elements::{
+    elements as dioxus_elements,
+    events::KeyboardEvent,
+};
 use freya_hooks::{
     use_applied_theme,
+    use_focus,
     CheckboxTheme,
     CheckboxThemeWith,
 };
@@ -68,30 +72,45 @@ pub fn Checkbox(
     /// Theme override.
     theme: Option<CheckboxThemeWith>,
 ) -> Element {
+    let focus = use_focus();
     let CheckboxTheme {
+        border_fill,
         unselected_fill,
         selected_fill,
         selected_icon_fill,
     } = use_applied_theme!(&theme, checkbox);
-    let (fill, border) = if selected {
+    let (inner_fill, outer_fill) = if selected {
         (selected_fill.as_ref(), selected_fill.as_ref())
     } else {
         ("transparent", unselected_fill.as_ref())
     };
+    let border = if focus.is_selected() {
+        format!("4 outer {}", border_fill)
+    } else {
+        "none".to_string()
+    };
+
+    let onkeydown = move |_: KeyboardEvent| {};
 
     rsx!(
         rect {
-            width: "18",
-            height: "18",
-            padding: "4",
-            main_align: "center",
-            cross_align: "center",
+            border,
             corner_radius: "4",
-            border: "2 solid {border}",
-            background: "{fill}",
-            if selected {
-                TickIcon {
-                    fill: selected_icon_fill
+            rect {
+                a11y_id: focus.attribute(),
+                width: "18",
+                height: "18",
+                padding: "4",
+                main_align: "center",
+                cross_align: "center",
+                corner_radius: "4",
+                border: "2 inner {outer_fill}",
+                background: "{inner_fill}",
+                onkeydown,
+                if selected {
+                    TickIcon {
+                        fill: selected_icon_fill
+                    }
                 }
             }
         }
@@ -172,29 +191,29 @@ mod test {
         utils.wait_for_update().await;
 
         // If the inner square exists it means that the Checkbox is selected, otherwise it isn't
-        assert!(root.get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(1).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(2).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(0).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(1).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(2).get(0).get(0).get(0).get(0).is_placeholder());
 
         utils.click_cursor((20., 50.)).await;
 
-        assert!(root.get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(1).get(0).get(0).get(0).is_element());
-        assert!(root.get(2).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(0).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(1).get(0).get(0).get(0).get(0).is_element());
+        assert!(root.get(2).get(0).get(0).get(0).get(0).is_placeholder());
 
         utils.click_cursor((10., 90.)).await;
         utils.wait_for_update().await;
 
-        assert!(root.get(0).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(1).get(0).get(0).get(0).is_element());
-        assert!(root.get(2).get(0).get(0).get(0).is_element());
+        assert!(root.get(0).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(1).get(0).get(0).get(0).get(0).is_element());
+        assert!(root.get(2).get(0).get(0).get(0).get(0).is_element());
 
         utils.click_cursor((10., 10.)).await;
         utils.click_cursor((10., 50.)).await;
         utils.wait_for_update().await;
 
-        assert!(root.get(0).get(0).get(0).get(0).is_element());
-        assert!(root.get(1).get(0).get(0).get(0).is_placeholder());
-        assert!(root.get(2).get(0).get(0).get(0).is_element());
+        assert!(root.get(0).get(0).get(0).get(0).get(0).is_element());
+        assert!(root.get(1).get(0).get(0).get(0).get(0).is_placeholder());
+        assert!(root.get(2).get(0).get(0).get(0).get(0).is_element());
     }
 }
diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs
@@ -274,7 +274,7 @@ where
                 color: "{font_theme.color}",
                 corner_radius: "8",
                 padding: "8 16",
-                border: "1 solid {border_fill}",
+                border: "1 inner {border_fill}",
                 shadow: "0 4 5 0 rgb(0, 0, 0, 0.1)",
                 direction: "horizontal",
                 main_align: "center",
@@ -299,9 +299,9 @@ where
                         rect {
                             onglobalclick,
                             onglobalkeydown,
-                            layer: "-99",
+                            layer: "-1000",
                             margin: "{margin}",
-                            border: "1 solid {border_fill}",
+                            border: "1 inner {border_fill}",
                             overflow: "clip",
                             corner_radius: "8",
                             background: "{dropdown_background}",
@@ -379,7 +379,7 @@ mod test {
         utils.click_cursor((15., 15.)).await;
 
         // Click on the second option
-        utils.click_cursor((45., 100.)).await;
+        utils.click_cursor((45., 90.)).await;
         utils.wait_for_update().await;
         utils.wait_for_update().await;
 

diff --git a/crates/components/src/image.rs b/crates/components/src/image.rs
@@ -0,0 +1,57 @@
+/// Generate a Dioxus component rendering the specified image.
+///
+/// Example:
+///
+/// ```no_run
+/// # use freya::prelude::*;
+///
+/// import_svg!(Ferris, "../../../examples/rust_logo.png", "100%", "100%");
+/// import_svg!(FerrisWithRequiredSize, "../../../examples/rust_logo.png");
+///
+/// fn app() -> Element {
+///     rsx!(Ferris {})
+/// }
+///
+/// fn another_app() -> Element {
+///     rsx!(FerrisWithRequiredSize {
+///         width: "150",
+///         height: "40%",
+///     })
+/// }
+/// ```
+#[macro_export]
+macro_rules! import_image {
+    ($component_name:ident, $path:expr, $width: expr, $height: expr) => {
+        // Generate a function with the name derived from the file name
+        #[allow(non_snake_case)]
+        #[dioxus::prelude::component]
+        pub fn $component_name(
+            #[props(default = $width.to_string())] width: String,
+            #[props(default = $height.to_string())] height: String,
+        ) -> freya::prelude::Element {
+            use freya::prelude::*;
+            let image_data = static_bytes(include_bytes!($path));
+
+            rsx!(image {
+                width,
+                height,
+                image_data
+            })
+        }
+    };
+    ($component_name:ident, $path:expr) => {
+        // Generate a function with the name derived from the file name
+        #[allow(non_snake_case)]
+        #[dioxus::prelude::component]
+        pub fn $component_name(width: String, height: String) -> freya::prelude::Element {
+            use freya::prelude::*;
+            let image_data = static_bytes(include_bytes!($path));
+
+            rsx!(image {
+                width,
+                height,
+                image_data
+            })
+        }
+    };
+}
diff --git a/crates/components/src/input.rs b/crates/components/src/input.rs
@@ -176,7 +176,7 @@ pub fn Input(
     let (background, cursor_char) = if focus.is_focused() {
         (
             theme.hover_background,
-            editable.editor().read().visible_cursor_pos().to_string(),
+            editable.editor().read().cursor_pos().to_string(),
         )
     } else {
         (theme.background, "none".to_string())
@@ -210,7 +210,7 @@ pub fn Input(
             direction: "vertical",
             color: "{color}",
             background: "{background}",
-            border: "1 solid {border_fill}",
+            border: "1 inner {border_fill}",
             shadow: "{shadow}",
             corner_radius: "{corner_radius}",
             margin: "{margin}",
@@ -221,6 +221,7 @@ pub fn Input(
             a11y_auto_focus: "{auto_focus}",
             onkeydown,
             onkeyup,
+            overflow: "clip",
             paragraph {
                 margin: "8 12",
                 onglobalclick,

diff --git a/crates/components/src/lib.rs b/crates/components/src/lib.rs
@@ -15,6 +15,7 @@ mod gesture_area;
 mod graph;
 mod hooks;
 mod icons;
+mod image;
 mod input;
 mod link;
 mod loader;

diff --git a/crates/components/src/link.rs b/crates/components/src/link.rs
@@ -15,7 +15,10 @@ use freya_hooks::{
 };
 use winit::event::MouseButton;
 
-use crate::Tooltip;
+use crate::{
+    Tooltip,
+    TooltipContainer,
+};
 
 /// Tooltip configuration for the [`Link`] component.
 #[derive(Clone, PartialEq)]
@@ -159,7 +162,7 @@ pub fn Link(
         Some(LinkTooltip::Custom(str)) => Some(str),
     };
 
-    let main_rect = rsx! {
+    let link = rsx! {
         rect {
             onmouseenter,
             onmouseleave,
@@ -169,27 +172,19 @@ pub fn Link(
         }
     };
 
-    let Some(tooltip) = tooltip else {
-        return rsx!({ main_rect });
-    };
-
-    rsx! {
-        rect {
-            {main_rect}
-            rect {
-                height: "0",
-                width: "0",
-                layer: "-999",
-                rect {
-                    width: "100v",
-                    if *is_hovering.read() {
-                        Tooltip {
-                            url: tooltip
-                        }
+    if let Some(tooltip) = tooltip {
+        rsx!(
+            TooltipContainer {
+                tooltip: rsx!(
+                    Tooltip {
+                        text: tooltip
                     }
-                }
+                )
+                {link}
             }
-        }
+        )
+    } else {
+        link
     }
 }
 

diff --git a/crates/components/src/popup.rs b/crates/components/src/popup.rs
@@ -27,7 +27,7 @@ pub fn PopupBackground(children: Element) -> Element {
         position: "absolute",
         position_top: "0",
         position_left: "0",
-        layer: "-99",
+        layer: "-2000",
         main_align: "center",
         cross_align: "center",
         {children}

diff --git a/crates/components/src/progress_bar.rs b/crates/components/src/progress_bar.rs
@@ -47,6 +47,8 @@ pub fn ProgressBar(
         height,
     } = use_applied_theme!(&theme, progress_bar);
 
+    let progress = progress.clamp(0., 100.);
+
     rsx!(
         rect {
             width: "{width}",
@@ -59,8 +61,7 @@ pub fn ProgressBar(
                 background: "{background}",
                 font_size: "13",
                 direction: "horizontal",
-                border: "1 solid {background}",
-                border_align: "outer",
+                border: "1 outer {background}",
                 rect {
                     corner_radius: "999",
                     width: "{progress}%",