From 625d16c0f22bba34b3a7c88d0254f61adf2cbcd2 Mon Sep 17 00:00:00 2001 From: Manuel Cillero Date: Thu, 28 Mar 2024 11:13:22 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Working=20on=20flex=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/pagetop-admin/src/summary.rs | 8 +- packages/pagetop-bootsier/src/lib.rs | 40 +-- packages/pagetop-user/src/lib.rs | 4 +- src/base/component.rs | 5 +- src/base/component/{layout.rs => flex.rs} | 182 +++++------ .../component/{layout => flex}/container.rs | 36 +-- .../{layout/flex.rs => flex/item.rs} | 56 ++-- src/base/component/{layout => flex}/region.rs | 0 src/base/package/welcome.rs | 284 +++++++++--------- src/core/theme/definition.rs | 34 +-- 10 files changed, 329 insertions(+), 320 deletions(-) rename src/base/component/{layout.rs => flex.rs} (50%) rename src/base/component/{layout => flex}/container.rs (85%) rename src/base/component/{layout/flex.rs => flex/item.rs} (78%) rename src/base/component/{layout => flex}/region.rs (100%) diff --git a/packages/pagetop-admin/src/summary.rs b/packages/pagetop-admin/src/summary.rs index 0af74816..6abebc9a 100644 --- a/packages/pagetop-admin/src/summary.rs +++ b/packages/pagetop-admin/src/summary.rs @@ -154,10 +154,10 @@ pub async fn summary(request: HttpRequest) -> ResultPage { .with_title(L10n::n("Admin")) .with_component_in("top-menu", side_menu) .with_component( - Container::new() - .add_item(Flex::with(Html::with(html! { p { "Columna 1"} }))) - .add_item(Flex::with(top_menu)) - .add_item(Flex::with(Html::with(html! { p { "Columna 3"} }))), + flex::Container::new() + .add_item(flex::Item::with(Html::with(html! { p { "Columna 1"} }))) + .add_item(flex::Item::with(top_menu)) + .add_item(flex::Item::with(Html::with(html! { p { "Columna 3"} }))), ) .render() } diff --git a/packages/pagetop-bootsier/src/lib.rs b/packages/pagetop-bootsier/src/lib.rs index 078d983e..f6f3d2a8 100644 --- a/packages/pagetop-bootsier/src/lib.rs +++ b/packages/pagetop-bootsier/src/lib.rs @@ -45,10 +45,10 @@ impl ThemeTrait for Bootsier { fn prepare_body(&self, page: &mut Page) -> Markup { let skip_to_id = concat_string!("#", page.skip_to().get().unwrap_or("content".to_owned())); - Container::body() - .with_id(page.body_id().get().unwrap_or("".to_string())) - .with_classes(ClassesOp::Add, page.body_classes().get().unwrap_or("".to_string())) - .add_item(Flex::bundle() + flex::Container::body() + .with_id(page.body_id().get().unwrap_or_default()) + .with_classes(ClassesOp::Add, page.body_classes().get().unwrap_or_default()) + .add_item(flex::Item::bundle() .add_component(Html::with(html! { @if let Some(skip) = L10n::l("skip_to_content").using(page.context().langid()) { div class="skip__to_content" { @@ -58,23 +58,23 @@ impl ThemeTrait for Bootsier { })) .add_component( match page.context().layout() { - "admin" => Container::new().add_item( - Flex::new() - .add_component(Region::named("top-menu")) - .add_component(Region::named("side-menu")) - .add_component(Region::named("content")), + "admin" => flex::Container::new().add_item( + flex::Item::new() + .add_component(flex::Region::named("top-menu")) + .add_component(flex::Region::named("side-menu")) + .add_component(flex::Region::named("content")), ), - _ => Container::new().add_item( - Flex::new() - .add_component(Region::named("header")) - .add_component(Region::named("nav_branding")) - .add_component(Region::named("nav_main")) - .add_component(Region::named("nav_additional")) - .add_component(Region::named("breadcrumb")) - .add_component(Region::named("content")) - .add_component(Region::named("sidebar_first")) - .add_component(Region::named("sidebar_second")) - .add_component(Region::named("footer")), + _ => flex::Container::new().add_item( + flex::Item::new() + .add_component(flex::Region::named("header")) + .add_component(flex::Region::named("nav_branding")) + .add_component(flex::Region::named("nav_main")) + .add_component(flex::Region::named("nav_additional")) + .add_component(flex::Region::named("breadcrumb")) + .add_component(flex::Region::named("content")) + .add_component(flex::Region::named("sidebar_first")) + .add_component(flex::Region::named("sidebar_second")) + .add_component(flex::Region::named("footer")), ), } ) diff --git a/packages/pagetop-user/src/lib.rs b/packages/pagetop-user/src/lib.rs index 39068e1b..8f07ce84 100644 --- a/packages/pagetop-user/src/lib.rs +++ b/packages/pagetop-user/src/lib.rs @@ -33,9 +33,9 @@ async fn login(request: HttpRequest) -> ResultPage { Page::new(request) .with_title(L10n::n("Identificación del usuario")) .with_component( - Container::new() + flex::Container::new() .with_id("welcome") - .add_item(Flex::with(form_login())), + .add_item(flex::Item::with(form_login())), ) .render() } diff --git a/src/base/component.rs b/src/base/component.rs index 21602349..1aeaa4d1 100644 --- a/src/base/component.rs +++ b/src/base/component.rs @@ -157,12 +157,11 @@ impl ToString for FontSize { // ************************************************************************************************* +pub mod flex; + mod basic; pub use basic::*; -mod layout; -pub use layout::*; - mod error403; pub use error403::Error403; diff --git a/src/base/component/layout.rs b/src/base/component/flex.rs similarity index 50% rename from src/base/component/layout.rs rename to src/base/component/flex.rs index 801d7403..8bcfe297 100644 --- a/src/base/component/layout.rs +++ b/src/base/component/flex.rs @@ -1,8 +1,8 @@ mod container; pub use container::Container; -mod flex; -pub use flex::Flex; +mod item; +pub use item::Item; mod region; pub use region::Region; @@ -12,7 +12,7 @@ use crate::prelude::*; // ************************************************************************************************* #[derive(AutoDefault)] -pub enum FlexDirection { +pub enum Direction { #[default] Default, Row(BreakPoint), @@ -22,22 +22,22 @@ pub enum FlexDirection { } #[rustfmt::skip] -impl ToString for FlexDirection { +impl ToString for Direction { fn to_string(&self) -> String { match self { - FlexDirection::Default => concat_string!( + Direction::Default => concat_string!( "flex__row ", BreakPoint::default().to_string() ), - FlexDirection::Row(breakpoint) => concat_string!( + Direction::Row(breakpoint) => concat_string!( "flex__row ", breakpoint.to_string() ), - FlexDirection::RowReverse(breakpoint) => concat_string!( + Direction::RowReverse(breakpoint) => concat_string!( "flex__row flex__reverse ", breakpoint.to_string() ), - FlexDirection::Column(breakpoint) => concat_string!( + Direction::Column(breakpoint) => concat_string!( "flex__col ", breakpoint.to_string() ), - FlexDirection::ColumnReverse(breakpoint) => concat_string!( + Direction::ColumnReverse(breakpoint) => concat_string!( "flex__col flex__reverse ", breakpoint.to_string() ), } @@ -47,7 +47,7 @@ impl ToString for FlexDirection { // ************************************************************************************************* #[derive(AutoDefault)] -pub enum FlexWrap { +pub enum Wrap { #[default] Default, NoWrap, @@ -56,13 +56,13 @@ pub enum FlexWrap { } #[rustfmt::skip] -impl ToString for FlexWrap { +impl ToString for Wrap { fn to_string(&self) -> String { match self { - FlexWrap::Default => "".to_owned(), - FlexWrap::NoWrap => "flex__nowrap".to_owned(), - FlexWrap::Wrap(a) => concat_string!("flex__wrap ", a.to_string()), - FlexWrap::WrapReverse(a) => concat_string!("flex__wrap-reverse ", a.to_string()), + Wrap::Default => "".to_owned(), + Wrap::NoWrap => "flex__nowrap".to_owned(), + Wrap::Wrap(a) => concat_string!("flex__wrap ", a.to_string()), + Wrap::WrapReverse(a) => concat_string!("flex__wrap-reverse ", a.to_string()), } } } @@ -99,7 +99,7 @@ impl ToString for ContentAlign { // ************************************************************************************************* #[derive(AutoDefault)] -pub enum FlexJustify { +pub enum Justify { #[default] Default, Start, @@ -111,16 +111,16 @@ pub enum FlexJustify { } #[rustfmt::skip] -impl ToString for FlexJustify { +impl ToString for Justify { fn to_string(&self) -> String { String::from(match self { - FlexJustify::Default => "", - FlexJustify::Start => "flex__justify-start", - FlexJustify::End => "flex__justify-end", - FlexJustify::Center => "flex__justify-center", - FlexJustify::SpaceBetween => "flex__justify-space-between", - FlexJustify::SpaceAround => "flex__justify-space-around", - FlexJustify::SpaceEvenly => "flex__justify-space-evenly", + Justify::Default => "", + Justify::Start => "flex__justify-start", + Justify::End => "flex__justify-end", + Justify::Center => "flex__justify-center", + Justify::SpaceBetween => "flex__justify-space-between", + Justify::SpaceAround => "flex__justify-space-around", + Justify::SpaceEvenly => "flex__justify-space-evenly", }) } } @@ -128,7 +128,7 @@ impl ToString for FlexJustify { // ************************************************************************************************* #[derive(AutoDefault)] -pub enum FlexAlign { +pub enum Align { #[default] Default, Start, @@ -139,15 +139,15 @@ pub enum FlexAlign { } #[rustfmt::skip] -impl ToString for FlexAlign { +impl ToString for Align { fn to_string(&self) -> String { String::from(match self { - FlexAlign::Default => "", - FlexAlign::Start => "flex__start", - FlexAlign::End => "flex__end", - FlexAlign::Center => "flex__center", - FlexAlign::Stretch => "flex__stretch", - FlexAlign::Baseline => "flex__baseline", + Align::Default => "", + Align::Start => "flex__start", + Align::End => "flex__end", + Align::Center => "flex__center", + Align::Stretch => "flex__stretch", + Align::Baseline => "flex__baseline", }) } } @@ -155,7 +155,7 @@ impl ToString for FlexAlign { // ************************************************************************************************* #[derive(AutoDefault)] -pub enum FlexGap { +pub enum Gap { #[default] Default, Row(unit::Value), @@ -165,14 +165,14 @@ pub enum FlexGap { } #[rustfmt::skip] -impl ToString for FlexGap { +impl ToString for Gap { fn to_string(&self) -> String { match self { - FlexGap::Default => "".to_owned(), - FlexGap::Row(r) => concat_string!("row-gap: ", r.to_string(), ";"), - FlexGap::Column(c) => concat_string!("column-gap: ", c.to_string(), ";"), - FlexGap::Distinct(r, c) => concat_string!("gap: ", r.to_string(), " ", c.to_string(), ";"), - FlexGap::Both(v) => concat_string!("gap: ", v.to_string(), ";"), + Gap::Default => "".to_owned(), + Gap::Row(r) => concat_string!("row-gap: ", r.to_string(), ";"), + Gap::Column(c) => concat_string!("column-gap: ", c.to_string(), ";"), + Gap::Distinct(r, c) => concat_string!("gap: ", r.to_string(), " ", c.to_string(), ";"), + Gap::Both(v) => concat_string!("gap: ", v.to_string(), ";"), } } } @@ -180,7 +180,7 @@ impl ToString for FlexGap { // ************************************************************************************************* #[derive(AutoDefault)] -pub enum FlexGrow { +pub enum Grow { #[default] Default, Is1, @@ -194,19 +194,19 @@ pub enum FlexGrow { Is9, } -impl ToString for FlexGrow { +impl ToString for Grow { fn to_string(&self) -> String { String::from(match self { - FlexGrow::Default => "", - FlexGrow::Is1 => "flex__grow-1", - FlexGrow::Is2 => "flex__grow-2", - FlexGrow::Is3 => "flex__grow-3", - FlexGrow::Is4 => "flex__grow-4", - FlexGrow::Is5 => "flex__grow-5", - FlexGrow::Is6 => "flex__grow-6", - FlexGrow::Is7 => "flex__grow-7", - FlexGrow::Is8 => "flex__grow-8", - FlexGrow::Is9 => "flex__grow-9", + Grow::Default => "", + Grow::Is1 => "flex__grow-1", + Grow::Is2 => "flex__grow-2", + Grow::Is3 => "flex__grow-3", + Grow::Is4 => "flex__grow-4", + Grow::Is5 => "flex__grow-5", + Grow::Is6 => "flex__grow-6", + Grow::Is7 => "flex__grow-7", + Grow::Is8 => "flex__grow-8", + Grow::Is9 => "flex__grow-9", }) } } @@ -214,7 +214,7 @@ impl ToString for FlexGrow { // ************************************************************************************************* #[derive(AutoDefault)] -pub enum FlexShrink { +pub enum Shrink { #[default] Default, Is1, @@ -228,19 +228,19 @@ pub enum FlexShrink { Is9, } -impl ToString for FlexShrink { +impl ToString for Shrink { fn to_string(&self) -> String { String::from(match self { - FlexShrink::Default => "", - FlexShrink::Is1 => "flex__shrink-1", - FlexShrink::Is2 => "flex__shrink-2", - FlexShrink::Is3 => "flex__shrink-3", - FlexShrink::Is4 => "flex__shrink-4", - FlexShrink::Is5 => "flex__shrink-5", - FlexShrink::Is6 => "flex__shrink-6", - FlexShrink::Is7 => "flex__shrink-7", - FlexShrink::Is8 => "flex__shrink-8", - FlexShrink::Is9 => "flex__shrink-9", + Shrink::Default => "", + Shrink::Is1 => "flex__shrink-1", + Shrink::Is2 => "flex__shrink-2", + Shrink::Is3 => "flex__shrink-3", + Shrink::Is4 => "flex__shrink-4", + Shrink::Is5 => "flex__shrink-5", + Shrink::Is6 => "flex__shrink-6", + Shrink::Is7 => "flex__shrink-7", + Shrink::Is8 => "flex__shrink-8", + Shrink::Is9 => "flex__shrink-9", }) } } @@ -248,7 +248,7 @@ impl ToString for FlexShrink { // ************************************************************************************************* #[derive(AutoDefault)] -pub enum FlexSize { +pub enum Size { #[default] Default, Percent10, @@ -264,21 +264,21 @@ pub enum FlexSize { Percent90, } -impl ToString for FlexSize { +impl ToString for Size { fn to_string(&self) -> String { String::from(match self { - FlexSize::Default => "", - FlexSize::Percent10 => "flex__size-10", - FlexSize::Percent20 => "flex__size-20", - FlexSize::Percent25 => "flex__size-25", - FlexSize::Percent33 => "flex__size-33", - FlexSize::Percent40 => "flex__size-40", - FlexSize::Percent50 => "flex__size-50", - FlexSize::Percent60 => "flex__size-60", - FlexSize::Percent66 => "flex__size-66", - FlexSize::Percent75 => "flex__size-75", - FlexSize::Percent80 => "flex__size-80", - FlexSize::Percent90 => "flex__size-90", + Size::Default => "", + Size::Percent10 => "flex__size-10", + Size::Percent20 => "flex__size-20", + Size::Percent25 => "flex__size-25", + Size::Percent33 => "flex__size-33", + Size::Percent40 => "flex__size-40", + Size::Percent50 => "flex__size-50", + Size::Percent60 => "flex__size-60", + Size::Percent66 => "flex__size-66", + Size::Percent75 => "flex__size-75", + Size::Percent80 => "flex__size-80", + Size::Percent90 => "flex__size-90", }) } } @@ -286,7 +286,7 @@ impl ToString for FlexSize { // ************************************************************************************************* #[derive(AutoDefault)] -pub enum FlexOffset { +pub enum Offset { #[default] Default, Offset10, @@ -302,21 +302,21 @@ pub enum FlexOffset { Offset90, } -impl ToString for FlexOffset { +impl ToString for Offset { fn to_string(&self) -> String { String::from(match self { - FlexOffset::Default => "", - FlexOffset::Offset10 => "flex__offset-10", - FlexOffset::Offset20 => "flex__offset-20", - FlexOffset::Offset25 => "flex__offset-25", - FlexOffset::Offset33 => "flex__offset-33", - FlexOffset::Offset40 => "flex__offset-40", - FlexOffset::Offset50 => "flex__offset-50", - FlexOffset::Offset60 => "flex__offset-60", - FlexOffset::Offset66 => "flex__offset-66", - FlexOffset::Offset75 => "flex__offset-75", - FlexOffset::Offset80 => "flex__offset-80", - FlexOffset::Offset90 => "flex__offset-90", + Offset::Default => "", + Offset::Offset10 => "flex__offset-10", + Offset::Offset20 => "flex__offset-20", + Offset::Offset25 => "flex__offset-25", + Offset::Offset33 => "flex__offset-33", + Offset::Offset40 => "flex__offset-40", + Offset::Offset50 => "flex__offset-50", + Offset::Offset60 => "flex__offset-60", + Offset::Offset66 => "flex__offset-66", + Offset::Offset75 => "flex__offset-75", + Offset::Offset80 => "flex__offset-80", + Offset::Offset90 => "flex__offset-90", }) } } diff --git a/src/base/component/layout/container.rs b/src/base/component/flex/container.rs similarity index 85% rename from src/base/component/layout/container.rs rename to src/base/component/flex/container.rs index 1273a0fd..c391db02 100644 --- a/src/base/component/layout/container.rs +++ b/src/base/component/flex/container.rs @@ -20,11 +20,11 @@ pub struct Container { renderable : Renderable, classes : OptionClasses, container_type: ContainerType, - direction : FlexDirection, - flex_wrap : FlexWrap, - flex_justify : FlexJustify, - flex_align : FlexAlign, - flex_gap : FlexGap, + direction : flex::Direction, + flex_wrap : flex::Wrap, + flex_justify : flex::Justify, + flex_align : flex::Align, + flex_gap : flex::Gap, items : MixedComponents, } @@ -68,7 +68,7 @@ impl ComponentTrait for Container { } let gap = match self.gap() { - FlexGap::Default => None, + flex::Gap::Default => None, _ => Some(self.gap().to_string()), }; match self.container_type() { @@ -175,43 +175,43 @@ impl Container { } #[fn_builder] - pub fn alter_direction(&mut self, direction: FlexDirection) -> &mut Self { + pub fn alter_direction(&mut self, direction: flex::Direction) -> &mut Self { self.direction = direction; self } #[fn_builder] - pub fn alter_wrap(&mut self, wrap: FlexWrap) -> &mut Self { + pub fn alter_wrap(&mut self, wrap: flex::Wrap) -> &mut Self { self.flex_wrap = wrap; self } #[fn_builder] - pub fn alter_justify(&mut self, justify: FlexJustify) -> &mut Self { + pub fn alter_justify(&mut self, justify: flex::Justify) -> &mut Self { self.flex_justify = justify; self } #[fn_builder] - pub fn alter_align(&mut self, align: FlexAlign) -> &mut Self { + pub fn alter_align(&mut self, align: flex::Align) -> &mut Self { self.flex_align = align; self } #[fn_builder] - pub fn alter_gap(&mut self, gap: FlexGap) -> &mut Self { + pub fn alter_gap(&mut self, gap: flex::Gap) -> &mut Self { self.flex_gap = gap; self } #[fn_builder] - pub fn alter_items(&mut self, op: TypedOp) -> &mut Self { + pub fn alter_items(&mut self, op: TypedOp) -> &mut Self { self.items.alter_typed(op); self } #[rustfmt::skip] - pub fn add_item(mut self, item: Flex) -> Self { + pub fn add_item(mut self, item: flex::Item) -> Self { self.items.alter_value(AnyOp::Add(AnyComponent::with(item))); self } @@ -222,23 +222,23 @@ impl Container { &self.container_type } - pub fn direction(&self) -> &FlexDirection { + pub fn direction(&self) -> &flex::Direction { &self.direction } - pub fn wrap(&self) -> &FlexWrap { + pub fn wrap(&self) -> &flex::Wrap { &self.flex_wrap } - pub fn justify(&self) -> &FlexJustify { + pub fn justify(&self) -> &flex::Justify { &self.flex_justify } - pub fn align(&self) -> &FlexAlign { + pub fn align(&self) -> &flex::Align { &self.flex_align } - pub fn gap(&self) -> &FlexGap { + pub fn gap(&self) -> &flex::Gap { &self.flex_gap } diff --git a/src/base/component/layout/flex.rs b/src/base/component/flex/item.rs similarity index 78% rename from src/base/component/layout/flex.rs rename to src/base/component/flex/item.rs index 61fda041..da0b9b16 100644 --- a/src/base/component/layout/flex.rs +++ b/src/base/component/flex/item.rs @@ -10,23 +10,23 @@ pub enum ItemType { #[rustfmt::skip] #[derive(AutoDefault, ComponentClasses)] -pub struct Flex { - id : OptionId, - weight : Weight, - renderable : Renderable, - classes : OptionClasses, - item_type : ItemType, - flex_grow : FlexGrow, - flex_shrink : FlexShrink, - flex_size : FlexSize, - flex_offset : FlexOffset, - flex_align : FlexAlign, - mixed : MixedComponents, +pub struct Item { + id : OptionId, + weight : Weight, + renderable : Renderable, + classes : OptionClasses, + item_type : ItemType, + flex_grow : flex::Grow, + flex_shrink: flex::Shrink, + flex_size : flex::Size, + flex_offset: flex::Offset, + flex_align : flex::Align, + mixed : MixedComponents, } -impl ComponentTrait for Flex { +impl ComponentTrait for Item { fn new() -> Self { - Flex::default() + Item::default() } fn id(&self) -> Option { @@ -86,23 +86,23 @@ impl ComponentTrait for Flex { } } -impl Flex { +impl Item { pub fn wrapper() -> Self { - Flex { + Item { item_type: ItemType::Wrapper, ..Default::default() } } pub fn bundle() -> Self { - Flex { + Item { item_type: ItemType::Bundle, ..Default::default() } } pub fn with(component: impl ComponentTrait) -> Self { - Flex::default().add_component(component) + Item::default().add_component(component) } // Item BUILDER. @@ -126,13 +126,13 @@ impl Flex { } #[fn_builder] - pub fn alter_grow(&mut self, grow: FlexGrow) -> &mut Self { + pub fn alter_grow(&mut self, grow: flex::Grow) -> &mut Self { self.flex_grow = grow; self } #[fn_builder] - pub fn alter_shrink(&mut self, shrink: FlexShrink) -> &mut Self { + pub fn alter_shrink(&mut self, shrink: flex::Shrink) -> &mut Self { self.flex_shrink = shrink; self } @@ -140,19 +140,19 @@ impl Flex { #[fn_builder] // Ensures the item occupies the exact specified width, neither growing nor shrinking, // regardless of the available space in the container or the size of other items. - pub fn alter_size(&mut self, size: FlexSize) -> &mut Self { + pub fn alter_size(&mut self, size: flex::Size) -> &mut Self { self.flex_size = size; self } #[fn_builder] - pub fn alter_offset(&mut self, offset: FlexOffset) -> &mut Self { + pub fn alter_offset(&mut self, offset: flex::Offset) -> &mut Self { self.flex_offset = offset; self } #[fn_builder] - pub fn alter_align(&mut self, align: FlexAlign) -> &mut Self { + pub fn alter_align(&mut self, align: flex::Align) -> &mut Self { self.flex_align = align; self } @@ -175,23 +175,23 @@ impl Flex { &self.item_type } - pub fn grow(&self) -> &FlexGrow { + pub fn grow(&self) -> &flex::Grow { &self.flex_grow } - pub fn shrink(&self) -> &FlexShrink { + pub fn shrink(&self) -> &flex::Shrink { &self.flex_shrink } - pub fn size(&self) -> &FlexSize { + pub fn size(&self) -> &flex::Size { &self.flex_size } - pub fn offset(&self) -> &FlexOffset { + pub fn offset(&self) -> &flex::Offset { &self.flex_offset } - pub fn align(&self) -> &FlexAlign { + pub fn align(&self) -> &flex::Align { &self.flex_align } diff --git a/src/base/component/layout/region.rs b/src/base/component/flex/region.rs similarity index 100% rename from src/base/component/layout/region.rs rename to src/base/component/flex/region.rs diff --git a/src/base/package/welcome.rs b/src/base/package/welcome.rs index 6887799d..609591a8 100644 --- a/src/base/package/welcome.rs +++ b/src/base/package/welcome.rs @@ -47,74 +47,78 @@ fn home(request: HttpRequest, lang: &'static LanguageIdentifier) -> ResultPage Container { - Container::header() +fn hello_world() -> flex::Container { + flex::Container::header() .with_classes(ClassesOp::Add, "hello-world") - .with_justify(FlexJustify::Center) + .with_justify(flex::Justify::Center) .add_item( - Flex::new().with_size(FlexSize::Percent90).add_component( - Container::new() - .with_direction(FlexDirection::Column(BreakPoint::MD)) - .add_item( - Flex::new() - .with_classes(ClassesOp::Add, "hello-col-text") - .with_size(FlexSize::Percent40) - .add_component( - Heading::h1(L10n::l("welcome_title")) - .with_size(HeadingSize::Medium), - ) - .add_component( - Paragraph::fluent(L10n::l("welcome_intro").with_arg( - "app", - format!( - "{}", - &config::SETTINGS.app.name, + flex::Item::new() + .with_size(flex::Size::Percent90) + .add_component( + flex::Container::new() + .with_direction(flex::Direction::Column(BreakPoint::MD)) + .add_item( + flex::Item::new() + .with_classes(ClassesOp::Add, "hello-col-text") + .with_size(flex::Size::Percent40) + .add_component( + Heading::h1(L10n::l("welcome_title")) + .with_size(HeadingSize::Medium), + ) + .add_component( + Paragraph::fluent(L10n::l("welcome_intro").with_arg( + "app", + format!( + "{}", + &config::SETTINGS.app.name, + ), + )) + .with_font_size(FontSize::Medium), + ) + .add_component(Paragraph::fluent( + L10n::l("welcome_powered").with_arg( + "pagetop", + format!( + "{}", + "https://pagetop.cillero.es", "PageTop", + ), ), )) - .with_font_size(FontSize::Medium), - ) - .add_component(Paragraph::fluent(L10n::l("welcome_powered").with_arg( - "pagetop", - format!( - "{}", - "https://pagetop.cillero.es", "PageTop", - ), - ))) - .add_component( - Button::anchor( - "https://github.com/manuelcillero/pagetop", - L10n::l("welcome_code"), - ) - .with_target(ButtonTarget::Blank) - .with_left_icon(Some(Icon::with("git"))) - .with_classes(ClassesOp::Add, "code-link") - .with_font_size(FontSize::Medium), - ) - .add_component( - Button::anchor("#welcome-page", L10n::l("welcome")) - .with_style(StyleBase::Link) - .with_left_icon(Some(Icon::with("arrow-down-circle-fill"))) - .with_classes(ClassesOp::Add, "welcome-link") + .add_component( + Button::anchor( + "https://github.com/manuelcillero/pagetop", + L10n::l("welcome_code"), + ) + .with_target(ButtonTarget::Blank) + .with_left_icon(Some(Icon::with("git"))) + .with_classes(ClassesOp::Add, "code-link") .with_font_size(FontSize::Medium), - ), - ) - .add_item( - Flex::with(Image::with("/base/images/header.svg")) - .with_classes(ClassesOp::Add, "hello-col-image") - .with_size(FlexSize::Percent60), - ), - ), + ) + .add_component( + Button::anchor("#welcome-page", L10n::l("welcome")) + .with_style(StyleBase::Link) + .with_left_icon(Some(Icon::with("arrow-down-circle-fill"))) + .with_classes(ClassesOp::Add, "welcome-link") + .with_font_size(FontSize::Medium), + ), + ) + .add_item( + flex::Item::with(Image::with("/base/images/header.svg")) + .with_classes(ClassesOp::Add, "hello-col-image") + .with_size(flex::Size::Percent60), + ), + ), ) } -fn welcome() -> Container { - Container::section() +fn welcome() -> flex::Container { + flex::Container::section() .with_id("welcome-page") .with_classes(ClassesOp::Add, "welcome") - .with_justify(FlexJustify::Center) + .with_justify(flex::Justify::Center) .add_item( - Flex::new() - .with_size(FlexSize::Percent80) + flex::Item::new() + .with_size(flex::Size::Percent80) .add_component(Heading::h2(L10n::l("welcome_page"))) .add_component( Heading::h3(L10n::l("welcome_subtitle").with_arg( @@ -133,98 +137,104 @@ fn welcome() -> Container { ) } -fn about_pagetop() -> Container { - Container::new() +fn about_pagetop() -> flex::Container { + flex::Container::new() .with_classes(ClassesOp::Add, "pagetop") - .with_justify(FlexJustify::Center) + .with_justify(flex::Justify::Center) .add_item( - Flex::new().with_size(FlexSize::Percent90).add_component( - Container::new() - .with_direction(FlexDirection::Column(BreakPoint::SM)) - .add_item( - Flex::with(Image::with("/base/images/about.svg")) - .with_classes(ClassesOp::Add, "pagetop-col-image") - .with_size(FlexSize::Percent40), - ) - .add_item( - Flex::new() - .with_classes(ClassesOp::Add, "pagetop-col-text") - .add_component(Heading::h2(L10n::l("welcome_pagetop_title"))) - .add_component( - Paragraph::fluent(L10n::l("welcome_pagetop_text1")) - .with_font_size(FontSize::Medium), - ) - .add_component(Paragraph::fluent(L10n::l("welcome_pagetop_text2"))) - .add_component(Paragraph::fluent(L10n::l("welcome_pagetop_text3"))), - ), - ), + flex::Item::new() + .with_size(flex::Size::Percent90) + .add_component( + flex::Container::new() + .with_direction(flex::Direction::Column(BreakPoint::SM)) + .add_item( + flex::Item::with(Image::with("/base/images/about.svg")) + .with_classes(ClassesOp::Add, "pagetop-col-image") + .with_size(flex::Size::Percent40), + ) + .add_item( + flex::Item::new() + .with_classes(ClassesOp::Add, "pagetop-col-text") + .add_component(Heading::h2(L10n::l("welcome_pagetop_title"))) + .add_component( + Paragraph::fluent(L10n::l("welcome_pagetop_text1")) + .with_font_size(FontSize::Medium), + ) + .add_component(Paragraph::fluent(L10n::l("welcome_pagetop_text2"))) + .add_component(Paragraph::fluent(L10n::l("welcome_pagetop_text3"))), + ), + ), ) } -fn promo_pagetop() -> Container { - Container::new() +fn promo_pagetop() -> flex::Container { + flex::Container::new() .with_classes(ClassesOp::Add, "promo") - .with_justify(FlexJustify::Center) + .with_justify(flex::Justify::Center) .add_item( - Flex::new().with_size(FlexSize::Percent75).add_component( - Container::new() - .with_direction(FlexDirection::Column(BreakPoint::MD)) - .add_item( - Flex::new() - .with_classes(ClassesOp::Add, "promo-col-text") - .with_size(FlexSize::Percent50) - .add_component(Heading::h2(L10n::l("welcome_promo_title"))) - .add_component( - Paragraph::fluent(L10n::l("welcome_promo_text1").with_arg( - "pagetop", - format!( - "{}", - "https://crates.io/crates/pagetop", "PageTop", - ), - )) - .with_font_size(FontSize::Medium), - ), - ) - .add_item( - Flex::with(Image::with("/base/images/pagetop.png")) - .with_classes(ClassesOp::Add, "promo-col-image") - .with_size(FlexSize::Percent50), - ), - ), + flex::Item::new() + .with_size(flex::Size::Percent75) + .add_component( + flex::Container::new() + .with_direction(flex::Direction::Column(BreakPoint::MD)) + .add_item( + flex::Item::new() + .with_classes(ClassesOp::Add, "promo-col-text") + .with_size(flex::Size::Percent50) + .add_component(Heading::h2(L10n::l("welcome_promo_title"))) + .add_component( + Paragraph::fluent(L10n::l("welcome_promo_text1").with_arg( + "pagetop", + format!( + "{}", + "https://crates.io/crates/pagetop", "PageTop", + ), + )) + .with_font_size(FontSize::Medium), + ), + ) + .add_item( + flex::Item::with(Image::with("/base/images/pagetop.png")) + .with_classes(ClassesOp::Add, "promo-col-image") + .with_size(flex::Size::Percent50), + ), + ), ) } -fn reporting_issues() -> Container { - Container::new() +fn reporting_issues() -> flex::Container { + flex::Container::new() .with_classes(ClassesOp::Add, "issues") - .with_justify(FlexJustify::Center) + .with_justify(flex::Justify::Center) .add_item( - Flex::new().with_size(FlexSize::Percent90).add_component( - Container::new() - .with_direction(FlexDirection::Column(BreakPoint::MD)) - .add_item( - Flex::with(Image::with("/base/images/issues.jpg")) - .with_classes(ClassesOp::Add, "issues-col-image"), - ) - .add_item( - Flex::new() - .with_classes(ClassesOp::Add, "issues-col-text") - .with_size(FlexSize::Percent50) - .add_component(Heading::h2(L10n::l("welcome_issues_title"))) - .add_component( - Paragraph::fluent(L10n::l("welcome_issues_text1")) - .with_font_size(FontSize::Medium), - ) - .add_component(Paragraph::fluent( - L10n::l("welcome_issues_text2").with_arg( - "app", - format!( - "{}", - &config::SETTINGS.app.name, + flex::Item::new() + .with_size(flex::Size::Percent90) + .add_component( + flex::Container::new() + .with_direction(flex::Direction::Column(BreakPoint::MD)) + .add_item( + flex::Item::with(Image::with("/base/images/issues.jpg")) + .with_classes(ClassesOp::Add, "issues-col-image"), + ) + .add_item( + flex::Item::new() + .with_classes(ClassesOp::Add, "issues-col-text") + .with_size(flex::Size::Percent50) + .add_component(Heading::h2(L10n::l("welcome_issues_title"))) + .add_component( + Paragraph::fluent(L10n::l("welcome_issues_text1")) + .with_font_size(FontSize::Medium), + ) + .add_component(Paragraph::fluent( + L10n::l("welcome_issues_text2").with_arg( + "app", + format!( + "{}", + &config::SETTINGS.app.name, + ), ), - ), - )), - ), - ), + )), + ), + ), ) } diff --git a/src/core/theme/definition.rs b/src/core/theme/definition.rs index 9ed66129..3e42e4f2 100644 --- a/src/core/theme/definition.rs +++ b/src/core/theme/definition.rs @@ -28,10 +28,10 @@ pub trait ThemeTrait: PackageTrait + Send + Sync { fn prepare_body(&self, page: &mut Page) -> Markup { let skip_to_id = concat_string!("#", page.skip_to().get().unwrap_or("content".to_owned())); - Container::body() + flex::Container::body() .with_id(page.body_id().get().unwrap_or_default()) .with_classes(ClassesOp::Add, page.body_classes().get().unwrap_or_default()) - .add_item(Flex::bundle() + .add_item(flex::Item::bundle() .add_component(Html::with(html! { @if let Some(skip) = L10n::l("skip_to_content").using(page.context().langid()) { div class="skip__to_content" { @@ -39,35 +39,35 @@ pub trait ThemeTrait: PackageTrait + Send + Sync { } } })) - .add_component(Container::new() + .add_component(flex::Container::new() .with_id("body__wrapper") - .with_direction(FlexDirection::Column(BreakPoint::None)) - .with_align(FlexAlign::Center) - .add_item(Flex::with(Region::named("header")).with_id("header")) - .add_item(Flex::with(Region::named("pagetop")).with_id("pagetop")) + .with_direction(flex::Direction::Column(BreakPoint::None)) + .with_align(flex::Align::Center) + .add_item(flex::Item::with(flex::Region::named("header")).with_id("header")) + .add_item(flex::Item::with(flex::Region::named("pagetop")).with_id("pagetop")) .add_item( - Flex::with( - Container::new() - .with_direction(FlexDirection::Row(BreakPoint::None)) + flex::Item::with( + flex::Container::new() + .with_direction(flex::Direction::Row(BreakPoint::None)) .add_item( - Flex::with(Region::named("sidebar_left")) + flex::Item::with(flex::Region::named("sidebar_left")) .with_id("sidebar_left") - .with_grow(FlexGrow::Is1), + .with_grow(flex::Grow::Is1), ) .add_item( - Flex::with(Region::named("content")) + flex::Item::with(flex::Region::named("content")) .with_id("content") - .with_grow(FlexGrow::Is3), + .with_grow(flex::Grow::Is3), ) .add_item( - Flex::with(Region::named("sidebar_right")) + flex::Item::with(flex::Region::named("sidebar_right")) .with_id("sidebar_right") - .with_grow(FlexGrow::Is1), + .with_grow(flex::Grow::Is1), ), ) .with_id("flex__wrapper"), ) - .add_item(Flex::with(Region::named("footer")).with_id("footer")), + .add_item(flex::Item::with(flex::Region::named("footer")).with_id("footer")), ) ) .render(page.context())