Merge branch 'main' into feat/consider-margin-in-percentage-sizing

marc2332 · Oct 1, 2023 · a8805a3 · a8805a3
2 parents fd24530 + 4d57f6a
commit a8805a3
Show file tree

Hide file tree

Showing 31 changed files with 313 additions and 79 deletions.
diff --git a/Cargo.toml b/Cargo.toml
@@ -37,7 +37,7 @@ dioxus-core = { version = "0.4" }
 dioxus-hot-reload = { version = "0.4", features = ["file_watcher"] }
 dioxus-router = { version = "0.4" }
 
-skia-safe = { version = "0.63.0", features = ["gl", "textlayout", "svg"] }
+skia-safe = { version = "0.66.3", features = ["gl", "textlayout", "svg"] }
 
 gl = "0.14.0"
 glutin = "0.30.6"

diff --git a/book/src/differences_with_dioxus.md b/book/src/differences_with_dioxus.md
@@ -7,7 +7,7 @@ These are the main differences between Freya and the different Dioxus renderers
 | Category                             | Freya            | Dioxus                          |
 |--------------------------------------|------------------|---------------------------------|
 | **Elements, attributes and events**  | Custom           | HTML                            |
-| **Layout**                           | Custom ([`torin`](https://github.com/marc2332/freya/tree/main/torin))   | WebView and [`taffy`](https://github.com/DioxusLabs/taffy)               |
+| **Layout** | [`Torin`](https://github.com/marc2332/freya/tree/main/crates/torin) | WebView and [`Taffy`](https://github.com/DioxusLabs/taffy) |
 | **Renderer**                         | Skia             | WebView or WGPU                 |
 | **Components library**               | Custom           | None, but can use CSS libraries |
 | **Devtools**                         | Custom           | Provided in Webview             |

diff --git a/book/src/guides/animating.md b/book/src/guides/animating.md
@@ -19,13 +19,12 @@ fn main() {
 }
 
  fn app(cx: Scope) -> Element {
-    let animation = use_animation(cx, 0.0);
+    let animation = use_animation(cx, || 0.0);
 
     let progress = animation.value();
 
-    use_effect(cx, (), move |_| {
+    use_memo(cx, (), move |_| {
         animation.start(Animation::new_linear(0.0..=100.0, 50));
-        async move {}
     });
 
     render!(rect {

diff --git a/book/src/guides/components.md b/book/src/guides/components.md
@@ -20,3 +20,4 @@ Freya comes with a set of ready to use components:
 - [`Slider`](https://docs.rs/freya/latest/freya/components/fn.Slider.html)
 - [`ThemeProvider`](https://docs.rs/freya/latest/freya/components/fn.ThemeProvider.html)
 - [`Tooltip`](https://docs.rs/freya/latest/freya/components/fn.Tooltip.html)
+- [`ProgressBar`](https://docs.rs/freya/latest/freya/components/fn.ProgressBar.html)
diff --git a/crates/components/Cargo.toml b/crates/components/Cargo.toml
@@ -31,6 +31,7 @@ dioxus-router = { workspace = true }
 
 winit = { workspace = true }
 tokio = { workspace = true }
+tracing = { workspace = true }
 
 open = "1"
 reqwest = { version = "0.11.13", features = ["json"] }

diff --git a/crates/components/src/accordion.rs b/crates/components/src/accordion.rs
@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::MouseEvent;
-use freya_hooks::{use_animation, use_get_theme, use_node, Animation};
+use freya_hooks::{use_animation, use_get_theme, use_node, AccordionTheme, Animation};
 
 /// [`Accordion`] component properties.
 #[derive(Props)]
@@ -23,15 +23,15 @@ pub struct AccordionProps<'a> {
 #[allow(non_snake_case)]
 pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
     let theme = use_get_theme(cx);
-    let accordion_theme = &theme.accordion;
-    let animation = use_animation(cx, 0.0);
+    let animation = use_animation(cx, || 0.0);
     let open = use_state(cx, || false);
     let (node_ref, size) = use_node(cx);
 
     let animation_value = animation.value();
+    let AccordionTheme { background, color } = theme.accordion;
 
     // Adapt the accordion if the body size changes
-    use_effect(
+    use_memo(
         cx,
         &(
             size.area.width(),
@@ -44,7 +44,6 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
                 if (height as f64) < animation.value() && !animating {
                     animation.set_value(size.area.height() as f64);
                 }
-                async move {}
             }
         },
     );
@@ -62,12 +61,12 @@ pub fn Accordion<'a>(cx: Scope<'a, AccordionProps<'a>>) -> Element<'a> {
     render!(
         rect {
             overflow: "clip",
-            color: "{accordion_theme.color}",
+            color: "{color}",
             padding: "10",
             corner_radius: "3",
             width: "100%",
             height: "auto",
-            background: "{accordion_theme.background}",
+            background: "{background}",
             onclick: onclick,
             &cx.props.summary
             rect {

diff --git a/crates/components/src/dropdown.rs b/crates/components/src/dropdown.rs
@@ -170,9 +170,8 @@ where
     let color = theme.dropdown.font_theme.color;
 
     // Update the provided value if the passed value changes
-    use_effect(cx, &cx.props.value, move |value| {
+    use_memo(cx, &cx.props.value, move |value| {
         *selected.write() = value;
-        async move {}
     });
 
     // Close the dropdown if clicked anywhere

diff --git a/crates/components/src/external_link.rs b/crates/components/src/external_link.rs
@@ -47,7 +47,6 @@ pub struct ExternalLinkProps<'a> {
 #[allow(non_snake_case)]
 pub fn ExternalLink<'a>(cx: Scope<'a, ExternalLinkProps<'a>>) -> Element {
     let theme = use_get_theme(cx);
-    let theme = &theme.external_link;
     let is_hovering = use_state(cx, || false);
     let show_tooltip = cx.props.show_tooltip.unwrap_or(true);
 
@@ -68,7 +67,7 @@ pub fn ExternalLink<'a>(cx: Scope<'a, ExternalLinkProps<'a>>) -> Element {
     };
 
     let color = if *is_hovering.get() {
-        theme.highlight_color
+        theme.external_link.highlight_color
     } else {
         "inherit"
     };

diff --git a/crates/components/src/gesture_area.rs b/crates/components/src/gesture_area.rs
@@ -62,7 +62,7 @@ type EventsQueue = VecDeque<(Instant, TouchEvent)>;
 pub fn GestureArea<'a>(cx: Scope<'a, GestureAreaProps<'a>>) -> Element {
     let touch_events = use_ref::<EventsQueue>(cx, VecDeque::new);
 
-    use_effect(cx, touch_events, move |_| {
+    use_memo(cx, touch_events, move |_| {
         // Keep the touch events queue under a certain size
         if touch_events.read().len() > MAX_EVENTS_QUEUE {
             touch_events.write_silent().pop_front();
@@ -132,8 +132,6 @@ pub fn GestureArea<'a>(cx: Scope<'a, GestureAreaProps<'a>>) -> Element {
                 _ => {}
             }
         }
-
-        async move {}
     });
 
     let ontouchcancel = |e: TouchEvent| {

diff --git a/crates/components/src/graph.rs b/crates/components/src/graph.rs
@@ -45,7 +45,7 @@ pub struct GraphProps {
 pub fn Graph(cx: Scope<GraphProps>) -> Element {
     let platform = use_platform(cx);
 
-    use_effect(cx, (cx.props,), move |_| async move {
+    use_memo(cx, (cx.props,), move |_| {
         platform.send(EventMessage::RequestRerender)
     });
 

diff --git a/crates/components/src/input.rs b/crates/components/src/input.rs
@@ -3,6 +3,8 @@ use crate::ScrollView;
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::{KeyboardData, MouseEvent};
+use freya_hooks::ButtonTheme;
+use freya_hooks::FontTheme;
 use freya_hooks::{
     use_editable, use_focus, use_get_theme, EditableConfig, EditableEvent, EditableMode, TextEditor,
 };
@@ -66,20 +68,18 @@ pub fn Input<'a>(cx: Scope<'a, InputProps<'a>>) -> Element {
     let focus_manager = use_focus(cx);
 
     let text = &cx.props.value;
-    let button_theme = &theme.button;
     let cursor_attr = editable.cursor_attr(cx);
     let highlights_attr = editable.highlights_attr(cx, 0);
     let width = &cx.props.width;
     let height = &cx.props.height;
     let max_lines = &cx.props.max_lines;
 
-    use_effect(cx, &(cx.props.value.to_string(),), {
+    use_memo(cx, &(cx.props.value.to_string(),), {
         to_owned![editable];
         move |(text,)| {
             editable.editor().with_mut(|editor| {
                 editor.set(&text);
             });
-            async move {}
         }
     });
 
@@ -122,8 +122,11 @@ pub fn Input<'a>(cx: Scope<'a, InputProps<'a>>) -> Element {
     } else {
         "none".to_string()
     };
-    let background = button_theme.background;
-    let color = button_theme.font_theme.color;
+    let ButtonTheme {
+        background,
+        font_theme: FontTheme { color, .. },
+        ..
+    } = theme.button;
 
     render!(
         CursorArea {

diff --git a/crates/components/src/lib.rs b/crates/components/src/lib.rs
@@ -13,6 +13,7 @@ mod graph;
 mod input;
 mod loader;
 mod network_image;
+mod progress_bar;
 mod scroll_views;
 mod slider;
 mod switch;
@@ -31,6 +32,7 @@ pub use graph::*;
 pub use input::*;
 pub use loader::*;
 pub use network_image::*;
+pub use progress_bar::*;
 pub use scroll_views::*;
 pub use slider::*;
 pub use switch::*;

diff --git a/crates/components/src/loader.rs b/crates/components/src/loader.rs
@@ -2,7 +2,7 @@ use std::time::Duration;
 
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
-use freya_hooks::use_get_theme;
+use freya_hooks::{use_get_theme, LoaderTheme};
 use tokio::time::interval;
 
 /// [`Loader`] component properties. Currently empty.
@@ -22,7 +22,10 @@ pub fn Loader(cx: Scope<LoaderProps>) -> Element {
     let theme = use_get_theme(cx);
     let degrees = use_state(cx, || 0);
 
-    let loader_theme = theme.loader;
+    let LoaderTheme {
+        primary_color,
+        secondary_color,
+    } = theme.loader;
 
     use_effect(cx, (), move |_| {
         to_owned![degrees];
@@ -45,8 +48,8 @@ pub fn Loader(cx: Scope<LoaderProps>) -> Element {
         height: "31",
         svg_content: r#"
                 <svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M15.5235 27.6652C22.2292 27.6652 27.6652 22.2292 27.6652 15.5235C27.6652 8.81783 22.2292 3.38182 15.5235 3.38182C8.81783 3.38182 3.38182 8.81783 3.38182 15.5235C3.38182 22.2292 8.81783 27.6652 15.5235 27.6652Z" stroke="{loader_theme.primary_color}"  stroke-width="4"/>
-                    <path d="M27.6652 15.5235C27.6652 8.81859 22.2284 3.38182 15.5235 3.38182" stroke="{loader_theme.secondary_color}" stroke-width="4"/>
+                    <path d="M15.5235 27.6652C22.2292 27.6652 27.6652 22.2292 27.6652 15.5235C27.6652 8.81783 22.2292 3.38182 15.5235 3.38182C8.81783 3.38182 3.38182 8.81783 3.38182 15.5235C3.38182 22.2292 8.81783 27.6652 15.5235 27.6652Z" stroke="{primary_color}"  stroke-width="4"/>
+                    <path d="M27.6652 15.5235C27.6652 8.81859 22.2284 3.38182 15.5235 3.38182" stroke="{secondary_color}" stroke-width="4"/>
                 </svg>
             "#
     })

diff --git a/crates/components/src/progress_bar.rs b/crates/components/src/progress_bar.rs
@@ -0,0 +1,92 @@
+use dioxus::prelude::*;
+use freya_elements::elements as dioxus_elements;
+use freya_hooks::{use_get_theme, ProgressBarTheme};
+
+/// [`ProgressBar`] component properties.
+#[derive(Props, PartialEq)]
+pub struct ProgressBarProps {
+    /// Show a label with the current progress. Default to false.
+    #[props(default = false)]
+    show_progress: bool,
+
+    /// Width of the progress bar. Default to 100%.
+    #[props(default = "100%".to_string(), into)]
+    width: String,
+
+    /// Height of the progress bar. Default to 20px.
+    #[props(default = "20".to_string(), into)]
+    height: String,
+    /// Percentage of the progress bar.
+    pub progress: f32,
+}
+
+/// `ProgressBar` component.
+///
+/// # Props
+/// See [`ProgressBarProps`].
+///
+/// # Styling
+/// Inherits the [`ProgressBarTheme`](freya_hooks::ProgressBarTheme) theme.
+///
+/// # Example
+///
+/// ```no_run
+/// # use freya::prelude::*;
+/// fn app(cx: Scope) -> Element {
+///     render!(
+///         ProgressBar {
+///             progress: 75.0
+///         }
+///     )
+/// }
+/// ```
+///
+#[allow(non_snake_case)]
+pub fn ProgressBar(cx: Scope<ProgressBarProps>) -> Element {
+    let theme = use_get_theme(cx);
+
+    let ProgressBarTheme {
+        background,
+        progress_background,
+    } = theme.progress_bar;
+    let width = &cx.props.width;
+    let height = &cx.props.height;
+    let show_progress = cx.props.show_progress;
+    let progress = cx.props.progress;
+
+    render!(
+        rect {
+            width: "{width}",
+            height: "{height}",
+            padding: "2",
+            rect {
+                corner_radius: "999",
+                width: "100%",
+                height: "100%",
+                shadow: "0 2 10 1 rgb(0, 0, 0, 45)",
+                background: "{background}",
+                font_size: "13",
+                direction: "horizontal",
+                rect {
+                    corner_radius: "999",
+                    width: "{progress}%",
+                    height: "100%",
+                    background: "{progress_background}",
+                    display: "center",
+                    overflow: "clip",
+                    if show_progress {
+                        rsx!(
+                            label {
+                                align: "center",
+                                width: "100%",
+                                color: "white",
+                                max_lines: "1",
+                                "{progress.floor()}%"
+                            }
+                        )
+                    }
+                }
+            }
+        }
+    )
+}
diff --git a/crates/components/src/scroll_views/scroll_bar.rs b/crates/components/src/scroll_views/scroll_bar.rs
@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
-use freya_hooks::use_get_theme;
+use freya_hooks::{use_get_theme, ScrollbarTheme};
 
 #[derive(Props)]
 pub struct ScrollBarProps<'a> {
@@ -22,7 +22,8 @@ pub struct ScrollBarProps<'a> {
 #[allow(non_snake_case)]
 pub fn ScrollBar<'a>(cx: Scope<'a, ScrollBarProps<'a>>) -> Element<'a> {
     let theme = use_get_theme(cx);
-    let scrollbar_theme = &theme.scrollbar;
+    let ScrollbarTheme { background, .. } = &theme.scrollbar;
+
     render!(
         rect {
             overflow: "clip",
@@ -31,7 +32,7 @@ pub fn ScrollBar<'a>(cx: Scope<'a, ScrollBarProps<'a>>) -> Element<'a> {
             height: "{cx.props.height}",
             offset_x: "{cx.props.offset_x}",
             offset_y: "{cx.props.offset_y}",
-            background: "{scrollbar_theme.background}",
+            background: "{background}",
             &cx.props.children
         }
     )

diff --git a/crates/components/src/scroll_views/scroll_thumb.rs b/crates/components/src/scroll_views/scroll_thumb.rs
@@ -1,7 +1,7 @@
 use dioxus::prelude::*;
 use freya_elements::elements as dioxus_elements;
 use freya_elements::events::MouseEvent;
-use freya_hooks::use_get_theme;
+use freya_hooks::{use_get_theme, ScrollbarTheme};
 
 #[derive(Props)]
 pub struct ScrollThumbProps<'a> {
@@ -15,7 +15,10 @@ pub struct ScrollThumbProps<'a> {
 #[allow(non_snake_case)]
 pub fn ScrollThumb<'a>(cx: Scope<'a, ScrollThumbProps<'a>>) -> Element<'a> {
     let theme = use_get_theme(cx);
-    let scrollbar_theme = &theme.scrollbar;
+    let ScrollbarTheme {
+        thumb_background, ..
+    } = &theme.scrollbar;
+
     render!(
         rect {
             onmousedown: |e| {
@@ -28,7 +31,7 @@ pub fn ScrollThumb<'a>(cx: Scope<'a, ScrollThumbProps<'a>>) -> Element<'a> {
                 width: "100%",
                 height: "100%",
                 corner_radius: "8",
-                background: "{scrollbar_theme.thumb_background}",
+                background: "{thumb_background}",
             }
         }
     )