Añade componentes para cabeceras y párrafos
This commit is contained in:
parent
b3854fe393
commit
dda666e889
5 changed files with 414 additions and 12 deletions
186
pagetop/src/base/component/heading.rs
Normal file
186
pagetop/src/base/component/heading.rs
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
use crate::prelude::*;
|
||||
|
||||
pub const HEADING_COMPONENT: &str = "pagetop::component::heading";
|
||||
|
||||
pub enum HeadingType {
|
||||
H1(String),
|
||||
H2(String),
|
||||
H3(String),
|
||||
H4(String),
|
||||
H5(String),
|
||||
H6(String),
|
||||
}
|
||||
|
||||
pub enum HeadingDisplay {
|
||||
XxLarge,
|
||||
Large,
|
||||
Normal,
|
||||
Medium,
|
||||
Small,
|
||||
XxSmall,
|
||||
}
|
||||
|
||||
pub struct Heading {
|
||||
renderable: fn() -> bool,
|
||||
weight : isize,
|
||||
heading : HeadingType,
|
||||
display : HeadingDisplay,
|
||||
id : OptIden,
|
||||
classes : Classes,
|
||||
template : String,
|
||||
}
|
||||
|
||||
impl ComponentTrait for Heading {
|
||||
fn new() -> Self {
|
||||
Heading {
|
||||
renderable: render_always,
|
||||
weight : 0,
|
||||
heading : HeadingType::H1("".to_owned()),
|
||||
display : HeadingDisplay::Normal,
|
||||
id : OptIden::new(),
|
||||
classes : Classes::new(),
|
||||
template : "default".to_owned(),
|
||||
}
|
||||
}
|
||||
|
||||
fn handler(&self) -> &'static str {
|
||||
HEADING_COMPONENT
|
||||
}
|
||||
|
||||
fn is_renderable(&self) -> bool {
|
||||
(self.renderable)()
|
||||
}
|
||||
|
||||
fn weight(&self) -> isize {
|
||||
self.weight
|
||||
}
|
||||
|
||||
fn default_render(&self, _: &mut Assets) -> Markup {
|
||||
html! { @match &self.heading() {
|
||||
HeadingType::H1(text) => h1 id=[self.id()] class=[self.classes()] { (text) },
|
||||
HeadingType::H2(text) => h2 id=[self.id()] class=[self.classes()] { (text) },
|
||||
HeadingType::H3(text) => h3 id=[self.id()] class=[self.classes()] { (text) },
|
||||
HeadingType::H4(text) => h4 id=[self.id()] class=[self.classes()] { (text) },
|
||||
HeadingType::H5(text) => h5 id=[self.id()] class=[self.classes()] { (text) },
|
||||
HeadingType::H6(text) => h6 id=[self.id()] class=[self.classes()] { (text) },
|
||||
}}
|
||||
}
|
||||
|
||||
fn as_ref_any(&self) -> &dyn AnyComponent {
|
||||
self
|
||||
}
|
||||
|
||||
fn as_mut_any(&mut self) -> &mut dyn AnyComponent {
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl Heading {
|
||||
pub fn with(heading: HeadingType) -> Self {
|
||||
Heading::new().with_heading(heading)
|
||||
}
|
||||
|
||||
// Heading BUILDER.
|
||||
|
||||
pub fn with_renderable(mut self, renderable: fn() -> bool) -> Self {
|
||||
self.alter_renderable(renderable);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_weight(mut self, weight: isize) -> Self {
|
||||
self.alter_weight(weight);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_heading(mut self, heading: HeadingType) -> Self {
|
||||
self.alter_heading(heading);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_display(mut self, display: HeadingDisplay) -> Self {
|
||||
self.alter_display(display);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_id(mut self, id: &str) -> Self {
|
||||
self.alter_id(id);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_classes(mut self, classes: &str, op: ClassesOp) -> Self {
|
||||
self.alter_classes(classes, op);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn using_template(mut self, template: &str) -> Self {
|
||||
self.alter_template(template);
|
||||
self
|
||||
}
|
||||
|
||||
// Heading ALTER.
|
||||
|
||||
pub fn alter_renderable(&mut self, renderable: fn() -> bool) -> &mut Self {
|
||||
self.renderable = renderable;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn alter_weight(&mut self, weight: isize) -> &mut Self {
|
||||
self.weight = weight;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn alter_heading(&mut self, heading: HeadingType) -> &mut Self {
|
||||
self.heading = heading;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn alter_display(&mut self, display: HeadingDisplay) -> &mut Self {
|
||||
self.display = display;
|
||||
self.classes.alter(match &self.display() {
|
||||
HeadingDisplay::XxLarge => "display-2",
|
||||
HeadingDisplay::Large => "display-3",
|
||||
HeadingDisplay::Normal => "",
|
||||
HeadingDisplay::Medium => "display-4",
|
||||
HeadingDisplay::Small => "display-5",
|
||||
HeadingDisplay::XxSmall => "display-6",
|
||||
}, ClassesOp::SetDefault);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn alter_id(&mut self, id: &str) -> &mut Self {
|
||||
self.id.with_value(id);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn alter_classes(&mut self, classes: &str, op: ClassesOp) -> &mut Self {
|
||||
self.classes.alter(classes, op);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn alter_template(&mut self, template: &str) -> &mut Self {
|
||||
self.template = template.to_owned();
|
||||
self
|
||||
}
|
||||
|
||||
// Paragraph GETTERS.
|
||||
|
||||
pub fn heading(&self) -> &HeadingType {
|
||||
&self.heading
|
||||
}
|
||||
|
||||
pub fn display(&self) -> &HeadingDisplay {
|
||||
&self.display
|
||||
}
|
||||
|
||||
pub fn id(&self) -> &Option<String> {
|
||||
self.id.option()
|
||||
}
|
||||
|
||||
pub fn classes(&self) -> &Option<String> {
|
||||
self.classes.option()
|
||||
}
|
||||
|
||||
pub fn template(&self) -> &str {
|
||||
self.template.as_str()
|
||||
}
|
||||
}
|
||||
|
|
@ -9,6 +9,14 @@ mod chunck;
|
|||
pub use chunck::{
|
||||
CHUNCK_COMPONENT, Chunck
|
||||
};
|
||||
mod heading;
|
||||
pub use heading::{
|
||||
HEADING_COMPONENT, Heading, HeadingDisplay, HeadingType
|
||||
};
|
||||
mod paragraph;
|
||||
pub use paragraph::{
|
||||
PARAGRAPH_COMPONENT, Paragraph, ParagraphDisplay
|
||||
};
|
||||
mod block;
|
||||
pub use block::{
|
||||
BLOCK_COMPONENT, Block
|
||||
|
|
|
|||
177
pagetop/src/base/component/paragraph.rs
Normal file
177
pagetop/src/base/component/paragraph.rs
Normal file
|
|
@ -0,0 +1,177 @@
|
|||
use crate::prelude::*;
|
||||
|
||||
pub const PARAGRAPH_COMPONENT: &str = "pagetop::component::paragraph";
|
||||
|
||||
pub enum ParagraphDisplay {
|
||||
XxLarge,
|
||||
Large,
|
||||
MediumPlus,
|
||||
Normal,
|
||||
Medium,
|
||||
Small,
|
||||
XxSmall,
|
||||
}
|
||||
|
||||
pub struct Paragraph {
|
||||
renderable: fn() -> bool,
|
||||
weight : isize,
|
||||
html : Markup,
|
||||
display : ParagraphDisplay,
|
||||
id : OptIden,
|
||||
classes : Classes,
|
||||
template : String,
|
||||
}
|
||||
|
||||
impl ComponentTrait for Paragraph {
|
||||
fn new() -> Self {
|
||||
Paragraph {
|
||||
renderable: render_always,
|
||||
weight : 0,
|
||||
html : html! {},
|
||||
display : ParagraphDisplay::Normal,
|
||||
id : OptIden::new(),
|
||||
classes : Classes::new(),
|
||||
template : "default".to_owned(),
|
||||
}
|
||||
}
|
||||
|
||||
fn handler(&self) -> &'static str {
|
||||
PARAGRAPH_COMPONENT
|
||||
}
|
||||
|
||||
fn is_renderable(&self) -> bool {
|
||||
(self.renderable)()
|
||||
}
|
||||
|
||||
fn weight(&self) -> isize {
|
||||
self.weight
|
||||
}
|
||||
|
||||
fn default_render(&self, _: &mut Assets) -> Markup {
|
||||
html! {
|
||||
p id=[self.id()] class=[self.classes()] { (*self.html()) }
|
||||
}
|
||||
}
|
||||
|
||||
fn as_ref_any(&self) -> &dyn AnyComponent {
|
||||
self
|
||||
}
|
||||
|
||||
fn as_mut_any(&mut self) -> &mut dyn AnyComponent {
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl Paragraph {
|
||||
pub fn with(html: Markup) -> Self {
|
||||
Paragraph::new().with_html(html)
|
||||
}
|
||||
|
||||
// Paragraph BUILDER.
|
||||
|
||||
pub fn with_renderable(mut self, renderable: fn() -> bool) -> Self {
|
||||
self.alter_renderable(renderable);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_weight(mut self, weight: isize) -> Self {
|
||||
self.alter_weight(weight);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_html(mut self, html: Markup) -> Self {
|
||||
self.alter_html(html);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_display(mut self, display: ParagraphDisplay) -> Self {
|
||||
self.alter_display(display);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_id(mut self, id: &str) -> Self {
|
||||
self.alter_id(id);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn with_classes(mut self, classes: &str, op: ClassesOp) -> Self {
|
||||
self.alter_classes(classes, op);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn using_template(mut self, template: &str) -> Self {
|
||||
self.alter_template(template);
|
||||
self
|
||||
}
|
||||
|
||||
// Paragraph ALTER.
|
||||
|
||||
pub fn alter_renderable(&mut self, renderable: fn() -> bool) -> &mut Self {
|
||||
self.renderable = renderable;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn alter_weight(&mut self, weight: isize) -> &mut Self {
|
||||
self.weight = weight;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn alter_html(&mut self, html: Markup) -> &mut Self {
|
||||
self.html = html;
|
||||
self
|
||||
}
|
||||
|
||||
pub fn alter_display(&mut self, display: ParagraphDisplay) -> &mut Self {
|
||||
self.display = display;
|
||||
self.classes.alter(
|
||||
match &self.display() {
|
||||
ParagraphDisplay::XxLarge => "fs-1",
|
||||
ParagraphDisplay::Large => "fs-2",
|
||||
ParagraphDisplay::MediumPlus => "fs-3",
|
||||
ParagraphDisplay::Normal => "",
|
||||
ParagraphDisplay::Medium => "fs-4",
|
||||
ParagraphDisplay::Small => "fs-5",
|
||||
ParagraphDisplay::XxSmall => "fs-6",
|
||||
},
|
||||
ClassesOp::SetDefault
|
||||
);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn alter_id(&mut self, id: &str) -> &mut Self {
|
||||
self.id.with_value(id);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn alter_classes(&mut self, classes: &str, op: ClassesOp) -> &mut Self {
|
||||
self.classes.alter(classes, op);
|
||||
self
|
||||
}
|
||||
|
||||
pub fn alter_template(&mut self, template: &str) -> &mut Self {
|
||||
self.template = template.to_owned();
|
||||
self
|
||||
}
|
||||
|
||||
// Paragraph GETTERS.
|
||||
|
||||
pub fn html(&self) -> &Markup {
|
||||
&self.html
|
||||
}
|
||||
|
||||
pub fn display(&self) -> &ParagraphDisplay {
|
||||
&self.display
|
||||
}
|
||||
|
||||
pub fn id(&self) -> &Option<String> {
|
||||
self.id.option()
|
||||
}
|
||||
|
||||
pub fn classes(&self) -> &Option<String> {
|
||||
self.classes.option()
|
||||
}
|
||||
|
||||
pub fn template(&self) -> &str {
|
||||
self.template.as_str()
|
||||
}
|
||||
}
|
||||
|
|
@ -41,22 +41,24 @@ fn hello_world() -> Container {
|
|||
.add(grid::Row::new()
|
||||
.add_column(grid::Column::new()
|
||||
.add(Chunck::with(html! {
|
||||
div class="section-title" {
|
||||
div class="area-title" {
|
||||
(t("welcome_to", &args![
|
||||
"app" => SETTINGS.app.name.as_str()
|
||||
]))
|
||||
}
|
||||
h1 class="h1-large" {
|
||||
(l("page_title"))
|
||||
}
|
||||
p class="p-large" {
|
||||
(e("welcome_intro", &args![
|
||||
"app" => format!(
|
||||
"<strong>{}</strong>",
|
||||
&SETTINGS.app.name
|
||||
)
|
||||
]))
|
||||
}
|
||||
}))
|
||||
.add(Heading::with(HeadingType::H1(
|
||||
l("page_title"))
|
||||
).with_display(HeadingDisplay::Large))
|
||||
.add(Paragraph::with(html! {
|
||||
(e("welcome_intro", &args![
|
||||
"app" => format!(
|
||||
"<strong>{}</strong>",
|
||||
&SETTINGS.app.name
|
||||
)
|
||||
]))
|
||||
}).with_display(ParagraphDisplay::Large))
|
||||
.add(Chunck::with(html! {
|
||||
p {
|
||||
(e("welcome_pagetop", &args![
|
||||
"pagetop" => "<a href=\"https://pagetop-rs\">PageTop</a>"
|
||||
|
|
|
|||
|
|
@ -36,6 +36,35 @@ impl ThemeTrait for Bulmix {
|
|||
_assets: &mut Assets
|
||||
) {
|
||||
match component.handler() {
|
||||
HEADING_COMPONENT => {
|
||||
let h = component_mut::<Heading>(component);
|
||||
h.alter_classes(
|
||||
concat_string!("title ", match h.display() {
|
||||
HeadingDisplay::XxLarge => "is-1",
|
||||
HeadingDisplay::Large => "is-2",
|
||||
HeadingDisplay::Normal => "",
|
||||
HeadingDisplay::Medium => "is-3",
|
||||
HeadingDisplay::Small => "is-4",
|
||||
HeadingDisplay::XxSmall => "is-5",
|
||||
}).as_str(),
|
||||
ClassesOp::SetDefault
|
||||
);
|
||||
},
|
||||
PARAGRAPH_COMPONENT => {
|
||||
let p = component_mut::<Paragraph>(component);
|
||||
p.alter_classes(
|
||||
match p.display() {
|
||||
ParagraphDisplay::XxLarge => "is-size-2",
|
||||
ParagraphDisplay::Large => "is-size-3",
|
||||
ParagraphDisplay::MediumPlus => "is-size-4",
|
||||
ParagraphDisplay::Normal => "",
|
||||
ParagraphDisplay::Medium => "is-size-5",
|
||||
ParagraphDisplay::Small => "is-size-6",
|
||||
ParagraphDisplay::XxSmall => "is-size-7",
|
||||
},
|
||||
ClassesOp::SetDefault
|
||||
);
|
||||
},
|
||||
grid::ROW_COMPONENT => {
|
||||
let row = component_mut::<grid::Row>(component);
|
||||
row.alter_classes("columns", ClassesOp::SetDefault);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue