diff --git a/examples/clipping.rs b/examples/clipping.rs
index e5abfc62b9ce37a6c3f2d4ae78dc497cee2f59a1..0b0767978f6896cf9345c9355b2d5f25aae53bcf 100644
--- a/examples/clipping.rs
+++ b/examples/clipping.rs
@@ -32,10 +32,7 @@ fn startup(
right: StyleProp::Value(Units::Stretch(1.0)),
top: StyleProp::Value(Units::Stretch(1.0)),
bottom: StyleProp::Value(Units::Stretch(1.0)),
- padding_left: StyleProp::Value(Units::Pixels(25.0)),
- padding_right: StyleProp::Value(Units::Pixels(25.0)),
- padding_top: StyleProp::Value(Units::Pixels(25.0)),
- padding_bottom: StyleProp::Value(Units::Pixels(25.0)),
+ padding: StyleProp::Value(Edge::all(Units::Pixels(25.0))),
..Style::default()
};
diff --git a/examples/full_ui.rs b/examples/full_ui.rs
index 672102354d34cd5654d8f5f23f35f156ac4f1314..c4c1cc4883aa97d8063b8228a1693048ea259d2b 100644
--- a/examples/full_ui.rs
+++ b/examples/full_ui.rs
@@ -51,10 +51,7 @@ fn BlueButton(props: BlueButtonProps) {
let button_styles = Style {
width: StyleProp::Value(Units::Pixels(200.0)),
height: StyleProp::Value(Units::Pixels(50.0)),
- padding_left: StyleProp::Value(Units::Stretch(1.0)),
- padding_right: StyleProp::Value(Units::Stretch(1.0)),
- padding_top: StyleProp::Value(Units::Stretch(1.0)),
- padding_bottom: StyleProp::Value(Units::Stretch(1.0)),
+ padding: StyleProp::Value(Edge::all(Units::Stretch(1.0))),
..props.styles.clone().unwrap_or_default()
};
@@ -106,10 +103,7 @@ fn startup(
right: StyleProp::Value(Units::Stretch(1.0)),
top: StyleProp::Value(Units::Stretch(1.0)),
bottom: StyleProp::Value(Units::Stretch(1.0)),
- padding_left: StyleProp::Value(Units::Stretch(1.0)),
- padding_right: StyleProp::Value(Units::Stretch(1.0)),
- padding_top: StyleProp::Value(Units::Stretch(1.0)),
- padding_bottom: StyleProp::Value(Units::Stretch(1.0)),
+ padding: StyleProp::Value(Edge::all(Units::Stretch(1.0))),
..Style::default()
};
diff --git a/examples/provider.rs b/examples/provider.rs
index 6bbc0e7aaa13b7643c35190f1e634ae06691c2d7..42258dbdafd4fce8da2b02c00f32a799834a5e51 100644
--- a/examples/provider.rs
+++ b/examples/provider.rs
@@ -18,7 +18,7 @@ use kayak_ui::{
bevy::{BevyContext, BevyKayakUIPlugin, FontMapping, UICameraBundle},
core::{
render, rsx,
- styles::{LayoutType, Style, StyleProp, Units},
+ styles::{Edge, LayoutType, Style, StyleProp, Units},
widget, Bound, Color, EventType, Index, MutableBound, OnEvent, WidgetProps,
},
widgets::{App, Background, Element, If, Text, TooltipConsumer, TooltipProvider, Window},
@@ -219,10 +219,7 @@ fn ThemeDemo(props: ThemeDemoProps) {
top: StyleProp::Value(Units::Pixels(5.0)),
left: StyleProp::Value(Units::Stretch(1.0)),
right: StyleProp::Value(Units::Stretch(1.0)),
- padding_bottom: StyleProp::Value(Units::Stretch(1.0)),
- padding_left: StyleProp::Value(Units::Stretch(1.0)),
- padding_right: StyleProp::Value(Units::Stretch(1.0)),
- padding_top: StyleProp::Value(Units::Stretch(1.0)),
+ padding: StyleProp::Value(Edge::all(Units::Stretch(1.0))),
..Default::default()
};
diff --git a/examples/tabs/tab.rs b/examples/tabs/tab.rs
index 428c55aa6e4ce1ce3f0d314c35dc3edf342301d8..1e0eed45910ced9fd3283df4611b54bb602ac850 100644
--- a/examples/tabs/tab.rs
+++ b/examples/tabs/tab.rs
@@ -2,7 +2,7 @@ use kayak_ui::{
core::{
render_command::RenderCommand,
rsx,
- styles::{LayoutType, Style, StyleProp, Units},
+ styles::{Edge, LayoutType, Style, StyleProp, Units},
use_state, widget, Bound, EventType, OnEvent, WidgetProps,
},
widgets::{Background, Text},
@@ -86,10 +86,7 @@ pub fn Tab(props: TabProps) {
} else {
StyleProp::Value(tab_color)
},
- padding_left: StyleProp::Value(border_width),
- padding_right: StyleProp::Value(border_width),
- padding_top: StyleProp::Value(border_width),
- padding_bottom: StyleProp::Value(border_width),
+ padding: StyleProp::Value(Edge::all(border_width)),
layout_type: StyleProp::Value(LayoutType::Row),
..Default::default()
};
diff --git a/examples/todo/card.rs b/examples/todo/card.rs
index 790a2d8ea1ca2a20178126404ef69edfc465c005..4b1bca6aa5234adfa6e77be7f43f28556abd4754 100644
--- a/examples/todo/card.rs
+++ b/examples/todo/card.rs
@@ -27,10 +27,7 @@ pub fn Card(props: CardProps) {
height: StyleProp::Value(Units::Auto),
min_height: StyleProp::Value(Units::Pixels(26.0)),
top: StyleProp::Value(Units::Pixels(10.0)),
- padding_left: StyleProp::Value(Units::Pixels(5.0)),
- padding_right: StyleProp::Value(Units::Pixels(5.0)),
- padding_top: StyleProp::Value(Units::Pixels(5.0)),
- padding_bottom: StyleProp::Value(Units::Pixels(5.0)),
+ padding: StyleProp::Value(Edge::all(Units::Pixels(5.0))),
..Style::default()
};
diff --git a/examples/world_interaction.rs b/examples/world_interaction.rs
index d1d3992ba870172ff4c5076ae4b3fa1b9f64570b..52a7bf6082c6943b9d9be01123024647361bf993 100644
--- a/examples/world_interaction.rs
+++ b/examples/world_interaction.rs
@@ -19,7 +19,7 @@ use kayak_ui::{
bevy::{BevyContext, BevyKayakUIPlugin, FontMapping, UICameraBundle},
core::{
render, rsx,
- styles::{Style, StyleProp, Units},
+ styles::{Edge, Style, StyleProp, Units},
use_state, widget, EventType, Index, OnEvent,
},
widgets::{App, Button, Text, Window},
@@ -80,10 +80,7 @@ fn ControlPanel() {
right: StyleProp::Value(Units::Stretch(1.0)),
top: StyleProp::Value(Units::Pixels(16.0)),
bottom: StyleProp::Value(Units::Pixels(8.0)),
- padding_top: StyleProp::Value(Units::Pixels(8.0)),
- padding_bottom: StyleProp::Value(Units::Pixels(8.0)),
- padding_left: StyleProp::Value(Units::Pixels(48.0)),
- padding_right: StyleProp::Value(Units::Pixels(48.0)),
+ padding: StyleProp::Value(Edge::axis(Units::Pixels(8.0), Units::Pixels(48.0))),
..Default::default()
};
diff --git a/kayak_core/src/node.rs b/kayak_core/src/node.rs
index 16d13666e7f9e3087eb8ca44d2ddbf4c9ee7f886..4fc62fe3aff92a267412410ff5631381ae82bf00 100644
--- a/kayak_core/src/node.rs
+++ b/kayak_core/src/node.rs
@@ -259,7 +259,11 @@ impl<'a> morphorm::Node<'a> for Index {
if let Some(node) = store.get(*self) {
if let Some(node) = node {
return match node.resolved_styles.padding_left {
- StyleProp::Default => Some(morphorm::Units::Auto),
+ StyleProp::Default => match node.resolved_styles.padding {
+ StyleProp::Default => Some(morphorm::Units::Auto),
+ StyleProp::Value(prop) => Some(prop.left),
+ _ => Some(morphorm::Units::Auto),
+ },
StyleProp::Value(prop) => Some(prop),
_ => Some(morphorm::Units::Auto),
};
@@ -272,7 +276,11 @@ impl<'a> morphorm::Node<'a> for Index {
if let Some(node) = store.get(*self) {
if let Some(node) = node {
return match node.resolved_styles.padding_right {
- StyleProp::Default => Some(morphorm::Units::Auto),
+ StyleProp::Default => match node.resolved_styles.padding {
+ StyleProp::Default => Some(morphorm::Units::Auto),
+ StyleProp::Value(prop) => Some(prop.right),
+ _ => Some(morphorm::Units::Auto),
+ },
StyleProp::Value(prop) => Some(prop),
_ => Some(morphorm::Units::Auto),
};
@@ -285,7 +293,11 @@ impl<'a> morphorm::Node<'a> for Index {
if let Some(node) = store.get(*self) {
if let Some(node) = node {
return match node.resolved_styles.padding_top {
- StyleProp::Default => Some(morphorm::Units::Auto),
+ StyleProp::Default => match node.resolved_styles.padding {
+ StyleProp::Default => Some(morphorm::Units::Auto),
+ StyleProp::Value(prop) => Some(prop.top),
+ _ => Some(morphorm::Units::Auto),
+ },
StyleProp::Value(prop) => Some(prop),
_ => Some(morphorm::Units::Auto),
};
@@ -298,7 +310,11 @@ impl<'a> morphorm::Node<'a> for Index {
if let Some(node) = store.get(*self) {
if let Some(node) = node {
return match node.resolved_styles.padding_bottom {
- StyleProp::Default => Some(morphorm::Units::Auto),
+ StyleProp::Default => match node.resolved_styles.padding {
+ StyleProp::Default => Some(morphorm::Units::Auto),
+ StyleProp::Value(prop) => Some(prop.bottom),
+ _ => Some(morphorm::Units::Auto),
+ },
StyleProp::Value(prop) => Some(prop),
_ => Some(morphorm::Units::Auto),
};
diff --git a/kayak_core/src/styles/mod.rs b/kayak_core/src/styles/mod.rs
index e12944e98e8605a9938b0b59356a613a27c4b1f6..f7246ad280146d9eb4914bd0023bbf4d56ed905f 100644
--- a/kayak_core/src/styles/mod.rs
+++ b/kayak_core/src/styles/mod.rs
@@ -157,6 +157,15 @@ define_styles! {
pub max_width: StyleProp<Units>,
pub min_height: StyleProp<Units>,
pub min_width: StyleProp<Units>,
+ /// The inner padding between the edges of this widget and its children
+ ///
+ /// This property has lower precedence than its more specific counterparts
+ /// (`padding_top`, `padding_right`, `padding_bottom`, and `padding_left`), allowing it
+ /// to be overridden.
+ ///
+ /// A child with their own padding properties set to anything other than `Units::Auto` will
+ /// override the padding set by this widget.
+ pub padding: StyleProp<Edge<Units>>,
pub padding_bottom: StyleProp<Units>,
pub padding_left: StyleProp<Units>,
pub padding_right: StyleProp<Units>,
@@ -194,6 +203,7 @@ impl Style {
max_width: StyleProp::Default,
min_height: StyleProp::Default,
min_width: StyleProp::Default,
+ padding: StyleProp::Default,
padding_bottom: StyleProp::Default,
padding_left: StyleProp::Default,
padding_right: StyleProp::Default,
diff --git a/src/widgets/window.rs b/src/widgets/window.rs
index bfcab4fa59ee912f95059b4d89401d2a44c772fb..cbc6b791e6aa6f65c9889ecd9c667370ed6e6e3f 100644
--- a/src/widgets/window.rs
+++ b/src/widgets/window.rs
@@ -78,10 +78,7 @@ pub fn Window(props: WindowProps) {
});
let clip_styles = Style {
- padding_left: StyleProp::Value(Units::Pixels(5.0)),
- padding_right: StyleProp::Value(Units::Pixels(5.0)),
- padding_top: StyleProp::Value(Units::Pixels(5.0)),
- padding_bottom: StyleProp::Value(Units::Pixels(5.0)),
+ padding: StyleProp::Value(Edge::all(Units::Pixels(5.0))),
width: StyleProp::Value(Units::Stretch(1.0)),
height: StyleProp::Value(Units::Stretch(1.0)),
max_width: StyleProp::Value(Units::Pixels(size.0)),
@@ -120,10 +117,7 @@ pub fn Window(props: WindowProps) {
};
let content_styles = Style {
- padding_left: StyleProp::Value(Units::Pixels(10.0)),
- padding_right: StyleProp::Value(Units::Pixels(10.0)),
- padding_top: StyleProp::Value(Units::Pixels(10.0)),
- padding_bottom: StyleProp::Value(Units::Pixels(10.0)),
+ padding: StyleProp::Value(Edge::all(Units::Pixels(10.0))),
..Style::default()
};