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

Mejora la asignación de márgenes/espacios en comp.

Browse source
This commit is contained in:
Manuel Cillero 2022-07-07 15:50:36 +02:00
parent 1d5d48811d
commit 743e32b0f6
10 changed files with 218 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

18
pagetop/src/base/component/anchor.rs
View file

@ -29,7 +29,7 @@ pub struct Anchor {
target : AnchorTarget,
id : IdentifierValue,
classes : Classes,
layout : Layout,
spaces : Spaces,
template : String,
}
@ -46,7 +46,7 @@ impl ComponentTrait for Anchor {
target : AnchorTarget::Default,
id : IdentifierValue::new(),
classes : Classes::new(),
layout : Layout::new(),
spaces : Spaces::new(),
template : "default".to_owned(),
}
}
@ -75,7 +75,7 @@ impl ComponentTrait for Anchor {
a
id=[self.id().get()]
class=[self.classes().get()]
style=[self.layout().get()]
style=[self.spaces().get()]
href=[self.href().get()]
target=[target]
{
@ -160,8 +160,8 @@ impl Anchor {
self
}
pub fn with_layout(mut self, property: LayoutProperty, value: LayoutUnit) -> Self {
self.alter_layout(property, value);
pub fn with_spaces(mut self, spaces: &[SpaceSet]) -> Self {
self.alter_spaces(spaces);
self
}
@ -228,8 +228,8 @@ impl Anchor {
self
}
pub fn alter_layout(&mut self, property: LayoutProperty, value: LayoutUnit) -> &mut Self {
self.layout.add(property, value);
pub fn alter_spaces(&mut self, spaces: &[SpaceSet]) -> &mut Self {
self.spaces.add(spaces);
self
}
@ -272,8 +272,8 @@ impl Anchor {
&self.classes
}
pub fn layout(&self) -> &Layout {
&self.layout
pub fn spaces(&self) -> &Spaces {
&self.spaces
}
pub fn template(&self) -> &str {

2
pagetop/src/base/component/grid/column.rs
View file

@ -18,7 +18,7 @@ impl ComponentTrait for Column {
weight : 0,
components: ComponentsBundle::new(),
id : IdentifierValue::new(),
classes : Classes::new_with_default("col"),
classes : Classes::new_with_default("col-md"),
template : "default".to_owned(),
}
}

18
pagetop/src/base/component/grid/row.rs
View file

@ -8,6 +8,7 @@ pub struct Row {
columns : ComponentsBundle,
id : IdentifierValue,
classes : Classes,
spaces : Spaces,
template : String,
}
@ -19,6 +20,7 @@ impl ComponentTrait for Row {
columns : ComponentsBundle::new(),
id : IdentifierValue::new(),
classes : Classes::new_with_default("row"),
spaces : Spaces::new(),
template : "default".to_owned(),
}
}
@ -37,7 +39,7 @@ impl ComponentTrait for Row {
fn default_render(&self, context: &mut InContext) -> Markup {
html! {
div id=[self.id().get()] class=[self.classes().get()] {
div id=[self.id().get()] class=[self.classes().get()] style=[self.spaces().get()] {
(self.columns().render(context))
}
}
@ -87,6 +89,11 @@ impl Row {
self
}
pub fn with_spaces(mut self, spaces: &[SpaceSet]) -> Self {
self.alter_spaces(spaces);
self
}
pub fn using_template(mut self, template: &str) -> Self {
self.alter_template(template);
self
@ -114,6 +121,11 @@ impl Row {
self
}
pub fn alter_spaces(&mut self, spaces: &[SpaceSet]) -> &mut Self {
self.spaces.add(spaces);
self
}
pub fn alter_template(&mut self, template: &str) -> &mut Self {
self.template = template.to_owned();
self
@ -129,6 +141,10 @@ impl Row {
&self.classes
}
pub fn spaces(&self) -> &Spaces {
&self.spaces
}
pub fn template(&self) -> &str {
self.template.as_str()
}

18
pagetop/src/base/component/icon.rs
View file

@ -6,7 +6,7 @@ pub struct Icon {
renderable: fn() -> bool,
weight : isize,
classes : Classes,
layout : Layout,
spaces : Spaces,
}
impl ComponentTrait for Icon {
@ -15,7 +15,7 @@ impl ComponentTrait for Icon {
renderable: render_always,
weight : 0,
classes : Classes::new_with_default("bi-question-circle-fill"),
layout : Layout::new(),
spaces : Spaces::new(),
}
}
@ -37,7 +37,7 @@ impl ComponentTrait for Icon {
"/theme/icons/bootstrap-icons.css?ver=1.8.2"
));
html! { i class=[self.classes().get()] style=[self.layout().get()] {}; }
html! { i class=[self.classes().get()] style=[self.spaces().get()] {}; }
}
fn as_ref_any(&self) -> &dyn AnyComponent {
@ -76,8 +76,8 @@ impl Icon {
self
}
pub fn with_layout(mut self, property: LayoutProperty, value: LayoutUnit) -> Self {
self.alter_layout(property, value);
pub fn with_spaces(mut self, spaces: &[SpaceSet]) -> Self {
self.alter_spaces(spaces);
self
}
@ -103,8 +103,8 @@ impl Icon {
self
}
pub fn alter_layout(&mut self, property: LayoutProperty, value: LayoutUnit) -> &mut Self {
self.layout.add(property, value);
pub fn alter_spaces(&mut self, spaces: &[SpaceSet]) -> &mut Self {
self.spaces.add(spaces);
self
}
@ -114,7 +114,7 @@ impl Icon {
&self.classes
}
pub fn layout(&self) -> &Layout {
&self.layout
pub fn spaces(&self) -> &Spaces {
&self.spaces
}
}

3
pagetop/src/base/module/demopage.rs
View file

@ -73,8 +73,9 @@ fn hello_world() -> Container {
)
)
.add_column(grid::Column::new()
.add(Image::image("/bootsier/images/demo-header.svg"))
.add(Image::image("/theme/images/demo-header.svg"))
)
.with_spaces(&[SpaceSet::PaddingBoth(SpaceValue::RelEm(2.0), SpaceValue::RelPct(5.0))])
)
}

2
pagetop/src/base/theme/bulmix.rs
View file

@ -90,7 +90,7 @@ impl ThemeTrait for Bulmix {
));
Some(html! {
span class="icon" {
i class=[icon.classes().get()] style=[icon.layout().get()] {};
i class=[icon.classes().get()] style=[icon.spaces().get()] {};
}
})
},

4
pagetop/src/html.rs
View file

@ -17,5 +17,5 @@ pub use identifier::IdentifierValue;
mod classes;
pub use classes::{Classes, ClassesOp};
mod layout;
pub use layout::{Layout, LayoutProperty, LayoutUnit};
mod spacing;
pub use spacing::{Spaces, SpaceSet, SpaceValue};

124
pagetop/src/html/layout.rs
View file

@ -1,124 +0,0 @@
use crate::concat_string;
#[derive(Clone, Copy, PartialEq)]
pub enum LayoutProperty {
MarginBottom,
MarginLeft,
MarginRight,
MarginTop,
PaddingBottom,
PaddingLeft,
PaddingRight,
PaddingTop,
}
impl std::convert::AsRef<str> for LayoutProperty {
fn as_ref(&self) -> &str {
match *self {
LayoutProperty::MarginBottom => "margin-bottom",
LayoutProperty::MarginLeft => "margin-left",
LayoutProperty::MarginRight => "margin-right",
LayoutProperty::MarginTop => "margin-top",
LayoutProperty::PaddingBottom => "padding-bottom",
LayoutProperty::PaddingLeft => "padding-left",
LayoutProperty::PaddingRight => "padding-right",
LayoutProperty::PaddingTop => "padding-top",
}
}
}
// About pixels: Pixels (px) are relative to the viewing device. For low-dpi
// devices, 1px is one device pixel (dot) of the display. For printers and high
// resolution screens 1px implies multiple device pixels.
// About em: 2em means 2 times the size of the current font. The em and rem
// units are practical in creating perfectly scalable layout!
// About viewport: If the browser window size is 50cm wide, 1vw = 0.5cm.
#[derive(PartialEq)]
pub enum LayoutUnit {
Auto,
Cm(isize), // Centimeters.
In(isize), // Inches (1in = 96px = 2.54cm).
Mm(isize), // Millimeters.
Pc(isize), // Picas (1pc = 12pt).
Pt(isize), // Points (1pt = 1/72 of 1in).
Px(isize), // Pixels (1px = 1/96th of 1in).
RelEm(f32), // Relative to the font-size of the element.
RelPct(f32), // Percentage relative to the parent element.
RelRem(f32), // Relative to font-size of the root element.
RelVh(f32), // Relative to 1% of the height of the viewport.
RelVw(f32), // Relative to 1% of the width of the viewport.
UnSet,
}
impl LayoutUnit {
fn to_inline(&self, property: LayoutProperty) -> String {
match self {
LayoutUnit::Auto => concat_string!(property, ":auto;"),
LayoutUnit::Cm(value) => concat_string!(property, ":", value.to_string(), "cm;"),
LayoutUnit::In(value) => concat_string!(property, ":", value.to_string(), "in;"),
LayoutUnit::Mm(value) => concat_string!(property, ":", value.to_string(), "mm;"),
LayoutUnit::Pc(value) => concat_string!(property, ":", value.to_string(), "pc;"),
LayoutUnit::Pt(value) => concat_string!(property, ":", value.to_string(), "pt;"),
LayoutUnit::Px(value) => concat_string!(property, ":", value.to_string(), "px;"),
LayoutUnit::RelEm(value) => concat_string!(property, ":", value.to_string(), "em;"),
LayoutUnit::RelPct(value) => concat_string!(property, ":", value.to_string(), "%;"),
LayoutUnit::RelRem(value) => concat_string!(property, ":", value.to_string(), "rem;"),
LayoutUnit::RelVh(value) => concat_string!(property, ":", value.to_string(), "vh;"),
LayoutUnit::RelVw(value) => concat_string!(property, ":", value.to_string(), "vw;"),
_ => "".to_owned(),
}
}
}
struct Style {
property: LayoutProperty,
inline : String,
}
pub struct Layout(Vec<Style>);
impl Layout {
pub fn new() -> Self {
Layout(Vec::new())
}
pub fn add(&mut self, property: LayoutProperty, value: LayoutUnit) -> &Self {
match self.0.iter().position(|s| s.property.eq(&property)) {
Some(pos) => {
self.0.remove(pos);
if value != LayoutUnit::UnSet {
self.0.insert(pos, Style {
property,
inline: value.to_inline(property),
});
}
},
_ => if value != LayoutUnit::UnSet {
self.0.push(Style {
property,
inline: value.to_inline(property),
});
}
}
self
}
pub fn get(&self) -> Option<String> {
if self.0.len() == 0 {
None
} else {
let mut inline = "".to_owned();
self.0.iter().for_each(|s| inline.push_str(s.inline.as_str()));
Some(inline)
}
}
}

177
pagetop/src/html/spacing.rs Normal file
View file

@ -0,0 +1,177 @@
use crate::concat_string;
const MARGIN_BOTTOM: &str = "margin-bottom";
const MARGIN_LEFT: &str = "margin-left";
const MARGIN_RIGHT: &str = "margin-right";
const MARGIN_TOP: &str = "margin-top";
const PADDING_BOTTOM: &str = "padding-bottom";
const PADDING_LEFT: &str = "padding-left";
const PADDING_RIGHT: &str = "padding-right";
const PADDING_TOP: &str = "padding-top";
struct SpaceStyle {
property: String,
inline : String,
}
pub struct Spaces(Vec<SpaceStyle>);
// About pixels: Pixels (px) are relative to the viewing device. For low-dpi
// devices, 1px is one device pixel (dot) of the display. For printers and high
// resolution screens 1px implies multiple device pixels.
// About em: 2em means 2 times the size of the current font. The em and rem
// units are practical in creating perfectly scalable layout!
// About viewport: If the browser window size is 50cm wide, 1vw = 0.5cm.
pub enum SpaceValue {
Auto,
Cm(isize), // Centimeters.
In(isize), // Inches (1in = 96px = 2.54cm).
Mm(isize), // Millimeters.
Pc(isize), // Picas (1pc = 12pt).
Pt(isize), // Points (1pt = 1/72 of 1in).
Px(isize), // Pixels (1px = 1/96th of 1in).
RelEm(f32), // Relative to the font-size of the element.
RelPct(f32), // Percentage relative to the parent element.
RelRem(f32), // Relative to font-size of the root element.
RelVh(f32), // Relative to 1% of the height of the viewport.
RelVw(f32), // Relative to 1% of the value of the viewport.
UnSet,
}
impl SpaceValue {
fn add(&self, property: &str, into_spaces: &mut Spaces) {
let style = SpaceStyle {
property: property.to_owned(),
inline : match self {
SpaceValue::Auto => concat_string!(property, ":auto;"),
// Absolute value.
SpaceValue::Cm(aw) => concat_string!(property, ":", aw.to_string(), "cm;"),
SpaceValue::In(aw) => concat_string!(property, ":", aw.to_string(), "in;"),
SpaceValue::Mm(aw) => concat_string!(property, ":", aw.to_string(), "mm;"),
SpaceValue::Pc(aw) => concat_string!(property, ":", aw.to_string(), "pc;"),
SpaceValue::Pt(aw) => concat_string!(property, ":", aw.to_string(), "pt;"),
SpaceValue::Px(aw) => concat_string!(property, ":", aw.to_string(), "px;"),
// Relative value.
SpaceValue::RelEm(rw) => concat_string!(property, ":", rw.to_string(), "em;"),
SpaceValue::RelPct(rw) => concat_string!(property, ":", rw.to_string(), "%;"),
SpaceValue::RelRem(rw) => concat_string!(property, ":", rw.to_string(), "rem;"),
SpaceValue::RelVh(rw) => concat_string!(property, ":", rw.to_string(), "vh;"),
SpaceValue::RelVw(rw) => concat_string!(property, ":", rw.to_string(), "vw;"),
_ => "".to_owned(),
}
};
match into_spaces.0.iter().position(|s| s.property.eq(&style.property)) {
Some(pos) => {
into_spaces.0.remove(pos);
if !style.inline.is_empty() {
into_spaces.0.insert(pos, style);
}
},
_ => if !style.inline.is_empty() {
into_spaces.0.push(style)
}
}
}
}
pub enum SpaceSet {
Margin(SpaceValue, SpaceValue, SpaceValue, SpaceValue),
MarginAll(SpaceValue),
MarginBoth(SpaceValue, SpaceValue),
MarginBottom(SpaceValue),
MarginLeft(SpaceValue),
MarginRight(SpaceValue),
MarginTop(SpaceValue),
Padding(SpaceValue, SpaceValue, SpaceValue, SpaceValue),
PaddingAll(SpaceValue),
PaddingBoth(SpaceValue, SpaceValue),
PaddingBottom(SpaceValue),
PaddingLeft(SpaceValue),
PaddingRight(SpaceValue),
PaddingTop(SpaceValue),
}
impl SpaceSet {
fn add(&self, into_spaces: &mut Spaces) {
match self {
SpaceSet::Margin(top, right, bottom, left) => {
top.add(MARGIN_TOP, into_spaces);
right.add(MARGIN_RIGHT, into_spaces);
bottom.add(MARGIN_BOTTOM, into_spaces);
left.add(MARGIN_LEFT, into_spaces);
},
SpaceSet::MarginAll(value) => {
value.add(MARGIN_TOP, into_spaces);
value.add(MARGIN_RIGHT, into_spaces);
value.add(MARGIN_BOTTOM, into_spaces);
value.add(MARGIN_LEFT, into_spaces);
},
SpaceSet::MarginBoth(top_bottom, right_left) => {
top_bottom.add(MARGIN_TOP, into_spaces);
right_left.add(MARGIN_RIGHT, into_spaces);
top_bottom.add(MARGIN_BOTTOM, into_spaces);
right_left.add(MARGIN_LEFT, into_spaces);
},
SpaceSet::MarginBottom(value) => value.add(MARGIN_BOTTOM, into_spaces),
SpaceSet::MarginLeft(value) => value.add(MARGIN_LEFT, into_spaces),
SpaceSet::MarginRight(value) => value.add(MARGIN_RIGHT, into_spaces),
SpaceSet::MarginTop(value) => value.add(MARGIN_TOP, into_spaces),
SpaceSet::Padding(top, right, bottom, left) => {
top.add(PADDING_TOP, into_spaces);
right.add(PADDING_RIGHT, into_spaces);
bottom.add(PADDING_BOTTOM, into_spaces);
left.add(PADDING_LEFT, into_spaces);
},
SpaceSet::PaddingAll(value) => {
value.add(PADDING_TOP, into_spaces);
value.add(PADDING_RIGHT, into_spaces);
value.add(PADDING_BOTTOM, into_spaces);
value.add(PADDING_LEFT, into_spaces);
},
SpaceSet::PaddingBoth(top_bottom, right_left) => {
top_bottom.add(PADDING_TOP, into_spaces);
right_left.add(PADDING_RIGHT, into_spaces);
top_bottom.add(PADDING_BOTTOM, into_spaces);
right_left.add(PADDING_LEFT, into_spaces);
},
SpaceSet::PaddingBottom(value) => value.add(PADDING_BOTTOM, into_spaces),
SpaceSet::PaddingLeft(value) => value.add(PADDING_LEFT, into_spaces),
SpaceSet::PaddingRight(value) => value.add(PADDING_RIGHT, into_spaces),
SpaceSet::PaddingTop(value) => value.add(PADDING_TOP, into_spaces),
}
}
}
impl Spaces {
pub fn new() -> Self {
Spaces(Vec::new())
}
pub fn add(&mut self, spaces: &[SpaceSet]) -> &Self {
for i in 0..spaces.len() {
spaces[i].add(self);
}
self
}
pub fn get(&self) -> Option<String> {
if self.0.len() == 0 {
None
} else {
let mut inline = "".to_owned();
self.0.iter().for_each(|s| inline.push_str(s.inline.as_str()));
Some(inline)
}
}
}

0
pagetop/static/bootsier/images/demo-header.svg → pagetop/static/theme/images/demo-header.svg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Before After
Before After