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

🧑‍💻 Improve Flex components for content layout

Browse source
This commit is contained in:
Manuel Cillero 2024-03-16 08:18:47 +01:00
parent 00eb831b43
commit 544b56af07
6 changed files with 219 additions and 178 deletions
Download patch file Download diff file Expand all files Collapse all files

128
src/base/component/flex.rs
View file

@ -22,19 +22,19 @@ impl ToString for Direction {
fn to_string(&self) -> String {
match self {
Direction::Default => concat_string!(
"flex__container flex__row ", BreakPoint::default().to_string()
"flex__row ", BreakPoint::default().to_string()
),
Direction::Row(breakpoint) => concat_string!(
"flex__container flex__row ", breakpoint.to_string()
"flex__row ", breakpoint.to_string()
),
Direction::RowReverse(breakpoint) => concat_string!(
"flex__container flex__row flex__reverse ", breakpoint.to_string()
"flex__row flex__reverse ", breakpoint.to_string()
),
Direction::Column(breakpoint) => concat_string!(
"flex__container flex__col ", breakpoint.to_string()
"flex__col ", breakpoint.to_string()
),
Direction::ColumnReverse(breakpoint) => concat_string!(
"flex__container flex__col flex__reverse ", breakpoint.to_string()
"flex__col flex__reverse ", breakpoint.to_string()
),
}
}
@ -139,11 +139,11 @@ impl ToString for ItemAlign {
fn to_string(&self) -> String {
String::from(match self {
ItemAlign::Default => "",
ItemAlign::Start => "flex-item__start",
ItemAlign::End => "flex-item__end",
ItemAlign::Center => "flex-item__center",
ItemAlign::Stretch => "flex-item__stretch",
ItemAlign::Baseline => "flex-item__baseline",
ItemAlign::Start => "flex__item-start",
ItemAlign::End => "flex__item-end",
ItemAlign::Center => "flex__item-center",
ItemAlign::Stretch => "flex__item-stretch",
ItemAlign::Baseline => "flex__item-baseline",
})
}
}
@ -175,6 +175,24 @@ impl ToString for Gap {
// *************************************************************************************************
#[derive(AutoDefault)]
pub enum ItemWide {
#[default]
Auto,
Full,
}
impl ToString for ItemWide {
fn to_string(&self) -> String {
String::from(match self {
ItemWide::Auto => "",
ItemWide::Full => "flex__full",
})
}
}
// *************************************************************************************************
#[derive(AutoDefault)]
pub enum ItemGrow {
#[default]
@ -190,20 +208,19 @@ pub enum ItemGrow {
Is9,
}
#[rustfmt::skip]
impl ToString for ItemGrow {
fn to_string(&self) -> String {
String::from(match self {
ItemGrow::Default => "",
ItemGrow::Is1 => "flex-item__grow-1",
ItemGrow::Is2 => "flex-item__grow-2",
ItemGrow::Is3 => "flex-item__grow-3",
ItemGrow::Is4 => "flex-item__grow-4",
ItemGrow::Is5 => "flex-item__grow-5",
ItemGrow::Is6 => "flex-item__grow-6",
ItemGrow::Is7 => "flex-item__grow-7",
ItemGrow::Is8 => "flex-item__grow-8",
ItemGrow::Is9 => "flex-item__grow-9",
ItemGrow::Is1 => "flex__item-grow-1",
ItemGrow::Is2 => "flex__item-grow-2",
ItemGrow::Is3 => "flex__item-grow-3",
ItemGrow::Is4 => "flex__item-grow-4",
ItemGrow::Is5 => "flex__item-grow-5",
ItemGrow::Is6 => "flex__item-grow-6",
ItemGrow::Is7 => "flex__item-grow-7",
ItemGrow::Is8 => "flex__item-grow-8",
ItemGrow::Is9 => "flex__item-grow-9",
})
}
}
@ -225,20 +242,19 @@ pub enum ItemShrink {
Is9,
}
#[rustfmt::skip]
impl ToString for ItemShrink {
fn to_string(&self) -> String {
String::from(match self {
ItemShrink::Default => "",
ItemShrink::Is1 => "flex-item__shrink-1",
ItemShrink::Is2 => "flex-item__shrink-2",
ItemShrink::Is3 => "flex-item__shrink-3",
ItemShrink::Is4 => "flex-item__shrink-4",
ItemShrink::Is5 => "flex-item__shrink-5",
ItemShrink::Is6 => "flex-item__shrink-6",
ItemShrink::Is7 => "flex-item__shrink-7",
ItemShrink::Is8 => "flex-item__shrink-8",
ItemShrink::Is9 => "flex-item__shrink-9",
ItemShrink::Is1 => "flex__item-shrink-1",
ItemShrink::Is2 => "flex__item-shrink-2",
ItemShrink::Is3 => "flex__item-shrink-3",
ItemShrink::Is4 => "flex__item-shrink-4",
ItemShrink::Is5 => "flex__item-shrink-5",
ItemShrink::Is6 => "flex__item-shrink-6",
ItemShrink::Is7 => "flex__item-shrink-7",
ItemShrink::Is8 => "flex__item-shrink-8",
ItemShrink::Is9 => "flex__item-shrink-9",
})
}
}
@ -260,24 +276,25 @@ pub enum ItemSize {
Percent75,
Percent80,
Percent90,
FullWidth,
}
#[rustfmt::skip]
impl ToString for ItemSize {
fn to_string(&self) -> String {
String::from(match self {
ItemSize::Default => "",
ItemSize::Percent10 => "flex-item__width-10",
ItemSize::Percent20 => "flex-item__width-20",
ItemSize::Percent25 => "flex-item__width-25",
ItemSize::Percent33 => "flex-item__width-33",
ItemSize::Percent40 => "flex-item__width-40",
ItemSize::Percent50 => "flex-item__width-50",
ItemSize::Percent60 => "flex-item__width-60",
ItemSize::Percent66 => "flex-item__width-66",
ItemSize::Percent75 => "flex-item__width-75",
ItemSize::Percent80 => "flex-item__width-80",
ItemSize::Percent90 => "flex-item__width-90",
ItemSize::Default => "",
ItemSize::Percent10 => "flex__item-width-10",
ItemSize::Percent20 => "flex__item-width-20",
ItemSize::Percent25 => "flex__item-width-25",
ItemSize::Percent33 => "flex__item-width-33",
ItemSize::Percent40 => "flex__item-width-40",
ItemSize::Percent50 => "flex__item-width-50",
ItemSize::Percent60 => "flex__item-width-60",
ItemSize::Percent66 => "flex__item-width-66",
ItemSize::Percent75 => "flex__item-width-75",
ItemSize::Percent80 => "flex__item-width-80",
ItemSize::Percent90 => "flex__item-width-90",
ItemSize::FullWidth => "flex__item-fullwidth",
})
}
}
@ -301,22 +318,21 @@ pub enum ItemOffset {
Offset90,
}
#[rustfmt::skip]
impl ToString for ItemOffset {
fn to_string(&self) -> String {
String::from(match self {
ItemOffset::Default => "",
ItemOffset::Offset10 => "flex-item__offset-10",
ItemOffset::Offset20 => "flex-item__offset-20",
ItemOffset::Offset25 => "flex-item__offset-25",
ItemOffset::Offset33 => "flex-item__offset-33",
ItemOffset::Offset40 => "flex-item__offset-40",
ItemOffset::Offset50 => "flex-item__offset-50",
ItemOffset::Offset60 => "flex-item__offset-60",
ItemOffset::Offset66 => "flex-item__offset-66",
ItemOffset::Offset75 => "flex-item__offset-75",
ItemOffset::Offset80 => "flex-item__offset-80",
ItemOffset::Offset90 => "flex-item__offset-90",
ItemOffset::Default => "",
ItemOffset::Offset10 => "flex__item-offset-10",
ItemOffset::Offset20 => "flex__item-offset-20",
ItemOffset::Offset25 => "flex__item-offset-25",
ItemOffset::Offset33 => "flex__item-offset-33",
ItemOffset::Offset40 => "flex__item-offset-40",
ItemOffset::Offset50 => "flex__item-offset-50",
ItemOffset::Offset60 => "flex__item-offset-60",
ItemOffset::Offset66 => "flex__item-offset-66",
ItemOffset::Offset75 => "flex__item-offset-75",
ItemOffset::Offset80 => "flex__item-offset-80",
ItemOffset::Offset90 => "flex__item-offset-90",
})
}
}

59
src/base/component/flex/container.rs
View file

@ -7,12 +7,12 @@ pub struct Container {
weight : Weight,
renderable : Renderable,
classes : OptionClasses,
items : TypedComponents<flex::Item>,
direction : flex::Direction,
wrap_align : flex::WrapAlign,
content_justify: flex::ContentJustify,
items_align : flex::ItemAlign,
gap : flex::Gap,
items : TypedComponents<flex::Item>,
}
impl ComponentTrait for Container {
@ -36,6 +36,7 @@ impl ComponentTrait for Container {
self.alter_classes(
ClassesOp::Prepend,
[
String::from("flex__container"),
self.direction().to_string(),
self.wrap_align().to_string(),
self.content_justify().to_string(),
@ -48,16 +49,20 @@ impl ComponentTrait for Container {
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
let gap = match self.gap() {
flex::Gap::Default => None,
_ => Some(self.gap().to_string()),
};
PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] style=[gap] {
(self.items().render(cx))
}
})
let output = self.items().render(cx);
if !output.is_empty() {
let gap = match self.gap() {
flex::Gap::Default => None,
_ => Some(self.gap().to_string()),
};
PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] style=[gap] {
(output)
}
})
} else {
PrepareMarkup::None
}
}
}
@ -82,18 +87,6 @@ impl Container {
self
}
#[rustfmt::skip]
pub fn add_item(mut self, item: flex::Item) -> Self {
self.items.alter_value(TypedOp::Add(OneComponent::with(item)));
self
}
#[fn_builder]
pub fn alter_items(&mut self, op: TypedOp<flex::Item>) -> &mut Self {
self.items.alter_value(op);
self
}
#[fn_builder]
pub fn alter_direction(&mut self, direction: flex::Direction) -> &mut Self {
self.direction = direction;
@ -124,12 +117,20 @@ impl Container {
self
}
// Container GETTERS.
pub fn items(&self) -> &TypedComponents<flex::Item> {
&self.items
#[fn_builder]
pub fn alter_items(&mut self, op: TypedOp<flex::Item>) -> &mut Self {
self.items.alter_value(op);
self
}
#[rustfmt::skip]
pub fn add_item(mut self, item: flex::Item) -> Self {
self.items.alter_value(TypedOp::Add(OneComponent::with(item)));
self
}
// Container GETTERS.
pub fn direction(&self) -> &flex::Direction {
&self.direction
}
@ -149,4 +150,8 @@ impl Container {
pub fn gap(&self) -> &flex::Gap {
&self.gap
}
pub fn items(&self) -> &TypedComponents<flex::Item> {
&self.items
}
}

47
src/base/component/flex/item.rs
View file

@ -7,6 +7,7 @@ pub struct Item {
weight : Weight,
renderable : Renderable,
classes : OptionClasses,
item_wide : flex::ItemWide,
item_grow : flex::ItemGrow,
item_shrink : flex::ItemShrink,
item_size : flex::ItemSize,
@ -36,7 +37,8 @@ impl ComponentTrait for Item {
self.alter_classes(
ClassesOp::Prepend,
[
"flex-item__container".to_owned(),
String::from("flex__item"),
self.wide().to_string(),
self.grow().to_string(),
self.shrink().to_string(),
self.size().to_string(),
@ -48,17 +50,22 @@ impl ComponentTrait for Item {
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
let order = match self.weight() {
0 => None,
_ => Some(concat_string!("order: ", self.weight().to_string(), ";")),
};
PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] style=[order] {
div class="flex-item__content" {
(self.components().render(cx))
let output = self.components().render(cx);
if !output.is_empty() {
let order = match self.weight() {
0 => None,
_ => Some(concat_string!("order: ", self.weight().to_string(), ";")),
};
PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] style=[order] {
div class="flex__content" {
(output)
}
}
}
})
})
} else {
PrepareMarkup::None
}
}
}
@ -67,6 +74,12 @@ impl Item {
Item::default().add_component(component)
}
pub fn full(component: impl ComponentTrait) -> Self {
Item::default()
.with_wide(flex::ItemWide::Full)
.add_component(component)
}
// Item BUILDER.
#[fn_builder]
@ -87,6 +100,12 @@ impl Item {
self
}
#[fn_builder]
pub fn alter_wide(&mut self, wide: flex::ItemWide) -> &mut Self {
self.item_wide = wide;
self
}
#[fn_builder]
pub fn alter_grow(&mut self, grow: flex::ItemGrow) -> &mut Self {
self.item_grow = grow;
@ -100,6 +119,8 @@ impl Item {
}
#[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: flex::ItemSize) -> &mut Self {
self.item_size = size;
self
@ -131,6 +152,10 @@ impl Item {
// Item GETTERS.
pub fn wide(&self) -> &flex::ItemWide {
&self.item_wide
}
pub fn grow(&self) -> &flex::ItemGrow {
&self.item_grow
}