manuelcillero/pagetop
manuelcillero/pagetop
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

✨ Add popular styles to buttons

Browse source
This commit is contained in:
Manuel Cillero 2023-11-23 20:31:22 +01:00
parent 9f25695298
commit 8a797365e2
10 changed files with 799 additions and 651 deletions
Download patch file Download diff file Expand all files Collapse all files

34
pagetop-bootsier/src/lib.rs
View file

@ -106,6 +106,32 @@ impl ThemeTrait for Bootsier {
}
h if Button::matches_handle(h) => {
if let Some(b) = component_as_mut::<Button>(component) {
match b.style() {
ButtonStyle::Default => {
b.replace_classes(b.style().to_string(), "btn btn-primary");
}
ButtonStyle::Info => {
b.replace_classes(b.style().to_string(), "btn btn-info");
}
ButtonStyle::Success => {
b.replace_classes(b.style().to_string(), "btn btn-success");
}
ButtonStyle::Warning => {
b.replace_classes(b.style().to_string(), "btn btn-warning");
}
ButtonStyle::Danger => {
b.replace_classes(b.style().to_string(), "btn btn-danger");
}
ButtonStyle::Light => {
b.replace_classes(b.style().to_string(), "btn btn-light");
}
ButtonStyle::Dark => {
b.replace_classes(b.style().to_string(), "btn btn-dark");
}
ButtonStyle::Link => {
b.replace_classes(b.style().to_string(), "btn btn-link");
}
};
match b.font_size() {
FontSize::ExtraLarge => {
b.replace_classes(b.font_size().to_string(), "fs-1");
@ -124,14 +150,6 @@ impl ThemeTrait for Bootsier {
}
_ => {}
};
match b.button_type() {
ButtonType::Link => {
b.replace_classes(b.button_type().to_string(), "btn btn-link");
}
ButtonType::Primary => {
b.replace_classes(b.button_type().to_string(), "btn btn-primary");
}
};
}
}
h if Heading::matches_handle(h) => {

34
pagetop-bulmix/src/lib.rs
View file

@ -55,6 +55,32 @@ impl ThemeTrait for Bulmix {
}
h if Button::matches_handle(h) => {
if let Some(b) = component_as_mut::<Button>(component) {
match b.style() {
ButtonStyle::Default => {
b.replace_classes(b.style().to_string(), "button is-primary");
}
ButtonStyle::Info => {
b.replace_classes(b.style().to_string(), "button is-info");
}
ButtonStyle::Success => {
b.replace_classes(b.style().to_string(), "button is-success");
}
ButtonStyle::Warning => {
b.replace_classes(b.style().to_string(), "button is-warning");
}
ButtonStyle::Danger => {
b.replace_classes(b.style().to_string(), "button is-danger");
}
ButtonStyle::Light => {
b.replace_classes(b.style().to_string(), "button is-light");
}
ButtonStyle::Dark => {
b.replace_classes(b.style().to_string(), "button is-dark");
}
ButtonStyle::Link => {
b.replace_classes(b.style().to_string(), "button is-text");
}
};
match b.font_size() {
FontSize::ExtraLarge => {
b.replace_classes(b.font_size().to_string(), "is-size-1");
@ -73,14 +99,6 @@ impl ThemeTrait for Bulmix {
}
_ => {}
};
match b.button_type() {
ButtonType::Link => {
b.replace_classes(b.button_type().to_string(), "button is-text");
}
ButtonType::Primary => {
b.replace_classes(b.button_type().to_string(), "button is-primary");
}
};
}
}
h if Heading::matches_handle(h) => {

5
pagetop-homedemo/src/lib.rs
View file

@ -69,7 +69,7 @@ fn hello_world() -> Wrapper {
),
))
.add_component(
Button::primary(
Button::anchor(
"https://github.com/manuelcillero/pagetop",
L10n::t("hello_code", &LOCALES_HOMEDEMO),
)
@ -79,7 +79,8 @@ fn hello_world() -> Wrapper {
.with_font_size(FontSize::Medium),
)
.add_component(
Button::link("#welcome", L10n::t("hello_welcome", &LOCALES_HOMEDEMO))
Button::anchor("#welcome", L10n::t("hello_welcome", &LOCALES_HOMEDEMO))
.with_style(ButtonStyle::Link)
.with_left_icon(Some(Icon::with("arrow-down-circle-fill")))
.with_classes(ClassesOp::Add, "welcome-link")
.with_font_size(FontSize::Medium),

33
pagetop/src/base/component.rs
View file

@ -88,6 +88,37 @@ impl ToString for BreakPoint {
// *************************************************************************************************
#[derive(SmartDefault)]
pub enum ButtonStyle {
#[default]
Default,
Info,
Success,
Warning,
Danger,
Light,
Dark,
Link,
}
#[rustfmt::skip]
impl ToString for ButtonStyle {
fn to_string(&self) -> String {
String::from(match self {
ButtonStyle::Default => "pt-button__default",
ButtonStyle::Info => "pt-button__info",
ButtonStyle::Success => "pt-button__success",
ButtonStyle::Warning => "pt-button__warning",
ButtonStyle::Danger => "pt-button__danger",
ButtonStyle::Light => "pt-button__light",
ButtonStyle::Dark => "pt-button__dark",
ButtonStyle::Link => "pt-button__link",
})
}
}
// *************************************************************************************************
#[derive(SmartDefault)]
pub enum FontSize {
ExtraLarge,
@ -144,7 +175,7 @@ mod paragraph;
pub use paragraph::Paragraph;
mod button;
pub use button::{Button, ButtonTarget, ButtonType};
pub use button::{Button, ButtonTarget};
mod image;
pub use image::{Image, ImageSize};

49
pagetop/src/base/component/button.rs
View file

@ -1,23 +1,6 @@
use crate::prelude::*;
use crate::BaseHandle;
#[derive(SmartDefault)]
pub enum ButtonType {
#[default]
Link,
Primary,
}
#[rustfmt::skip]
impl ToString for ButtonType {
fn to_string(&self) -> String {
String::from(match self {
ButtonType::Link => "link",
ButtonType::Primary => "primary",
})
}
}
#[derive(SmartDefault)]
pub enum ButtonTarget {
#[default]
@ -35,7 +18,7 @@ pub struct Button {
weight : Weight,
renderable : Renderable,
classes : OptionClasses,
button_type: ButtonType,
style : ButtonStyle,
font_size : FontSize,
left_icon : OptionComponent<Icon>,
right_icon : OptionComponent<Icon>,
@ -62,13 +45,7 @@ impl ComponentTrait for Button {
}
fn setup_before_prepare(&mut self, _cx: &mut Context) {
self.prepend_classes(
[
concat_string!("pt-button__", self.button_type().to_string()),
self.font_size().to_string(),
]
.join(" "),
);
self.prepend_classes([self.style().to_string(), self.font_size().to_string()].join(" "));
}
#[rustfmt::skip]
@ -96,18 +73,8 @@ impl ComponentTrait for Button {
}
impl Button {
pub fn link(href: impl Into<String>, html: L10n) -> Self {
Button::default()
.with_type(ButtonType::Link)
.with_href(href)
.with_html(html)
}
pub fn primary(href: impl Into<String>, html: L10n) -> Self {
Button::default()
.with_type(ButtonType::Primary)
.with_href(href)
.with_html(html)
pub fn anchor(href: impl Into<String>, html: L10n) -> Self {
Button::default().with_href(href).with_html(html)
}
// Button BUILDER.
@ -131,8 +98,8 @@ impl Button {
}
#[fn_builder]
pub fn alter_type(&mut self, button_type: ButtonType) -> &mut Self {
self.button_type = button_type;
pub fn alter_style(&mut self, style: ButtonStyle) -> &mut Self {
self.style = style;
self
}
@ -174,8 +141,8 @@ impl Button {
// Button GETTERS.
pub fn button_type(&self) -> &ButtonType {
&self.button_type
pub fn style(&self) -> &ButtonStyle {
&self.style
}
pub fn font_size(&self) -> &FontSize {

21
pagetop/src/base/component/form/action_button.rs
View file

@ -25,6 +25,7 @@ pub struct ActionButton {
renderable : Renderable,
classes : OptionClasses,
button_type: ActionButtonType,
style : ButtonStyle,
font_size : FontSize,
left_icon : OptionComponent<Icon>,
right_icon : OptionComponent<Icon>,
@ -48,13 +49,7 @@ impl ComponentTrait for ActionButton {
}
fn setup_before_prepare(&mut self, _cx: &mut Context) {
self.prepend_classes(
[
concat_string!("pt-button__", self.button_type().to_string()),
self.font_size().to_string(),
]
.join(" "),
);
self.prepend_classes([self.style().to_string(), self.font_size().to_string()].join(" "));
}
fn prepare_component(&self, cx: &mut Context) -> PrepareMarkup {
@ -81,6 +76,7 @@ impl ActionButton {
pub fn submit() -> Self {
ActionButton {
button_type: ActionButtonType::Submit,
style: ButtonStyle::Default,
value: OptionTranslated::new(L10n::l("button_submit")),
..Default::default()
}
@ -89,6 +85,7 @@ impl ActionButton {
pub fn reset() -> Self {
ActionButton {
button_type: ActionButtonType::Reset,
style: ButtonStyle::Info,
value: OptionTranslated::new(L10n::l("button_reset")),
..Default::default()
}
@ -108,6 +105,12 @@ impl ActionButton {
self
}
#[fn_builder]
pub fn alter_style(&mut self, style: ButtonStyle) -> &mut Self {
self.style = style;
self
}
#[fn_builder]
pub fn alter_font_size(&mut self, font_size: FontSize) -> &mut Self {
self.font_size = font_size;
@ -162,6 +165,10 @@ impl ActionButton {
&self.button_type
}
pub fn style(&self) -> &ButtonStyle {
&self.style
}
pub fn font_size(&self) -> &FontSize {
&self.font_size
}

1185
pagetop/static/base/css/buttons.css
View file

File diff suppressed because it is too large Load diff

10
pagetop/static/base/css/inception.css
View file

@ -8,7 +8,7 @@ body {
font-size: var(--pt-fs--base);
font-weight: var(--pt-fw--base);
line-height: var(--pt-lh--base);
color: var(--pt-color);
color: var(--pt-color--text);
background-color: var(--pt-color--bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
@ -62,14 +62,14 @@ p {
}
a {
color: var(--pt-color--primary);
color: var(--pt-color--default);
transition: color .15s ease-in-out;
}
a:hover {
color: var(--pt-color--primary-dark);
color: var(--pt-color--default-dark);
}
a:active {
color: var(--pt-color--primary-light);
color: var(--pt-color--default-light);
}
/* LAYOUT */
@ -95,7 +95,7 @@ a:active {
#footer__inner {
color: var(--pt-color--gray-65);
background: var(--pt-color--gray-20);
padding: var(--pt-gap-3) 0 var(--pt-gap-12);
padding: calc(3 * var(--pt-gap)) 0 calc(12 * var(--pt-gap));
}
#footer__inner a {
color: var(--pt-color--white);

6
pagetop/static/base/css/menu.css
View file

@ -37,7 +37,7 @@
.pt-menu__nav li > a {
position: relative;
font-weight: 500;
color: var(--pt-color);
color: var(--pt-color--text);
text-rendering: optimizeLegibility;
}
.pt-menu__nav li > a {
@ -135,7 +135,7 @@
height: 2px;
margin: 12.675% 0;
border-radius: var(--pt-border-radius);
background: var(--pt-color);
background: var(--pt-color--text);
}
.pt-menu__nav {
@ -234,7 +234,7 @@
min-width: var(--pt-menu--item-height);
height: var(--pt-menu--item-height);
line-height: var(--pt-menu--item-height);
color: var(--pt-color);
color: var(--pt-color--text);
cursor: pointer;
display: flex;
align-items: center;

73
pagetop/static/base/css/root.css
View file

@ -91,23 +91,51 @@
--pt-gap-0-75: calc(0.75 * var(--pt-gap));
--pt-gap-1-5: calc(1.5 * var(--pt-gap));
--pt-gap-2: calc(2 * var(--pt-gap));
--pt-gap-2-5: calc(2.5 * var(--pt-gap));
--pt-gap-3: calc(3 * var(--pt-gap));
--pt-gap-4: calc(4 * var(--pt-gap));
--pt-gap-5: calc(5 * var(--pt-gap));
--pt-gap-6: calc(6 * var(--pt-gap));
--pt-gap-7: calc(7 * var(--pt-gap));
--pt-gap-8: calc(8 * var(--pt-gap));
--pt-gap-9: calc(9 * var(--pt-gap));
--pt-gap-10: calc(10 * var(--pt-gap));
--pt-gap-11: calc(11 * var(--pt-gap));
--pt-gap-12: calc(12 * var(--pt-gap));
--pt-color--primary-hue: 216;
--pt-color--primary-sat: 98%;
--pt-color--primary-light: hsl(var(--pt-color--primary-hue), var(--pt-color--primary-sat), 60%);
--pt-color--primary-dark: hsl(var(--pt-color--primary-hue), var(--pt-color--primary-sat), 40%);
--pt-color--primary: hsl(var(--pt-color--primary-hue), var(--pt-color--primary-sat), 50%);
--pt-color--default-hue: 216;
--pt-color--default-sat: 60%;
--pt-color--default-light: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 60%);
--pt-color--default-dark: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 40%);
--pt-color--default: hsl(var(--pt-color--default-hue), var(--pt-color--default-sat), 50%);
--pt-color--info-hue: 190;
--pt-color--info-sat: 90%;
--pt-color--info-light: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 60%);
--pt-color--info-dark: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 40%);
--pt-color--info: hsl(var(--pt-color--info-hue), var(--pt-color--info-sat), 50%);
--pt-color--success-hue: 150;
--pt-color--success-sat: 50%;
--pt-color--success-light: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 60%);
--pt-color--success-dark: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 40%);
--pt-color--success: hsl(var(--pt-color--success-hue), var(--pt-color--success-sat), 50%);
--pt-color--warning-hue: 44;
--pt-color--warning-sat: 100%;
--pt-color--warning-light: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 60%);
--pt-color--warning-dark: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 48%);
--pt-color--warning: hsl(var(--pt-color--warning-hue), var(--pt-color--warning-sat), 50%);
--pt-color--danger-hue: 348;
--pt-color--danger-sat: 86%;
--pt-color--danger-light: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 60%);
--pt-color--danger-dark: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 40%);
--pt-color--danger: hsl(var(--pt-color--danger-hue), var(--pt-color--danger-sat), 50%);
--pt-color--light-hue: 0;
--pt-color--light-sat: 0%;
--pt-color--light-light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 98%);
--pt-color--light-dark: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 92%);
--pt-color--light: hsl(var(--pt-color--light-hue), var(--pt-color--light-sat), 96%);
--pt-color--dark-hue: 0;
--pt-color--dark-sat: 0%;
--pt-color--dark-light: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 40%);
--pt-color--dark-dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 8%);
--pt-color--dark: hsl(var(--pt-color--dark-hue), var(--pt-color--dark-sat), 25%);
--pt-color--gray-hue: 201;
--pt-color--gray-sat: 15%;
@ -122,9 +150,12 @@
--pt-color--gray-95: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 93%);
--pt-color--gray-100: hsl(var(--pt-color--gray-hue), var(--pt-color--gray-sat), 97%);
--pt-color--white: #fff;
--pt-color--bg: #fafafa;
--pt-color: #212529;
--pt-color--text: #212529;
--pt-color--white: #fff;
/*
@ -132,8 +163,8 @@
--color-text-neutral-soft: var(--color--gray-45);
--color-text-neutral-medium: var(--color--gray-20);
--color-text-neutral-loud: var(--color--gray-5);
--color-text-primary-medium: var(--pt-color--primary-40);
--color-text-primary-loud: var(--pt-color--primary-30);
--color-text-primary-medium: var(--pt-color--default-40);
--color-text-primary-loud: var(--pt-color--default-30);
--color--black: #000;
*/
/*
@ -146,7 +177,7 @@
--pt-border-radius: 0.375rem;
/* Menu component */
--pt-menu--color-bg: var(--pt-color--gray-100);
--pt-menu--color-bg: var(--pt-color--bg);
--pt-menu--color-highlight: #e91e63;
--pt-menu--color-border: rgba(0, 0, 0, 0.1);
--pt-menu--color-shadow: rgba(0, 0, 0, 0.06);