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

🔥 Remove inner classes from components code

Browse source
This commit is contained in:
Manuel Cillero 2024-02-29 23:37:54 +01:00
parent ee3956cb2c
commit e7744cbb93
7 changed files with 73 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

16
helpers/pagetop-macros/src/lib.rs
View file

@ -58,9 +58,9 @@ pub fn fn_builder(_: TokenStream, item: TokenStream) -> TokenStream {
#[rustfmt::skip] #[rustfmt::skip]
let fn_alter_doc = concat_string!( let fn_alter_doc = concat_string!(
"<p id=\"method.", fn_with_name, "\">", "<p id=\"method.", fn_with_name, "\">",
"Use <code class=\"code-header\"> <a class=\"fn\" href=\"#method.", fn_with_name, "\">", "Use <code class=\"code-header\"> <span class=\"fn\" href=\"#method.", fn_with_name, "\">",
fn_with_name, fn_with_name,
"</a>(self, …) -> Self </code> to apply the <a href=\"#method.new\">builder pattern</a>.", "</span>(self, …) -> Self </code> to apply the <a href=\"#method.new\">builder pattern</a>.",
"</p>" "</p>"
); );
@ -130,8 +130,18 @@ pub fn derive_component_classes(input: TokenStream) -> TokenStream {
let input = parse_macro_input!(input as DeriveInput); let input = parse_macro_input!(input as DeriveInput);
let name = &input.ident; let name = &input.ident;
let fn_alter_doc = concat_string!(
"<p id=\"method.with_classes\">",
"Use <code class=\"code-header\">",
" <span class=\"fn\" href=\"#method.with_classes\">with_classes</span>(self, …) -> Self ",
"</code> to apply the <a href=\"#method.new\">builder pattern</a>.",
"</p>"
);
let expanded = quote! { let expanded = quote! {
impl ImplementClasses for #name { impl ComponentClasses for #name {
#[inline]
#[doc = #fn_alter_doc]
fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self { fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
self.classes.alter_value(op, classes); self.classes.alter_value(op, classes);
self self

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

@ -7,7 +7,6 @@ pub struct Item {
weight : Weight, weight : Weight,
renderable : Renderable, renderable : Renderable,
classes : OptionClasses, classes : OptionClasses,
inner_classes: OptionClasses,
item_grow : flex::ItemGrow, item_grow : flex::ItemGrow,
item_shrink : flex::ItemShrink, item_shrink : flex::ItemShrink,
item_size : flex::ItemSize, item_size : flex::ItemSize,
@ -45,8 +44,6 @@ impl ComponentTrait for Item {
] ]
.join(" "), .join(" "),
); );
self.inner_classes
.alter_value(ClassesOp::Prepend, "pt-flex__item-inner");
} }
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
@ -56,7 +53,7 @@ impl ComponentTrait for Item {
}; };
PrepareMarkup::With(html! { PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] style=[order] { div id=[self.id()] class=[self.classes().get()] style=[order] {
div class=[self.inner_classes().get()] { div class="inner" {
(self.components().render(cx)) (self.components().render(cx))
} }
} }
@ -85,12 +82,6 @@ impl Item {
self self
} }
#[fn_builder]
pub fn alter_inner_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
self.inner_classes.alter_value(op, classes);
self
}
#[fn_builder] #[fn_builder]
pub fn alter_grow(&mut self, grow: flex::ItemGrow) -> &mut Self { pub fn alter_grow(&mut self, grow: flex::ItemGrow) -> &mut Self {
self.item_grow = grow; self.item_grow = grow;
@ -135,10 +126,6 @@ impl Item {
// Item GETTERS. // Item GETTERS.
pub fn inner_classes(&self) -> &OptionClasses {
&self.inner_classes
}
pub fn grow(&self) -> &flex::ItemGrow { pub fn grow(&self) -> &flex::ItemGrow {
&self.item_grow &self.item_grow
} }

83
src/base/component/wrapper.rs
View file

@ -17,16 +17,13 @@ pub struct Wrapper {
weight : Weight, weight : Weight,
renderable : Renderable, renderable : Renderable,
classes : OptionClasses, classes : OptionClasses,
inner_classes: OptionClasses,
wrapper_type : WrapperType, wrapper_type : WrapperType,
stuff : AnyComponents, stuff : AnyComponents,
} }
impl ComponentTrait for Wrapper { impl ComponentTrait for Wrapper {
fn new() -> Self { fn new() -> Self {
Wrapper::default() Wrapper::default().with_classes(ClassesOp::Add, "pt-wrapper")
.with_classes(ClassesOp::Add, "container")
.with_inner_classes(ClassesOp::Add, "container")
} }
fn id(&self) -> Option<String> { fn id(&self) -> Option<String> {
@ -43,37 +40,39 @@ impl ComponentTrait for Wrapper {
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup { fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
match self.wrapper_type() { match self.wrapper_type() {
WrapperType::Header => PrepareMarkup::With(html! { WrapperType::Container => PrepareMarkup::With(html! {
header id=[self.id()] class=[self.classes().get()] { div id=[self.id()] class=[self.classes().get()] {
div class=[self.inner_classes().get()] { div class="inner" {
(self.components().render(cx))
}
}
}),
WrapperType::Footer => PrepareMarkup::With(html! {
footer id=[self.id()] class=[self.classes().get()] {
div class=[self.inner_classes().get()] {
(self.components().render(cx)) (self.components().render(cx))
} }
} }
}), }),
WrapperType::Main => PrepareMarkup::With(html! { WrapperType::Main => PrepareMarkup::With(html! {
main id=[self.id()] class=[self.classes().get()] { main id=[self.id()] class=[self.classes().get()] {
div class=[self.inner_classes().get()] { div class="inner" {
(self.components().render(cx)) (self.components().render(cx))
} }
} }
}), }),
WrapperType::Section => PrepareMarkup::With(html! { WrapperType::Section => PrepareMarkup::With(html! {
section id=[self.id()] class=[self.classes().get()] { section id=[self.id()] class=[self.classes().get()] {
div class=[self.inner_classes().get()] { div class="inner" {
(self.components().render(cx)) (self.components().render(cx))
} }
} }
}), }),
_ => PrepareMarkup::With(html! { WrapperType::Header => PrepareMarkup::With(html! {
div id=[self.id()] class=[self.classes().get()] { header id=[self.id()] class=[self.classes().get()] {
(self.components().render(cx)) div class="inner" {
(self.components().render(cx))
}
}
}),
WrapperType::Footer => PrepareMarkup::With(html! {
footer id=[self.id()] class=[self.classes().get()] {
div class="inner" {
(self.components().render(cx))
}
} }
}), }),
} }
@ -81,38 +80,30 @@ impl ComponentTrait for Wrapper {
} }
impl Wrapper { impl Wrapper {
pub fn header() -> Self {
let mut c = Wrapper::default()
.with_classes(ClassesOp::Add, "header")
.with_inner_classes(ClassesOp::Add, "container");
c.wrapper_type = WrapperType::Header;
c
}
pub fn footer() -> Self {
let mut c = Wrapper::default()
.with_classes(ClassesOp::Add, "footer")
.with_inner_classes(ClassesOp::Add, "container");
c.wrapper_type = WrapperType::Footer;
c
}
pub fn main() -> Self { pub fn main() -> Self {
let mut c = Wrapper::default() let mut c = Wrapper::default().with_classes(ClassesOp::Add, "pt-main");
.with_classes(ClassesOp::Add, "main")
.with_inner_classes(ClassesOp::Add, "container");
c.wrapper_type = WrapperType::Main; c.wrapper_type = WrapperType::Main;
c c
} }
pub fn section() -> Self { pub fn section() -> Self {
let mut c = Wrapper::default() let mut c = Wrapper::default().with_classes(ClassesOp::Add, "pt-section");
.with_classes(ClassesOp::Add, "section")
.with_inner_classes(ClassesOp::Add, "container");
c.wrapper_type = WrapperType::Section; c.wrapper_type = WrapperType::Section;
c c
} }
pub fn header() -> Self {
let mut c = Wrapper::default().with_classes(ClassesOp::Add, "pt-header");
c.wrapper_type = WrapperType::Header;
c
}
pub fn footer() -> Self {
let mut c = Wrapper::default().with_classes(ClassesOp::Add, "pt-footer");
c.wrapper_type = WrapperType::Footer;
c
}
// Wrapper BUILDER. // Wrapper BUILDER.
#[fn_builder] #[fn_builder]
@ -133,12 +124,6 @@ impl Wrapper {
self self
} }
#[fn_builder]
pub fn alter_inner_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
self.inner_classes.alter_value(op, classes);
self
}
#[rustfmt::skip] #[rustfmt::skip]
pub fn add_component(mut self, component: impl ComponentTrait) -> Self { pub fn add_component(mut self, component: impl ComponentTrait) -> Self {
self.stuff.alter_value(ArcAnyOp::Add(ArcAnyComponent::new(component))); self.stuff.alter_value(ArcAnyOp::Add(ArcAnyComponent::new(component)));
@ -153,10 +138,6 @@ impl Wrapper {
// Wrapper GETTERS. // Wrapper GETTERS.
pub fn inner_classes(&self) -> &OptionClasses {
&self.inner_classes
}
pub fn wrapper_type(&self) -> &WrapperType { pub fn wrapper_type(&self) -> &WrapperType {
&self.wrapper_type &self.wrapper_type
} }

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

@ -55,7 +55,7 @@ fn hello_world() -> Wrapper {
.with_direction(flex::Direction::Column(BreakPoint::MD)) .with_direction(flex::Direction::Column(BreakPoint::MD))
.add_item( .add_item(
flex::Item::new() flex::Item::new()
.with_inner_classes(ClassesOp::Add, "hello-col-text") .with_classes(ClassesOp::Add, "hello-col-text")
.with_size(flex::ItemSize::Percent40) .with_size(flex::ItemSize::Percent40)
.add_component( .add_component(
Heading::h1(L10n::l("welcome_title")).with_size(HeadingSize::Medium), Heading::h1(L10n::l("welcome_title")).with_size(HeadingSize::Medium),
@ -97,7 +97,7 @@ fn hello_world() -> Wrapper {
) )
.add_item( .add_item(
flex::Item::new() flex::Item::new()
.with_inner_classes(ClassesOp::Add, "hello-col-image") .with_classes(ClassesOp::Add, "hello-col-image")
.with_size(flex::ItemSize::Percent60) .with_size(flex::ItemSize::Percent60)
.add_component(Image::with("/base/images/header.svg")), .add_component(Image::with("/base/images/header.svg")),
), ),
@ -133,13 +133,13 @@ fn about_pagetop() -> Wrapper {
.with_direction(flex::Direction::Column(BreakPoint::SM)) .with_direction(flex::Direction::Column(BreakPoint::SM))
.add_item( .add_item(
flex::Item::new() flex::Item::new()
.with_inner_classes(ClassesOp::Add, "pagetop-col-image") .with_classes(ClassesOp::Add, "pagetop-col-image")
.with_size(flex::ItemSize::Percent40) .with_size(flex::ItemSize::Percent40)
.add_component(Image::with("/base/images/about.svg")), .add_component(Image::with("/base/images/about.svg")),
) )
.add_item( .add_item(
flex::Item::new() flex::Item::new()
.with_inner_classes(ClassesOp::Add, "pagetop-col-text") .with_classes(ClassesOp::Add, "pagetop-col-text")
.add_component(Heading::h2(L10n::l("welcome_pagetop_title"))) .add_component(Heading::h2(L10n::l("welcome_pagetop_title")))
.add_component( .add_component(
Paragraph::translated(L10n::l("welcome_pagetop_text1")) Paragraph::translated(L10n::l("welcome_pagetop_text1"))
@ -159,7 +159,7 @@ fn promo_pagetop() -> Wrapper {
.with_direction(flex::Direction::Column(BreakPoint::MD)) .with_direction(flex::Direction::Column(BreakPoint::MD))
.add_item( .add_item(
flex::Item::new() flex::Item::new()
.with_inner_classes(ClassesOp::Add, "promo-col-text") .with_classes(ClassesOp::Add, "promo-col-text")
.with_size(flex::ItemSize::Percent50) .with_size(flex::ItemSize::Percent50)
.add_component(Heading::h2(L10n::l("welcome_promo_title"))) .add_component(Heading::h2(L10n::l("welcome_promo_title")))
.add_component( .add_component(
@ -175,7 +175,7 @@ fn promo_pagetop() -> Wrapper {
) )
.add_item( .add_item(
flex::Item::new() flex::Item::new()
.with_inner_classes(ClassesOp::Add, "promo-col-image") .with_classes(ClassesOp::Add, "promo-col-image")
.with_size(flex::ItemSize::Percent50) .with_size(flex::ItemSize::Percent50)
.add_component(Image::with("/base/images/pagetop.png")), .add_component(Image::with("/base/images/pagetop.png")),
), ),
@ -190,12 +190,12 @@ fn reporting_issues() -> Wrapper {
.with_direction(flex::Direction::Column(BreakPoint::MD)) .with_direction(flex::Direction::Column(BreakPoint::MD))
.add_item( .add_item(
flex::Item::new() flex::Item::new()
.with_inner_classes(ClassesOp::Add, "issues-col-image") .with_classes(ClassesOp::Add, "issues-col-image")
.add_component(Image::with("/base/images/issues.jpg")), .add_component(Image::with("/base/images/issues.jpg")),
) )
.add_item( .add_item(
flex::Item::new() flex::Item::new()
.with_inner_classes(ClassesOp::Add, "issues-col-text") .with_classes(ClassesOp::Add, "issues-col-text")
.with_size(flex::ItemSize::Percent50) .with_size(flex::ItemSize::Percent50)
.add_component(Heading::h2(L10n::l("welcome_issues_title"))) .add_component(Heading::h2(L10n::l("welcome_issues_title")))
.add_component( .add_component(

2
src/core/component.rs
View file

@ -9,7 +9,7 @@ mod definition;
pub use definition::{component_as_mut, component_as_ref, ComponentBase, ComponentTrait}; pub use definition::{component_as_mut, component_as_ref, ComponentBase, ComponentTrait};
mod classes; mod classes;
pub use classes::{ImplementClasses, ImplementClassesOp}; pub use classes::{ComponentClasses, ComponentClassesOp};
mod arc_any; mod arc_any;
pub use arc_any::AnyComponents; pub use arc_any::AnyComponents;

8
src/core/component/classes.rs
View file

@ -1,6 +1,7 @@
use crate::core::component::ComponentBase;
use crate::html::{ClassesOp, OptionClasses}; use crate::html::{ClassesOp, OptionClasses};
pub trait ImplementClassesOp { pub trait ComponentClassesOp {
fn with_classes(self, op: ClassesOp, classes: impl Into<String>) -> Self; fn with_classes(self, op: ClassesOp, classes: impl Into<String>) -> Self;
fn add_classes(&mut self, classes: impl Into<String>) -> &mut Self; fn add_classes(&mut self, classes: impl Into<String>) -> &mut Self;
@ -16,13 +17,14 @@ pub trait ImplementClassesOp {
fn set_classes(&mut self, classes: impl Into<String>) -> &mut Self; fn set_classes(&mut self, classes: impl Into<String>) -> &mut Self;
} }
pub trait ImplementClasses: ImplementClassesOp { pub trait ComponentClasses: ComponentBase + ComponentClassesOp {
fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self; fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self;
fn classes(&self) -> &OptionClasses; fn classes(&self) -> &OptionClasses;
} }
impl<C: ImplementClasses> ImplementClassesOp for C { impl<C: ComponentBase + ComponentClasses> ComponentClassesOp for C {
#[doc(hidden)]
fn with_classes(mut self, op: ClassesOp, classes: impl Into<String>) -> Self { fn with_classes(mut self, op: ClassesOp, classes: impl Into<String>) -> Self {
self.alter_classes(op, classes); self.alter_classes(op, classes);
self self

26
static/base/css/welcome.css
View file

@ -16,11 +16,11 @@
padding-top: 0; padding-top: 0;
} }
#welcome [class$="-col-text"] { #welcome [class$="-col-text"] > .inner {
margin: 5% 5% 0; margin: 5% 5% 0;
text-align: center; text-align: center;
} }
#welcome [class$="-col-image"] { #welcome [class$="-col-image"] > .inner {
margin: 1rem 5%; margin: 1rem 5%;
} }
@ -28,7 +28,7 @@
text-align: center; text-align: center;
margin: 0 5%; margin: 0 5%;
} }
#welcome .welcome > div.container { #welcome .welcome > .inner {
padding: 2rem 1rem; padding: 2rem 1rem;
border-radius: 28px; border-radius: 28px;
background: url("/base/images/welcome.jpg") center center no-repeat; background: url("/base/images/welcome.jpg") center center no-repeat;
@ -36,18 +36,18 @@
background-size: cover; background-size: cover;
color: #fff; color: #fff;
} }
#welcome .welcome > div.container > h2 { #welcome .welcome > .inner > h2 {
color: #fff; color: #fff;
} }
#welcome .welcome > div.container > h3 { #welcome .welcome > .inner > h3 {
color: #ccc; color: #ccc;
} }
#welcome .promo-col-image { #welcome .promo-col-image > .inner {
padding: 0 5%; padding: 0 5%;
} }
#welcome .issues-col-image img { #welcome .issues-col-image > .inner img {
border-radius: 40px; border-radius: 40px;
} }
@ -55,20 +55,20 @@
/* MD - Applies >= 768px */ /* MD - Applies >= 768px */
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
#welcome .promo-col-image { #welcome .promo-col-image > .inner {
padding: 0; padding: 0;
} }
#welcome .issues { #welcome .issues {
padding-top: 1.6rem; padding-top: 1.6rem;
} }
#welcome .issues-col-text { #welcome .issues-col-text > .inner {
text-align: left; text-align: left;
} }
} }
/* LG - Applies >= 992px */ /* LG - Applies >= 992px */
@media screen and (min-width: 62em) { @media screen and (min-width: 62em) {
#welcome .hello-col-text { #welcome .hello-col-text > .inner {
margin-top: 2rem; margin-top: 2rem;
text-align: left; text-align: left;
} }
@ -77,19 +77,19 @@
padding: 0 15% 2rem; padding: 0 15% 2rem;
} }
#welcome .promo-col-text { #welcome .promo-col-text > .inner {
margin-right: 0; margin-right: 0;
text-align: right; text-align: right;
} }
} }
/* XL - Applies >= 1280px */ /* XL - Applies >= 1280px */
@media screen and (min-width: 80em) { @media screen and (min-width: 80em) {
#welcome .hello-col-text { #welcome .hello-col-text > .inner {
margin-top: 4rem; margin-top: 4rem;
margin-left: 20%; margin-left: 20%;
} }
#welcome .pagetop-col-text { #welcome .pagetop-col-text > .inner {
text-align: left; text-align: left;
} }
} }