From 3fd05643b39088df2cd0bc0c24ac9461ebc50986 Mon Sep 17 00:00:00 2001 From: Manuel Cillero Date: Tue, 21 Nov 2023 21:20:47 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Redefine=20action=20buttons=20fo?= =?UTF-8?q?r=20forms?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pagetop-user/src/lib.rs | 2 +- pagetop/src/base/component/button.rs | 54 +++++----- pagetop/src/base/component/form.rs | 7 +- .../form/{button.rs => action_button.rs} | 101 +++++++++++------- pagetop/src/locale/en-US/base.ftl | 4 + pagetop/src/locale/es-ES/base.ftl | 4 + pagetop/static/base/css/buttons.css | 3 + 7 files changed, 109 insertions(+), 66 deletions(-) rename pagetop/src/base/component/form/{button.rs => action_button.rs} (59%) diff --git a/pagetop-user/src/lib.rs b/pagetop-user/src/lib.rs index b273495c..4bc46ec1 100644 --- a/pagetop-user/src/lib.rs +++ b/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))) } diff --git a/pagetop/src/base/component/button.rs b/pagetop/src/base/component/button.rs index 9778ce3e..c98e76ec 100644 --- a/pagetop/src/base/component/button.rs +++ b/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::Primary => "pt-button__primary", + ButtonType::Link => "link", + 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, right_icon : OptionComponent, + 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) -> &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) -> &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) -> &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 { &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 } diff --git a/pagetop/src/base/component/form.rs b/pagetop/src/base/component/form.rs index 04f882cc..bb5dd943 100644 --- a/pagetop/src/base/component/form.rs +++ b/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}; diff --git a/pagetop/src/base/component/form/button.rs b/pagetop/src/base/component/form/action_button.rs similarity index 59% rename from pagetop/src/base/component/form/button.rs rename to pagetop/src/base/component/form/action_button.rs index 794e5318..f5fc0ee5 100644 --- a/pagetop/src/base/component/form/button.rs +++ b/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", - ButtonType::Submit => "submit", - ButtonType::Reset => "reset", + ActionButtonType::Submit => "submit", + ActionButtonType::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, + right_icon : OptionComponent, 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 { - pub fn with(value: L10n) -> Self { - Button::default().with_value(value) +impl ActionButton { + pub fn submit() -> Self { + ActionButton { + button_type: ActionButtonType::Submit, + value: OptionTranslated::new(L10n::l("button_submit")), + ..Default::default() + } } - pub fn submit(value: L10n) -> Self { - let mut button = Button::default().with_value(value); - button.button_type = ButtonType::Submit; - button - } - - pub fn reset(value: L10n) -> Self { - let mut button = Button::default().with_value(value); - button.button_type = ButtonType::Reset; - button + pub fn reset() -> Self { + ActionButton { + button_type: ActionButtonType::Reset, + value: OptionTranslated::new(L10n::l("button_reset")), + ..Default::default() + } } // 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) -> &mut Self { + self.left_icon.alter_value(icon); + self + } + + #[fn_builder] + pub fn alter_right_icon(&mut self, icon: Option) -> &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 { + &self.left_icon + } + + pub fn right_icon(&self) -> &OptionComponent { + &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() - } } diff --git a/pagetop/src/locale/en-US/base.ftl b/pagetop/src/locale/en-US/base.ftl index 200ae5d1..9ec4803b 100644 --- a/pagetop/src/locale/en-US/base.ftl +++ b/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 diff --git a/pagetop/src/locale/es-ES/base.ftl b/pagetop/src/locale/es-ES/base.ftl index ee6d2544..953d891c 100644 --- a/pagetop/src/locale/es-ES/base.ftl +++ b/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 diff --git a/pagetop/static/base/css/buttons.css b/pagetop/static/base/css/buttons.css index b1b2dea4..3c644bd9 100644 --- a/pagetop/static/base/css/buttons.css +++ b/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);