From 91ef50fa7738236e79b2220333f6e520a79b87fc Mon Sep 17 00:00:00 2001
From: MrGVSV <gino.valente.code@gmail.com>
Date: Fri, 11 Feb 2022 17:06:58 -0800
Subject: [PATCH] Added padding style property
---
examples/clipping.rs | 5 +----
examples/full_ui.rs | 10 ++--------
examples/provider.rs | 7 ++-----
examples/tabs/tab.rs | 7 ++-----
examples/todo/card.rs | 5 +----
examples/world_interaction.rs | 7 ++-----
kayak_core/src/node.rs | 24 ++++++++++++++++++++----
kayak_core/src/styles/mod.rs | 10 ++++++++++
src/widgets/window.rs | 10 ++--------
9 files changed, 42 insertions(+), 43 deletions(-)
diff --git a/examples/clipping.rs b/examples/clipping.rs
index e5abfc6..0b07679 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 6721023..c4c1cc4 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 6bbc0e7..42258db 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 428c55a..1e0eed4 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 790a2d8..4b1bca6 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 d1d3992..52a7bf6 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 16d1366..4fc62fe 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 e12944e..f7246ad 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 bfcab4f..cbc6b79 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()
};
--
GitLab