🚧 Working on theming: anchor and icon font sizes

pagetop-bootsier/src/lib.rs

@@ -81,18 +81,54 @@ impl ThemeTrait for Bootsier {
             ))
             .alter_context(ContextOp::AddBaseAssets)
             .alter_context(ContextOp::AddStyleSheet(
-                StyleSheet::at("/bootsier/css/styles.css")
+                StyleSheet::at("/bootsier/css/styles.css").with_version("0.0.1"),
-                    .with_version("0.0.1"),
             ));
-}
+    }
 
-    #[rustfmt::skip]
+    fn before_prepare_component(&self, component: &mut dyn ComponentTrait, _cx: &mut Context) {
-    fn before_prepare_component(
-        &self,
-        component: &mut dyn ComponentTrait,
-        _cx: &mut Context,
-    ) {
         match component.handle() {
+            COMPONENT_BASE_ICON => {
+                let i = component_as_mut::<Icon>(component);
+                match i.font_size() {
+                    FontSize::ExtraLarge => {
+                        i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "fs-1");
+                    }
+                    FontSize::XxLarge => {
+                        i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "fs-2");
+                    }
+                    FontSize::XLarge => {
+                        i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "fs-3");
+                    }
+                    FontSize::Large => {
+                        i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "fs-4");
+                    }
+                    FontSize::Medium => {
+                        i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "fs-5");
+                    }
+                    _ => {}
+                };
+            }
+            COMPONENT_BASE_ANCHOR => {
+                let a = component_as_mut::<Anchor>(component);
+                match a.font_size() {
+                    FontSize::ExtraLarge => {
+                        a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "fs-1");
+                    }
+                    FontSize::XxLarge => {
+                        a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "fs-2");
+                    }
+                    FontSize::XLarge => {
+                        a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "fs-3");
+                    }
+                    FontSize::Large => {
+                        a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "fs-4");
+                    }
+                    FontSize::Medium => {
+                        a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "fs-5");
+                    }
+                    _ => {}
+                };
+            }
             COMPONENT_BASE_HEADING => {
                 let h = component_as_mut::<Heading>(component);
                 let original = h.display().to_string();
@@ -100,28 +136,34 @@ impl ThemeTrait for Bootsier {
                     ClassesOp::SetDefault,
                     match h.display() {
                         HeadingDisplay::ExtraLarge => "display-1",
-                        HeadingDisplay::XxLarge    => "display-2",
+                        HeadingDisplay::XxLarge => "display-2",
-                        HeadingDisplay::XLarge     => "display-3",
+                        HeadingDisplay::XLarge => "display-3",
-                        HeadingDisplay::Large      => "display-4",
+                        HeadingDisplay::Large => "display-4",
-                        HeadingDisplay::Medium     => "display-5",
+                        HeadingDisplay::Medium => "display-5",
-                        _                          => original.as_str(),
+                        _ => original.as_str(),
                     },
                 );
             }
             COMPONENT_BASE_PARAGRAPH => {
                 let p = component_as_mut::<Paragraph>(component);
-                let original = p.font_size().to_string();
+                match p.font_size() {
-                p.alter_classes(
+                    FontSize::ExtraLarge => {
-                    ClassesOp::SetDefault,
+                        p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "fs-1");
-                    match p.font_size() {
+                    }
-                        FontSize::ExtraLarge => "fs-1",
+                    FontSize::XxLarge => {
-                        FontSize::XxLarge    => "fs-2",
+                        p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "fs-2");
-                        FontSize::XLarge     => "fs-3",
+                    }
-                        FontSize::Large      => "fs-4",
+                    FontSize::XLarge => {
-                        FontSize::Medium     => "fs-5",
+                        p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "fs-3");
-                        _                    => original.as_str(),
+                    }
-                    },
+                    FontSize::Large => {
-                );
+                        p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "fs-4");
+                    }
+                    FontSize::Medium => {
+                        p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "fs-5");
+                    }
+                    _ => {}
+                };
             }
             _ => {}
         }

pagetop-bulmix/src/lib.rs

@@ -31,64 +31,100 @@ impl ThemeTrait for Bulmix {
             .alter_context(ContextOp::AddBaseAssets);
     }
 
-    #[rustfmt::skip]
+    fn before_prepare_component(&self, component: &mut dyn ComponentTrait, _cx: &mut Context) {
-    fn before_prepare_component(
-        &self,
-        component: &mut dyn ComponentTrait,
-        _cx: &mut Context,
-    ) {
         match component.handle() {
+            COMPONENT_BASE_ICON => {
+                let i = component_as_mut::<Icon>(component);
+                match i.font_size() {
+                    FontSize::ExtraLarge => {
+                        i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "is-size-1");
+                    }
+                    FontSize::XxLarge => {
+                        i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "is-size-2");
+                    }
+                    FontSize::XLarge => {
+                        i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "is-size-3");
+                    }
+                    FontSize::Large => {
+                        i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "is-size-4");
+                    }
+                    FontSize::Medium => {
+                        i.alter_classes(ClassesOp::Replace(i.font_size().to_string()), "is-size-5");
+                    }
+                    _ => {}
+                };
+            }
             COMPONENT_BASE_ANCHOR => {
                 let a = component_as_mut::<Anchor>(component);
-                a.alter_classes(
+                match a.font_size() {
-                    ClassesOp::SetDefault,
+                    FontSize::ExtraLarge => {
-                    match a.anchor_type() {
+                        a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "is-size-1");
-                        AnchorType::Button => "button is-primary",
+                    }
-                        _ => "",
+                    FontSize::XxLarge => {
-                    },
+                        a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "is-size-2");
-                );
+                    }
+                    FontSize::XLarge => {
+                        a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "is-size-3");
+                    }
+                    FontSize::Large => {
+                        a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "is-size-4");
+                    }
+                    FontSize::Medium => {
+                        a.alter_classes(ClassesOp::Replace(a.font_size().to_string()), "is-size-5");
+                    }
+                    _ => {}
+                };
+                match a.anchor_type() {
+                    AnchorType::Button => {
+                        a.alter_classes(
+                            ClassesOp::Replace(a.anchor_type().to_string()),
+                            "button is-primary",
+                        );
+                    }
+                    _ => {}
+                };
             }
             COMPONENT_BASE_HEADING => {
                 let h = component_as_mut::<Heading>(component);
                 match h.display() {
-                    HeadingDisplay::Subtitle => h.alter_classes(
+                    HeadingDisplay::Subtitle => {
-                        ClassesOp::SetDefault, "subtitle"
+                        h.alter_classes(ClassesOp::Replace(h.display().to_string()), "subtitle")
-                    ),
+                    }
-                    _ => h.alter_classes(
+                    _ => h.alter_classes(ClassesOp::AddDefault, "title"),
-                        ClassesOp::AddDefault, "title"
-                    ),
                 };
             }
             COMPONENT_BASE_PARAGRAPH => {
                 let p = component_as_mut::<Paragraph>(component);
-                let original = concat_string!("block ", p.font_size().to_string());
+                p.alter_classes(ClassesOp::AddDefault, "block");
-                p.alter_classes(
+                match p.font_size() {
-                    ClassesOp::SetDefault,
+                    FontSize::ExtraLarge => {
-                    match p.font_size() {
+                        p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "is-size-1");
-                        FontSize::ExtraLarge => "block is-size-1",
+                    }
-                        FontSize::XxLarge    => "block is-size-2",
+                    FontSize::XxLarge => {
-                        FontSize::XLarge     => "block is-size-3",
+                        p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "is-size-2");
-                        FontSize::Large      => "block is-size-4",
+                    }
-                        FontSize::Medium     => "block is-size-5",
+                    FontSize::XLarge => {
-                        _                    => original.as_str(),
+                        p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "is-size-3");
-                    },
+                    }
-                );
+                    FontSize::Large => {
-
+                        p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "is-size-4");
+                    }
+                    FontSize::Medium => {
+                        p.alter_classes(ClassesOp::Replace(p.font_size().to_string()), "is-size-5");
+                    }
+                    _ => {}
+                };
             }
             _ => {}
         }
     }
 
-    fn render_component(
+    fn render_component(&self, component: &dyn ComponentTrait, cx: &mut Context) -> Option<Markup> {
-        &self,
-        component: &dyn ComponentTrait,
-        cx: &mut Context,
-    ) -> Option<Markup> {
         match component.handle() {
             COMPONENT_BASE_ICON => {
                 let icon = component_as_ref::<Icon>(component);
                 if icon.icon_name().is_empty() {
-                    return None
+                    return None;
                 };
                 cx.set_param::<bool>(PARAM_BASE_INCLUDE_ICONS, true);
                 Some(html! {

pagetop-homedemo/src/lib.rs

@@ -80,12 +80,14 @@ fn hello_world() -> Wrapper {
                         )
                         .with_target(AnchorTarget::Blank)
                         .with_left_icon(Icon::with("git"))
-                        .with_classes(ClassesOp::Add, "code-link"),
+                        .with_classes(ClassesOp::Add, "code-link")
+                        .with_font_size(FontSize::Large),
                     )
                     .add_component(
                         Anchor::link("#welcome", L10n::t("hello_welcome", &LOCALES_HOMEDEMO))
                             .with_left_icon(Icon::with("arrow-down-circle-fill"))
-                            .with_classes(ClassesOp::Add, "welcome-link"),
+                            .with_classes(ClassesOp::Add, "welcome-link")
+                            .with_font_size(FontSize::Large),
                     ),
             )
             .add_item(

pagetop/src/base/component/anchor.rs

@@ -10,6 +10,16 @@ pub enum AnchorType {
     Location,
 }
 
+#[rustfmt::skip]
+impl ToString for AnchorType {
+    fn to_string(&self) -> String {
+        match self {
+            AnchorType::Button => "btn btn-primary".to_string(),
+            _ => "".to_string(),
+        }
+    }
+}
+
 #[derive(Default)]
 pub enum AnchorTarget {
     #[default]
@@ -29,13 +39,13 @@ pub struct Anchor {
     renderable : Renderable,
     id         : OptionId,
     classes    : OptionClasses,
+    font_size  : FontSize,
     anchor_type: AnchorType,
     href       : OptionString,
     html       : OptionTranslated,
     left_icon  : AnchorIcon,
     right_icon : AnchorIcon,
     target     : AnchorTarget,
-    template   : String,
 }
 
 impl ComponentTrait for Anchor {
@@ -125,14 +135,21 @@ impl Anchor {
         self
     }
 
+    #[fn_builder]
+    pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
+        self.classes.alter_value(
+            ClassesOp::Replace(self.font_size.to_string()),
+            font_size.to_string(),
+        );
+        self.font_size = font_size;
+        self
+    }
+
     #[fn_builder]
     pub fn alter_type(&mut self, anchor_type: AnchorType) -> &mut Self {
-        self.alter_classes(
+        self.classes.alter_value(
-            ClassesOp::SetDefault,
+            ClassesOp::Replace(self.anchor_type.to_string()),
-            match anchor_type {
+            anchor_type.to_string(),
-                AnchorType::Button => "btn btn-primary",
-                _ => "",
-            },
         );
         self.anchor_type = anchor_type;
         self
@@ -168,18 +185,16 @@ impl Anchor {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_template(&mut self, template: &str) -> &mut Self {
-        self.template = template.to_owned();
-        self
-    }
-
     // Anchor GETTERS.
 
     pub fn classes(&self) -> &OptionClasses {
         &self.classes
     }
 
+    pub fn font_size(&self) -> &FontSize {
+        &self.font_size
+    }
+
     pub fn anchor_type(&self) -> &AnchorType {
         &self.anchor_type
     }
@@ -203,8 +218,4 @@ impl Anchor {
     pub fn target(&self) -> &AnchorTarget {
         &self.target
     }
-
-    pub fn template(&self) -> &str {
-        self.template.as_str()
-    }
 }

pagetop/src/base/component/icon.rs

@@ -7,8 +7,9 @@ new_handle!(COMPONENT_BASE_ICON);
 pub struct Icon {
     weight    : Weight,
     renderable: Renderable,
-    icon_name : String,
     classes   : OptionClasses,
+    font_size : FontSize,
+    icon_name : String,
 }
 
 impl ComponentTrait for Icon {
@@ -30,7 +31,7 @@ impl ComponentTrait for Icon {
 
     fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
         if self.icon_name().is_empty() {
-            return PrepareMarkup::None
+            return PrepareMarkup::None;
         }
         cx.set_param::<bool>(PARAM_BASE_INCLUDE_ICONS, true);
         PrepareMarkup::With(html! { i class=[self.classes().get()] {} })
@@ -56,6 +57,22 @@ impl Icon {
         self
     }
 
+    #[fn_builder]
+    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
+        self.classes.alter_value(op, classes);
+        self
+    }
+
+    #[fn_builder]
+    pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
+        self.classes.alter_value(
+            ClassesOp::Replace(self.font_size.to_string()),
+            font_size.to_string(),
+        );
+        self.font_size = font_size;
+        self
+    }
+
     #[fn_builder]
     pub fn alter_icon_name(&mut self, name: &str) -> &mut Self {
         self.alter_classes(ClassesOp::SetDefault, concat_string!("bi-", name));
@@ -63,19 +80,17 @@ impl Icon {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_classes(&mut self, op: ClassesOp, classes: impl Into<String>) -> &mut Self {
-        self.classes.alter_value(op, classes);
-        self
-    }
-
     // Icon GETTERS.
 
-    pub fn icon_name(&self) -> &str {
-        self.icon_name.as_str()
-    }
-
     pub fn classes(&self) -> &OptionClasses {
         &self.classes
     }
+
+    pub fn font_size(&self) -> &FontSize {
+        &self.font_size
+    }
+
+    pub fn icon_name(&self) -> &str {
+        self.icon_name.as_str()
+    }
 }

pagetop/src/base/component/paragraph.rs

@@ -9,8 +9,8 @@ pub struct Paragraph {
     renderable: Renderable,
     id        : OptionId,
     classes   : OptionClasses,
-    stuff     : ArcComponents,
     font_size : FontSize,
+    stuff     : ArcComponents,
 }
 
 impl ComponentTrait for Paragraph {
@@ -81,6 +81,16 @@ impl Paragraph {
         self
     }
 
+    #[fn_builder]
+    pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
+        self.classes.alter_value(
+            ClassesOp::Replace(self.font_size.to_string()),
+            font_size.to_string(),
+        );
+        self.font_size = font_size;
+        self
+    }
+
     pub fn add_component(mut self, component: impl ComponentTrait) -> Self {
         self.stuff.alter(ArcOp::Add(ArcComponent::with(component)));
         self
@@ -98,28 +108,17 @@ impl Paragraph {
         self
     }
 
-    #[rustfmt::skip]
-    #[fn_builder]
-    pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
-        self.classes.alter_value(
-            ClassesOp::Replace(self.font_size.to_string()),
-            font_size.to_string(),
-        );
-        self.font_size = font_size;
-        self
-    }
-
     // Paragraph GETTERS.
 
     pub fn classes(&self) -> &OptionClasses {
         &self.classes
     }
 
-    pub fn components(&self) -> &ArcComponents {
-        &self.stuff
-    }
-
     pub fn font_size(&self) -> &FontSize {
         &self.font_size
     }
+
+    pub fn components(&self) -> &ArcComponents {
+        &self.stuff
+    }
 }