mirror of
https://github.com/bevyengine/bevy
synced 2024-11-22 12:43:34 +00:00
Flatten UI Style properties that use Size + remove Size (#8548)
# Objective - Simplify API and make authoring styles easier See: https://github.com/bevyengine/bevy/issues/8540#issuecomment-1536177102 ## Solution - The `size`, `min_size`, `max_size`, and `gap` properties have been replaced by `width`, `height`, `min_width`, `min_height`, `max_width`, `max_height`, `row_gap`, and `column_gap` properties --- ## Changelog - Flattened `Style` properties that have a `Size` value directly into `Style` ## Migration Guide - The `size`, `min_size`, `max_size`, and `gap` properties have been replaced by the `width`, `height`, `min_width`, `min_height`, `max_width`, `max_height`, `row_gap`, and `column_gap` properties. Use the new properties instead. --------- Co-authored-by: ickshonpe <david.curthoys@googlemail.com>
This commit is contained in:
Nico Burns
GitHub
parent
17f045e2a0
commit
08bf1a6c2e
25 changed files with 199 additions and 384 deletions
|
|
@ -1,6 +1,5 @@
|
|||
use crate::Val;
|
||||
use bevy_reflect::{FromReflect, Reflect, ReflectFromReflect};
|
||||
use std::ops::{Div, DivAssign, Mul, MulAssign};
|
||||
|
||||
/// A type which is commonly used to define margins, paddings and borders.
|
||||
///
|
||||
|
|
@ -282,152 +281,6 @@ impl Default for UiRect {
|
|||
}
|
||||
}
|
||||
|
||||
/// A 2-dimensional area defined by a width and height.
|
||||
///
|
||||
/// It is commonly used to define the size of a text or UI element.
|
||||
#[derive(Copy, Clone, PartialEq, Debug, Reflect, FromReflect)]
|
||||
#[reflect(FromReflect, PartialEq)]
|
||||
pub struct Size {
|
||||
/// The width of the 2-dimensional area.
|
||||
pub width: Val,
|
||||
/// The height of the 2-dimensional area.
|
||||
pub height: Val,
|
||||
}
|
||||
|
||||
impl Size {
|
||||
pub const DEFAULT: Self = Self::AUTO;
|
||||
|
||||
/// Creates a new [`Size`] from a width and a height.
|
||||
///
|
||||
/// # Example
|
||||
///
|
||||
/// ```
|
||||
/// # use bevy_ui::{Size, Val};
|
||||
/// #
|
||||
/// let size = Size::new(Val::Px(100.0), Val::Px(200.0));
|
||||
///
|
||||
/// assert_eq!(size.width, Val::Px(100.0));
|
||||
/// assert_eq!(size.height, Val::Px(200.0));
|
||||
/// ```
|
||||
pub const fn new(width: Val, height: Val) -> Self {
|
||||
Size { width, height }
|
||||
}
|
||||
|
||||
/// Creates a new [`Size`] where both sides take the given value.
|
||||
///
|
||||
/// # Example
|
||||
///
|
||||
/// ```
|
||||
/// # use bevy_ui::{Size, Val};
|
||||
/// #
|
||||
/// let size = Size::all(Val::Px(10.));
|
||||
///
|
||||
/// assert_eq!(size.width, Val::Px(10.0));
|
||||
/// assert_eq!(size.height, Val::Px(10.0));
|
||||
/// ```
|
||||
pub const fn all(value: Val) -> Self {
|
||||
Self {
|
||||
width: value,
|
||||
height: value,
|
||||
}
|
||||
}
|
||||
|
||||
/// Creates a new [`Size`] where `width` takes the given value,
|
||||
/// and `height` is set to [`Val::Auto`].
|
||||
|
||||
///
|
||||
/// # Example
|
||||
///
|
||||
/// ```
|
||||
/// # use bevy_ui::{Size, Val};
|
||||
/// #
|
||||
/// let size = Size::width(Val::Px(10.));
|
||||
///
|
||||
/// assert_eq!(size.width, Val::Px(10.0));
|
||||
/// assert_eq!(size.height, Val::Auto);
|
||||
/// ```
|
||||
pub const fn width(width: Val) -> Self {
|
||||
Self {
|
||||
width,
|
||||
height: Val::Auto,
|
||||
}
|
||||
}
|
||||
|
||||
/// Creates a new [`Size`] where `height` takes the given value,
|
||||
/// and `width` is set to [`Val::Auto`].
|
||||
///
|
||||
/// # Example
|
||||
///
|
||||
/// ```
|
||||
/// # use bevy_ui::{Size, Val};
|
||||
/// #
|
||||
/// let size = Size::height(Val::Px(10.));
|
||||
///
|
||||
/// assert_eq!(size.width, Val::Auto);
|
||||
/// assert_eq!(size.height, Val::Px(10.));
|
||||
/// ```
|
||||
pub const fn height(height: Val) -> Self {
|
||||
Self {
|
||||
width: Val::Auto,
|
||||
height,
|
||||
}
|
||||
}
|
||||
|
||||
/// Creates a Size where both values are [`Val::Auto`].
|
||||
pub const AUTO: Self = Self::all(Val::Auto);
|
||||
}
|
||||
|
||||
impl Default for Size {
|
||||
fn default() -> Self {
|
||||
Self::DEFAULT
|
||||
}
|
||||
}
|
||||
|
||||
impl From<(Val, Val)> for Size {
|
||||
fn from(vals: (Val, Val)) -> Self {
|
||||
Self {
|
||||
width: vals.0,
|
||||
height: vals.1,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl Mul<f32> for Size {
|
||||
type Output = Size;
|
||||
|
||||
fn mul(self, rhs: f32) -> Self::Output {
|
||||
Self::Output {
|
||||
width: self.width * rhs,
|
||||
height: self.height * rhs,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl MulAssign<f32> for Size {
|
||||
fn mul_assign(&mut self, rhs: f32) {
|
||||
self.width *= rhs;
|
||||
self.height *= rhs;
|
||||
}
|
||||
}
|
||||
|
||||
impl Div<f32> for Size {
|
||||
type Output = Size;
|
||||
|
||||
fn div(self, rhs: f32) -> Self::Output {
|
||||
Self::Output {
|
||||
width: self.width / rhs,
|
||||
height: self.height / rhs,
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
impl DivAssign<f32> for Size {
|
||||
fn div_assign(&mut self, rhs: f32) {
|
||||
self.width /= rhs;
|
||||
self.height /= rhs;
|
||||
}
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::*;
|
||||
|
|
@ -446,91 +299,6 @@ mod tests {
|
|||
assert_eq!(UiRect::default(), UiRect::DEFAULT);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_size_from() {
|
||||
let size: Size = (Val::Px(20.), Val::Px(30.)).into();
|
||||
|
||||
assert_eq!(
|
||||
size,
|
||||
Size {
|
||||
width: Val::Px(20.),
|
||||
height: Val::Px(30.),
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_size_mul() {
|
||||
assert_eq!(Size::all(Val::Px(10.)) * 2., Size::all(Val::Px(20.)));
|
||||
|
||||
let mut size = Size::all(Val::Px(10.));
|
||||
size *= 2.;
|
||||
assert_eq!(size, Size::all(Val::Px(20.)));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_size_div() {
|
||||
assert_eq!(
|
||||
Size::new(Val::Px(20.), Val::Px(20.)) / 2.,
|
||||
Size::new(Val::Px(10.), Val::Px(10.))
|
||||
);
|
||||
|
||||
let mut size = Size::new(Val::Px(20.), Val::Px(20.));
|
||||
size /= 2.;
|
||||
assert_eq!(size, Size::new(Val::Px(10.), Val::Px(10.)));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_size_all() {
|
||||
let length = Val::Px(10.);
|
||||
|
||||
assert_eq!(
|
||||
Size::all(length),
|
||||
Size {
|
||||
width: length,
|
||||
height: length
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_size_width() {
|
||||
let width = Val::Px(10.);
|
||||
|
||||
assert_eq!(
|
||||
Size::width(width),
|
||||
Size {
|
||||
width,
|
||||
..Default::default()
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_size_height() {
|
||||
let height = Val::Px(7.);
|
||||
|
||||
assert_eq!(
|
||||
Size::height(height),
|
||||
Size {
|
||||
height,
|
||||
..Default::default()
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn size_default_equals_const_default() {
|
||||
assert_eq!(
|
||||
Size::default(),
|
||||
Size {
|
||||
width: Val::Auto,
|
||||
height: Val::Auto
|
||||
}
|
||||
);
|
||||
assert_eq!(Size::default(), Size::DEFAULT);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn test_uirect_axes() {
|
||||
let x = Val::Px(1.);
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ use taffy::style_helpers;
|
|||
use crate::{
|
||||
AlignContent, AlignItems, AlignSelf, Display, FlexDirection, FlexWrap, GridAutoFlow,
|
||||
GridPlacement, GridTrack, GridTrackRepetition, JustifyContent, JustifyItems, JustifySelf,
|
||||
MaxTrackSizingFunction, MinTrackSizingFunction, PositionType, RepeatedGridTrack, Size, Style,
|
||||
UiRect, Val,
|
||||
MaxTrackSizingFunction, MinTrackSizingFunction, PositionType, RepeatedGridTrack, Style, UiRect,
|
||||
Val,
|
||||
};
|
||||
|
||||
use super::LayoutContext;
|
||||
|
|
@ -63,15 +63,6 @@ impl UiRect {
|
|||
}
|
||||
}
|
||||
|
||||
impl Size {
|
||||
fn map_to_taffy_size<T>(self, map_fn: impl Fn(Val) -> T) -> taffy::geometry::Size<T> {
|
||||
taffy::geometry::Size {
|
||||
width: map_fn(self.width),
|
||||
height: map_fn(self.height),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pub fn from_style(context: &LayoutContext, style: &Style) -> taffy::style::Style {
|
||||
taffy::style::Style {
|
||||
display: style.display.into(),
|
||||
|
|
@ -102,17 +93,23 @@ pub fn from_style(context: &LayoutContext, style: &Style) -> taffy::style::Style
|
|||
flex_grow: style.flex_grow,
|
||||
flex_shrink: style.flex_shrink,
|
||||
flex_basis: style.flex_basis.into_dimension(context),
|
||||
size: style.size.map_to_taffy_size(|s| s.into_dimension(context)),
|
||||
min_size: style
|
||||
.min_size
|
||||
.map_to_taffy_size(|s| s.into_dimension(context)),
|
||||
max_size: style
|
||||
.max_size
|
||||
.map_to_taffy_size(|s| s.into_dimension(context)),
|
||||
size: taffy::prelude::Size {
|
||||
width: style.width.into_dimension(context),
|
||||
height: style.height.into_dimension(context),
|
||||
},
|
||||
min_size: taffy::prelude::Size {
|
||||
width: style.min_width.into_dimension(context),
|
||||
height: style.min_height.into_dimension(context),
|
||||
},
|
||||
max_size: taffy::prelude::Size {
|
||||
width: style.max_width.into_dimension(context),
|
||||
height: style.max_height.into_dimension(context),
|
||||
},
|
||||
aspect_ratio: style.aspect_ratio,
|
||||
gap: style
|
||||
.gap
|
||||
.map_to_taffy_size(|s| s.into_length_percentage(context)),
|
||||
gap: taffy::prelude::Size {
|
||||
width: style.column_gap.into_length_percentage(context),
|
||||
height: style.row_gap.into_length_percentage(context),
|
||||
},
|
||||
grid_auto_flow: style.grid_auto_flow.into(),
|
||||
grid_template_rows: style
|
||||
.grid_template_rows
|
||||
|
|
@ -439,24 +436,16 @@ mod tests {
|
|||
flex_grow: 1.,
|
||||
flex_shrink: 0.,
|
||||
flex_basis: Val::Px(0.),
|
||||
size: Size {
|
||||
width: Val::Px(0.),
|
||||
height: Val::Auto,
|
||||
},
|
||||
min_size: Size {
|
||||
width: Val::Px(0.),
|
||||
height: Val::Percent(0.),
|
||||
},
|
||||
max_size: Size {
|
||||
width: Val::Auto,
|
||||
height: Val::Px(0.),
|
||||
},
|
||||
min_width: Val::Px(0.),
|
||||
min_height: Val::Percent(0.),
|
||||
max_width: Val::Auto,
|
||||
max_height: Val::Px(0.),
|
||||
aspect_ratio: None,
|
||||
overflow: crate::Overflow::clip(),
|
||||
gap: Size {
|
||||
width: Val::Px(0.),
|
||||
height: Val::Percent(0.),
|
||||
},
|
||||
column_gap: Val::Px(0.),
|
||||
row_gap: Val::Percent(0.),
|
||||
grid_auto_flow: GridAutoFlow::ColumnDense,
|
||||
grid_template_rows: vec![
|
||||
GridTrack::px(10.0),
|
||||
|
|
|
|||
|
|
@ -109,7 +109,6 @@ impl Plugin for UiPlugin {
|
|||
.register_type::<Overflow>()
|
||||
.register_type::<OverflowAxis>()
|
||||
.register_type::<PositionType>()
|
||||
.register_type::<Size>()
|
||||
.register_type::<UiRect>()
|
||||
.register_type::<Style>()
|
||||
.register_type::<BackgroundColor>()
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
use crate::{Size, UiRect};
|
||||
use crate::UiRect;
|
||||
use bevy_asset::Handle;
|
||||
use bevy_ecs::{prelude::Component, reflect::ReflectComponent};
|
||||
use bevy_math::{Rect, Vec2};
|
||||
|
|
@ -351,32 +351,35 @@ pub struct Style {
|
|||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/bottom>
|
||||
pub bottom: Val,
|
||||
|
||||
/// The ideal size of the node
|
||||
/// The ideal width of the node. `width` is used when it is within the bounds defined by `min_width` and `max_width`.
|
||||
///
|
||||
/// `size.width` is used when it is within the bounds defined by `min_size.width` and `max_size.width`.
|
||||
/// `size.height` is used when it is within the bounds defined by `min_size.height` and `max_size.height`.
|
||||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/width>
|
||||
pub width: Val,
|
||||
|
||||
/// The ideal height of the node. `height` is used when it is within the bounds defined by `min_height` and `max_height`.
|
||||
///
|
||||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/width> <br />
|
||||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/height>
|
||||
pub size: Size,
|
||||
pub height: Val,
|
||||
|
||||
/// The minimum size of the node
|
||||
/// The minimum width of the node. `min_width` is used if it is greater than either `width` and/or `max_width`.
|
||||
///
|
||||
/// `min_size.width` is used if it is greater than either `size.width` or `max_size.width`, or both.
|
||||
/// `min_size.height` is used if it is greater than either `size.height` or `max_size.height`, or both.
|
||||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/min-width>
|
||||
pub min_width: Val,
|
||||
|
||||
/// The minimum height of the node. `min_height` is used if it is greater than either `height` and/or `max_height`.
|
||||
///
|
||||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/min-width> <br />
|
||||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/min-height>
|
||||
pub min_size: Size,
|
||||
pub min_height: Val,
|
||||
|
||||
/// The maximum size of the node
|
||||
/// The maximum width of the node. `max_width` is used if it is within the bounds defined by `min_width` and `width`.
|
||||
///
|
||||
/// `max_size.width` is used if it is within the bounds defined by `min_size.width` and `size.width`.
|
||||
/// `max_size.height` is used if it is within the bounds defined by `min_size.height` and `size.height.
|
||||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/max-width>
|
||||
pub max_width: Val,
|
||||
|
||||
/// The maximum height of the node. `max_height` is used if it is within the bounds defined by `min_height` and `height`.
|
||||
///
|
||||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/max-width> <br />
|
||||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/max-height>
|
||||
pub max_size: Size,
|
||||
pub max_height: Val,
|
||||
|
||||
/// The aspect ratio of the node (defined as `width / height`)
|
||||
///
|
||||
|
|
@ -521,12 +524,19 @@ pub struct Style {
|
|||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis>
|
||||
pub flex_basis: Val,
|
||||
|
||||
/// The size of the gutters between items in flexbox layout or rows/columns in a grid layout
|
||||
/// The size of the gutters between items in a vertical flexbox layout or between rows in a grid layout
|
||||
///
|
||||
/// Note: Values of `Val::Auto` are not valid and are treated as zero.
|
||||
///
|
||||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/gap>
|
||||
pub gap: Size,
|
||||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap>
|
||||
pub row_gap: Val,
|
||||
|
||||
/// The size of the gutters between items in a horizontal flexbox layout or between column in a grid layout
|
||||
///
|
||||
/// Note: Values of `Val::Auto` are not valid and are treated as zero.
|
||||
///
|
||||
/// <https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap>
|
||||
pub column_gap: Val,
|
||||
|
||||
/// Controls whether automatically placed grid items are placed row-wise or column-wise. And whether the sparse or dense packing algorithm is used.
|
||||
/// Only affect Grid layouts
|
||||
|
|
@ -591,12 +601,16 @@ impl Style {
|
|||
flex_grow: 0.0,
|
||||
flex_shrink: 1.0,
|
||||
flex_basis: Val::Auto,
|
||||
size: Size::AUTO,
|
||||
min_size: Size::AUTO,
|
||||
max_size: Size::AUTO,
|
||||
width: Val::Auto,
|
||||
height: Val::Auto,
|
||||
min_width: Val::Auto,
|
||||
min_height: Val::Auto,
|
||||
max_width: Val::Auto,
|
||||
max_height: Val::Auto,
|
||||
aspect_ratio: None,
|
||||
overflow: Overflow::DEFAULT,
|
||||
gap: Size::all(Val::Px(0.0)),
|
||||
row_gap: Val::Px(0.0),
|
||||
column_gap: Val::Px(0.0),
|
||||
grid_auto_flow: GridAutoFlow::DEFAULT,
|
||||
grid_template_rows: Vec::new(),
|
||||
grid_template_columns: Vec::new(),
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ fn setup(mut commands: Commands) {
|
|||
commands
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
|
||||
width: Val::Percent(100.0),
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
flex_direction: FlexDirection::Column,
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ fn setup_menu(mut commands: Commands) {
|
|||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
// center button
|
||||
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
|
||||
width: Val::Percent(100.),
|
||||
justify_content: JustifyContent::Center,
|
||||
align_items: AlignItems::Center,
|
||||
..default()
|
||||
|
|
@ -64,7 +64,8 @@ fn setup_menu(mut commands: Commands) {
|
|||
parent
|
||||
.spawn(ButtonBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
|
||||
width: Val::Px(150.),
|
||||
height: Val::Px(65.),
|
||||
// horizontally center child text
|
||||
justify_content: JustifyContent::Center,
|
||||
// vertically center child text
|
||||
|
|
|
|||
|
|
@ -388,7 +388,7 @@ fn display_score(mut commands: Commands, game: Res<Game>) {
|
|||
commands
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
|
||||
width: Val::Percent(100.),
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
..default()
|
||||
|
|
|
|||
|
|
@ -85,7 +85,7 @@ mod splash {
|
|||
style: Style {
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
|
||||
width: Val::Percent(100.0),
|
||||
..default()
|
||||
},
|
||||
..default()
|
||||
|
|
@ -96,7 +96,7 @@ mod splash {
|
|||
parent.spawn(ImageBundle {
|
||||
style: Style {
|
||||
// This will set the logo to be 200px wide, and auto adjust its height
|
||||
size: Size::new(Val::Px(200.0), Val::Auto),
|
||||
width: Val::Px(200.0),
|
||||
..default()
|
||||
},
|
||||
image: UiImage::new(icon),
|
||||
|
|
@ -152,7 +152,8 @@ mod game {
|
|||
.spawn((
|
||||
NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
|
||||
width: Val::Percent(100.0),
|
||||
height: Val::Percent(100.0),
|
||||
// center children
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
|
|
@ -397,14 +398,15 @@ mod menu {
|
|||
fn main_menu_setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
||||
// Common style for all buttons on the screen
|
||||
let button_style = Style {
|
||||
size: Size::new(Val::Px(250.0), Val::Px(65.0)),
|
||||
width: Val::Px(250.0),
|
||||
height: Val::Px(65.0),
|
||||
margin: UiRect::all(Val::Px(20.0)),
|
||||
justify_content: JustifyContent::Center,
|
||||
align_items: AlignItems::Center,
|
||||
..default()
|
||||
};
|
||||
let button_icon_style = Style {
|
||||
size: Size::new(Val::Px(30.0), Val::Auto),
|
||||
width: Val::Px(30.0),
|
||||
// This takes the icons out of the flexbox flow, to be positioned exactly
|
||||
position_type: PositionType::Absolute,
|
||||
// The icon will be close to the left border of the button
|
||||
|
|
@ -422,7 +424,7 @@ mod menu {
|
|||
.spawn((
|
||||
NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
|
||||
width: Val::Percent(100.0),
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
..default()
|
||||
|
|
@ -529,7 +531,8 @@ mod menu {
|
|||
|
||||
fn settings_menu_setup(mut commands: Commands) {
|
||||
let button_style = Style {
|
||||
size: Size::new(Val::Px(200.0), Val::Px(65.0)),
|
||||
width: Val::Px(200.0),
|
||||
height: Val::Px(65.0),
|
||||
margin: UiRect::all(Val::Px(20.0)),
|
||||
justify_content: JustifyContent::Center,
|
||||
align_items: AlignItems::Center,
|
||||
|
|
@ -546,7 +549,7 @@ mod menu {
|
|||
.spawn((
|
||||
NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
|
||||
width: Val::Percent(100.0),
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
..default()
|
||||
|
|
@ -594,7 +597,8 @@ mod menu {
|
|||
|
||||
fn display_settings_menu_setup(mut commands: Commands, display_quality: Res<DisplayQuality>) {
|
||||
let button_style = Style {
|
||||
size: Size::new(Val::Px(200.0), Val::Px(65.0)),
|
||||
width: Val::Px(200.0),
|
||||
height: Val::Px(65.0),
|
||||
margin: UiRect::all(Val::Px(20.0)),
|
||||
justify_content: JustifyContent::Center,
|
||||
align_items: AlignItems::Center,
|
||||
|
|
@ -610,7 +614,7 @@ mod menu {
|
|||
.spawn((
|
||||
NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
|
||||
width: Val::Percent(100.0),
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
..default()
|
||||
|
|
@ -656,7 +660,8 @@ mod menu {
|
|||
] {
|
||||
let mut entity = parent.spawn(ButtonBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
|
||||
width: Val::Px(150.0),
|
||||
height: Val::Px(65.0),
|
||||
..button_style.clone()
|
||||
},
|
||||
background_color: NORMAL_BUTTON.into(),
|
||||
|
|
@ -692,7 +697,8 @@ mod menu {
|
|||
|
||||
fn sound_settings_menu_setup(mut commands: Commands, volume: Res<Volume>) {
|
||||
let button_style = Style {
|
||||
size: Size::new(Val::Px(200.0), Val::Px(65.0)),
|
||||
width: Val::Px(200.0),
|
||||
height: Val::Px(65.0),
|
||||
margin: UiRect::all(Val::Px(20.0)),
|
||||
justify_content: JustifyContent::Center,
|
||||
align_items: AlignItems::Center,
|
||||
|
|
@ -708,7 +714,7 @@ mod menu {
|
|||
.spawn((
|
||||
NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
|
||||
width: Val::Percent(100.0),
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
..default()
|
||||
|
|
@ -746,7 +752,8 @@ mod menu {
|
|||
for volume_setting in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] {
|
||||
let mut entity = parent.spawn(ButtonBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Px(30.0), Val::Px(65.0)),
|
||||
width: Val::Px(30.0),
|
||||
height: Val::Px(65.0),
|
||||
..button_style.clone()
|
||||
},
|
||||
background_color: NORMAL_BUTTON.into(),
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@ fn setup(mut commands: Commands) {
|
|||
commands
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
|
||||
width: Val::Percent(100.),
|
||||
..default()
|
||||
},
|
||||
..default()
|
||||
|
|
@ -106,7 +106,8 @@ fn spawn_button(
|
|||
let mut builder = commands.spawn((
|
||||
ButtonBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Percent(width), Val::Percent(width)),
|
||||
width: Val::Percent(width),
|
||||
height: Val::Percent(width),
|
||||
bottom: Val::Percent(100.0 / total * i as f32),
|
||||
left: Val::Percent(100.0 / total * j as f32),
|
||||
align_items: AlignItems::Center,
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ fn setup(mut commands: Commands) {
|
|||
commands.spawn(TextBundle {
|
||||
text: text.clone(),
|
||||
style: Style {
|
||||
size: Size::width(Val::Px(1000.)),
|
||||
width: Val::Px(1000.),
|
||||
..Default::default()
|
||||
},
|
||||
..Default::default()
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
commands
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::width(Val::Percent(100.0)),
|
||||
width: Val::Percent(100.0),
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
..default()
|
||||
|
|
@ -60,7 +60,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent
|
||||
.spawn(ButtonBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
|
||||
width: Val::Px(150.0),
|
||||
height: Val::Px(65.0),
|
||||
// horizontally center child text
|
||||
justify_content: JustifyContent::Center,
|
||||
// vertically center child text
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
// fill the entire window
|
||||
size: Size::all(Val::Percent(100.)),
|
||||
width: Val::Percent(100.),
|
||||
flex_direction: FlexDirection::Column,
|
||||
align_items: AlignItems::Center,
|
||||
..Default::default()
|
||||
|
|
@ -65,7 +65,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
builder
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
min_size: Size::new(Val::Px(850.), Val::Px(1020.)),
|
||||
width: Val::Px(850.),
|
||||
height: Val::Px(1020.),
|
||||
flex_direction: FlexDirection::Column,
|
||||
..Default::default()
|
||||
},
|
||||
|
|
@ -124,7 +125,8 @@ fn spawn_child_node(
|
|||
flex_direction: FlexDirection::Column,
|
||||
align_items,
|
||||
justify_content,
|
||||
size: Size::all(Val::Px(160.)),
|
||||
width: Val::Px(160.),
|
||||
height: Val::Px(160.),
|
||||
margin: UiRect::all(MARGIN),
|
||||
..Default::default()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
/// Use the CSS Grid algorithm for laying out this node
|
||||
display: Display::Grid,
|
||||
/// Make node fill the entirety it's parent (in this case the window)
|
||||
size: Size::all(Val::Percent(100.)),
|
||||
width: Val::Percent(100.0),
|
||||
height: Val::Percent(100.0),
|
||||
/// Set the grid to have 2 columns with sizes [min-content, minmax(0, 1fr)]
|
||||
/// - The first column will size to the size of it's contents
|
||||
/// - The second column will take up the remaining available space
|
||||
|
|
@ -67,7 +68,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
/// Make the height of the node fill its parent
|
||||
size: Size::height(Val::Percent(100.0)),
|
||||
height: Val::Percent(100.0),
|
||||
/// Make the grid have a 1:1 aspect ratio meaning it will scale as an exact square
|
||||
/// As the height is set explicitly, this means the width will adjust to match the height
|
||||
aspect_ratio: Some(1.0),
|
||||
|
|
@ -82,7 +83,8 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
/// This creates 4 exactly evenly sized rows
|
||||
grid_template_rows: RepeatedGridTrack::flex(4, 1.0),
|
||||
/// Set a 12px gap/gutter between rows and columns
|
||||
gap: Size::all(Val::Px(12.0)),
|
||||
row_gap: Val::Px(12.0),
|
||||
column_gap: Val::Px(12.0),
|
||||
..default()
|
||||
},
|
||||
background_color: BackgroundColor(Color::DARK_GRAY),
|
||||
|
|
@ -130,7 +132,7 @@ fn spawn_layout(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
// can be top-aligned. Normally you'd use flexbox for this, but this is the CSS Grid example so we're using grid.
|
||||
grid_template_rows: vec![GridTrack::auto(), GridTrack::auto(), GridTrack::fr(1.0)],
|
||||
// Add a 10px gap between rows
|
||||
gap: Size::height(Val::Px(10.)),
|
||||
row_gap: Val::Px(10.),
|
||||
..default()
|
||||
},
|
||||
background_color: BackgroundColor(Color::BLACK),
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
style: Style {
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
size: Size::width(Val::Percent(100.)),
|
||||
width: Val::Percent(100.),
|
||||
..Default::default()
|
||||
},
|
||||
background_color: Color::ANTIQUE_WHITE.into(),
|
||||
|
|
@ -71,7 +71,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::all(Val::Px(100.)),
|
||||
width: Val::Px(100.),
|
||||
height: Val::Px(100.),
|
||||
padding: UiRect {
|
||||
left: Val::Px(25.),
|
||||
top: Val::Px(25.),
|
||||
|
|
@ -87,7 +88,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent.spawn(ImageBundle {
|
||||
image: UiImage::new(image.clone()),
|
||||
style: Style {
|
||||
min_size: Size::all(Val::Px(100.)),
|
||||
min_width: Val::Px(100.),
|
||||
min_height: Val::Px(100.),
|
||||
..Default::default()
|
||||
},
|
||||
background_color: Color::WHITE.into(),
|
||||
|
|
|
|||
|
|
@ -86,7 +86,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
commands
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::width(Val::Percent(100.)),
|
||||
width: Val::Percent(100.),
|
||||
height: Val::Percent(100.),
|
||||
flex_direction: FlexDirection::Column,
|
||||
..default()
|
||||
},
|
||||
|
|
@ -96,7 +97,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::height(Val::Px(32.)),
|
||||
height: Val::Px(32.),
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
..default()
|
||||
|
|
@ -149,7 +150,7 @@ fn spawn_row(parent: &mut ChildBuilder, spawn_children: impl FnOnce(&mut ChildBu
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::width(Val::Percent(50.)),
|
||||
width: Val::Percent(50.),
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::SpaceEvenly,
|
||||
..default()
|
||||
|
|
@ -168,7 +169,7 @@ fn spawn_image(
|
|||
parent.spawn(ImageBundle {
|
||||
image: UiImage::new(asset_server.load("branding/bevy_logo_dark_big.png")),
|
||||
style: Style {
|
||||
size: Size::height(Val::Px(100.)),
|
||||
height: Val::Px(100.),
|
||||
position_type: PositionType::Absolute,
|
||||
top: Val::Px(-50.),
|
||||
left: Val::Px(-200.),
|
||||
|
|
@ -209,7 +210,8 @@ fn spawn_container(
|
|||
.spawn((
|
||||
NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Px(CONTAINER_SIZE), Val::Px(CONTAINER_SIZE)),
|
||||
width: Val::Px(CONTAINER_SIZE),
|
||||
height: Val::Px(CONTAINER_SIZE),
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
overflow: Overflow::clip(),
|
||||
|
|
@ -304,10 +306,13 @@ fn next_container_size(
|
|||
for (mut style, mut container) in &mut containers {
|
||||
container.0 = (container.0 + 1) % 3;
|
||||
|
||||
style.size = match container.0 {
|
||||
1 => Size::new(Val::Px(CONTAINER_SIZE), Val::Px(30.)),
|
||||
2 => Size::new(Val::Px(30.), Val::Px(CONTAINER_SIZE)),
|
||||
_ => Size::new(Val::Px(CONTAINER_SIZE), Val::Px(CONTAINER_SIZE)),
|
||||
style.width = match container.0 {
|
||||
2 => Val::Px(30.),
|
||||
_ => Val::Px(CONTAINER_SIZE),
|
||||
};
|
||||
style.height = match container.0 {
|
||||
1 => Val::Px(30.),
|
||||
_ => Val::Px(CONTAINER_SIZE),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
commands
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::width(Val::Percent(100.)),
|
||||
width: Val::Percent(100.),
|
||||
height: Val::Percent(100.),
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
flex_direction: FlexDirection::Column,
|
||||
|
|
@ -30,7 +31,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::all(Val::Px(250.0)),
|
||||
width: Val::Px(250.),
|
||||
height: Val::Px(250.),
|
||||
margin: UiRect::bottom(Val::Px(15.)),
|
||||
..default()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -123,7 +123,8 @@ fn spawn_bar(parent: &mut ChildBuilder) {
|
|||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
align_items: AlignItems::Stretch,
|
||||
size: Size::new(Val::Percent(100.), Val::Px(100.)),
|
||||
width: Val::Percent(100.),
|
||||
height: Val::Px(100.),
|
||||
padding: UiRect::all(Val::Px(4.)),
|
||||
..Default::default()
|
||||
},
|
||||
|
|
@ -181,8 +182,8 @@ fn spawn_button_row(parent: &mut ChildBuilder, constraint: Constraint, text_styl
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
min_size: Size::width(Val::Px(200.)),
|
||||
max_size: Size::width(Val::Px(200.)),
|
||||
min_width: Val::Px(200.),
|
||||
max_width: Val::Px(200.),
|
||||
justify_content: JustifyContent::Center,
|
||||
align_items: AlignItems::Center,
|
||||
..Default::default()
|
||||
|
|
@ -259,7 +260,7 @@ fn spawn_button(
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::width(Val::Px(100.)),
|
||||
width: Val::Px(100.),
|
||||
justify_content: JustifyContent::Center,
|
||||
..Default::default()
|
||||
},
|
||||
|
|
@ -311,13 +312,13 @@ fn update_buttons(
|
|||
style.flex_basis = value.0;
|
||||
}
|
||||
Constraint::Width => {
|
||||
style.size.width = value.0;
|
||||
style.width = value.0;
|
||||
}
|
||||
Constraint::MinWidth => {
|
||||
style.min_size.width = value.0;
|
||||
style.min_width = value.0;
|
||||
}
|
||||
Constraint::MaxWidth => {
|
||||
style.max_size.width = value.0;
|
||||
style.max_width = value.0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
position_type: PositionType::Absolute,
|
||||
top: Val::Px(5.0),
|
||||
right: Val::Px(15.0),
|
||||
max_size: Size::width(Val::Px(400.)),
|
||||
max_width: Val::Px(400.),
|
||||
..default()
|
||||
})
|
||||
);
|
||||
|
|
@ -127,11 +127,8 @@ fn infotext_system(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
position_type: PositionType::Absolute,
|
||||
bottom: Val::Px(5.0),
|
||||
left: Val::Px(15.0),
|
||||
size: Size {
|
||||
width: Val::Px(200.0),
|
||||
..default()
|
||||
},
|
||||
..default()
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
flex_direction: FlexDirection::Column,
|
||||
size: Size::new(Val::Percent(100.), Val::Percent(100.)),
|
||||
width: Val::Percent(100.),
|
||||
..Default::default()
|
||||
},
|
||||
background_color: Color::BLACK.into(),
|
||||
|
|
@ -40,7 +40,8 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
flex_direction: FlexDirection::Row,
|
||||
justify_content: JustifyContent::SpaceAround,
|
||||
align_items: AlignItems::Center,
|
||||
size: Size::new(Val::Percent(100.), Val::Percent(50.)),
|
||||
width: Val::Percent(100.),
|
||||
height: Val::Percent(50.),
|
||||
..Default::default()
|
||||
},
|
||||
..Default::default()
|
||||
|
|
@ -63,7 +64,8 @@ fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
style: Style {
|
||||
justify_content: justification,
|
||||
flex_direction: FlexDirection::Column,
|
||||
size: Size::new(Val::Percent(16.), Val::Percent(95.)),
|
||||
width: Val::Percent(16.),
|
||||
height: Val::Percent(95.),
|
||||
overflow: Overflow::clip(),
|
||||
..Default::default()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
commands
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::width(Val::Percent(100.0)),
|
||||
width: Val::Percent(100.0),
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::SpaceAround,
|
||||
..default()
|
||||
|
|
@ -30,7 +30,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent
|
||||
.spawn(ButtonBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
|
||||
width: Val::Px(150.0),
|
||||
height: Val::Px(65.0),
|
||||
justify_content: JustifyContent::Center,
|
||||
align_items: AlignItems::Center,
|
||||
..default()
|
||||
|
|
@ -55,7 +56,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent
|
||||
.spawn(ButtonBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Px(150.0), Val::Px(65.0)),
|
||||
width: Val::Px(150.0),
|
||||
height: Val::Px(65.0),
|
||||
justify_content: JustifyContent::Center,
|
||||
align_items: AlignItems::Center,
|
||||
..default()
|
||||
|
|
|
|||
|
|
@ -28,7 +28,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
commands
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::all(Val::Percent(100.)),
|
||||
width: Val::Percent(100.0),
|
||||
height: Val::Percent(100.0),
|
||||
justify_content: JustifyContent::SpaceBetween,
|
||||
..default()
|
||||
},
|
||||
|
|
@ -39,7 +40,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::width(Val::Px(200.)),
|
||||
width: Val::Px(200.),
|
||||
border: UiRect::all(Val::Px(2.)),
|
||||
..default()
|
||||
},
|
||||
|
|
@ -51,7 +52,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::width(Val::Percent(100.)),
|
||||
width: Val::Percent(100.),
|
||||
..default()
|
||||
},
|
||||
background_color: Color::rgb(0.15, 0.15, 0.15).into(),
|
||||
|
|
@ -86,7 +87,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
flex_direction: FlexDirection::Column,
|
||||
justify_content: JustifyContent::Center,
|
||||
align_items: AlignItems::Center,
|
||||
size: Size::width(Val::Px(200.)),
|
||||
width: Val::Px(200.),
|
||||
..default()
|
||||
},
|
||||
background_color: Color::rgb(0.15, 0.15, 0.15).into(),
|
||||
|
|
@ -111,7 +112,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
style: Style {
|
||||
flex_direction: FlexDirection::Column,
|
||||
align_self: AlignSelf::Stretch,
|
||||
size: Size::height(Val::Percent(50.)),
|
||||
height: Val::Percent(50.),
|
||||
overflow: Overflow::clip_y(),
|
||||
..default()
|
||||
},
|
||||
|
|
@ -156,7 +157,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::all(Val::Px(200.)),
|
||||
width: Val::Px(200.0),
|
||||
height: Val::Px(200.0),
|
||||
position_type: PositionType::Absolute,
|
||||
left: Val::Px(210.),
|
||||
bottom: Val::Px(10.),
|
||||
|
|
@ -169,7 +171,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
.with_children(|parent| {
|
||||
parent.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::all(Val::Percent(100.)),
|
||||
width: Val::Percent(100.0),
|
||||
height: Val::Percent(100.0),
|
||||
..default()
|
||||
},
|
||||
background_color: Color::rgb(0.8, 0.8, 1.).into(),
|
||||
|
|
@ -180,7 +183,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::all(Val::Percent(100.)),
|
||||
width: Val::Percent(100.0),
|
||||
height: Val::Percent(100.0),
|
||||
position_type: PositionType::Absolute,
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
|
|
@ -192,7 +196,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::all(Val::Px(100.)),
|
||||
width: Val::Px(100.0),
|
||||
height: Val::Px(100.0),
|
||||
..default()
|
||||
},
|
||||
background_color: Color::rgb(1.0, 0.0, 0.).into(),
|
||||
|
|
@ -202,7 +207,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent.spawn(NodeBundle {
|
||||
style: Style {
|
||||
// Take the size of the parent node.
|
||||
size: Size::all(Val::Percent(100.)),
|
||||
width: Val::Percent(100.0),
|
||||
height: Val::Percent(100.0),
|
||||
position_type: PositionType::Absolute,
|
||||
left: Val::Px(20.),
|
||||
bottom: Val::Px(20.),
|
||||
|
|
@ -213,7 +219,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
});
|
||||
parent.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::all(Val::Percent(100.)),
|
||||
width: Val::Percent(100.0),
|
||||
height: Val::Percent(100.0),
|
||||
position_type: PositionType::Absolute,
|
||||
left: Val::Px(40.),
|
||||
bottom: Val::Px(40.),
|
||||
|
|
@ -224,7 +231,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
});
|
||||
parent.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::all(Val::Percent(100.)),
|
||||
width: Val::Percent(100.0),
|
||||
height: Val::Percent(100.0),
|
||||
position_type: PositionType::Absolute,
|
||||
left: Val::Px(60.),
|
||||
bottom: Val::Px(60.),
|
||||
|
|
@ -236,7 +244,8 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
// alpha test
|
||||
parent.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::all(Val::Percent(100.)),
|
||||
width: Val::Percent(100.0),
|
||||
height: Val::Percent(100.0),
|
||||
position_type: PositionType::Absolute,
|
||||
left: Val::Px(80.),
|
||||
bottom: Val::Px(80.),
|
||||
|
|
@ -251,7 +260,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::width(Val::Percent(100.)),
|
||||
width: Val::Percent(100.0),
|
||||
position_type: PositionType::Absolute,
|
||||
justify_content: JustifyContent::Center,
|
||||
align_items: AlignItems::FlexStart,
|
||||
|
|
@ -265,7 +274,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
|
|||
parent
|
||||
.spawn(ImageBundle {
|
||||
style: Style {
|
||||
size: Size::width(Val::Px(500.0)),
|
||||
width: Val::Px(500.0),
|
||||
..default()
|
||||
},
|
||||
..default()
|
||||
|
|
|
|||
|
|
@ -36,7 +36,8 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
|
|||
commands
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Percent(50.0), Val::Percent(50.0)),
|
||||
width: Val::Percent(50.0),
|
||||
height: Val::Percent(50.0),
|
||||
position_type: PositionType::Absolute,
|
||||
left: Val::Percent(25.),
|
||||
top: Val::Percent(25.),
|
||||
|
|
@ -51,7 +52,8 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Px(40.), Val::Px(40.)),
|
||||
width: Val::Px(40.0),
|
||||
height: Val::Px(40.0),
|
||||
..default()
|
||||
},
|
||||
background_color: Color::RED.into(),
|
||||
|
|
@ -62,7 +64,8 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
|
|||
});
|
||||
parent.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Percent(15.), Val::Percent(15.)),
|
||||
width: Val::Percent(15.0),
|
||||
height: Val::Percent(15.0),
|
||||
..default()
|
||||
},
|
||||
background_color: Color::BLUE.into(),
|
||||
|
|
@ -70,7 +73,8 @@ fn setup(mut commands: Commands, asset_server: ResMut<AssetServer>) {
|
|||
});
|
||||
parent.spawn(ImageBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Px(30.0), Val::Px(30.0)),
|
||||
width: Val::Px(30.0),
|
||||
height: Val::Px(30.0),
|
||||
..default()
|
||||
},
|
||||
image: asset_server.load("branding/icon.png").into(),
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ fn setup(mut commands: Commands) {
|
|||
commands
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::width(Val::Percent(100.0)),
|
||||
width: Val::Percent(100.),
|
||||
align_items: AlignItems::Center,
|
||||
justify_content: JustifyContent::Center,
|
||||
..default()
|
||||
|
|
@ -34,7 +34,8 @@ fn setup(mut commands: Commands) {
|
|||
.spawn(NodeBundle {
|
||||
background_color: Color::GRAY.into(),
|
||||
style: Style {
|
||||
size: Size::new(Val::Px(180.0), Val::Px(100.0)),
|
||||
width: Val::Px(180.0),
|
||||
height: Val::Px(100.0),
|
||||
..default()
|
||||
},
|
||||
..default()
|
||||
|
|
@ -47,7 +48,8 @@ fn setup(mut commands: Commands) {
|
|||
position_type: PositionType::Absolute,
|
||||
left: Val::Px(10.0),
|
||||
bottom: Val::Px(40.0),
|
||||
size: Size::new(Val::Px(100.0), Val::Px(50.0)),
|
||||
width: Val::Px(100.0),
|
||||
height: Val::Px(50.0),
|
||||
..default()
|
||||
},
|
||||
..default()
|
||||
|
|
@ -62,7 +64,8 @@ fn setup(mut commands: Commands) {
|
|||
position_type: PositionType::Absolute,
|
||||
left: Val::Px(45.0),
|
||||
bottom: Val::Px(30.0),
|
||||
size: Size::new(Val::Px(100.0), Val::Px(50.0)),
|
||||
width: Val::Px(100.),
|
||||
height: Val::Px(50.),
|
||||
..default()
|
||||
},
|
||||
..default()
|
||||
|
|
@ -77,7 +80,8 @@ fn setup(mut commands: Commands) {
|
|||
position_type: PositionType::Absolute,
|
||||
left: Val::Px(70.0),
|
||||
bottom: Val::Px(20.0),
|
||||
size: Size::new(Val::Px(100.0), Val::Px(75.0)),
|
||||
width: Val::Px(100.),
|
||||
height: Val::Px(75.),
|
||||
..default()
|
||||
},
|
||||
..default()
|
||||
|
|
@ -93,7 +97,8 @@ fn setup(mut commands: Commands) {
|
|||
position_type: PositionType::Absolute,
|
||||
left: Val::Px(15.0),
|
||||
bottom: Val::Px(10.0),
|
||||
size: Size::new(Val::Px(100.0), Val::Px(60.0)),
|
||||
width: Val::Px(100.),
|
||||
height: Val::Px(60.),
|
||||
..default()
|
||||
},
|
||||
..default()
|
||||
|
|
@ -109,7 +114,8 @@ fn setup(mut commands: Commands) {
|
|||
position_type: PositionType::Absolute,
|
||||
left: Val::Px(-15.0),
|
||||
bottom: Val::Px(-15.0),
|
||||
size: Size::new(Val::Px(100.0), Val::Px(125.0)),
|
||||
width: Val::Px(100.),
|
||||
height: Val::Px(125.),
|
||||
..default()
|
||||
},
|
||||
..default()
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ fn setup(mut commands: Commands) {
|
|||
commands
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
|
||||
width: Val::Percent(100.0),
|
||||
justify_content: JustifyContent::SpaceBetween,
|
||||
..default()
|
||||
},
|
||||
|
|
@ -38,7 +38,8 @@ fn setup(mut commands: Commands) {
|
|||
parent
|
||||
.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Px(200.0), Val::Percent(100.0)),
|
||||
width: Val::Px(200.0),
|
||||
height: Val::Percent(100.0),
|
||||
border: UiRect::all(Val::Px(2.0)),
|
||||
..default()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ fn setup_ui(mut cmd: Commands) {
|
|||
// Node that fills entire background
|
||||
cmd.spawn(NodeBundle {
|
||||
style: Style {
|
||||
size: Size::new(Val::Percent(100.0), Val::Percent(100.0)),
|
||||
width: Val::Percent(100.),
|
||||
..default()
|
||||
},
|
||||
..default()
|
||||
|
|
|
|||
Loading…
Reference in a new issue