Añade un componente para iconos

pagetop/src/base/component.rs

@@ -9,6 +9,10 @@ mod chunck;
 pub use chunck::{
     CHUNCK_COMPONENT, Chunck
 };
+mod icon;
+pub use icon::{
+    ICON_COMPONENT, Icon
+};
 mod heading;
 pub use heading::{
     HEADING_COMPONENT, Heading, HeadingDisplay, HeadingType
@@ -19,7 +23,7 @@ pub use paragraph::{
 };
 mod anchor;
 pub use anchor::{
-    ANCHOR_COMPONENT, Anchor, AnchorTarget, AnchorType
+    ANCHOR_COMPONENT, Anchor, AnchorIcon, AnchorTarget, AnchorType
 };
 mod block;
 pub use block::{

pagetop/src/base/component/anchor.rs

@@ -16,12 +16,16 @@ pub enum AnchorTarget {
     Top,
 }
 
+pub type AnchorIcon = ComponentsBundle;
+
 pub struct Anchor {
     renderable : fn() -> bool,
     weight     : isize,
     anchor_type: AnchorType,
     href       : OptAttr,
     html       : Markup,
+    left_icon  : AnchorIcon,
+    right_icon : AnchorIcon,
     target     : AnchorTarget,
     id         : OptIden,
     classes    : Classes,
@@ -36,6 +40,8 @@ impl ComponentTrait for Anchor {
             anchor_type: AnchorType::Link,
             href       : OptAttr::new(),
             html       : html! {},
+            left_icon  : AnchorIcon::new(),
+            right_icon : AnchorIcon::new(),
             target     : AnchorTarget::Default,
             id         : OptIden::new(),
             classes    : Classes::new(),
@@ -55,7 +61,7 @@ impl ComponentTrait for Anchor {
         self.weight
     }
 
-    fn default_render(&self, _: &mut InContext) -> Markup {
+    fn default_render(&self, context: &mut InContext) -> Markup {
         let target = match &self.target() {
             AnchorTarget::Blank         => Some("_blank"),
             AnchorTarget::Context(name) => Some(name.as_str()),
@@ -70,7 +76,9 @@ impl ComponentTrait for Anchor {
                 href=[self.href()]
                 target=[target]
             {
-                (*self.html())
+                (self.left_icon().render(context))
+                (" ")(*self.html())(" ")
+                (self.right_icon().render(context))
             }
         }
     }
@@ -124,6 +132,16 @@ impl Anchor {
         self
     }
 
+    pub fn with_left_icon(mut self, icon: Icon) -> Self {
+        self.alter_left_icon(icon);
+        self
+    }
+
+    pub fn with_right_icon(mut self, icon: Icon) -> Self {
+        self.alter_right_icon(icon);
+        self
+    }
+
     pub fn with_target(mut self, target: AnchorTarget) -> Self {
         self.alter_target(target);
         self
@@ -175,6 +193,18 @@ impl Anchor {
         self
     }
 
+    pub fn alter_left_icon(&mut self, icon: Icon) -> &mut Self {
+        self.left_icon.clear();
+        self.left_icon.add(icon);
+        self
+    }
+
+    pub fn alter_right_icon(&mut self, icon: Icon) -> &mut Self {
+        self.right_icon.clear();
+        self.right_icon.add(icon);
+        self
+    }
+
     pub fn alter_target(&mut self, target: AnchorTarget) -> &mut Self {
         self.target = target;
         self
@@ -209,6 +239,14 @@ impl Anchor {
         &self.html
     }
 
+    pub fn left_icon(&self) -> &AnchorIcon {
+        &self.left_icon
+    }
+
+    pub fn right_icon(&self) -> &AnchorIcon {
+        &self.right_icon
+    }
+
     pub fn target(&self) -> &AnchorTarget {
         &self.target
     }

pagetop/src/base/component/icon.rs

@@ -0,0 +1,95 @@
+use crate::prelude::*;
+
+pub const ICON_COMPONENT: &str = "pagetop::component::icon";
+
+pub struct Icon {
+    renderable: fn() -> bool,
+    weight    : isize,
+    icon_name : String,
+}
+
+impl ComponentTrait for Icon {
+    fn new() -> Self {
+        Icon {
+            renderable: render_always,
+            weight    : 0,
+            icon_name : "question-circle-fill".to_owned(),
+        }
+    }
+
+    fn handler(&self) -> &'static str {
+        ICON_COMPONENT
+    }
+
+    fn is_renderable(&self) -> bool {
+        (self.renderable)()
+    }
+
+    fn weight(&self) -> isize {
+        self.weight
+    }
+
+    fn default_render(&self, context: &mut InContext) -> Markup {
+        context
+            .add_stylesheet(StyleSheet::with_source(
+                "/theme/icons/bootstrap-icons.css?ver=1.8.2"
+            ));
+
+        let name = concat_string!("bi-", self.icon_name);
+        html! { i class=(name) {}; }
+    }
+
+    fn as_ref_any(&self) -> &dyn AnyComponent {
+        self
+    }
+
+    fn as_mut_any(&mut self) -> &mut dyn AnyComponent {
+        self
+    }
+}
+
+impl Icon {
+    pub fn with(icon_name: &str) -> Self {
+        Icon::new().with_icon_name(icon_name)
+    }
+
+    // Icon 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_icon_name(mut self, name: &str) -> Self {
+        self.alter_icon_name(name);
+        self
+    }
+
+    // Icon 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_icon_name(&mut self, name: &str) -> &mut Self {
+        self.icon_name = name.to_owned();
+        self
+    }
+
+    // Icon GETTERS.
+
+    pub fn icon_name(&self) -> &str {
+        &self.icon_name
+    }
+}

pagetop/src/base/module/demopage.rs

@@ -58,17 +58,20 @@ fn hello_world() -> Container {
                         "pagetop" => "<a href=\"https://pagetop-rs\">PageTop</a>"
                     ]))
                 }))
-                .add(Anchor::button("#", html! { ("Offered services") }))
-                .add(Anchor::button("#", html! { ("Get quote") }))
-                .add(Chunck::with(html! {
-                    a class="btn-solid-lg" href="#services" {
-                        "Offered services"
-                    }
-                    a class="quote" href="#contact" {
-                        i class="fas fa-paper-plane" {}
-                        "Get quote"
-                    }
-                }))
+                .add(Anchor::button("#",
+                    html! {
+                        ("Offered services")
+                    }).with_left_icon(
+                        Icon::with("card-checklist")
+                    )
+                )
+                .add(Anchor::button("#",
+                    html! {
+                        ("Get quote")
+                    }).with_left_icon(
+                        Icon::with("envelope-open-heart-fill")
+                    )
+                )
             )
             .add_column(grid::Column::new()
                 .add(Image::image("/bootsier/images/demo-header.svg"))

pagetop/src/core/component/bundle.rs

@@ -21,6 +21,10 @@ impl ComponentsBundle {
         self.0.push(Arc::new(RwLock::new(component)));
     }
 
+    pub fn clear(&mut self) {
+        self.0.clear();
+    }
+
     pub fn render(&self, context: &mut InContext) -> Markup {
         let mut components = self.0.clone();
         components.sort_by_key(|c| c.read().unwrap().weight());