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

pagetop/src/base/component/anchor.rs

@@ -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 {
+    pub fn with_spaces(mut self, spaces: &[SpaceSet]) -> Self {
-        self.alter_layout(property, value);
+        self.alter_spaces(spaces);
         self
     }
 
@@ -228,8 +228,8 @@ impl Anchor {
         self
     }
 
-    pub fn alter_layout(&mut self, property: LayoutProperty, value: LayoutUnit) -> &mut Self {
+    pub fn alter_spaces(&mut self, spaces: &[SpaceSet]) -> &mut Self {
-        self.layout.add(property, value);
+        self.spaces.add(spaces);
         self
     }
 
@@ -272,8 +272,8 @@ impl Anchor {
         &self.classes
     }
 
-    pub fn layout(&self) -> &Layout {
+    pub fn spaces(&self) -> &Spaces {
-        &self.layout
+        &self.spaces
     }
 
     pub fn template(&self) -> &str {

pagetop/src/base/component/grid/column.rs

@@ -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(),
         }
     }

pagetop/src/base/component/grid/row.rs

@@ -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()
     }

pagetop/src/base/component/icon.rs

@@ -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 {
+    pub fn with_spaces(mut self, spaces: &[SpaceSet]) -> Self {
-        self.alter_layout(property, value);
+        self.alter_spaces(spaces);
         self
     }
 
@@ -103,8 +103,8 @@ impl Icon {
         self
     }
 
-    pub fn alter_layout(&mut self, property: LayoutProperty, value: LayoutUnit) -> &mut Self {
+    pub fn alter_spaces(&mut self, spaces: &[SpaceSet]) -> &mut Self {
-        self.layout.add(property, value);
+        self.spaces.add(spaces);
         self
     }
 
@@ -114,7 +114,7 @@ impl Icon {
         &self.classes
     }
 
-    pub fn layout(&self) -> &Layout {
+    pub fn spaces(&self) -> &Spaces {
-        &self.layout
+        &self.spaces
     }
 }

pagetop/src/base/module/demopage.rs

@@ -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))])
         )
 }
 

pagetop/src/base/theme/bulmix.rs

@@ -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()] {};
                     }
                 })
             },

pagetop/src/html.rs

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

pagetop/src/html/layout.rs

@@ -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)
-        }
-    }
-}

pagetop/src/html/spacing.rs

@@ -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)
+        }
+    }
+}