Skip to content
Snippets Groups Projects
Unverified Commit 66b8dcda authored by John's avatar John Committed by GitHub
Browse files

Merge pull request #174 from maccesch/feature/grid-layout 

Implemented grid layout style props
parents a046e334 542013bb
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
examples/layout.rs 0 → 100644
+ 143
− 0
View file @ 66b8dcda
use bevy::prelude::*;
use kayak_ui::prelude::{widgets::*, *};
fn startup(
mut commands: Commands,
mut font_mapping: ResMut<FontMapping>,
asset_server: Res<AssetServer>,
) {
font_mapping.set_default(asset_server.load("roboto.kayak_font"));
// Camera 2D forces a clear pass in bevy.
// We do this because our scene is not rendering anything else.
commands.spawn(Camera2dBundle::default());
let mut widget_context = KayakRootContext::new();
widget_context.add_plugin(KayakWidgetsContextPlugin);
let parent_id = None;
rsx! {
<KayakAppBundle>
<WindowBundle
window={KWindow {
title: "Layout example".into(),
draggable: true,
initial_position: Vec2::new(10.0, 10.0),
size: Vec2::new(512.0, 512.0),
..KWindow::default()
}}
>
<ElementBundle
styles={KStyle{
layout_type: LayoutType::Grid.into(),
grid_rows: vec![Units::Stretch(1.0), Units::Stretch(2.0), Units::Stretch(5.0)].into(),
grid_cols: vec![Units::Stretch(1.0), Units::Stretch(1.0)].into(),
..default()
}}
>
<BackgroundBundle
styles={KStyle{
background_color: Color::rgb(0.4, 0.9, 0.4).into(),
color: Color::rgb(0.0, 0.0, 0.0).into(),
padding: Edge::all(Units::Pixels(5.0)).into(),
border_radius: Corner::all(10.0).into(),
row_index: 0.into(),
col_index: 0.into(),
col_span: 2.into(),
layout_type: LayoutType::Row.into(),
col_between: Units::Pixels(5.0).into(),
..default()
}}
>
<TextWidgetBundle
text={TextProps {
content: "A".into(),
..default()
}}
/>
<TextWidgetBundle
text={TextProps {
content: "B".into(),
..default()
}}
/>
<TextWidgetBundle
text={TextProps {
content: "C".into(),
..default()
}}
/>
<TextWidgetBundle
text={TextProps {
content: "D".into(),
..default()
}}
/>
<TextWidgetBundle
text={TextProps {
content: "E".into(),
..default()
}}
/>
</BackgroundBundle>
<TextWidgetBundle
text={TextProps {
content: "R1 C0".into(),
..default()
}}
styles={KStyle{
row_index: 1.into(),
col_index: 0.into(),
..default()
}}
/>
<TextWidgetBundle
text={TextProps {
content: "R1 C1".into(),
..default()
}}
styles={KStyle{
row_index: 1.into(),
col_index: 1.into(),
..default()
}}
/>
<TextWidgetBundle
text={TextProps {
content: "R2 C0".into(),
..default()
}}
styles={KStyle{
row_index: 2.into(),
col_index: 0.into(),
..default()
}}
/>
<TextWidgetBundle
text={TextProps {
content: "R2 C1".into(),
..default()
}}
styles={KStyle{
row_index: 2.into(),
col_index: 1.into(),
..default()
}}
/>
</ElementBundle>
</WindowBundle>
</KayakAppBundle>
}
commands.spawn(UICameraBundle::new(widget_context));
}
fn main() {
App::new()
.add_plugins(DefaultPlugins)
.add_plugin(KayakContextPlugin)
.add_plugin(KayakWidgets)
.add_startup_system(startup)
.run()
}
src/node.rs
+ 48
− 6
View file @ 66b8dcda
......@@ -379,27 +379,69 @@ impl<'a> morphorm::Node<'a> for WrappedIndex {
Some(morphorm::Units::Auto)
}
fn grid_rows(&self, _store: &'_ Self::Data) -> Option<Vec<morphorm::Units>> {
fn grid_rows(&self, store: &'_ Self::Data) -> Option<Vec<morphorm::Units>> {
if let Ok(node) = store.get(self.0) {
return match &node.resolved_styles.grid_rows {
StyleProp::Default => Some(vec![]),
StyleProp::Value(prop) => Some(prop.iter().map(|&x| x.into()).collect()),
_ => Some(vec![]),
};
}
Some(vec![])
}
fn grid_cols(&self, _store: &'_ Self::Data) -> Option<Vec<morphorm::Units>> {
fn grid_cols(&self, store: &'_ Self::Data) -> Option<Vec<morphorm::Units>> {
if let Ok(node) = store.get(self.0) {
return match &node.resolved_styles.grid_cols {
StyleProp::Default => Some(vec![]),
StyleProp::Value(prop) => Some(prop.iter().map(|&x| x.into()).collect()),
_ => Some(vec![]),
};
}
Some(vec![])
}
fn row_index(&self, _store: &'_ Self::Data) -> Option<usize> {
fn row_index(&self, store: &'_ Self::Data) -> Option<usize> {
if let Ok(node) = store.get(self.0) {
return match node.resolved_styles.row_index {
StyleProp::Default => Some(0),
StyleProp::Value(prop) => Some(prop),
_ => Some(0),
};
}
Some(0)
}
fn col_index(&self, _store: &'_ Self::Data) -> Option<usize> {
fn col_index(&self, store: &'_ Self::Data) -> Option<usize> {
if let Ok(node) = store.get(self.0) {
return match node.resolved_styles.col_index {
StyleProp::Default => Some(0),
StyleProp::Value(prop) => Some(prop),
_ => Some(0),
};
}
Some(0)
}
fn row_span(&self, _store: &'_ Self::Data) -> Option<usize> {
fn row_span(&self, store: &'_ Self::Data) -> Option<usize> {
if let Ok(node) = store.get(self.0) {
return match node.resolved_styles.row_span {
StyleProp::Default => Some(1),
StyleProp::Value(prop) => Some(prop),
_ => Some(1),
};
}
Some(1)
}
fn col_span(&self, _store: &'_ Self::Data) -> Option<usize> {
fn col_span(&self, store: &'_ Self::Data) -> Option<usize> {
if let Ok(node) = store.get(self.0) {
return match node.resolved_styles.col_span {
StyleProp::Default => Some(1),
StyleProp::Value(prop) => Some(prop),
_ => Some(1),
};
}
Some(1)
}
......
src/styles/style.rs
+ 30
− 0
View file @ 66b8dcda
......@@ -374,6 +374,30 @@ define_styles! {
pub width: StyleProp<Units>,
/// The z-index relative to it's parent.
pub z_index: StyleProp<i32>,
/// The list of rows when using the grid layout
///
/// This is specified in the parent widget and the children have to specify their `row_index`.
pub grid_rows: StyleProp<Vec<Units>>,
/// The list of columns when using the grid layout
///
/// This is specified in the parent widget and the children have to specify their `col_index`.
pub grid_cols: StyleProp<Vec<Units>>,
/// The row index of this widget when using the grid layout
///
/// This references the `grid_rows` property of the parent widget.
pub row_index: StyleProp<usize>,
/// The column index of this widget when using the grid layout
///
/// This references the `grid_cols` property of the parent widget.
pub col_index: StyleProp<usize>,
/// The number rows that this widget spans when using the grid layout
///
/// Specified in the child widget.
pub row_span: StyleProp<usize>,
/// The number columns that this widget spans when using the grid layout
///
/// Specified in the child widget.
pub col_span: StyleProp<usize>,
}
}
......@@ -416,6 +440,12 @@ impl KStyle {
top: StyleProp::Default,
width: StyleProp::Default,
z_index: StyleProp::Default,
grid_rows: StyleProp::Default,
grid_cols: StyleProp::Default,
row_index: StyleProp::Default,
col_index: StyleProp::Default,
row_span: StyleProp::Default,
col_span: StyleProp::Default,
}
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment