From 8da68808cd690d8b229d26b3097c68168fc804c5 Mon Sep 17 00:00:00 2001 From: marc2332 Date: Mon, 9 Sep 2024 19:20:00 +0200 Subject: [PATCH] feat: Ergonomic improvements in ScrollView --- crates/components/src/scroll_views/mod.rs | 22 +++- .../src/scroll_views/scroll_view.rs | 91 +++++++++----- .../src/scroll_views/virtual_scroll_view.rs | 117 ++++++++++-------- crates/components/src/sidebar.rs | 8 +- crates/devtools/src/tabs/layout.rs | 8 +- crates/devtools/src/tabs/style.rs | 12 +- crates/devtools/src/tabs/tree.rs | 10 +- crates/hooks/src/theming/dark.rs | 6 - crates/hooks/src/theming/light.rs | 6 - crates/hooks/src/theming/mod.rs | 13 -- examples/accordion.rs | 4 +- examples/cloned_editor.rs | 8 +- examples/controlled_scroll.rs | 8 +- examples/material_design_app.rs | 6 +- examples/paragraph.rs | 8 +- examples/scroll.rs | 8 +- examples/simple_editor.rs | 6 +- examples/ui.rs | 10 +- 18 files changed, 165 insertions(+), 186 deletions(-) diff --git a/crates/components/src/scroll_views/mod.rs b/crates/components/src/scroll_views/mod.rs index d543830b4..bd10026ee 100644 --- a/crates/components/src/scroll_views/mod.rs +++ b/crates/components/src/scroll_views/mod.rs @@ -26,11 +26,25 @@ pub enum Axis { } #[doc(hidden)] -pub fn get_container_size(is_scrollbar_visible: bool, scrollbar_size: &str) -> String { - if is_scrollbar_visible { - format!("calc(100% - {scrollbar_size})") +pub fn get_container_size( + size: &str, + is_vertical: bool, + axis: Axis, + is_scrollbar_visible: bool, + scrollbar_size: &str, +) -> (String, String) { + let is_cross_fit = if is_vertical { + axis == Axis::X && size == "auto" } else { - "100%".to_string() + axis == Axis::Y && size == "auto" + }; + + if is_cross_fit { + (size.to_string(), size.to_string()) + } else if is_scrollbar_visible { + (format!("calc(100% - {scrollbar_size})"), "fill".to_string()) + } else { + ("100%".to_string(), "fill".to_string()) } } diff --git a/crates/components/src/scroll_views/scroll_view.rs b/crates/components/src/scroll_views/scroll_view.rs index 6312f393b..89a0c91da 100644 --- a/crates/components/src/scroll_views/scroll_view.rs +++ b/crates/components/src/scroll_views/scroll_view.rs @@ -13,7 +13,6 @@ use freya_hooks::{ use_focus, use_node, ScrollBarThemeWith, - ScrollViewThemeWith, }; use super::use_scroll_controller::ScrollController; @@ -38,8 +37,18 @@ use crate::{ /// Properties for the [`ScrollView`] component. #[derive(Props, Clone, PartialEq)] pub struct ScrollViewProps { - /// Theme override. - pub theme: Option, + /// Width of the ScrollView container. Default to `fill`. + #[props(default = "fill".into())] + pub width: String, + /// Height of the ScrollView container. Default to `fill`. + #[props(default = "fill".into())] + pub height: String, + /// Padding of the ScrollView container. + #[props(default = "0".to_string())] + pub padding: String, + /// Spacing for the ScrollView container. + #[props(default = "0".to_string())] + pub spacing: String, /// Theme override for the scrollbars. pub scrollbar_theme: Option, /// Inner children for the ScrollView. @@ -53,7 +62,7 @@ pub struct ScrollViewProps { /// Enable scrolling with arrow keys. #[props(default = true, into)] pub scroll_with_arrows: bool, - + /// Custom Scroll Controller for the ScrollView. pub scroll_controller: Option, } @@ -116,40 +125,54 @@ pub struct ScrollViewProps { /// } /// ``` #[allow(non_snake_case)] -pub fn ScrollView(props: ScrollViewProps) -> Element { +pub fn ScrollView( + ScrollViewProps { + width, + height, + padding, + spacing, + scrollbar_theme, + children, + direction, + show_scrollbar, + scroll_with_arrows, + scroll_controller, + }: ScrollViewProps, +) -> Element { let mut clicking_scrollbar = use_signal::>(|| None); let mut clicking_shift = use_signal(|| false); let mut clicking_alt = use_signal(|| false); - let mut scroll_controller = props - .scroll_controller - .unwrap_or_else(|| use_scroll_controller(ScrollConfig::default)); + let mut scroll_controller = + 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); - - let spacing = &theme.spacing; - let padding = &theme.padding; - let user_container_width = &theme.width; - let user_container_height = &theme.height; - let user_direction = &props.direction; - let show_scrollbar = props.show_scrollbar; - let scroll_with_arrows = props.scroll_with_arrows; + let applied_scrollbar_theme = use_applied_theme!(&scrollbar_theme, scroll_bar); scroll_controller.use_apply(size.inner.width, size.inner.height); - let direction_is_vertical = user_direction == "vertical"; + let direction_is_vertical = direction == "vertical"; let vertical_scrollbar_is_visible = is_scrollbar_visible(show_scrollbar, size.inner.height, size.area.height()); let horizontal_scrollbar_is_visible = is_scrollbar_visible(show_scrollbar, size.inner.width, size.area.width()); - let container_width = get_container_size(vertical_scrollbar_is_visible, &scrollbar_theme.size); - let container_height = - get_container_size(horizontal_scrollbar_is_visible, &scrollbar_theme.size); + let (container_width, content_width) = get_container_size( + &width, + direction_is_vertical, + Axis::X, + vertical_scrollbar_is_visible, + &applied_scrollbar_theme.size, + ); + let (container_height, content_height) = get_container_size( + &height, + direction_is_vertical, + Axis::Y, + horizontal_scrollbar_is_visible, + &applied_scrollbar_theme.size, + ); let corrected_scrolled_y = get_corrected_scroll_position( size.inner.height, @@ -319,12 +342,12 @@ pub fn ScrollView(props: ScrollViewProps) -> Element { }; let horizontal_scrollbar_size = if horizontal_scrollbar_is_visible { - &scrollbar_theme.size + &applied_scrollbar_theme.size } else { "0" }; let vertical_scrollbar_size = if vertical_scrollbar_is_visible { - &scrollbar_theme.size + &applied_scrollbar_theme.size } else { "0" }; @@ -347,8 +370,8 @@ pub fn ScrollView(props: ScrollViewProps) -> Element { role: "scrollView", overflow: "clip", direction: "horizontal", - width: "{user_container_width}", - height: "{user_container_height}", + width, + height, onglobalclick: onclick, onglobalmouseover: onmouseover, onkeydown, @@ -362,27 +385,27 @@ pub fn ScrollView(props: ScrollViewProps) -> Element { overflow: "clip", spacing: "{spacing}", padding: "{padding}", - height: "100%", - width: "100%", - direction: "{user_direction}", + height: "{content_height}", + width: "{content_width}", + direction: "{direction}", offset_y: "{corrected_scrolled_y}", offset_x: "{corrected_scrolled_x}", reference: node_ref, onwheel: onwheel, - {props.children} + {children} } ScrollBar { width: "100%", height: "{horizontal_scrollbar_size}", offset_x: "{scrollbar_x}", clicking_scrollbar: is_scrolling_x, - theme: props.scrollbar_theme.clone(), + theme: scrollbar_theme.clone(), ScrollThumb { clicking_scrollbar: is_scrolling_x, onmousedown: onmousedown_x, width: "{scrollbar_width}", height: "100%", - theme: props.scrollbar_theme.clone().clone() + theme: scrollbar_theme.clone() } } } @@ -391,13 +414,13 @@ pub fn ScrollView(props: ScrollViewProps) -> Element { height: "100%", offset_y: "{scrollbar_y}", clicking_scrollbar: is_scrolling_y, - theme: props.scrollbar_theme.clone(), + theme: scrollbar_theme.clone(), ScrollThumb { clicking_scrollbar: is_scrolling_y, onmousedown: onmousedown_y, width: "100%", height: "{scrollbar_height}", - theme: props.scrollbar_theme + theme: scrollbar_theme } } } diff --git a/crates/components/src/scroll_views/virtual_scroll_view.rs b/crates/components/src/scroll_views/virtual_scroll_view.rs index c3610def0..368d31542 100644 --- a/crates/components/src/scroll_views/virtual_scroll_view.rs +++ b/crates/components/src/scroll_views/virtual_scroll_view.rs @@ -17,7 +17,6 @@ use freya_hooks::{ use_focus, use_node, ScrollBarThemeWith, - ScrollViewThemeWith, }; use crate::{ @@ -43,8 +42,15 @@ pub struct VirtualScrollViewProps< Builder: 'static + Clone + Fn(usize, &Option) -> Element, BuilderArgs: Clone + 'static + PartialEq = (), > { - /// Theme override. - pub theme: Option, + /// Width of the VirtualScrollView container. Default to `fill`. + #[props(default = "fill".into())] + pub width: String, + /// Height of the VirtualScrollView container. Default to `fill`. + #[props(default = "fill".into())] + pub height: String, + /// Padding of the VirtualScrollView container. + #[props(default = "0".to_string())] + pub padding: String, /// Theme override for the scrollbars. pub scrollbar_theme: Option, /// Quantity of items in the VirtualScrollView. @@ -69,7 +75,7 @@ pub struct VirtualScrollViewProps< /// Default is `true`. #[props(default = true, into)] pub cache_elements: bool, - + /// Custom Scroll Controller for the Virtual ScrollView. pub scroll_controller: Option, } @@ -79,7 +85,9 @@ impl< > PartialEq for VirtualScrollViewProps { fn eq(&self, other: &Self) -> bool { - self.theme == other.theme + self.width == other.width + && self.height == other.height + && self.padding == other.padding && self.length == other.length && self.item_size == other.item_size && self.direction == other.direction @@ -170,43 +178,57 @@ pub fn VirtualScrollView< Builder: Clone + Fn(usize, &Option) -> Element, BuilderArgs: Clone + PartialEq, >( - props: VirtualScrollViewProps, + VirtualScrollViewProps { + width, + height, + padding, + scrollbar_theme, + length, + item_size, + builder, + builder_args, + direction, + show_scrollbar, + scroll_with_arrows, + cache_elements, + scroll_controller, + }: VirtualScrollViewProps, ) -> Element { let mut clicking_scrollbar = use_signal::>(|| None); let mut clicking_shift = use_signal(|| false); let mut clicking_alt = use_signal(|| false); - let mut scroll_controller = props - .scroll_controller - .unwrap_or_else(|| use_scroll_controller(ScrollConfig::default)); + let mut scroll_controller = + 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); - - let padding = &theme.padding; - let user_container_width = &theme.width; - let user_container_height = &theme.height; - let user_direction = &props.direction; - let show_scrollbar = props.show_scrollbar; - let items_length = props.length; - let items_size = props.item_size; - let scroll_with_arrows = props.scroll_with_arrows; + let applied_scrollbar_theme = use_applied_theme!(&scrollbar_theme, scroll_bar); - let direction_is_vertical = user_direction == "vertical"; + let direction_is_vertical = direction == "vertical"; - let inner_size = items_size + (items_size * items_length as f32); + let inner_size = item_size + (item_size * length as f32); scroll_controller.use_apply(inner_size, inner_size); - let vertical_scrollbar_is_visible = user_direction != "horizontal" + let vertical_scrollbar_is_visible = direction != "horizontal" && is_scrollbar_visible(show_scrollbar, inner_size, size.area.height()); - let horizontal_scrollbar_is_visible = user_direction != "vertical" + let horizontal_scrollbar_is_visible = direction != "vertical" && is_scrollbar_visible(show_scrollbar, inner_size, size.area.width()); - let container_width = get_container_size(vertical_scrollbar_is_visible, &scrollbar_theme.size); - let container_height = - get_container_size(horizontal_scrollbar_is_visible, &scrollbar_theme.size); + let (container_width, content_width) = get_container_size( + &width, + direction_is_vertical, + Axis::X, + vertical_scrollbar_is_visible, + &applied_scrollbar_theme.size, + ); + let (container_height, content_height) = get_container_size( + &height, + direction_is_vertical, + Axis::Y, + horizontal_scrollbar_is_visible, + &applied_scrollbar_theme.size, + ); let corrected_scrolled_y = get_corrected_scroll_position(inner_size, size.area.height(), *scrolled_y.read() as f32); @@ -365,44 +387,39 @@ pub fn VirtualScrollView< }; let horizontal_scrollbar_size = if horizontal_scrollbar_is_visible { - &scrollbar_theme.size + &applied_scrollbar_theme.size } else { "0" }; let vertical_scrollbar_size = if vertical_scrollbar_is_visible { - &scrollbar_theme.size + &applied_scrollbar_theme.size } else { "0" }; - let (viewport_size, scroll_position) = if user_direction == "vertical" { + let (viewport_size, scroll_position) = if direction == "vertical" { (size.area.height(), corrected_scrolled_y) } else { (size.area.width(), corrected_scrolled_x) }; // Calculate from what to what items must be rendered - let render_range = get_render_range( - viewport_size, - scroll_position, - items_size, - items_length as f32, - ); + let render_range = get_render_range(viewport_size, scroll_position, item_size, length as f32); - let children = if props.cache_elements { + let children = if cache_elements { let children = use_memo(use_reactive( - &(render_range, props.builder_args), + &(render_range, builder_args), move |(render_range, builder_args)| { render_range .clone() - .map(|i| (props.builder)(i, &builder_args)) + .map(|i| (builder)(i, &builder_args)) .collect::>() }, )); rsx!({ children.read().iter() }) } else { - let children = render_range.map(|i| (props.builder)(i, &props.builder_args)); + let children = render_range.map(|i| (builder)(i, &builder_args)); rsx!({ children }) }; @@ -417,7 +434,7 @@ pub fn VirtualScrollView< .map(|f| f.0 == Axis::Y) .unwrap_or_default(); - let offset_y_min = (-corrected_scrolled_y / items_size).floor() * items_size; + let offset_y_min = (-corrected_scrolled_y / item_size).floor() * item_size; let offset_y = -corrected_scrolled_y - offset_y_min; let focus_id = focus.attribute(); @@ -427,8 +444,8 @@ pub fn VirtualScrollView< role: "scrollView", overflow: "clip", direction: "horizontal", - width: "{user_container_width}", - height: "{user_container_height}", + width: "{width}", + height: "{height}", onglobalclick: onclick, onglobalmouseover: onmouseover, onkeydown, @@ -441,9 +458,9 @@ pub fn VirtualScrollView< rect { overflow: "clip", padding: "{padding}", - height: "100%", - width: "100%", - direction: "{user_direction}", + height: "{content_height}", + width: "{content_width}", + direction: "{direction}", offset_y: "{-offset_y}", reference: node_ref, onwheel: onwheel, @@ -454,13 +471,13 @@ pub fn VirtualScrollView< height: "{horizontal_scrollbar_size}", offset_x: "{scrollbar_x}", clicking_scrollbar: is_scrolling_x, - theme: props.scrollbar_theme.clone(), + theme: scrollbar_theme.clone(), ScrollThumb { clicking_scrollbar: is_scrolling_x, onmousedown: onmousedown_x, width: "{scrollbar_width}", height: "100%", - theme: props.scrollbar_theme.clone(), + theme: scrollbar_theme.clone(), } } } @@ -469,13 +486,13 @@ pub fn VirtualScrollView< height: "100%", offset_y: "{scrollbar_y}", clicking_scrollbar: is_scrolling_y, - theme: props.scrollbar_theme.clone(), + theme: scrollbar_theme.clone(), ScrollThumb { clicking_scrollbar: is_scrolling_y, onmousedown: onmousedown_y, width: "100%", height: "{scrollbar_height}", - theme: props.scrollbar_theme, + theme: scrollbar_theme, } } } diff --git a/crates/components/src/sidebar.rs b/crates/components/src/sidebar.rs index f72acced0..d29a779cc 100644 --- a/crates/components/src/sidebar.rs +++ b/crates/components/src/sidebar.rs @@ -1,11 +1,9 @@ use dioxus::prelude::*; use freya_elements::elements as dioxus_elements; use freya_hooks::{ - theme_with, use_activable_route, use_applied_theme, use_platform, - ScrollViewThemeWith, SidebarItemTheme, SidebarItemThemeWith, SidebarTheme, @@ -47,10 +45,8 @@ pub fn Sidebar( color: "{font_theme.color}", shadow: "2 0 5 0 rgb(0, 0, 0, 30)", ScrollView { - theme: theme_with!(ScrollViewTheme { - padding: "8".into(), - spacing: spacing, - }), + padding: "8", + spacing, {sidebar} } } diff --git a/crates/devtools/src/tabs/layout.rs b/crates/devtools/src/tabs/layout.rs index 6e3cf108f..3fdcf7e0f 100644 --- a/crates/devtools/src/tabs/layout.rs +++ b/crates/devtools/src/tabs/layout.rs @@ -1,10 +1,6 @@ use dioxus::prelude::*; use freya_components::*; use freya_elements::elements as dioxus_elements; -use freya_hooks::{ - theme_with, - ScrollViewThemeWith, -}; use freya_native_core::NodeId; use crate::{ @@ -33,9 +29,7 @@ pub fn NodeInspectorLayout(node_id: String) -> Element { rsx!( ScrollView { show_scrollbar: true, - theme: theme_with!(ScrollViewTheme { - height : "calc(100% - 35)".into(), - }), + height: "calc(100% - 35)", rect { width: "100%", height: "200", diff --git a/crates/devtools/src/tabs/style.rs b/crates/devtools/src/tabs/style.rs index c90f288f4..d99e75e06 100644 --- a/crates/devtools/src/tabs/style.rs +++ b/crates/devtools/src/tabs/style.rs @@ -1,10 +1,6 @@ use dioxus::prelude::*; use freya_components::*; use freya_core::prelude::*; -use freya_hooks::{ - theme_with, - ScrollViewThemeWith, -}; use freya_native_core::NodeId; use crate::{ @@ -29,12 +25,8 @@ pub fn NodeInspectorStyle(node_id: String) -> Element { rsx!( ScrollView { show_scrollbar: true, - theme: theme_with!( - ScrollViewTheme { - height : "calc(100% - 35)".into(), - width: "100%".into(), - } - ), + height : "calc(100% - 35)", + width: "100%", {node.state.attributes().into_iter().enumerate().map(|(i, (name, attr))| { match attr { AttributeType::Measure(measure) => { diff --git a/crates/devtools/src/tabs/tree.rs b/crates/devtools/src/tabs/tree.rs index 9e17e8b78..fb6b22875 100644 --- a/crates/devtools/src/tabs/tree.rs +++ b/crates/devtools/src/tabs/tree.rs @@ -7,10 +7,6 @@ use dioxus_router::prelude::{ use_navigator, }; use freya_components::*; -use freya_hooks::{ - theme_with, - ScrollViewThemeWith, -}; use freya_native_core::NodeId; use crate::{ @@ -68,10 +64,8 @@ pub fn NodesTree( show_scrollbar: true, length: items.len(), item_size: 27.0, - theme: theme_with!(ScrollViewTheme { - height: height.to_string().into(), - padding: "15".into(), - }), + height, + padding: "15", builder_args: (selected_node_id, items), builder: move |i, options: &Option<(Option, Vec)>| { let (selected_node_id, items) = options.as_ref().unwrap(); diff --git a/crates/hooks/src/theming/dark.rs b/crates/hooks/src/theming/dark.rs index 04353536f..c98b1bd4e 100644 --- a/crates/hooks/src/theming/dark.rs +++ b/crates/hooks/src/theming/dark.rs @@ -62,12 +62,6 @@ pub const DARK_THEME: Theme = Theme { active_thumb_background: cow_borrowed!("rgb(140, 140, 140)"), size: LIGHT_THEME.scroll_bar.size, }, - scroll_view: ScrollViewTheme { - height: LIGHT_THEME.scroll_view.height, - width: LIGHT_THEME.scroll_view.width, - padding: LIGHT_THEME.scroll_view.padding, - spacing: LIGHT_THEME.scroll_view.spacing, - }, tooltip: TooltipTheme { background: cow_borrowed!("rgb(35,35,35)"), color: cow_borrowed!("rgb(240,240,240)"), diff --git a/crates/hooks/src/theming/light.rs b/crates/hooks/src/theming/light.rs index 2a284bd1c..760436ef8 100644 --- a/crates/hooks/src/theming/light.rs +++ b/crates/hooks/src/theming/light.rs @@ -62,12 +62,6 @@ pub const LIGHT_THEME: Theme = Theme { active_thumb_background: cow_borrowed!("rgb(95, 95, 95)"), size: cow_borrowed!("15"), }, - scroll_view: ScrollViewTheme { - height: cow_borrowed!("fill"), - width: cow_borrowed!("fill"), - padding: cow_borrowed!("0"), - spacing: cow_borrowed!("0"), - }, tooltip: TooltipTheme { background: cow_borrowed!("rgb(245, 245, 245)"), color: cow_borrowed!("rgb(25,25,25)"), diff --git a/crates/hooks/src/theming/mod.rs b/crates/hooks/src/theming/mod.rs index 4b327481b..edf44ed5f 100644 --- a/crates/hooks/src/theming/mod.rs +++ b/crates/hooks/src/theming/mod.rs @@ -318,18 +318,6 @@ define_theme! { } } -define_theme! { - /// Also used by `VirtualScrollView`. - %[component] - pub ScrollView { - %[cows] - height: str, - width: str, - spacing: str, - padding: str, - } -} - define_theme! { %[component] pub Body { @@ -583,7 +571,6 @@ pub struct Theme { pub button: ButtonTheme, pub switch: SwitchTheme, pub scroll_bar: ScrollBarTheme, - pub scroll_view: ScrollViewTheme, pub slider: SliderTheme, pub tooltip: TooltipTheme, pub dropdown: DropdownTheme, diff --git a/examples/accordion.rs b/examples/accordion.rs index 8049034c8..887c7aa81 100644 --- a/examples/accordion.rs +++ b/examples/accordion.rs @@ -13,9 +13,7 @@ fn app() -> Element { rsx!( ScrollView { show_scrollbar: true, - theme: theme_with!(ScrollViewTheme { - padding: "5".into(), - }), + padding: "5", Accordion { summary: rsx!(AccordionSummary { label { diff --git a/examples/cloned_editor.rs b/examples/cloned_editor.rs index c6b3dc68d..033cd632e 100644 --- a/examples/cloned_editor.rs +++ b/examples/cloned_editor.rs @@ -57,9 +57,7 @@ fn Body() -> Element { onglobalclick: onclick, background: "{theme.body.background}", VirtualScrollView { - theme: theme_with!(ScrollViewTheme { - width: "50%".into(), - }), + width: "50%", length: editor.len_lines(), item_size: 35.0, scroll_with_arrows: false, @@ -133,9 +131,7 @@ fn Body() -> Element { } } VirtualScrollView { - theme: theme_with!(ScrollViewTheme { - width: "50%".into(), - }), + width: "50%", length: editor.len_lines(), item_size: 60.0, scroll_with_arrows: false, diff --git a/examples/controlled_scroll.rs b/examples/controlled_scroll.rs index 8318559dd..4dc961968 100644 --- a/examples/controlled_scroll.rs +++ b/examples/controlled_scroll.rs @@ -30,9 +30,7 @@ fn app() -> Element { direction: "horizontal", ScrollView { scroll_controller, - theme: theme_with!(ScrollViewTheme { - width: "50%".into(), - }), + width: "50%", Button { onclick: scroll_to_bottom, label { @@ -45,9 +43,7 @@ fn app() -> Element { } ScrollView { scroll_controller, - theme: theme_with!(ScrollViewTheme { - width: "50%".into(), - }), + width: "50%", Card {} Card {} Card {} diff --git a/examples/material_design_app.rs b/examples/material_design_app.rs index d3886f889..89b9f7164 100644 --- a/examples/material_design_app.rs +++ b/examples/material_design_app.rs @@ -104,10 +104,8 @@ fn Scaffold(props: ScaffoldProps) -> Element { } {props.navbar}, ScrollView { - theme: theme_with!(ScrollViewTheme { - height: height.into(), - padding: "3 10 0 10".into(), - }), + height, + padding: "3 10 0 10", {props.children} } } diff --git a/examples/paragraph.rs b/examples/paragraph.rs index 08bb62290..e45f4e112 100644 --- a/examples/paragraph.rs +++ b/examples/paragraph.rs @@ -23,9 +23,7 @@ fn app() -> Element { height: "100%", ScrollView { show_scrollbar: true, - theme: theme_with!(ScrollViewTheme { - height: "75%".into(), - }), + height: "75%", paragraph { width: "100%", text_align: "right", @@ -41,9 +39,7 @@ fn app() -> Element { } ScrollView { show_scrollbar: true, - theme: theme_with!(ScrollViewTheme { - height: "25%".into(), - }), + height: "25%", label { font_size: "100", font_family: "Inter", diff --git a/examples/scroll.rs b/examples/scroll.rs index 6676a3188..cdeb607ce 100644 --- a/examples/scroll.rs +++ b/examples/scroll.rs @@ -15,18 +15,14 @@ fn app() -> Element { height: "fill", width: "fill", ScrollView { - theme: theme_with!(ScrollViewTheme { - height: "50%".into(), - }), + height: "50%", Card {} Card {} Card {} } ScrollView { direction: "horizontal", - theme: theme_with!(ScrollViewTheme { - height: "50%".into(), - }), + height: "50%", Card {}, Card {}, Card {} diff --git a/examples/simple_editor.rs b/examples/simple_editor.rs index 44b142697..cc197cf57 100644 --- a/examples/simple_editor.rs +++ b/examples/simple_editor.rs @@ -54,10 +54,8 @@ fn app() -> Element { height: "100%", cursor_reference, ScrollView { - theme: theme_with!(ScrollViewTheme { - width: "100%".into(), - height: "calc(100% - 30)".into(), - }), + width: "100%", + height: "calc(100% - 30)", scroll_with_arrows: false, paragraph { width: "100%", diff --git a/examples/ui.rs b/examples/ui.rs index 120b6c92e..ca3830354 100644 --- a/examples/ui.rs +++ b/examples/ui.rs @@ -16,19 +16,15 @@ fn app() -> Element { }), body: rsx!( ScrollView { - theme: theme_with!(ScrollViewTheme { - height: "calc(100% - 75 - 75)".into(), - }), + height: "calc(100% - 75 - 75)", show_scrollbar: true, Card { title: "Card 0", content: "Content 0", } ScrollView { - theme: theme_with!(ScrollViewTheme { - height: "200".into(), - padding: "0 20".into(), - }), + height: "200", + padding: "0 20", Card { title: "Card 1", content: "Content 1",