manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

🚧 Working on flex layout

Browse source
This commit is contained in:
Manuel Cillero 2024-03-28 11:13:22 +01:00
parent 0f65711d0e
commit 625d16c0f2
10 changed files with 329 additions and 320 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/pagetop-admin/src/summary.rs
View file

@ -154,10 +154,10 @@ pub async fn summary(request: HttpRequest) -> ResultPage<Markup, ErrorPage> {
.with_title(L10n::n("Admin")) .with_title(L10n::n("Admin"))
.with_component_in("top-menu", side_menu) .with_component_in("top-menu", side_menu)
.with_component( .with_component(
Container::new() flex::Container::new()
.add_item(Flex::with(Html::with(html! { p { "Columna 1"} }))) .add_item(flex::Item::with(Html::with(html! { p { "Columna 1"} })))
.add_item(Flex::with(top_menu)) .add_item(flex::Item::with(top_menu))
.add_item(Flex::with(Html::with(html! { p { "Columna 3"} }))), .add_item(flex::Item::with(Html::with(html! { p { "Columna 3"} }))),
) )
.render() .render()
} }

40
packages/pagetop-bootsier/src/lib.rs
View file

@ -45,10 +45,10 @@ impl ThemeTrait for Bootsier {
fn prepare_body(&self, page: &mut Page) -> Markup { fn prepare_body(&self, page: &mut Page) -> Markup {
let skip_to_id = concat_string!("#", page.skip_to().get().unwrap_or("content".to_owned())); 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("".to_string())) .with_id(page.body_id().get().unwrap_or_default())
.with_classes(ClassesOp::Add, page.body_classes().get().unwrap_or("".to_string())) .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! { .add_component(Html::with(html! {
@if let Some(skip) = L10n::l("skip_to_content").using(page.context().langid()) { @if let Some(skip) = L10n::l("skip_to_content").using(page.context().langid()) {
div class="skip__to_content" { div class="skip__to_content" {
@ -58,23 +58,23 @@ impl ThemeTrait for Bootsier {
})) }))
.add_component( .add_component(
match page.context().layout() { match page.context().layout() {
"admin" => Container::new().add_item( "admin" => flex::Container::new().add_item(
Flex::new() flex::Item::new()
.add_component(Region::named("top-menu")) .add_component(flex::Region::named("top-menu"))
.add_component(Region::named("side-menu")) .add_component(flex::Region::named("side-menu"))
.add_component(Region::named("content")), .add_component(flex::Region::named("content")),
), ),
_ => Container::new().add_item( _ => flex::Container::new().add_item(
Flex::new() flex::Item::new()
.add_component(Region::named("header")) .add_component(flex::Region::named("header"))
.add_component(Region::named("nav_branding")) .add_component(flex::Region::named("nav_branding"))
.add_component(Region::named("nav_main")) .add_component(flex::Region::named("nav_main"))
.add_component(Region::named("nav_additional")) .add_component(flex::Region::named("nav_additional"))
.add_component(Region::named("breadcrumb")) .add_component(flex::Region::named("breadcrumb"))
.add_component(Region::named("content")) .add_component(flex::Region::named("content"))
.add_component(Region::named("sidebar_first")) .add_component(flex::Region::named("sidebar_first"))
.add_component(Region::named("sidebar_second")) .add_component(flex::Region::named("sidebar_second"))
.add_component(Region::named("footer")), .add_component(flex::Region::named("footer")),
), ),
} }
) )

4
packages/pagetop-user/src/lib.rs
View file

@ -33,9 +33,9 @@ async fn login(request: HttpRequest) -> ResultPage<Markup, ErrorPage> {
Page::new(request) Page::new(request)
.with_title(L10n::n("Identificación del usuario")) .with_title(L10n::n("Identificación del usuario"))
.with_component( .with_component(
Container::new() flex::Container::new()
.with_id("welcome") .with_id("welcome")
.add_item(Flex::with(form_login())), .add_item(flex::Item::with(form_login())),
) )
.render() .render()
} }

5
src/base/component.rs
View file

@ -157,12 +157,11 @@ impl ToString for FontSize {
// ************************************************************************************************* // *************************************************************************************************
pub mod flex;
mod basic; mod basic;
pub use basic::*; pub use basic::*;
mod layout;
pub use layout::*;
mod error403; mod error403;
pub use error403::Error403; pub use error403::Error403;

182
src/base/component/layout.rs → src/base/component/flex.rs
View file

@ -1,8 +1,8 @@
mod container; mod container;
pub use container::Container; pub use container::Container;
mod flex; mod item;
pub use flex::Flex; pub use item::Item;
mod region; mod region;
pub use region::Region; pub use region::Region;
@ -12,7 +12,7 @@ use crate::prelude::*;
// ************************************************************************************************* // *************************************************************************************************
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub enum FlexDirection { pub enum Direction {
#[default] #[default]
Default, Default,
Row(BreakPoint), Row(BreakPoint),
@ -22,22 +22,22 @@ pub enum FlexDirection {
} }
#[rustfmt::skip] #[rustfmt::skip]
impl ToString for FlexDirection { impl ToString for Direction {
fn to_string(&self) -> String { fn to_string(&self) -> String {
match self { match self {
FlexDirection::Default => concat_string!( Direction::Default => concat_string!(
"flex__row ", BreakPoint::default().to_string() "flex__row ", BreakPoint::default().to_string()
), ),
FlexDirection::Row(breakpoint) => concat_string!( Direction::Row(breakpoint) => concat_string!(
"flex__row ", breakpoint.to_string() "flex__row ", breakpoint.to_string()
), ),
FlexDirection::RowReverse(breakpoint) => concat_string!( Direction::RowReverse(breakpoint) => concat_string!(
"flex__row flex__reverse ", breakpoint.to_string() "flex__row flex__reverse ", breakpoint.to_string()
), ),
FlexDirection::Column(breakpoint) => concat_string!( Direction::Column(breakpoint) => concat_string!(
"flex__col ", breakpoint.to_string() "flex__col ", breakpoint.to_string()
), ),
FlexDirection::ColumnReverse(breakpoint) => concat_string!( Direction::ColumnReverse(breakpoint) => concat_string!(
"flex__col flex__reverse ", breakpoint.to_string() "flex__col flex__reverse ", breakpoint.to_string()
), ),
} }
@ -47,7 +47,7 @@ impl ToString for FlexDirection {
// ************************************************************************************************* // *************************************************************************************************
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub enum FlexWrap { pub enum Wrap {
#[default] #[default]
Default, Default,
NoWrap, NoWrap,
@ -56,13 +56,13 @@ pub enum FlexWrap {
} }
#[rustfmt::skip] #[rustfmt::skip]
impl ToString for FlexWrap { impl ToString for Wrap {
fn to_string(&self) -> String { fn to_string(&self) -> String {
match self { match self {
FlexWrap::Default => "".to_owned(), Wrap::Default => "".to_owned(),
FlexWrap::NoWrap => "flex__nowrap".to_owned(), Wrap::NoWrap => "flex__nowrap".to_owned(),
FlexWrap::Wrap(a) => concat_string!("flex__wrap ", a.to_string()), Wrap::Wrap(a) => concat_string!("flex__wrap ", a.to_string()),
FlexWrap::WrapReverse(a) => concat_string!("flex__wrap-reverse ", a.to_string()), Wrap::WrapReverse(a) => concat_string!("flex__wrap-reverse ", a.to_string()),
} }
} }
} }
@ -99,7 +99,7 @@ impl ToString for ContentAlign {
// ************************************************************************************************* // *************************************************************************************************
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub enum FlexJustify { pub enum Justify {
#[default] #[default]
Default, Default,
Start, Start,
@ -111,16 +111,16 @@ pub enum FlexJustify {
} }
#[rustfmt::skip] #[rustfmt::skip]
impl ToString for FlexJustify { impl ToString for Justify {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
FlexJustify::Default => "", Justify::Default => "",
FlexJustify::Start => "flex__justify-start", Justify::Start => "flex__justify-start",
FlexJustify::End => "flex__justify-end", Justify::End => "flex__justify-end",
FlexJustify::Center => "flex__justify-center", Justify::Center => "flex__justify-center",
FlexJustify::SpaceBetween => "flex__justify-space-between", Justify::SpaceBetween => "flex__justify-space-between",
FlexJustify::SpaceAround => "flex__justify-space-around", Justify::SpaceAround => "flex__justify-space-around",
FlexJustify::SpaceEvenly => "flex__justify-space-evenly", Justify::SpaceEvenly => "flex__justify-space-evenly",
}) })
} }
} }
@ -128,7 +128,7 @@ impl ToString for FlexJustify {
// ************************************************************************************************* // *************************************************************************************************
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub enum FlexAlign { pub enum Align {
#[default] #[default]
Default, Default,
Start, Start,
@ -139,15 +139,15 @@ pub enum FlexAlign {
} }
#[rustfmt::skip] #[rustfmt::skip]
impl ToString for FlexAlign { impl ToString for Align {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
FlexAlign::Default => "", Align::Default => "",
FlexAlign::Start => "flex__start", Align::Start => "flex__start",
FlexAlign::End => "flex__end", Align::End => "flex__end",
FlexAlign::Center => "flex__center", Align::Center => "flex__center",
FlexAlign::Stretch => "flex__stretch", Align::Stretch => "flex__stretch",
FlexAlign::Baseline => "flex__baseline", Align::Baseline => "flex__baseline",
}) })
} }
} }
@ -155,7 +155,7 @@ impl ToString for FlexAlign {
// ************************************************************************************************* // *************************************************************************************************
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub enum FlexGap { pub enum Gap {
#[default] #[default]
Default, Default,
Row(unit::Value), Row(unit::Value),
@ -165,14 +165,14 @@ pub enum FlexGap {
} }
#[rustfmt::skip] #[rustfmt::skip]
impl ToString for FlexGap { impl ToString for Gap {
fn to_string(&self) -> String { fn to_string(&self) -> String {
match self { match self {
FlexGap::Default => "".to_owned(), Gap::Default => "".to_owned(),
FlexGap::Row(r) => concat_string!("row-gap: ", r.to_string(), ";"), Gap::Row(r) => concat_string!("row-gap: ", r.to_string(), ";"),
FlexGap::Column(c) => concat_string!("column-gap: ", c.to_string(), ";"), Gap::Column(c) => concat_string!("column-gap: ", c.to_string(), ";"),
FlexGap::Distinct(r, c) => concat_string!("gap: ", r.to_string(), " ", c.to_string(), ";"), Gap::Distinct(r, c) => concat_string!("gap: ", r.to_string(), " ", c.to_string(), ";"),
FlexGap::Both(v) => concat_string!("gap: ", v.to_string(), ";"), Gap::Both(v) => concat_string!("gap: ", v.to_string(), ";"),
} }
} }
} }
@ -180,7 +180,7 @@ impl ToString for FlexGap {
// ************************************************************************************************* // *************************************************************************************************
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub enum FlexGrow { pub enum Grow {
#[default] #[default]
Default, Default,
Is1, Is1,
@ -194,19 +194,19 @@ pub enum FlexGrow {
Is9, Is9,
} }
impl ToString for FlexGrow { impl ToString for Grow {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
FlexGrow::Default => "", Grow::Default => "",
FlexGrow::Is1 => "flex__grow-1", Grow::Is1 => "flex__grow-1",
FlexGrow::Is2 => "flex__grow-2", Grow::Is2 => "flex__grow-2",
FlexGrow::Is3 => "flex__grow-3", Grow::Is3 => "flex__grow-3",
FlexGrow::Is4 => "flex__grow-4", Grow::Is4 => "flex__grow-4",
FlexGrow::Is5 => "flex__grow-5", Grow::Is5 => "flex__grow-5",
FlexGrow::Is6 => "flex__grow-6", Grow::Is6 => "flex__grow-6",
FlexGrow::Is7 => "flex__grow-7", Grow::Is7 => "flex__grow-7",
FlexGrow::Is8 => "flex__grow-8", Grow::Is8 => "flex__grow-8",
FlexGrow::Is9 => "flex__grow-9", Grow::Is9 => "flex__grow-9",
}) })
} }
} }
@ -214,7 +214,7 @@ impl ToString for FlexGrow {
// ************************************************************************************************* // *************************************************************************************************
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub enum FlexShrink { pub enum Shrink {
#[default] #[default]
Default, Default,
Is1, Is1,
@ -228,19 +228,19 @@ pub enum FlexShrink {
Is9, Is9,
} }
impl ToString for FlexShrink { impl ToString for Shrink {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
FlexShrink::Default => "", Shrink::Default => "",
FlexShrink::Is1 => "flex__shrink-1", Shrink::Is1 => "flex__shrink-1",
FlexShrink::Is2 => "flex__shrink-2", Shrink::Is2 => "flex__shrink-2",
FlexShrink::Is3 => "flex__shrink-3", Shrink::Is3 => "flex__shrink-3",
FlexShrink::Is4 => "flex__shrink-4", Shrink::Is4 => "flex__shrink-4",
FlexShrink::Is5 => "flex__shrink-5", Shrink::Is5 => "flex__shrink-5",
FlexShrink::Is6 => "flex__shrink-6", Shrink::Is6 => "flex__shrink-6",
FlexShrink::Is7 => "flex__shrink-7", Shrink::Is7 => "flex__shrink-7",
FlexShrink::Is8 => "flex__shrink-8", Shrink::Is8 => "flex__shrink-8",
FlexShrink::Is9 => "flex__shrink-9", Shrink::Is9 => "flex__shrink-9",
}) })
} }
} }
@ -248,7 +248,7 @@ impl ToString for FlexShrink {
// ************************************************************************************************* // *************************************************************************************************
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub enum FlexSize { pub enum Size {
#[default] #[default]
Default, Default,
Percent10, Percent10,
@ -264,21 +264,21 @@ pub enum FlexSize {
Percent90, Percent90,
} }
impl ToString for FlexSize { impl ToString for Size {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
FlexSize::Default => "", Size::Default => "",
FlexSize::Percent10 => "flex__size-10", Size::Percent10 => "flex__size-10",
FlexSize::Percent20 => "flex__size-20", Size::Percent20 => "flex__size-20",
FlexSize::Percent25 => "flex__size-25", Size::Percent25 => "flex__size-25",
FlexSize::Percent33 => "flex__size-33", Size::Percent33 => "flex__size-33",
FlexSize::Percent40 => "flex__size-40", Size::Percent40 => "flex__size-40",
FlexSize::Percent50 => "flex__size-50", Size::Percent50 => "flex__size-50",
FlexSize::Percent60 => "flex__size-60", Size::Percent60 => "flex__size-60",
FlexSize::Percent66 => "flex__size-66", Size::Percent66 => "flex__size-66",
FlexSize::Percent75 => "flex__size-75", Size::Percent75 => "flex__size-75",
FlexSize::Percent80 => "flex__size-80", Size::Percent80 => "flex__size-80",
FlexSize::Percent90 => "flex__size-90", Size::Percent90 => "flex__size-90",
}) })
} }
} }
@ -286,7 +286,7 @@ impl ToString for FlexSize {
// ************************************************************************************************* // *************************************************************************************************
#[derive(AutoDefault)] #[derive(AutoDefault)]
pub enum FlexOffset { pub enum Offset {
#[default] #[default]
Default, Default,
Offset10, Offset10,
@ -302,21 +302,21 @@ pub enum FlexOffset {
Offset90, Offset90,
} }
impl ToString for FlexOffset { impl ToString for Offset {
fn to_string(&self) -> String { fn to_string(&self) -> String {
String::from(match self { String::from(match self {
FlexOffset::Default => "", Offset::Default => "",
FlexOffset::Offset10 => "flex__offset-10", Offset::Offset10 => "flex__offset-10",
FlexOffset::Offset20 => "flex__offset-20", Offset::Offset20 => "flex__offset-20",
FlexOffset::Offset25 => "flex__offset-25", Offset::Offset25 => "flex__offset-25",
FlexOffset::Offset33 => "flex__offset-33", Offset::Offset33 => "flex__offset-33",
FlexOffset::Offset40 => "flex__offset-40", Offset::Offset40 => "flex__offset-40",
FlexOffset::Offset50 => "flex__offset-50", Offset::Offset50 => "flex__offset-50",
FlexOffset::Offset60 => "flex__offset-60", Offset::Offset60 => "flex__offset-60",
FlexOffset::Offset66 => "flex__offset-66", Offset::Offset66 => "flex__offset-66",
FlexOffset::Offset75 => "flex__offset-75", Offset::Offset75 => "flex__offset-75",
FlexOffset::Offset80 => "flex__offset-80", Offset::Offset80 => "flex__offset-80",
FlexOffset::Offset90 => "flex__offset-90", Offset::Offset90 => "flex__offset-90",
}) })
} }
} }

36
src/base/component/layout/container.rs → src/base/component/flex/container.rs
View file

@ -20,11 +20,11 @@ pub struct Container {
renderable : Renderable, renderable : Renderable,
classes : OptionClasses, classes : OptionClasses,
container_type: ContainerType, container_type: ContainerType,
direction : FlexDirection, direction : flex::Direction,
flex_wrap : FlexWrap, flex_wrap : flex::Wrap,
flex_justify : FlexJustify, flex_justify : flex::Justify,
flex_align : FlexAlign, flex_align : flex::Align,
flex_gap : FlexGap, flex_gap : flex::Gap,
items : MixedComponents, items : MixedComponents,
} }
@ -68,7 +68,7 @@ impl ComponentTrait for Container {
} }
let gap = match self.gap() { let gap = match self.gap() {
FlexGap::Default => None, flex::Gap::Default => None,
_ => Some(self.gap().to_string()), _ => Some(self.gap().to_string()),
}; };
match self.container_type() { match self.container_type() {
@ -175,43 +175,43 @@ impl Container {
} }
#[fn_builder] #[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.direction = direction;
self self
} }
#[fn_builder] #[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.flex_wrap = wrap;
self self
} }
#[fn_builder] #[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.flex_justify = justify;
self self
} }
#[fn_builder] #[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.flex_align = align;
self self
} }
#[fn_builder] #[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.flex_gap = gap;
self self
} }
#[fn_builder] #[fn_builder]
pub fn alter_items(&mut self, op: TypedOp<Flex>) -> &mut Self { pub fn alter_items(&mut self, op: TypedOp<flex::Item>) -> &mut Self {
self.items.alter_typed(op); self.items.alter_typed(op);
self self
} }
#[rustfmt::skip] #[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.items.alter_value(AnyOp::Add(AnyComponent::with(item)));
self self
} }
@ -222,23 +222,23 @@ impl Container {
&self.container_type &self.container_type
} }
pub fn direction(&self) -> &FlexDirection { pub fn direction(&self) -> &flex::Direction {
&self.direction &self.direction
} }
pub fn wrap(&self) -> &FlexWrap { pub fn wrap(&self) -> &flex::Wrap {
&self.flex_wrap &self.flex_wrap
} }
pub fn justify(&self) -> &FlexJustify { pub fn justify(&self) -> &flex::Justify {
&self.flex_justify &self.flex_justify
} }
pub fn align(&self) -> &FlexAlign { pub fn align(&self) -> &flex::Align {
&self.flex_align &self.flex_align
} }
pub fn gap(&self) -> &FlexGap { pub fn gap(&self) -> &flex::Gap {
&self.flex_gap &self.flex_gap
} }

56
src/base/component/layout/flex.rs → src/base/component/flex/item.rs
View file

@ -10,23 +10,23 @@ pub enum ItemType {
#[rustfmt::skip] #[rustfmt::skip]
#[derive(AutoDefault, ComponentClasses)] #[derive(AutoDefault, ComponentClasses)]
pub struct Flex { pub struct Item {
id : OptionId, id : OptionId,
weight : Weight, weight : Weight,
renderable : Renderable, renderable : Renderable,
classes : OptionClasses, classes : OptionClasses,
item_type : ItemType, item_type : ItemType,
flex_grow : FlexGrow, flex_grow : flex::Grow,
flex_shrink : FlexShrink, flex_shrink: flex::Shrink,
flex_size : FlexSize, flex_size : flex::Size,
flex_offset : FlexOffset, flex_offset: flex::Offset,
flex_align : FlexAlign, flex_align : flex::Align,
mixed : MixedComponents, mixed : MixedComponents,
} }
impl ComponentTrait for Flex { impl ComponentTrait for Item {
fn new() -> Self { fn new() -> Self {
Flex::default() Item::default()
} }
fn id(&self) -> Option<String> { fn id(&self) -> Option<String> {
@ -86,23 +86,23 @@ impl ComponentTrait for Flex {
} }
} }
impl Flex { impl Item {
pub fn wrapper() -> Self { pub fn wrapper() -> Self {
Flex { Item {
item_type: ItemType::Wrapper, item_type: ItemType::Wrapper,
..Default::default() ..Default::default()
} }
} }
pub fn bundle() -> Self { pub fn bundle() -> Self {
Flex { Item {
item_type: ItemType::Bundle, item_type: ItemType::Bundle,
..Default::default() ..Default::default()
} }
} }
pub fn with(component: impl ComponentTrait) -> Self { pub fn with(component: impl ComponentTrait) -> Self {
Flex::default().add_component(component) Item::default().add_component(component)
} }
// Item BUILDER. // Item BUILDER.
@ -126,13 +126,13 @@ impl Flex {
} }
#[fn_builder] #[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.flex_grow = grow;
self self
} }
#[fn_builder] #[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.flex_shrink = shrink;
self self
} }
@ -140,19 +140,19 @@ impl Flex {
#[fn_builder] #[fn_builder]
// Ensures the item occupies the exact specified width, neither growing nor shrinking, // 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. // 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.flex_size = size;
self self
} }
#[fn_builder] #[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.flex_offset = offset;
self self
} }
#[fn_builder] #[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.flex_align = align;
self self
} }
@ -175,23 +175,23 @@ impl Flex {
&self.item_type &self.item_type
} }
pub fn grow(&self) -> &FlexGrow { pub fn grow(&self) -> &flex::Grow {
&self.flex_grow &self.flex_grow
} }
pub fn shrink(&self) -> &FlexShrink { pub fn shrink(&self) -> &flex::Shrink {
&self.flex_shrink &self.flex_shrink
} }
pub fn size(&self) -> &FlexSize { pub fn size(&self) -> &flex::Size {
&self.flex_size &self.flex_size
} }
pub fn offset(&self) -> &FlexOffset { pub fn offset(&self) -> &flex::Offset {
&self.flex_offset &self.flex_offset
} }
pub fn align(&self) -> &FlexAlign { pub fn align(&self) -> &flex::Align {
&self.flex_align &self.flex_align
} }

0
src/base/component/layout/region.rs → src/base/component/flex/region.rs
View file

284
src/base/package/welcome.rs
View file

@ -47,74 +47,78 @@ fn home(request: HttpRequest, lang: &'static LanguageIdentifier) -> ResultPage<M
.render() .render()
} }
fn hello_world() -> Container { fn hello_world() -> flex::Container {
Container::header() flex::Container::header()
.with_classes(ClassesOp::Add, "hello-world") .with_classes(ClassesOp::Add, "hello-world")
.with_justify(FlexJustify::Center) .with_justify(flex::Justify::Center)
.add_item( .add_item(
Flex::new().with_size(FlexSize::Percent90).add_component( flex::Item::new()
Container::new() .with_size(flex::Size::Percent90)
.with_direction(FlexDirection::Column(BreakPoint::MD)) .add_component(
.add_item( flex::Container::new()
Flex::new() .with_direction(flex::Direction::Column(BreakPoint::MD))
.with_classes(ClassesOp::Add, "hello-col-text") .add_item(
.with_size(FlexSize::Percent40) flex::Item::new()
.add_component( .with_classes(ClassesOp::Add, "hello-col-text")
Heading::h1(L10n::l("welcome_title")) .with_size(flex::Size::Percent40)
.with_size(HeadingSize::Medium), .add_component(
) Heading::h1(L10n::l("welcome_title"))
.add_component( .with_size(HeadingSize::Medium),
Paragraph::fluent(L10n::l("welcome_intro").with_arg( )
"app", .add_component(
format!( Paragraph::fluent(L10n::l("welcome_intro").with_arg(
"<span class=\"app-name\">{}</span>", "app",
&config::SETTINGS.app.name, format!(
"<span class=\"app-name\">{}</span>",
&config::SETTINGS.app.name,
),
))
.with_font_size(FontSize::Medium),
)
.add_component(Paragraph::fluent(
L10n::l("welcome_powered").with_arg(
"pagetop",
format!(
"<a href=\"{}\" target=\"_blank\">{}</a>",
"https://pagetop.cillero.es", "PageTop",
),
), ),
)) ))
.with_font_size(FontSize::Medium), .add_component(
) Button::anchor(
.add_component(Paragraph::fluent(L10n::l("welcome_powered").with_arg( "https://github.com/manuelcillero/pagetop",
"pagetop", L10n::l("welcome_code"),
format!( )
"<a href=\"{}\" target=\"_blank\">{}</a>", .with_target(ButtonTarget::Blank)
"https://pagetop.cillero.es", "PageTop", .with_left_icon(Some(Icon::with("git")))
), .with_classes(ClassesOp::Add, "code-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_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), .with_font_size(FontSize::Medium),
), )
) .add_component(
.add_item( Button::anchor("#welcome-page", L10n::l("welcome"))
Flex::with(Image::with("/base/images/header.svg")) .with_style(StyleBase::Link)
.with_classes(ClassesOp::Add, "hello-col-image") .with_left_icon(Some(Icon::with("arrow-down-circle-fill")))
.with_size(FlexSize::Percent60), .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 { fn welcome() -> flex::Container {
Container::section() flex::Container::section()
.with_id("welcome-page") .with_id("welcome-page")
.with_classes(ClassesOp::Add, "welcome") .with_classes(ClassesOp::Add, "welcome")
.with_justify(FlexJustify::Center) .with_justify(flex::Justify::Center)
.add_item( .add_item(
Flex::new() flex::Item::new()
.with_size(FlexSize::Percent80) .with_size(flex::Size::Percent80)
.add_component(Heading::h2(L10n::l("welcome_page"))) .add_component(Heading::h2(L10n::l("welcome_page")))
.add_component( .add_component(
Heading::h3(L10n::l("welcome_subtitle").with_arg( Heading::h3(L10n::l("welcome_subtitle").with_arg(
@ -133,98 +137,104 @@ fn welcome() -> Container {
) )
} }
fn about_pagetop() -> Container { fn about_pagetop() -> flex::Container {
Container::new() flex::Container::new()
.with_classes(ClassesOp::Add, "pagetop") .with_classes(ClassesOp::Add, "pagetop")
.with_justify(FlexJustify::Center) .with_justify(flex::Justify::Center)
.add_item( .add_item(
Flex::new().with_size(FlexSize::Percent90).add_component( flex::Item::new()
Container::new() .with_size(flex::Size::Percent90)
.with_direction(FlexDirection::Column(BreakPoint::SM)) .add_component(
.add_item( flex::Container::new()
Flex::with(Image::with("/base/images/about.svg")) .with_direction(flex::Direction::Column(BreakPoint::SM))
.with_classes(ClassesOp::Add, "pagetop-col-image") .add_item(
.with_size(FlexSize::Percent40), flex::Item::with(Image::with("/base/images/about.svg"))
) .with_classes(ClassesOp::Add, "pagetop-col-image")
.add_item( .with_size(flex::Size::Percent40),
Flex::new() )
.with_classes(ClassesOp::Add, "pagetop-col-text") .add_item(
.add_component(Heading::h2(L10n::l("welcome_pagetop_title"))) flex::Item::new()
.add_component( .with_classes(ClassesOp::Add, "pagetop-col-text")
Paragraph::fluent(L10n::l("welcome_pagetop_text1")) .add_component(Heading::h2(L10n::l("welcome_pagetop_title")))
.with_font_size(FontSize::Medium), .add_component(
) Paragraph::fluent(L10n::l("welcome_pagetop_text1"))
.add_component(Paragraph::fluent(L10n::l("welcome_pagetop_text2"))) .with_font_size(FontSize::Medium),
.add_component(Paragraph::fluent(L10n::l("welcome_pagetop_text3"))), )
), .add_component(Paragraph::fluent(L10n::l("welcome_pagetop_text2")))
), .add_component(Paragraph::fluent(L10n::l("welcome_pagetop_text3"))),
),
),
) )
} }
fn promo_pagetop() -> Container { fn promo_pagetop() -> flex::Container {
Container::new() flex::Container::new()
.with_classes(ClassesOp::Add, "promo") .with_classes(ClassesOp::Add, "promo")
.with_justify(FlexJustify::Center) .with_justify(flex::Justify::Center)
.add_item( .add_item(
Flex::new().with_size(FlexSize::Percent75).add_component( flex::Item::new()
Container::new() .with_size(flex::Size::Percent75)
.with_direction(FlexDirection::Column(BreakPoint::MD)) .add_component(
.add_item( flex::Container::new()
Flex::new() .with_direction(flex::Direction::Column(BreakPoint::MD))
.with_classes(ClassesOp::Add, "promo-col-text") .add_item(
.with_size(FlexSize::Percent50) flex::Item::new()
.add_component(Heading::h2(L10n::l("welcome_promo_title"))) .with_classes(ClassesOp::Add, "promo-col-text")
.add_component( .with_size(flex::Size::Percent50)
Paragraph::fluent(L10n::l("welcome_promo_text1").with_arg( .add_component(Heading::h2(L10n::l("welcome_promo_title")))
"pagetop", .add_component(
format!( Paragraph::fluent(L10n::l("welcome_promo_text1").with_arg(
"<a href=\"{}\" target=\"_blank\">{}</a>", "pagetop",
"https://crates.io/crates/pagetop", "PageTop", format!(
), "<a href=\"{}\" target=\"_blank\">{}</a>",
)) "https://crates.io/crates/pagetop", "PageTop",
.with_font_size(FontSize::Medium), ),
), ))
) .with_font_size(FontSize::Medium),
.add_item( ),
Flex::with(Image::with("/base/images/pagetop.png")) )
.with_classes(ClassesOp::Add, "promo-col-image") .add_item(
.with_size(FlexSize::Percent50), 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 { fn reporting_issues() -> flex::Container {
Container::new() flex::Container::new()
.with_classes(ClassesOp::Add, "issues") .with_classes(ClassesOp::Add, "issues")
.with_justify(FlexJustify::Center) .with_justify(flex::Justify::Center)
.add_item( .add_item(
Flex::new().with_size(FlexSize::Percent90).add_component( flex::Item::new()
Container::new() .with_size(flex::Size::Percent90)
.with_direction(FlexDirection::Column(BreakPoint::MD)) .add_component(
.add_item( flex::Container::new()
Flex::with(Image::with("/base/images/issues.jpg")) .with_direction(flex::Direction::Column(BreakPoint::MD))
.with_classes(ClassesOp::Add, "issues-col-image"), .add_item(
) flex::Item::with(Image::with("/base/images/issues.jpg"))
.add_item( .with_classes(ClassesOp::Add, "issues-col-image"),
Flex::new() )
.with_classes(ClassesOp::Add, "issues-col-text") .add_item(
.with_size(FlexSize::Percent50) flex::Item::new()
.add_component(Heading::h2(L10n::l("welcome_issues_title"))) .with_classes(ClassesOp::Add, "issues-col-text")
.add_component( .with_size(flex::Size::Percent50)
Paragraph::fluent(L10n::l("welcome_issues_text1")) .add_component(Heading::h2(L10n::l("welcome_issues_title")))
.with_font_size(FontSize::Medium), .add_component(
) Paragraph::fluent(L10n::l("welcome_issues_text1"))
.add_component(Paragraph::fluent( .with_font_size(FontSize::Medium),
L10n::l("welcome_issues_text2").with_arg( )
"app", .add_component(Paragraph::fluent(
format!( L10n::l("welcome_issues_text2").with_arg(
"<span class=\"app-name\">{}</span>", "app",
&config::SETTINGS.app.name, format!(
"<span class=\"app-name\">{}</span>",
&config::SETTINGS.app.name,
),
), ),
), )),
)), ),
), ),
),
) )
} }

34
src/core/theme/definition.rs
View file

@ -28,10 +28,10 @@ pub trait ThemeTrait: PackageTrait + Send + Sync {
fn prepare_body(&self, page: &mut Page) -> Markup { fn prepare_body(&self, page: &mut Page) -> Markup {
let skip_to_id = concat_string!("#", page.skip_to().get().unwrap_or("content".to_owned())); 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_id(page.body_id().get().unwrap_or_default())
.with_classes(ClassesOp::Add, page.body_classes().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! { .add_component(Html::with(html! {
@if let Some(skip) = L10n::l("skip_to_content").using(page.context().langid()) { @if let Some(skip) = L10n::l("skip_to_content").using(page.context().langid()) {
div class="skip__to_content" { 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_id("body__wrapper")
.with_direction(FlexDirection::Column(BreakPoint::None)) .with_direction(flex::Direction::Column(BreakPoint::None))
.with_align(FlexAlign::Center) .with_align(flex::Align::Center)
.add_item(Flex::with(Region::named("header")).with_id("header")) .add_item(flex::Item::with(flex::Region::named("header")).with_id("header"))
.add_item(Flex::with(Region::named("pagetop")).with_id("pagetop")) .add_item(flex::Item::with(flex::Region::named("pagetop")).with_id("pagetop"))
.add_item( .add_item(
Flex::with( flex::Item::with(
Container::new() flex::Container::new()
.with_direction(FlexDirection::Row(BreakPoint::None)) .with_direction(flex::Direction::Row(BreakPoint::None))
.add_item( .add_item(
Flex::with(Region::named("sidebar_left")) flex::Item::with(flex::Region::named("sidebar_left"))
.with_id("sidebar_left") .with_id("sidebar_left")
.with_grow(FlexGrow::Is1), .with_grow(flex::Grow::Is1),
) )
.add_item( .add_item(
Flex::with(Region::named("content")) flex::Item::with(flex::Region::named("content"))
.with_id("content") .with_id("content")
.with_grow(FlexGrow::Is3), .with_grow(flex::Grow::Is3),
) )
.add_item( .add_item(
Flex::with(Region::named("sidebar_right")) flex::Item::with(flex::Region::named("sidebar_right"))
.with_id("sidebar_right") .with_id("sidebar_right")
.with_grow(FlexGrow::Is1), .with_grow(flex::Grow::Is1),
), ),
) )
.with_id("flex__wrapper"), .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()) .render(page.context())