From b1c6ab8b7dc3157080dacbc708f690ddb3c1519e Mon Sep 17 00:00:00 2001 From: JMARyA Date: Wed, 15 Jan 2025 19:20:46 +0100 Subject: [PATCH] add padding + margin --- examples/ui.rs | 2 +- src/ui/components/appbar.rs | 4 +- src/ui/mod.rs | 1 + src/ui/primitives/margin.rs | 150 +++++++++++++++++++++++++++++++++++ src/ui/primitives/mod.rs | 1 + src/ui/primitives/padding.rs | 93 +++++++++++++++++----- src/ui/wrapper/hover.rs | 1 - 7 files changed, 230 insertions(+), 22 deletions(-) create mode 100644 src/ui/primitives/margin.rs diff --git a/examples/ui.rs b/examples/ui.rs index f38c67f..8353b95 100644 --- a/examples/ui.rs +++ b/examples/ui.rs @@ -15,7 +15,7 @@ pub async fn index_page(ctx: RequestContext) -> StringResponse { h1 { "Hello World!" }; (Hover( - Padding(Text("").color(Gray::_400)).x(10), + Padding(Text("").color(&Gray::_400)).x(ScreenValue::_10), Link("/test", Text("Hello")).hx_get("/test").hx_get("/test").hx_trigger( Event::on_load().delay("2s") .and(Event::on_revealed()) diff --git a/src/ui/components/appbar.rs b/src/ui/components/appbar.rs index 6a9a47c..d949fa7 100644 --- a/src/ui/components/appbar.rs +++ b/src/ui/components/appbar.rs @@ -69,10 +69,10 @@ impl UIWidget for AppBarWidget { .justify(Justify::Between) .items_center(), ) - .x(6), + .x(ScreenValue::_6), ), ))) - .y(2) + .y(ScreenValue::_2) .render() } } diff --git a/src/ui/mod.rs b/src/ui/mod.rs index c088430..f3f527b 100644 --- a/src/ui/mod.rs +++ b/src/ui/mod.rs @@ -26,6 +26,7 @@ pub mod prelude { pub use super::primitives::header::Header; pub use super::primitives::image::Image; pub use super::primitives::link::Link; + pub use super::primitives::margin::Margin; pub use super::primitives::padding::Padding; pub use super::primitives::rounded::Rounded; pub use super::primitives::script; diff --git a/src/ui/primitives/margin.rs b/src/ui/primitives/margin.rs new file mode 100644 index 0000000..c673aaf --- /dev/null +++ b/src/ui/primitives/margin.rs @@ -0,0 +1,150 @@ +use super::space::ScreenValue; +use crate::ui::UIWidget; +use maud::{Markup, Render, html}; + +#[allow(non_snake_case)] +pub fn Margin(inner: T) -> Margin { + Margin { + inner: Box::new(inner), + all: None, + x: None, + y: None, + start: None, + end: None, + top: None, + right: None, + bottom: None, + left: None, + } +} + +pub struct Margin { + pub inner: Box, + pub all: Option, + pub x: Option, + pub y: Option, + pub start: Option, + pub end: Option, + pub top: Option, + pub right: Option, + pub bottom: Option, + pub left: Option, +} + +impl Margin { + #[must_use] + pub const fn all(mut self, all: ScreenValue) -> Self { + self.all = Some(all); + self + } + + #[must_use] + pub const fn top(mut self, top: ScreenValue) -> Self { + self.top = Some(top); + self + } + + #[must_use] + pub const fn right(mut self, right: ScreenValue) -> Self { + self.right = Some(right); + self + } + + #[must_use] + pub const fn bottom(mut self, bottom: ScreenValue) -> Self { + self.bottom = Some(bottom); + self + } + + #[must_use] + pub const fn left(mut self, left: ScreenValue) -> Self { + self.left = Some(left); + self + } + + #[must_use] + pub const fn y(mut self, y: ScreenValue) -> Self { + self.y = Some(y); + self + } + + #[must_use] + pub const fn x(mut self, x: ScreenValue) -> Self { + self.x = Some(x); + self + } +} + +impl Render for Margin { + fn render(&self) -> Markup { + self.render_with_class("") + } +} + +impl UIWidget for Margin { + fn can_inherit(&self) -> bool { + true + } + + fn base_class(&self) -> Vec { + let mut our_class = Vec::new(); + + if let Some(all) = &self.all { + our_class.push(format!("m-{}", all.to_value())); + } + + if let Some(x) = &self.x { + our_class.push(format!("mx-{}", x.to_value())); + } + + if let Some(y) = &self.y { + our_class.push(format!("my-{}", y.to_value())); + } + + if let Some(start) = &self.start { + our_class.push(format!("ms-{}", start.to_value())); + } + + if let Some(end) = &self.end { + our_class.push(format!("me-{}", end.to_value())); + } + + if let Some(top) = &self.top { + our_class.push(format!("mt-{}", top.to_value())); + } + + if let Some(right) = &self.right { + our_class.push(format!("mr-{}", right.to_value())); + } + + if let Some(bottom) = &self.bottom { + our_class.push(format!("mb-{}", bottom.to_value())); + } + + if let Some(left) = &self.left { + our_class.push(format!("ml-{}", left.to_value())); + } + + our_class + } + + fn extended_class(&self) -> Vec { + let mut c = self.base_class(); + c.extend_from_slice(&self.inner.extended_class()); + c + } + + fn render_with_class(&self, class: &str) -> Markup { + if self.inner.as_ref().can_inherit() { + self.inner + .as_ref() + .render_with_class(&format!("{} {class}", self.base_class().join(" "))) + } else { + html! { + div class=(format!("{} {class}", self.base_class().join(" "))) { + (self.inner.as_ref()) + } + } + } + } +} diff --git a/src/ui/primitives/mod.rs b/src/ui/primitives/mod.rs index 68d7dcf..4dee1f8 100644 --- a/src/ui/primitives/mod.rs +++ b/src/ui/primitives/mod.rs @@ -9,6 +9,7 @@ pub mod header; pub mod image; pub mod input; pub mod link; +pub mod margin; pub mod padding; pub mod rounded; pub mod shadow; diff --git a/src/ui/primitives/padding.rs b/src/ui/primitives/padding.rs index 963aa40..e80233b 100644 --- a/src/ui/primitives/padding.rs +++ b/src/ui/primitives/padding.rs @@ -1,42 +1,75 @@ +use super::space::ScreenValue; use crate::ui::UIWidget; use maud::{Markup, Render, html}; -pub struct PaddingInfo { - pub right: Option, -} - #[allow(non_snake_case)] pub fn Padding(inner: T) -> PaddingWidget { PaddingWidget { inner: Box::new(inner), - right: None, - y: None, + all: None, x: None, + y: None, + start: None, + end: None, + top: None, + right: None, + bottom: None, + left: None, } } pub struct PaddingWidget { pub inner: Box, - pub right: Option, - pub y: Option, - pub x: Option, + pub all: Option, + pub x: Option, + pub y: Option, + pub start: Option, + pub end: Option, + pub top: Option, + pub right: Option, + pub bottom: Option, + pub left: Option, } impl PaddingWidget { #[must_use] - pub const fn right(mut self, right: u32) -> Self { + pub const fn all(mut self, all: ScreenValue) -> Self { + self.all = Some(all); + self + } + + #[must_use] + pub const fn top(mut self, top: ScreenValue) -> Self { + self.top = Some(top); + self + } + + #[must_use] + pub const fn right(mut self, right: ScreenValue) -> Self { self.right = Some(right); self } #[must_use] - pub const fn y(mut self, y: u32) -> Self { + pub const fn bottom(mut self, bottom: ScreenValue) -> Self { + self.bottom = Some(bottom); + self + } + + #[must_use] + pub const fn left(mut self, left: ScreenValue) -> Self { + self.left = Some(left); + self + } + + #[must_use] + pub const fn y(mut self, y: ScreenValue) -> Self { self.y = Some(y); self } #[must_use] - pub const fn x(mut self, x: u32) -> Self { + pub const fn x(mut self, x: ScreenValue) -> Self { self.x = Some(x); self } @@ -56,16 +89,40 @@ impl UIWidget for PaddingWidget { fn base_class(&self) -> Vec { let mut our_class = Vec::new(); - if let Some(r) = self.right { - our_class.push(format!("pr-{r}")); + if let Some(all) = &self.all { + our_class.push(format!("p-{}", all.to_value())); } - if let Some(y) = self.y { - our_class.push(format!("py-{y}")); + if let Some(x) = &self.x { + our_class.push(format!("px-{}", x.to_value())); } - if let Some(x) = self.x { - our_class.push(format!("px-{x}")); + if let Some(y) = &self.y { + our_class.push(format!("py-{}", y.to_value())); + } + + if let Some(start) = &self.start { + our_class.push(format!("ps-{}", start.to_value())); + } + + if let Some(end) = &self.end { + our_class.push(format!("pe-{}", end.to_value())); + } + + if let Some(top) = &self.top { + our_class.push(format!("pt-{}", top.to_value())); + } + + if let Some(right) = &self.right { + our_class.push(format!("pr-{}", right.to_value())); + } + + if let Some(bottom) = &self.bottom { + our_class.push(format!("pb-{}", bottom.to_value())); + } + + if let Some(left) = &self.left { + our_class.push(format!("pl-{}", left.to_value())); } our_class diff --git a/src/ui/wrapper/hover.rs b/src/ui/wrapper/hover.rs index c491be8..2b599a2 100644 --- a/src/ui/wrapper/hover.rs +++ b/src/ui/wrapper/hover.rs @@ -41,7 +41,6 @@ impl UIWidget for HoverWrapper { } fn render_with_class(&self, class: &str) -> Markup { - // TODO : Replace lol if self.0.as_ref().can_inherit() { self.0 .as_ref()