add padding + margin

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())

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()
     }
 }

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;

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<T: UIWidget + 'static>(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<dyn UIWidget>,
+    pub all: Option<ScreenValue>,
+    pub x: Option<ScreenValue>,
+    pub y: Option<ScreenValue>,
+    pub start: Option<ScreenValue>,
+    pub end: Option<ScreenValue>,
+    pub top: Option<ScreenValue>,
+    pub right: Option<ScreenValue>,
+    pub bottom: Option<ScreenValue>,
+    pub left: Option<ScreenValue>,
+}
+
+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<String> {
+        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<String> {
+        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())
+                }
+            }
+        }
+    }
+}

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;

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<u32>,
-}
-
 #[allow(non_snake_case)]
 pub fn Padding<T: UIWidget + 'static>(inner: T) -> PaddingWidget {
     PaddingWidget {
         inner: Box::new(inner),
-        right: None,
+        all: None,
-        y: None,
         x: None,
+        y: None,
+        start: None,
+        end: None,
+        top: None,
+        right: None,
+        bottom: None,
+        left: None,
     }
 }
 
 pub struct PaddingWidget {
     pub inner: Box<dyn UIWidget>,
-    pub right: Option<u32>,
+    pub all: Option<ScreenValue>,
-    pub y: Option<u32>,
+    pub x: Option<ScreenValue>,
-    pub x: Option<u32>,
+    pub y: Option<ScreenValue>,
+    pub start: Option<ScreenValue>,
+    pub end: Option<ScreenValue>,
+    pub top: Option<ScreenValue>,
+    pub right: Option<ScreenValue>,
+    pub bottom: Option<ScreenValue>,
+    pub left: Option<ScreenValue>,
 }
 
 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<String> {
         let mut our_class = Vec::new();
 
-        if let Some(r) = self.right {
+        if let Some(all) = &self.all {
-            our_class.push(format!("pr-{r}"));
+            our_class.push(format!("p-{}", all.to_value()));
         }
 
-        if let Some(y) = self.y {
+        if let Some(x) = &self.x {
-            our_class.push(format!("py-{y}"));
+            our_class.push(format!("px-{}", x.to_value()));
         }
 
-        if let Some(x) = self.x {
+        if let Some(y) = &self.y {
-            our_class.push(format!("px-{x}"));
+            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

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()