Merge branch 'main' of https://github.com/marc2332/freya into feat/ne…

…w-book

.vscode/settings.json

@@ -4,4 +4,4 @@
         "log",
         "use_camera"
     ]
-}
+}

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" }

README.md

@@ -68,11 +68,13 @@ 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><!-- sponsors -->
+<!-- sponsors --><a href="https://github.com/piny4man"><img src="https://github.com/piny4man.png" width="60px" alt="" /></a><a href="https://github.com/albinekb"><img src="https://github.com/albinekb.png" width="60px" alt="Albin Ekblom" /></a><!-- sponsors -->
 
 ### Want to try it? 🤔
 
-⚠️ First, see [Setup guide](https://book.freyaui.dev/setup.html).
+👋 Make sure to check the [Setup guide](https://book.freyaui.dev/setup.html) first.
+
+> ⚠️ If you happen to be on Windows using `windows-gnu` and get compile errors, maybe go check this [issue](https://github.com/marc2332/freya/issues/794).
 
 Clone this repo and run:
 

book/src/learn/setup.md

@@ -22,6 +22,15 @@ Install these packages:
 sudo pacman -S base-devel openssl cmake gtk3 clang
 ```
 
+#### Fedora
+
+Install these packages:
+
+```sh
+sudo dnf install openssl-devel pkgconf cmake gtk3-devel clang-devel -y
+sudo dnf groupinstall "Development Tools" "C Development Tools and Libraries" -y
+```
+
 Don't hesitate to contribute so other distros can be added here.
 
 ### MacOS
@@ -34,4 +43,4 @@ The following custom linkers are not supported at the moment:
 
 - `mold`
 
-If there is another one not supported don't hesitate to add it here.
+If there is another one not supported don't hesitate to add it here.

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}
             }
         }
     )

crates/components/src/lib.rs

@@ -29,6 +29,7 @@ mod scroll_views;
 mod sidebar;
 mod slider;
 mod snackbar;
+mod svg;
 mod switch;
 mod table;
 mod tabs;

crates/components/src/scroll_views/mod.rs

@@ -1,6 +1,7 @@
 mod scroll_bar;
 mod scroll_thumb;
 mod scroll_view;
+mod use_scroll_controller;
 mod virtual_scroll_view;
 
 use freya_elements::events::{
@@ -10,6 +11,7 @@ use freya_elements::events::{
 pub use scroll_bar::*;
 pub use scroll_thumb::*;
 pub use scroll_view::*;
+pub use use_scroll_controller::*;
 pub use virtual_scroll_view::*;
 
 // Holding alt while scrolling makes it 5x faster (VSCode behavior).

crates/components/src/scroll_views/scroll_view.rs

@@ -16,6 +16,7 @@ use freya_hooks::{
     ScrollViewThemeWith,
 };
 
+use super::use_scroll_controller::ScrollController;
 use crate::{
     get_container_size,
     get_corrected_scroll_position,
@@ -24,6 +25,10 @@ use crate::{
     get_scrollbar_pos_and_size,
     is_scrollbar_visible,
     manage_key_event,
+    scroll_views::use_scroll_controller::{
+        use_scroll_controller,
+        ScrollConfig,
+    },
     Axis,
     ScrollBar,
     ScrollThumb,
@@ -48,6 +53,8 @@ pub struct ScrollViewProps {
     /// Enable scrolling with arrow keys.
     #[props(default = true, into)]
     pub scroll_with_arrows: bool,
+
+    pub scroll_controller: Option<ScrollController>,
 }
 
 /// Scrollable area with bidirectional support and scrollbars.
@@ -59,28 +66,66 @@ pub struct ScrollViewProps {
 /// fn app() -> Element {
 ///     rsx!(
 ///         ScrollView {
-///              theme: theme_with!(ScrollViewTheme {
-///                 width: "100%".into(),
-///                 height: "300".into(),
-///              }),
-///              show_scrollbar: true,
-///              rect {
+///             rect {
 ///                 background: "blue",
-///                 height: "500",
+///                 height: "400",
+///                 width: "100%"
+///             }
+///             rect {
+///                 background: "red",
+///                 height: "400",
 ///                 width: "100%"
 ///              }
 ///         }
 ///     )
 /// }
 /// ```
+///
+/// # With a Scroll Controller
+///
+/// ```no_run
+/// # use freya::prelude::*;
+/// fn app() -> Element {
+///     let mut scroll_controller = use_scroll_controller(|| ScrollConfig::default());
+///
+///     rsx!(
+///         ScrollView {
+///             scroll_controller,
+///             rect {
+///                 background: "blue",
+///                 height: "400",
+///                 width: "100%"
+///             }
+///             Button {
+///                 label {
+///                     onclick: move |_| {
+///                          scroll_controller.scroll_to(ScrollPosition::Start, ScrollDirection::Vertical);
+///                     },
+///                     label {
+///                         "Scroll up"
+///                     }
+///                 }
+///             }
+///             rect {
+///                 background: "red",
+///                 height: "400",
+///                 width: "100%"
+///             }
+///         }
+///     )
+/// }
+/// ```
 #[allow(non_snake_case)]
 pub fn ScrollView(props: ScrollViewProps) -> Element {
     let mut clicking_scrollbar = use_signal::<Option<(Axis, f64)>>(|| None);
     let mut clicking_shift = use_signal(|| false);
     let mut clicking_alt = use_signal(|| false);
-    let mut scrolled_y = use_signal(|| 0);
-    let mut scrolled_x = use_signal(|| 0);
+    let mut scroll_controller = props
+        .scroll_controller
+        .unwrap_or_else(|| use_scroll_controller(ScrollConfig::default));
+    let (mut scrolled_x, mut scrolled_y) = scroll_controller.into();
     let (node_ref, size) = use_node();
+
     let mut focus = use_focus();
     let theme = use_applied_theme!(&props.theme, scroll_view);
     let scrollbar_theme = use_applied_theme!(&props.scrollbar_theme, scroll_bar);
@@ -92,6 +137,8 @@ pub fn ScrollView(props: ScrollViewProps) -> Element {
     let show_scrollbar = props.show_scrollbar;
     let scroll_with_arrows = props.scroll_with_arrows;
 
+    scroll_controller.use_apply(size.inner.width, size.inner.height);
+
     let direction_is_vertical = user_direction == "vertical";
 
     let vertical_scrollbar_is_visible =