🚧 Redefine action buttons for forms

pagetop-user/src/lib.rs

@@ -61,5 +61,5 @@ fn form_login() -> Form {
                 .with_label(L10n::t("password", &LOCALES_USER))
                 .with_help_text(L10n::t("password_help", &LOCALES_USER)),
         )
-        .with_element(form::Button::submit(L10n::t("login", &LOCALES_USER)))
+        .with_element(form::ActionButton::submit().with_value(L10n::t("login", &LOCALES_USER)))
 }

pagetop/src/base/component/button.rs

@@ -12,8 +12,8 @@ pub enum ButtonType {
 impl ToString for ButtonType {
     fn to_string(&self) -> String {
         String::from(match self {
-            ButtonType::Link    => "pt-button__link",
+            ButtonType::Link    => "link",
-            ButtonType::Primary => "pt-button__primary",
+            ButtonType::Primary => "primary",
         })
     }
 }
@@ -37,10 +37,10 @@ pub struct Button {
     classes    : OptionClasses,
     button_type: ButtonType,
     font_size  : FontSize,
-    href       : OptionString,
-    html       : OptionTranslated,
     left_icon  : OptionComponent<Icon>,
     right_icon : OptionComponent<Icon>,
+    href       : OptionString,
+    html       : OptionTranslated,
     target     : ButtonTarget,
 }
 
@@ -63,7 +63,11 @@ impl ComponentTrait for Button {
 
     fn setup_before_prepare(&mut self, _cx: &mut Context) {
         self.prepend_classes(
-            [self.button_type().to_string(), self.font_size().to_string()].join(" "),
+            [
+                concat_string!("pt-button__", self.button_type().to_string()),
+                self.font_size().to_string(),
+            ]
+            .join(" "),
         );
     }
 
@@ -138,18 +142,6 @@ impl Button {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_href(&mut self, href: impl Into<String>) -> &mut Self {
-        self.href.alter_value(href);
-        self
-    }
-
-    #[fn_builder]
-    pub fn alter_html(&mut self, html: L10n) -> &mut Self {
-        self.html.alter_value(html);
-        self
-    }
-
     #[fn_builder]
     pub fn alter_left_icon(&mut self, icon: Option<Icon>) -> &mut Self {
         self.left_icon.alter_value(icon);
@@ -162,6 +154,18 @@ impl Button {
         self
     }
 
+    #[fn_builder]
+    pub fn alter_href(&mut self, href: impl Into<String>) -> &mut Self {
+        self.href.alter_value(href);
+        self
+    }
+
+    #[fn_builder]
+    pub fn alter_html(&mut self, html: L10n) -> &mut Self {
+        self.html.alter_value(html);
+        self
+    }
+
     #[fn_builder]
     pub fn alter_target(&mut self, target: ButtonTarget) -> &mut Self {
         self.target = target;
@@ -178,14 +182,6 @@ impl Button {
         &self.font_size
     }
 
-    pub fn href(&self) -> &OptionString {
-        &self.href
-    }
-
-    pub fn html(&self) -> &OptionTranslated {
-        &self.html
-    }
-
     pub fn left_icon(&self) -> &OptionComponent<Icon> {
         &self.left_icon
     }
@@ -194,6 +190,14 @@ impl Button {
         &self.right_icon
     }
 
+    pub fn href(&self) -> &OptionString {
+        &self.href
+    }
+
+    pub fn html(&self) -> &OptionTranslated {
+        &self.html
+    }
+
     pub fn target(&self) -> &ButtonTarget {
         &self.target
     }

pagetop/src/base/component/form.rs

@@ -3,9 +3,12 @@ pub use form_main::{Form, FormMethod};
 
 mod input;
 pub use input::{Input, InputType};
+
 mod hidden;
 pub use hidden::Hidden;
+
 mod date;
 pub use date::Date;
-mod button;
+
-pub use button::{Button, ButtonType};
+mod action_button;
+pub use action_button::{ActionButton, ActionButtonType};

pagetop/src/base/component/form/action_button.rs

@@ -2,41 +2,41 @@ use crate::prelude::*;
 use crate::BaseHandle;
 
 #[derive(SmartDefault)]
-pub enum ButtonType {
+pub enum ActionButtonType {
     #[default]
-    Button,
     Submit,
     Reset,
 }
 
 #[rustfmt::skip]
-impl ToString for ButtonType {
+impl ToString for ActionButtonType {
     fn to_string(&self) -> String {
         String::from(match self {
-            ButtonType::Button => "button",
+            ActionButtonType::Submit => "submit",
-            ButtonType::Submit => "submit",
+            ActionButtonType::Reset  => "reset",
-            ButtonType::Reset  => "reset",
         })
     }
 }
 
 #[rustfmt::skip]
 #[derive(BaseHandle, ComponentClasses, SmartDefault)]
-pub struct Button {
+pub struct ActionButton {
     weight     : Weight,
     renderable : Renderable,
     classes    : OptionClasses,
-    button_type: ButtonType,
+    button_type: ActionButtonType,
+    font_size  : FontSize,
+    left_icon  : OptionComponent<Icon>,
+    right_icon : OptionComponent<Icon>,
     name       : OptionString,
     value      : OptionTranslated,
     autofocus  : OptionString,
     disabled   : OptionString,
-    template   : String,
 }
 
-impl ComponentTrait for Button {
+impl ComponentTrait for ActionButton {
     fn new() -> Self {
-        Button::default()
+        ActionButton::submit()
     }
 
     fn weight(&self) -> Weight {
@@ -47,10 +47,13 @@ impl ComponentTrait for Button {
         (self.renderable.check)(cx)
     }
 
-    #[rustfmt::skip]
     fn setup_before_prepare(&mut self, _cx: &mut Context) {
         self.prepend_classes(
-            concat_string!("btn btn-primary form-", self.button_type.to_string()),
+            [
+                concat_string!("pt-button__", self.button_type().to_string()),
+                self.font_size().to_string(),
+            ]
+            .join(" "),
         );
     }
 
@@ -66,27 +69,29 @@ impl ComponentTrait for Button {
                 autofocus=[self.autofocus().get()]
                 disabled=[self.disabled().get()]
             {
-                (self.value().escaped(cx.langid()))
+                (self.left_icon().render(cx))
+                " " (self.value().escaped(cx.langid())) " "
+                (self.right_icon().render(cx))
             }
         })
     }
 }
 
-impl Button {
+impl ActionButton {
-    pub fn with(value: L10n) -> Self {
+    pub fn submit() -> Self {
-        Button::default().with_value(value)
+        ActionButton {
+            button_type: ActionButtonType::Submit,
+            value: OptionTranslated::new(L10n::l("button_submit")),
+            ..Default::default()
+        }
     }
 
-    pub fn submit(value: L10n) -> Self {
+    pub fn reset() -> Self {
-        let mut button = Button::default().with_value(value);
+        ActionButton {
-        button.button_type = ButtonType::Submit;
+            button_type: ActionButtonType::Reset,
-        button
+            value: OptionTranslated::new(L10n::l("button_reset")),
+            ..Default::default()
         }
-
-    pub fn reset(value: L10n) -> Self {
-        let mut button = Button::default().with_value(value);
-        button.button_type = ButtonType::Reset;
-        button
     }
 
     // Button BUILDER.
@@ -103,6 +108,24 @@ impl Button {
         self
     }
 
+    #[fn_builder]
+    pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
+        self.font_size = font_size;
+        self
+    }
+
+    #[fn_builder]
+    pub fn alter_left_icon(&mut self, icon: Option<Icon>) -> &mut Self {
+        self.left_icon.alter_value(icon);
+        self
+    }
+
+    #[fn_builder]
+    pub fn alter_right_icon(&mut self, icon: Option<Icon>) -> &mut Self {
+        self.right_icon.alter_value(icon);
+        self
+    }
+
     #[fn_builder]
     pub fn alter_name(&mut self, name: &str) -> &mut Self {
         self.name.alter_value(name);
@@ -133,18 +156,24 @@ impl Button {
         self
     }
 
-    #[fn_builder]
-    pub fn alter_template(&mut self, template: &str) -> &mut Self {
-        self.template = template.to_owned();
-        self
-    }
-
     // Button GETTERS.
 
-    pub fn button_type(&self) -> &ButtonType {
+    pub fn button_type(&self) -> &ActionButtonType {
         &self.button_type
     }
 
+    pub fn font_size(&self) -> &FontSize {
+        &self.font_size
+    }
+
+    pub fn left_icon(&self) -> &OptionComponent<Icon> {
+        &self.left_icon
+    }
+
+    pub fn right_icon(&self) -> &OptionComponent<Icon> {
+        &self.right_icon
+    }
+
     pub fn name(&self) -> &OptionString {
         &self.name
     }
@@ -160,8 +189,4 @@ impl Button {
     pub fn disabled(&self) -> &OptionString {
         &self.disabled
     }
-
-    pub fn template(&self) -> &str {
-        self.template.as_str()
-    }
 }

pagetop/src/locale/en-US/base.ftl

@@ -7,3 +7,7 @@ pagetop_logo = PageTop logo
 
 # Menu component.
 menu_toggle = Toggle menu visibility
+
+# Form components.
+button_submit = Submit
+button_reset = Reset

pagetop/src/locale/es-ES/base.ftl

@@ -7,3 +7,7 @@ pagetop_logo = Logotipo de PageTop
 
 # Menu component.
 menu_toggle = Alternar visibilidad del menú
+
+# Form components.
+button_submit = Enviar
+button_reset = Reiniciar

pagetop/static/base/css/buttons.css

@@ -20,13 +20,16 @@
 	color: var(--pt-color--primary);
 }
 
+.pt-button__submit,
 .pt-button__primary {
     background-color: var(--pt-color--primary);
 }
+.pt-button__submit:hover,
 .pt-button__primary:hover {
 	color: var(--pt-color--white);
     background-color: var(--pt-color--primary-dark);
 }
+.pt-button__submit:active,
 .pt-button__primary:active {
 	color: var(--pt-color--white);
     background-color: var(--pt-color--primary-light);