🔥 Remove inner classes from components code
This commit is contained in:
parent
ee3956cb2c
commit
e7744cbb93
7 changed files with 73 additions and 93 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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(
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue