Modifica la visualización de iconos por temas

pagetop/src/base/component/anchor.rs

@@ -80,7 +80,7 @@ impl ComponentTrait for Anchor {
                 target=[target]
             {
                 (self.left_icon().render(context))
-                (*self.html())
+                span { (*self.html()) }
                 (self.right_icon().render(context))
             }
         }
@@ -203,13 +203,13 @@ impl Anchor {
 
     pub fn alter_left_icon(&mut self, icon: Icon) -> &mut Self {
         self.left_icon.clear();
-        self.left_icon.add(icon.with_layout(LayoutProperty::MarginRight, LayoutUnit::Px(5)));
+        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.with_layout(LayoutProperty::MarginLeft, LayoutUnit::Px(5)));
+        self.right_icon.add(icon);
         self
     }
 

pagetop/src/base/module/demopage.rs

@@ -28,7 +28,6 @@ async fn demo() -> app::Result<Markup> {
     Page::new()
         .with_title(l("page_title").as_str())
         .add_to("content", hello_world())
-        .add_to("content", hello_world_original())
         .add_to("content", just_visiting())
         .add_to("content", about_pagetop())
         .add_to("content", promo_pagetop())
@@ -68,9 +67,7 @@ fn hello_world() -> Container {
                 .add(Anchor::button("#",
                     html! {
                         ("Get quote")
-                    }).with_layout(
+                    }).with_left_icon(
-                        LayoutProperty::MarginLeft, LayoutUnit::Px(8)
-                    ).with_left_icon(
                         Icon::with("envelope-open-heart-fill")
                     )
                 )
@@ -81,54 +78,6 @@ fn hello_world() -> Container {
         )
 }
 
-fn hello_world_original() -> Chunck {
-    Chunck::with(html! {
-        header id="header" class="header" {
-            div class="container" {
-                div class="row" {
-                    div class="col-lg-6 col-xl-5" {
-                        div class="text-container" {
-                            div class="section-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
-                                    )
-                                ]))
-                            }
-                            p {
-                                (e("welcome_pagetop", &args![
-                                    "pagetop" => "<a href=\"https://pagetop-rs\">PageTop</a>"
-                                ]))
-                            }
-                            a class="btn-solid-lg" href="#services" {
-                                "Offered services"
-                            }
-                            a class="quote" href="#contact" {
-                                i class="fas fa-paper-plane" {}
-                                "Get quote"
-                            }
-                        }
-                    }
-                    div class="col-lg-6 col-xl-7" {
-                        div class="image-container" {
-                            img class="img-fluid" src="/bootsier/images/demo-header.svg" alt="alternative" {}
-                        }
-                    }
-                }
-            }
-        }
-    })
-}
-
 fn just_visiting() -> Chunck {
     Chunck::with(html! {
         div id="details" class="basic-1" {

pagetop/src/base/theme/bulmix.rs

@@ -35,6 +35,13 @@ impl ThemeTrait for Bulmix {
         _context: &mut InContext
     ) {
         match component.handler() {
+            ANCHOR_COMPONENT => {
+                let a = component_mut::<Anchor>(component);
+                a.alter_classes(match a.anchor_type() {
+                    AnchorType::Button => "button is-primary",
+                    _ => "",
+                }, ClassesOp::SetDefault);
+            },
             HEADING_COMPONENT => {
                 let h = component_mut::<Heading>(component);
                 h.alter_classes(concat_string!("title ", match h.display() {
@@ -57,22 +64,37 @@ impl ThemeTrait for Bulmix {
                     ParagraphDisplay::Normal  => "",
                 }, ClassesOp::SetDefault);
             },
-            ANCHOR_COMPONENT => {
+            grid::COLUMN_COMPONENT => {
-                let a = component_mut::<Anchor>(component);
+                let col = component_mut::<grid::Column>(component);
-                a.alter_classes(match a.anchor_type() {
+                col.alter_classes("column content", ClassesOp::SetDefault);
-                    AnchorType::Button => "button is-primary",
-                    _ => "",
-                }, ClassesOp::SetDefault);
             },
             grid::ROW_COMPONENT => {
                 let row = component_mut::<grid::Row>(component);
                 row.alter_classes("columns", ClassesOp::SetDefault);
             },
-            grid::COLUMN_COMPONENT => {
-                let col = component_mut::<grid::Column>(component);
-                col.alter_classes("column content", ClassesOp::SetDefault);
-            },
             _ => {},
         }
     }
+
+    fn render_component(
+        &self,
+        component: &dyn ComponentTrait,
+        context: &mut InContext
+    ) -> Option<Markup> {
+        match component.handler() {
+            ICON_COMPONENT => {
+                let icon = component_ref::<Icon>(component);
+                context
+                    .add_stylesheet(StyleSheet::with_source(
+                        "/theme/icons/bootstrap-icons.css?ver=1.8.2"
+                    ));
+                Some(html! {
+                    span class="icon" {
+                        i class=[icon.classes().get()] style=[icon.layout().get()] {};
+                    }
+                })
+            },
+            _ => None,
+        }
+    }
 }

pagetop/src/core/component/bundle.rs

@@ -30,7 +30,7 @@ impl ComponentsBundle {
         components.sort_by_key(|c| c.read().unwrap().weight());
         html! {
             @for c in components.iter() {
-                (super::render_component(&mut *c.write().unwrap(), context))
+                (" ")(super::render_component(&mut *c.write().unwrap(), context))(" ")
             }
         }
     }