🔥 Remove inner classes from components code

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

View file

@ -58,9 +58,9 @@ pub fn fn_builder(_: TokenStream, item: TokenStream) -> TokenStream {
#[rustfmt::skip]
let fn_alter_doc = concat_string!(
"<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,
"</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>"
);
@ -130,8 +130,18 @@ pub fn derive_component_classes(input: TokenStream) -> TokenStream {
let input = parse_macro_input!(input as DeriveInput);
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! {
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 {
self.classes.alter_value(op, classes);
self

View file

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

View file

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

View file

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

View file

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

View file

@ -1,6 +1,7 @@
use crate::core::component::ComponentBase;
use crate::html::{ClassesOp, OptionClasses};
pub trait ImplementClassesOp {
pub trait ComponentClassesOp {
fn with_classes(self, op: ClassesOp, classes: impl Into<String>) -> 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;
}
pub trait ImplementClasses: ImplementClassesOp {
pub trait ComponentClasses: ComponentBase + ComponentClassesOp {
fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self;
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 {
self.alter_classes(op, classes);
self

View file

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