diff --git a/book/src/guides/layout.md b/book/src/guides/layout.md index bec69624c..f111a3b24 100644 --- a/book/src/guides/layout.md +++ b/book/src/guides/layout.md @@ -12,7 +12,7 @@ Learn how the layout attributes work. - [`direction`](#direction) - [`padding`](#padding) - [`margin`](#margin) -- [`display`](#display) +- [`main_alignment & cross_alignment`](#main_alignment_&_cross_alignment) > ⚠️ Freya's layout is still somewhat limited. @@ -168,9 +168,18 @@ fn app(cx: Scope) -> Element { ``` -### display +### main_alignment & cross_alignment -Control how the inner elements are displayed, possible values are `normal` (default) or `center`. +Control how the inner elements are positioned inside the element. You can combine it with the `direction` attribute to create complex flows. +Possible values for both are: +- `start` (default): At the begining of the axis +- `center`: At the center of the axis +- `end`: At the end of the axis + +When using the `vertical` direction, `main_alignment` will be the Y axis and `cross_alignment` will be the X axis. But when using the `horizontal` direction, the +`main_alignment` will be the X axis and the `cross_alignment` will be the Y axis. + +Example on how to center the inner elements in both axis: ```rust, no_run fn app(cx: Scope) -> Element { @@ -178,8 +187,8 @@ fn app(cx: Scope) -> Element { rect { width: "100%", height: "100%", - direction: "both", - display: "center", + main_alignment: "center", + cross_alignment: "center", rect { width: "50%", height: "50%", diff --git a/book/src/guides/testing.md b/book/src/guides/testing.md index 3f9a31129..aa2d05d9e 100644 --- a/book/src/guides/testing.md +++ b/book/src/guides/testing.md @@ -84,7 +84,6 @@ async fn event_test() { width: "100%", height: "100%", background: "red", - direction: "both", onclick: |_| { enabled.set(true); }, diff --git a/crates/components/src/external_link.rs b/crates/components/src/external_link.rs index ba35751d6..bd7e1e5c9 100644 --- a/crates/components/src/external_link.rs +++ b/crates/components/src/external_link.rs @@ -74,7 +74,6 @@ pub fn ExternalLink<'a>(cx: Scope<'a, ExternalLinkProps<'a>>) -> Element { render!( rect { - direction: "both", onmouseover: onmouseover, onmouseleave: onmouseleave, onclick: onclick, diff --git a/crates/components/src/input.rs b/crates/components/src/input.rs index 6ed575227..7457d7e65 100644 --- a/crates/components/src/input.rs +++ b/crates/components/src/input.rs @@ -156,13 +156,11 @@ pub fn Input<'a>(cx: Scope<'a, InputProps<'a>>) -> Element { onclick: onclick, width: "auto", height: "auto", - direction: "both", padding: "1.5", rect { width: "{width}", height: "{height}", direction: "vertical", - display: "center", color: "{color}", background: "{background}", shadow: "0 3 15 0 rgb(0, 0, 0, 70)", diff --git a/crates/components/src/network_image.rs b/crates/components/src/network_image.rs index b52ffbef6..440527691 100644 --- a/crates/components/src/network_image.rs +++ b/crates/components/src/network_image.rs @@ -99,8 +99,8 @@ pub fn NetworkImage<'a>(cx: Scope<'a, NetworkImageProps<'a>>) -> Element<'a> { rect { height: "{height}", width: "{width}", - display: "center", - direction: "both", + main_alignment: "center", + cross_alignment: "center", Loader { } @@ -115,7 +115,8 @@ pub fn NetworkImage<'a>(cx: Scope<'a, NetworkImageProps<'a>>) -> Element<'a> { rect { height: "{height}", width: "{width}", - display: "center", + main_alignment: "center", + cross_alignment: "center", label { align: "center", "Error" diff --git a/crates/components/src/progress_bar.rs b/crates/components/src/progress_bar.rs index df8df6930..2d18a9113 100644 --- a/crates/components/src/progress_bar.rs +++ b/crates/components/src/progress_bar.rs @@ -72,7 +72,8 @@ pub fn ProgressBar(cx: Scope) -> Element { width: "{progress}%", height: "100%", background: "{progress_background}", - display: "center", + main_alignment: "center", + cross_alignment: "center", overflow: "clip", if show_progress { rsx!( diff --git a/crates/components/src/slider.rs b/crates/components/src/slider.rs index e54c66235..e4e71d5b7 100644 --- a/crates/components/src/slider.rs +++ b/crates/components/src/slider.rs @@ -122,8 +122,8 @@ pub fn Slider<'a>(cx: Scope<'a, SliderProps>) -> Element<'a> { onglobalmouseover: onmouseover, onmouseleave: onmouseleave, onwheel: onwheel, - display: "center", - direction: "both", + main_alignment: "center", + cross_alignment: "center", padding: "1", rect { background: "{theme.background}", diff --git a/crates/components/src/switch.rs b/crates/components/src/switch.rs index 31ce004b1..ea72aa8bd 100644 --- a/crates/components/src/switch.rs +++ b/crates/components/src/switch.rs @@ -108,7 +108,6 @@ pub fn Switch<'a>(cx: Scope<'a, SwitchProps<'a>>) -> Element<'a> { corner_radius: "50", rect { background: "{circle}", - direction: "both", width: "18", height: "18", corner_radius: "50", diff --git a/crates/components/src/tooltip.rs b/crates/components/src/tooltip.rs index 757103de4..ec5ee916b 100644 --- a/crates/components/src/tooltip.rs +++ b/crates/components/src/tooltip.rs @@ -27,15 +27,14 @@ pub fn Tooltip<'a>(cx: Scope<'a, TooltipProps<'a>>) -> Element { height: "30", padding: "2", width: "170", - direction: "both", rect { - direction: "both", width: "100%", height: "100%", shadow: "0 0 10 5 rgb(0, 0, 0, 50)", corner_radius: "8", background: "{background}", - display: "center", + main_alignment: "center", + cross_alignment: "center", label { max_lines: "1", color: "{color}", diff --git a/crates/core/src/node.rs b/crates/core/src/node.rs index 7d8d4c103..6a1aaedc7 100644 --- a/crates/core/src/node.rs +++ b/crates/core/src/node.rs @@ -5,7 +5,7 @@ use freya_node_state::{ Border, CornerRadius, CursorSettings, Fill, FontStyleState, LayoutState, References, Shadow, Style, Transform, }; -use torin::{direction::DirectionMode, display::DisplayMode, gaps::Gaps, size::Size}; +use torin::{alignment::Alignment, direction::DirectionMode, gaps::Gaps, size::Size}; #[derive(Clone)] pub struct NodeState { @@ -77,8 +77,15 @@ impl<'a> Iterator for NodeStateIterator<'a> { AttributeType::Direction(&self.state.size.direction), )), 7 => Some(("padding", AttributeType::Measures(self.state.size.padding))), - 8 => Some(("display", AttributeType::Display(&self.state.size.display))), - 9 => { + 8 => Some(( + "main_alignment", + AttributeType::Alignment(&self.state.size.main_alignment), + )), + 9 => Some(( + "cross_alignment", + AttributeType::Alignment(&self.state.size.cross_alignment), + )), + 10 => { let background = &self.state.style.background; let fill = match *background { Fill::Color(_) => AttributeType::Color(background.clone()), @@ -86,33 +93,33 @@ impl<'a> Iterator for NodeStateIterator<'a> { }; Some(("background", fill)) } - 10 => Some(("border", AttributeType::Border(&self.state.style.border))), - 11 => Some(( + 11 => Some(("border", AttributeType::Border(&self.state.style.border))), + 12 => Some(( "corner_radius", AttributeType::CornerRadius(self.state.style.corner_radius), )), - 12 => Some(( + 13 => Some(( "color", AttributeType::Color(self.state.font_style.color.into()), )), - 13 => Some(( + 14 => Some(( "font_family", AttributeType::Text(self.state.font_style.font_family.join(",")), )), - 14 => Some(( + 15 => Some(( "font_size", AttributeType::Measure(self.state.font_style.font_size), )), - 15 => Some(( + 16 => Some(( "line_height", AttributeType::Measure(self.state.font_style.line_height), )), - 16 => Some(("offset_x", AttributeType::Measure(self.state.size.offset_x))), - 17 => Some(("offset_y", AttributeType::Measure(self.state.size.offset_y))), + 17 => Some(("offset_x", AttributeType::Measure(self.state.size.offset_x))), + 18 => Some(("offset_y", AttributeType::Measure(self.state.size.offset_y))), n => { let shadows = &self.state.style.shadows; let shadow = shadows - .get(n - 18) + .get(n - 19) .map(|shadow| ("shadow", AttributeType::Shadow(shadow))); if shadow.is_some() { @@ -120,7 +127,7 @@ impl<'a> Iterator for NodeStateIterator<'a> { } else { let text_shadows = &self.state.font_style.text_shadows; text_shadows - .get(n - 18 + shadows.len()) + .get(n - 19 + shadows.len()) .map(|text_shadow| ("text_shadow", AttributeType::TextShadow(text_shadow))) } } @@ -143,7 +150,7 @@ pub enum AttributeType<'a> { Measures(Gaps), CornerRadius(CornerRadius), Direction(&'a DirectionMode), - Display(&'a DisplayMode), + Alignment(&'a Alignment), Shadow(&'a Shadow), TextShadow(&'a TextShadow), Text(String), diff --git a/crates/devtools/src/tabs/layout.rs b/crates/devtools/src/tabs/layout.rs index 636cfb7d3..d5c328d38 100644 --- a/crates/devtools/src/tabs/layout.rs +++ b/crates/devtools/src/tabs/layout.rs @@ -42,8 +42,8 @@ pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element { rect { width: "100%", height: "calc(100% - 25)", - display: "center", - direction: "both", + main_alignment: "center", + cross_alignment: "center", background: "rgb(40, 40, 40)", rect { width: "100%", @@ -51,8 +51,8 @@ pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element { background: "rgb(71, 180, 240)", corner_radius: "5", rect { - direction: "both", - display: "center", + main_alignment: "center", + cross_alignment: "center", width: "100%", height: "25", label { @@ -66,8 +66,8 @@ pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element { height: "calc(100% - 50)", direction: "horizontal", rect { - direction: "vertical", - display: "center", + main_alignment: "center", + cross_alignment: "center", width: "25", height: "100%", label { @@ -79,8 +79,8 @@ pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element { rect { width: "calc(100% - 50)", height: "100%", - display: "center", - direction: "both", + main_alignment: "center", + cross_alignment: "center", background: "rgb(40, 40, 40)", corner_radius: "5", label { @@ -88,8 +88,8 @@ pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element { } } rect { - direction: "vertical", - display: "center", + main_alignment: "center", + cross_alignment: "center", width: "25", height: "100%", label { @@ -100,8 +100,8 @@ pub fn NodeInspectorLayout(cx: Scope, node_id: NodeId) -> Element { } } rect { - direction: "both", - display: "center", + main_alignment: "center", + cross_alignment: "center", width: "100%", height: "25", label { diff --git a/crates/devtools/src/tabs/style.rs b/crates/devtools/src/tabs/style.rs index da54b1f50..fe1758324 100644 --- a/crates/devtools/src/tabs/style.rs +++ b/crates/devtools/src/tabs/style.rs @@ -114,12 +114,12 @@ pub fn NodeInspectorStyle(cx: Scope, node_id: NodeId) -> Element { } } } - AttributeType::Display(display) => { + AttributeType::Alignment(alignment) => { rsx!{ Property { key: "{i}", name: "{name}", - value: display.pretty() + value: alignment.pretty() } } } diff --git a/crates/dom/src/dom_adapter.rs b/crates/dom/src/dom_adapter.rs index c8e99b534..dbd95c85a 100644 --- a/crates/dom/src/dom_adapter.rs +++ b/crates/dom/src/dom_adapter.rs @@ -49,7 +49,6 @@ impl DOMAdapter for DioxusDOMAdapter<'_> { direction: size.direction, padding: size.padding, margin: size.margin, - display: size.display, main_alignment: size.main_alignment, cross_alignment: size.cross_alignment, offset_x: Length::new(size.offset_x), diff --git a/crates/elements/src/elements.rs b/crates/elements/src/elements.rs index 1738f24d0..197d4ffa2 100644 --- a/crates/elements/src/elements.rs +++ b/crates/elements/src/elements.rs @@ -177,7 +177,6 @@ builder_constructors! { font_style: String, font_weight: String, font_width: String, - display: String, main_alignment: String, cross_alignment: String, reference: Reference, diff --git a/crates/state/src/layout.rs b/crates/state/src/layout.rs index 9275af441..97557463f 100644 --- a/crates/state/src/layout.rs +++ b/crates/state/src/layout.rs @@ -28,7 +28,6 @@ pub struct LayoutState { pub node_id: NodeId, pub offset_y: f32, pub offset_x: f32, - pub display: DisplayMode, pub main_alignment: Alignment, pub cross_alignment: Alignment, pub node_ref: Option>, @@ -54,7 +53,6 @@ impl State for LayoutState { "direction", "offset_y", "offset_x", - "display", "main_alignment", "cross_alignment", "reference", @@ -160,7 +158,6 @@ impl State for LayoutState { if let Some(value) = attr.value.as_text() { layout.direction = match value { "horizontal" => DirectionMode::Horizontal, - "both" => DirectionMode::Both, _ => DirectionMode::Vertical, } } @@ -179,13 +176,6 @@ impl State for LayoutState { } } } - "display" => { - if let Some(value) = attr.value.as_text() { - if let Ok(display) = DisplayMode::parse(value) { - layout.display = display; - } - } - } "main_alignment" => { if let Some(value) = attr.value.as_text() { if let Ok(alignment) = Alignment::parse(value) { @@ -226,7 +216,8 @@ impl State for LayoutState { || (layout.direction != self.direction) || (layout.offset_x != self.offset_x) || (layout.offset_y != self.offset_y) - || (layout.display != self.display); + || (layout.main_alignment != self.main_alignment) + || (layout.cross_alignment != self.cross_alignment); if changed { torin_layout.lock().unwrap().invalidate(node_view.node_id()); diff --git a/crates/state/src/values/display.rs b/crates/state/src/values/display.rs deleted file mode 100644 index 083c6880e..000000000 --- a/crates/state/src/values/display.rs +++ /dev/null @@ -1,16 +0,0 @@ -use crate::Parse; -use torin::display::DisplayMode; - -#[derive(Debug, PartialEq, Eq)] -pub struct ParseDisplayModeError; - -impl Parse for DisplayMode { - type Err = ParseDisplayModeError; - - fn parse(value: &str) -> Result { - Ok(match value { - "center" => DisplayMode::Center, - _ => DisplayMode::Normal, - }) - } -} diff --git a/crates/state/src/values/mod.rs b/crates/state/src/values/mod.rs index b9465d980..3891a5e41 100644 --- a/crates/state/src/values/mod.rs +++ b/crates/state/src/values/mod.rs @@ -5,7 +5,6 @@ mod color; mod corner_radius; mod cursor; mod decoration; -mod display; mod fill; mod font; mod gaps; @@ -22,7 +21,6 @@ pub use color::*; pub use corner_radius::*; pub use cursor::*; pub use decoration::*; -pub use display::*; pub use fill::*; pub use font::*; pub use gaps::*; diff --git a/crates/state/tests/parse_display.rs b/crates/state/tests/parse_display.rs index c475adc3d..47960e2a0 100644 --- a/crates/state/tests/parse_display.rs +++ b/crates/state/tests/parse_display.rs @@ -1,20 +1,26 @@ use freya_node_state::Parse; -use torin::display::DisplayMode; +use torin::alignment::Alignment; #[test] -fn parse_normal_display() { - let display = DisplayMode::parse("normal"); - assert_eq!(display, Ok(DisplayMode::Normal)); +fn parse_normal_alignment() { + let alignment = Alignment::parse("start"); + assert_eq!(alignment, Ok(Alignment::Start)); } #[test] -fn parse_center_display() { - let display = DisplayMode::parse("center"); - assert_eq!(display, Ok(DisplayMode::Center)); +fn parse_center_alignment() { + let alignment = Alignment::parse("center"); + assert_eq!(alignment, Ok(Alignment::Center)); } #[test] -fn parse_fallback_display() { - let display = DisplayMode::parse("freya!!"); - assert_eq!(display, Ok(DisplayMode::Normal)); +fn parse_end_alignment() { + let alignment = Alignment::parse("end"); + assert_eq!(alignment, Ok(Alignment::End)); +} + +#[test] +fn parse_fallback_alignment() { + let alignment = Alignment::parse("Hello, World!"); + assert_eq!(alignment, Ok(Alignment::Start)); } diff --git a/crates/testing/tests/test.rs b/crates/testing/tests/test.rs index ca00f5533..182a27ed6 100644 --- a/crates/testing/tests/test.rs +++ b/crates/testing/tests/test.rs @@ -75,7 +75,6 @@ async fn simulate_events() { width: "100%", height: "100%", background: "red", - direction: "both", onclick: |_| { enabled.set(true); }, diff --git a/crates/torin/src/node.rs b/crates/torin/src/node.rs index d17213aa8..a696a3d8c 100644 --- a/crates/torin/src/node.rs +++ b/crates/torin/src/node.rs @@ -1,8 +1,7 @@ pub use euclid::Rect; use crate::{ - direction::DirectionMode, display::DisplayMode, gaps::Gaps, geometry::Length, - prelude::Alignment, size::Size, + alignment::Alignment, direction::DirectionMode, gaps::Gaps, geometry::Length, size::Size, }; /// Node layout configuration @@ -20,9 +19,7 @@ pub struct Node { pub maximum_width: Size, pub maximum_height: Size, - /// Inner layout mode - pub display: DisplayMode, - + // Axis alignments for the children pub main_alignment: Alignment, pub cross_alignment: Alignment, @@ -85,17 +82,19 @@ impl Node { } } - /// Construct a new Node given a size and a display - pub fn from_size_and_display_and_direction( + /// Construct a new Node given a size, alignments and a direction + pub fn from_size_and_alignments_and_direction( width: Size, height: Size, - display: DisplayMode, + main_alignment: Alignment, + cross_alignment: Alignment, direction: DirectionMode, ) -> Self { Self { width, height, - display, + main_alignment, + cross_alignment, direction, ..Default::default() } @@ -113,9 +112,8 @@ impl Node { /// Has properties that depend on the inner Nodes? pub fn does_depend_on_inner(&self) -> bool { - Size::Inner == self.width - || Size::Inner == self.height - || self.has_layout_references - || self.display == DisplayMode::Center + Size::Inner == self.width || Size::Inner == self.height || self.has_layout_references + // || self.main_alignment.is_not_start() + // || self.cross_alignment.is_not_start() } } diff --git a/crates/torin/src/torin.rs b/crates/torin/src/torin.rs index 9448fac57..08b766e52 100644 --- a/crates/torin/src/torin.rs +++ b/crates/torin/src/torin.rs @@ -616,7 +616,6 @@ fn measure_inner_nodes( } _ => {} }, - _ => {} } } @@ -694,7 +693,6 @@ fn measure_inner_nodes( } } } - DirectionMode::Both => {} } if child_revalidated && must_cache { @@ -754,7 +752,6 @@ fn measure_inner_nodes( } _ => {} }, - _ => {} } } } diff --git a/crates/torin/src/values/alignment.rs b/crates/torin/src/values/alignment.rs index 8e96a5db3..083677313 100644 --- a/crates/torin/src/values/alignment.rs +++ b/crates/torin/src/values/alignment.rs @@ -10,4 +10,8 @@ impl Alignment { pub fn is_not_start(&self) -> bool { *self != Self::Start } + + pub fn pretty(&self) -> String { + format!("{self:?}") + } } diff --git a/crates/torin/src/values/direction.rs b/crates/torin/src/values/direction.rs index 2553d93f1..b219e1433 100644 --- a/crates/torin/src/values/direction.rs +++ b/crates/torin/src/values/direction.rs @@ -3,7 +3,6 @@ pub enum DirectionMode { #[default] Vertical, Horizontal, - Both, } impl DirectionMode { @@ -11,7 +10,6 @@ impl DirectionMode { match self { DirectionMode::Horizontal => "horizontal".to_string(), DirectionMode::Vertical => "vertical".to_string(), - DirectionMode::Both => "both".to_string(), } } } diff --git a/crates/torin/src/values/display.rs b/crates/torin/src/values/display.rs deleted file mode 100644 index 142a2d5a4..000000000 --- a/crates/torin/src/values/display.rs +++ /dev/null @@ -1,15 +0,0 @@ -#[derive(PartialEq, Clone, Debug, Copy, Default)] -pub enum DisplayMode { - #[default] - Normal, - Center, -} - -impl DisplayMode { - pub fn pretty(&self) -> String { - match self { - DisplayMode::Normal => "Normal".to_string(), - DisplayMode::Center => "Center".to_string(), - } - } -} diff --git a/crates/torin/src/values/mod.rs b/crates/torin/src/values/mod.rs index ae7ee506a..24128385b 100644 --- a/crates/torin/src/values/mod.rs +++ b/crates/torin/src/values/mod.rs @@ -1,13 +1,11 @@ pub mod alignment; pub mod direction; -pub mod display; pub mod gaps; pub mod size; pub mod prelude { pub use crate::alignment::*; pub use crate::direction::*; - pub use crate::display::*; pub use crate::gaps::*; pub use crate::size::*; } diff --git a/crates/torin/tests/test.rs b/crates/torin/tests/test.rs index a0efbf200..fb2f661eb 100644 --- a/crates/torin/tests/test.rs +++ b/crates/torin/tests/test.rs @@ -720,10 +720,11 @@ pub fn display_horizontal() { 0, None, vec![1], - Node::from_size_and_display_and_direction( + Node::from_size_and_alignments_and_direction( Size::Pixels(Length::new(200.0)), Size::Pixels(Length::new(200.0)), - DisplayMode::Center, + Alignment::Center, + Alignment::Center, DirectionMode::Horizontal, ), ); @@ -752,7 +753,7 @@ pub fn display_horizontal() { assert_eq!( layout.get(1).unwrap().area, - Rect::new(Point2D::new(50.0, 0.0), Size2D::new(100.0, 100.0)), + Rect::new(Point2D::new(50.0, 50.0), Size2D::new(100.0, 100.0)), ); } @@ -765,10 +766,11 @@ pub fn display_vertical_with_inner_children() { 0, None, vec![1], - Node::from_size_and_display_and_direction( + Node::from_size_and_alignments_and_direction( Size::Pixels(Length::new(200.0)), Size::Pixels(Length::new(200.0)), - DisplayMode::Center, + Alignment::Center, + Alignment::Center, DirectionMode::Vertical, ), ); @@ -808,12 +810,12 @@ pub fn display_vertical_with_inner_children() { assert_eq!( layout.get(1).unwrap().area, - Rect::new(Point2D::new(0.0, 50.0), Size2D::new(100.0, 100.0)), + Rect::new(Point2D::new(50.0, 50.0), Size2D::new(100.0, 100.0)), ); assert_eq!( layout.get(2).unwrap().area, - Rect::new(Point2D::new(5.0, 55.0), Size2D::new(90.0, 90.0)), + Rect::new(Point2D::new(55.0, 55.0), Size2D::new(90.0, 90.0)), ); } @@ -826,10 +828,9 @@ pub fn deep_tree() { 0, None, vec![1], - Node::from_size_and_display_and_direction( + Node::from_size_and_direction( Size::Pixels(Length::new(200.0)), Size::Pixels(Length::new(200.0)), - DisplayMode::Center, DirectionMode::Vertical, ), ); diff --git a/examples/animation.rs b/examples/animation.rs index b43a01106..ed1d3608d 100644 --- a/examples/animation.rs +++ b/examples/animation.rs @@ -33,13 +33,12 @@ fn app(cx: Scope) -> Element { rect { overflow: "clip", background: "black", - direction: "both", width: "100%", height: "100%", offset_x: "{progress}", rect { - display: "center", - direction: "both", + main_alignment: "center", + cross_alignment: "center", height: "100%", width: "200", rect { @@ -48,8 +47,8 @@ fn app(cx: Scope) -> Element { background: "rgb(100, 100, 100)", padding: "25", corner_radius: "100", - display: "center", - direction: "both", + main_alignment: "center", + cross_alignment: "center", onclick: anim, label { font_size: "30", diff --git a/examples/drag.rs b/examples/drag.rs index 3466d2f52..90011468e 100644 --- a/examples/drag.rs +++ b/examples/drag.rs @@ -54,7 +54,6 @@ fn app(cx: Scope) -> Element { rect { overflow: "clip", background: "rgb(255, 166, 0)", - direction: "both", width: "100", height: "100", corner_radius: "15", diff --git a/examples/frameless_window.rs b/examples/frameless_window.rs index 3f3d40e8e..7417d6c7e 100644 --- a/examples/frameless_window.rs +++ b/examples/frameless_window.rs @@ -23,8 +23,8 @@ fn app(cx: Scope) -> Element { rect { background: "white", padding: "10", - display: "center", - direction: "both", + main_alignment: "center", + cross_alignment: "center", width: "100%", height: "100%", corner_radius: "15", diff --git a/examples/i18n.rs b/examples/i18n.rs index 1e7a01816..5b5907193 100644 --- a/examples/i18n.rs +++ b/examples/i18n.rs @@ -26,8 +26,8 @@ fn Body(cx: Scope) -> Element { render!( rect { - direction: "both", - display: "center", + main_alignment: "center", + cross_alignment: "center", width: "100%", height: "100%", rect { diff --git a/examples/image.rs b/examples/image.rs index 86bfbafb4..1b4b4c7e4 100644 --- a/examples/image.rs +++ b/examples/image.rs @@ -29,8 +29,8 @@ fn app(cx: Scope) -> Element { width: "100%", height: "100%", padding: "50", - display: "center", - direction: "both", + main_alignment: "center", + cross_alignment: "center", onwheel: onwheel, image { image_data: image_data, diff --git a/examples/material_design_app.rs b/examples/material_design_app.rs index 48109d559..d6e9a20c3 100644 --- a/examples/material_design_app.rs +++ b/examples/material_design_app.rs @@ -53,8 +53,8 @@ fn FloatingButton<'a>(cx: Scope<'a, FloatingButtonProps<'a>>) -> Element<'a> { rect { height: "100%", width: "100%", - display: "center", - direction: "both", + main_alignment: "center", + cross_alignment: "center", height: "50", width: "50", background: "rgb(104, 24, 245)", diff --git a/examples/mouse_trace.rs b/examples/mouse_trace.rs index 27c54a25f..55c3c6a47 100644 --- a/examples/mouse_trace.rs +++ b/examples/mouse_trace.rs @@ -24,15 +24,15 @@ fn Box(cx: Scope) -> Element { background: "rgb(65, 53, 67)", width: "250", height: "250", - direction: "both", - display: "center", + main_alignment: "center", + cross_alignment: "center", corner_radius: "100", rect { background: "rgb(143, 67, 238)", width: "180", height: "180", - direction: "both", - display: "center", + main_alignment: "center", + cross_alignment: "center", corner_radius: "100", rect { background: "rgb(240, 235, 141)", diff --git a/examples/rotate.rs b/examples/rotate.rs index d9f5a0289..c0a470cd8 100644 --- a/examples/rotate.rs +++ b/examples/rotate.rs @@ -49,8 +49,8 @@ fn app(cx: Scope) -> Element { render!( rect { - direction: "both", - display: "center", + main_alignment: "center", + cross_alignment: "center", width: "100%", height: "100%", rect { @@ -58,15 +58,15 @@ fn app(cx: Scope) -> Element { background: "rgb(65, 53, 67)", width: "250", height: "250", - direction: "both", - display: "center", + main_alignment: "center", + cross_alignment: "center", rect { rotate: "{degrees.1}deg", background: "rgb(143, 67, 238)", width: "180", height: "180", - direction: "both", - display: "center", + main_alignment: "center", + cross_alignment: "center", rect { rotate: "{degrees.2}deg", background: "rgb(240, 235, 141)", diff --git a/examples/sidebar.rs b/examples/sidebar.rs index 55d6b41ef..2dec6bef0 100644 --- a/examples/sidebar.rs +++ b/examples/sidebar.rs @@ -92,7 +92,6 @@ fn SidebarItem<'a>( onmouseleave: onmouseleave, width: "100%", height: "auto", - direction: "both", color: "{color}", shadow: "0 2 10 1 rgb(0, 0, 0, 45)", corner_radius: "10", diff --git a/examples/text.rs b/examples/text.rs index 5fb1a8b8c..87df9d6f1 100644 --- a/examples/text.rs +++ b/examples/text.rs @@ -46,7 +46,6 @@ fn app(cx: Scope) -> Element { height: "calc(100% - 60)", rect { background: "red", - direction: "both", label { font_size: "{font_size}", font_family: "Inter", diff --git a/examples/tic_tac_toe.rs b/examples/tic_tac_toe.rs index 296e07b6d..b87c795ba 100644 --- a/examples/tic_tac_toe.rs +++ b/examples/tic_tac_toe.rs @@ -160,8 +160,8 @@ fn app(cx: Scope) -> Element { rect { width: "100%", height: "100%", - display: "center", - direction: "both", + main_alignment: "center", + cross_alignment: "center", rect { width: "150", height: "170", @@ -184,8 +184,8 @@ fn app(cx: Scope) -> Element { corner_radius: "6", border: "2 solid rgb(40, 40, 40)", background: "rgb(250, 250, 250)", - display: "center", - direction: "both", + main_alignment: "center", + cross_alignment: "center", onclick: move |_| { let mut board = board.write(); if board.winner.is_none(){ diff --git a/examples/touch.rs b/examples/touch.rs index cac7372ba..22dd567ae 100644 --- a/examples/touch.rs +++ b/examples/touch.rs @@ -32,8 +32,8 @@ fn app(cx: Scope) -> Element { rect { width: "100%", height: "100%", - direction: "both", - display: "center", + main_alignment: "center", + cross_alignment: "center", background: "rgb(35, 35, 35)", ontouchcancel: ontouchcancel, ontouchend: ontouchend,