mirror of
https://github.com/danbulant/cushy
synced 2026-07-03 18:20:37 +00:00
Added layout widget descriptions
This commit is contained in:
parent
b82208887d
commit
01d6da3d35
14 changed files with 162 additions and 20 deletions
|
|
@ -9,14 +9,14 @@
|
||||||
- [Widgets]()
|
- [Widgets]()
|
||||||
- [Layout Widgets](./widgets/layout.md)
|
- [Layout Widgets](./widgets/layout.md)
|
||||||
- [Align](./widgets/layout/align.md)
|
- [Align](./widgets/layout/align.md)
|
||||||
- [Collapse]()
|
- [Collapse](./widgets/layout/collapse.md)
|
||||||
- [Container]()
|
- [Container](./widgets/layout/container.md)
|
||||||
- [Expand]()
|
- [Expand](./widgets/layout/expand.md)
|
||||||
- [Grid]()
|
- [Grid](./widgets/layout/grid.md)
|
||||||
- [Layers]()
|
- [Layers](./widgets/layout/layers.md)
|
||||||
- [Resize]()
|
- [Resize](./widgets/layout/resize.md)
|
||||||
- [Stack]()
|
- [Stack](./widgets/layout/stack.md)
|
||||||
- [Wrap]()
|
- [Wrap](./widgets/layout/wrap.md)
|
||||||
- [Controls](./widgets/controls.md)
|
- [Controls](./widgets/controls.md)
|
||||||
- [Button]()
|
- [Button]()
|
||||||
- [Canvas]()
|
- [Canvas]()
|
||||||
|
|
|
||||||
|
|
@ -7,11 +7,11 @@ when available. It does not utilize any existing widget libraries.
|
||||||
|
|
||||||
Cushy's high-level goals are to be:
|
Cushy's high-level goals are to be:
|
||||||
|
|
||||||
- Easy-to-use.
|
- Easy-to-use
|
||||||
- Flexible.
|
- Flexible
|
||||||
- Predictable.
|
- Predictable
|
||||||
- Efficient.
|
- Efficient
|
||||||
- Accessible.
|
- Accessible
|
||||||
|
|
||||||
Being so early in development, Cushy has not yet achieved all of its goals,
|
Being so early in development, Cushy has not yet achieved all of its goals,
|
||||||
especially with regards to accessibility.
|
especially with regards to accessibility.
|
||||||
|
|
|
||||||
|
|
@ -8,9 +8,8 @@ displayed. Here's the philosophies that drive Cushy's design:
|
||||||
- Everything is a widget. The "root" of a user interface/window is a widget, and
|
- Everything is a widget. The "root" of a user interface/window is a widget, and
|
||||||
widgets can contain other widgets.
|
widgets can contain other widgets.
|
||||||
- Composition is powerful and easy to reason about. The built-in widget library
|
- Composition is powerful and easy to reason about. The built-in widget library
|
||||||
is aimed at providing a suite of libraries each with an individual purpose to
|
is aimed at providing a suite of single-purpose widgets that can be composed
|
||||||
aide in developers being able to compose more complex user interfaces from
|
to create more complex user interfaces.
|
||||||
more basic widgets.
|
|
||||||
- If a developer dislikes a built-in widget's behavior, they should be empowered
|
- If a developer dislikes a built-in widget's behavior, they should be empowered
|
||||||
to create their own that behaves the way they desire. To ensure developers
|
to create their own that behaves the way they desire. To ensure developers
|
||||||
have this flexibility, all provided widgets must only utilize functionality
|
have this flexibility, all provided widgets must only utilize functionality
|
||||||
|
|
|
||||||
|
|
@ -41,8 +41,8 @@ pieces of data our user interface is going to work with, we can start assembling
|
||||||
the interface.
|
the interface.
|
||||||
|
|
||||||
First, we create `name_input` by converting the `Dynamic<String>` into a text
|
First, we create `name_input` by converting the `Dynamic<String>` into a text
|
||||||
[`Input<String>`][input]. Since `Dynamic<String>` can be used as a
|
input widget ([`Input<String>`][input]). Since `Dynamic<String>` can be used as
|
||||||
[`Label`][label], all that's left is laying out our two widgets.
|
a [`Label`][label], all that's left is laying out our two widgets.
|
||||||
|
|
||||||
To layout `name_input` and `greeting`, we use a [`Stack`][stack] to lay out the
|
To layout `name_input` and `greeting`, we use a [`Stack`][stack] to lay out the
|
||||||
widgets as rows.
|
widgets as rows.
|
||||||
|
|
|
||||||
15
guide/src/widgets/layout/collapse.md
Normal file
15
guide/src/widgets/layout/collapse.md
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
# Collapse
|
||||||
|
|
||||||
|
The [`Collapse`][collapse] widget shows and hides its child based on the value
|
||||||
|
of a [`Dynamic<bool>`][dynamic]. It can collapse its child in either
|
||||||
|
orientation:
|
||||||
|
|
||||||
|
- [`Collapse::vertical()`][vertical]/[`MakeWidget::collapse_vertically()`][mw-collapse-v]
|
||||||
|
- [`Collapse::horizontal()`][horizontal]/[`MakeWidget::collapse_horizontally()`][mw-collapse-h]
|
||||||
|
|
||||||
|
[collapse]: <{{ docs }}/widgets/struct.Collapse.html>
|
||||||
|
[dynamic]: <{{ docs }}/value/struct.Dynamic.html>
|
||||||
|
[vertical]: <{{ docs }}/widgets/struct.Collapse.html#method.vertical>
|
||||||
|
[horizontal]: <{{ docs }}/widgets/struct.Collapse.html#method.horizontal>
|
||||||
|
[mw-collapse-v]: <{{ docs }}/widget/trait.MakeWidget.html#method.collapse_vertically>
|
||||||
|
[mw-collapse-h]: <{{ docs }}/widget/trait.MakeWidget.html#method.collapse_horizontally>
|
||||||
13
guide/src/widgets/layout/container.md
Normal file
13
guide/src/widgets/layout/container.md
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
# Container
|
||||||
|
|
||||||
|
The [`Container`][container] widget encloses a widget in a visual container.
|
||||||
|
|
||||||
|
The `Container`'s background color can be either specified explicitly, set using
|
||||||
|
a [`ContainerLevel`][container-level], or automatically selected based on the
|
||||||
|
current container level. Each container level has an associated theme color.
|
||||||
|
|
||||||
|
When using automatic container levels and the highest-level container level is
|
||||||
|
reached, the level will wrap to the lowest level.
|
||||||
|
|
||||||
|
[container]: <{{ docs }}/widgets/container/struct.Container.html>
|
||||||
|
[container-level]: <{{ docs }}/styles/enum.ContainerLevel.html>
|
||||||
20
guide/src/widgets/layout/expand.md
Normal file
20
guide/src/widgets/layout/expand.md
Normal file
|
|
@ -0,0 +1,20 @@
|
||||||
|
# Expand
|
||||||
|
|
||||||
|
The [`Expand`][expand] widget expands its child to fill as much space as
|
||||||
|
available.
|
||||||
|
|
||||||
|
The Expand widget can be constructed to expand horizontally and/or vertically:
|
||||||
|
|
||||||
|
- Expand the child's width and height: [`Expand::new`][new]/[`MakeWidget::expand`][mw-expand]
|
||||||
|
- Expand the child's width only:
|
||||||
|
[`Expand::horizontal`][horizontal]/[`MakeWidget::expand_horizontally`][mw-expand-h]
|
||||||
|
- Expand the child's height only:
|
||||||
|
[`Expand::vertical`][vertical]/[`MakeWidget::expand_vertically`][mw-expand-v]
|
||||||
|
|
||||||
|
[expand]: <{{ docs }}/widgets/struct.Expand.html>
|
||||||
|
[new]: <{{ docs }}/widgets/struct.Expand.html#method.new>
|
||||||
|
[vertical]: <{{ docs }}/widgets/struct.Expand.html#method.vertical>
|
||||||
|
[horizontal]: <{{ docs }}/widgets/struct.Expand.html#method.horizontal>
|
||||||
|
[mw-expand]: <{{ docs }}/widget/trait.MakeWidget.html#method.expand>
|
||||||
|
[mw-expand-v]: <{{ docs }}/widget/trait.MakeWidget.html#method.expand_vertically>
|
||||||
|
[mw-expand-h]: <{{ docs }}/widget/trait.MakeWidget.html#method.expand_horizontally>
|
||||||
22
guide/src/widgets/layout/grid.md
Normal file
22
guide/src/widgets/layout/grid.md
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
# Grid
|
||||||
|
|
||||||
|
The [`Grid`][grid] widget lays out a set of widgets in a two dimensional grid.
|
||||||
|
|
||||||
|
It is constructed with a primary orientation, which can be given a set of
|
||||||
|
[`GridDimension`][grid-dimension] to affect how the opposite orientation's
|
||||||
|
elements are measured.
|
||||||
|
|
||||||
|
For example, to create a grid that resembles a traditional table, use
|
||||||
|
[`Grid::from_rows`][from-rows] to create the grid, and
|
||||||
|
[`Grid::dimensions`][dimensions] would be used to control each column's
|
||||||
|
measurement strategy.
|
||||||
|
|
||||||
|
Alternatively when creating a grid with [`Grid::from_columns`][from-columns],
|
||||||
|
[`Grid::dimensions`][dimensions] is instead used to control each row's
|
||||||
|
measurement strategy.
|
||||||
|
|
||||||
|
[grid]: <{{ docs }}/widgets/grid/struct.Grid.html>
|
||||||
|
[from-rows]: <{{ docs }}/widgets/grid/struct.Grid.html#method.from_rows>
|
||||||
|
[from-columns]: <{{ docs }}/widgets/grid/struct.Grid.html#method.from_columns>
|
||||||
|
[dimensions]: <{{ docs }}/widgets/grid/struct.Grid.html#method.dimensions>
|
||||||
|
[grid-dimension]: <{{ docs }}/widgets/grid/enum.GridDimension.html>
|
||||||
10
guide/src/widgets/layout/layers.md
Normal file
10
guide/src/widgets/layout/layers.md
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
# Layers
|
||||||
|
|
||||||
|
The [`Layers`][layers] widget lays its [`Children`][children] widgets on top of
|
||||||
|
each other in the Z orientation.
|
||||||
|
|
||||||
|
When computing its size, it uses the largest width and height from all of its
|
||||||
|
children.
|
||||||
|
|
||||||
|
[Layers]: <{{ docs }}/widgets/layers/struct.Layers.html>
|
||||||
|
[children]: <{{ docs }}/widget/struct.Children.html>
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
# Layout Widgets
|
|
||||||
13
guide/src/widgets/layout/resize.md
Normal file
13
guide/src/widgets/layout/resize.md
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
# Resize
|
||||||
|
|
||||||
|
The [`Resize`][resize] widget constrains and/or overrides its child's size.
|
||||||
|
|
||||||
|
The resize widget uses [`DimensionRange`s][dimension-range] to specify the
|
||||||
|
allowed range of dimensions that its child can use. `DimensionRange` implements
|
||||||
|
`From` for all of the built-in range types in Rust with [`Lp`][lp], [`Px`][px], or [`Dimension`][dimension] bounds.
|
||||||
|
|
||||||
|
[resize]: <{{ docs }}/widgets/struct.Resize.html>
|
||||||
|
[dimension-range]: <{{ docs }}/styles/struct.DimensionRange.html>
|
||||||
|
[dimension]: <{{ docs }}/styles/enum.Dimension.html>
|
||||||
|
[lp]: <https://docs.rs/figures/latest/figures/units/struct.Lp.html>
|
||||||
|
[px]: <https://docs.rs/figures/latest/figures/units/struct.Px.html>
|
||||||
18
guide/src/widgets/layout/stack.md
Normal file
18
guide/src/widgets/layout/stack.md
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
# Stack
|
||||||
|
|
||||||
|
The [`Stack`][stack] widget lays a set of [`Children`][children] as either a set
|
||||||
|
of columns or rows. It is a convenient way to construct a 1D
|
||||||
|
[`Grid`](./grid.md). It can be constructed using either:
|
||||||
|
|
||||||
|
- [`Stack::rows`][rows]/[`Children::into_rows()`][into_rows]
|
||||||
|
- [`Stack::columns`][columns]/[`Children::into_columns()`][into_columns]
|
||||||
|
|
||||||
|
The stack widget places spacing between each element called a [gutter][gutter].
|
||||||
|
|
||||||
|
[stack]: <{{ docs }}/widgets/stack/struct.Stack.html>
|
||||||
|
[children]: <{{ docs }}/widget/struct.Children.html>
|
||||||
|
[rows]: <{{ docs }}/widgets/stack/struct.Stack.html#method.rows>
|
||||||
|
[columns]: <{{ docs }}/widgets/stack/struct.Stack.html#method.columns>
|
||||||
|
[into_columns]: <{{ docs }}/widget/struct.Children.html#method.into_columns>
|
||||||
|
[into_rows]: <{{ docs }}/widget/struct.Children.html#method.into_rows>
|
||||||
|
[gutter]: <{{ docs }}/widgets/stack/struct.Stack.html#method.gutter>
|
||||||
34
guide/src/widgets/layout/wrap.md
Normal file
34
guide/src/widgets/layout/wrap.md
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
# Wrap
|
||||||
|
|
||||||
|
The [`Wrap`][wrap] widget lays its [`Children`][children] widgets out in a
|
||||||
|
fashion that mimics text layout.
|
||||||
|
|
||||||
|
It works by measuring each child with [`SizeToFit`][size-to-fit] and laying out
|
||||||
|
the widgets into a series of rows. A fixed amount of [spacing][spacing] between
|
||||||
|
each widget can be applied.
|
||||||
|
|
||||||
|
Once the widgets have been grouped into rows, the [alignment][align] and
|
||||||
|
[vertical alignment][v-align] are applied to position the widgets on each row.
|
||||||
|
[`WrapAlign`][wrapalign] can be any of these strategies:
|
||||||
|
|
||||||
|
- `Start`: Position the widgets at the start of the line, honoring
|
||||||
|
[`LayoutOrder`][layoutorder].
|
||||||
|
- `End`: Position the widgets at the end of the line, honoring
|
||||||
|
[`LayoutOrder`][layoutorder].
|
||||||
|
- `Center`: Position the widgets centered on each line.
|
||||||
|
- `SpaceBetween`: Position the elements evenly along the line with no space
|
||||||
|
before the first widget or after the last widget.
|
||||||
|
- `SpaceEvenly`: Position the elements evenly along the line with an additional
|
||||||
|
half of the spacing between elements before the first widget and after the
|
||||||
|
last widget.
|
||||||
|
- `SpaceAround`: Position the elements evenly along the line with an additional
|
||||||
|
equal amount of spacing before the first widget and after the last widget.
|
||||||
|
|
||||||
|
[wrap]: <{{ docs }}/widgets/wrap/struct.Wrap.html>
|
||||||
|
[wrapalign]: <{{ docs }}/widgets/wrap/enum.WrapAlign.html>
|
||||||
|
[children]: <{{ docs }}/widget/struct.Children.html>
|
||||||
|
[size-to-fit]: <{{ docs }}/enum.ConstraintLimit.html#variant.SizeToFit>
|
||||||
|
[spacing]: <{{ docs }}/widgets/wrap/struct.Wrap.html#method.spacing>
|
||||||
|
[align]: <{{ docs }}/widgets/wrap/struct.Wrap.html#method.align>
|
||||||
|
[v-align]: <{{ docs }}/widgets/wrap/struct.Wrap.html#method.vertical_align>
|
||||||
|
[layoutorder]: <{{ docs }}/styles/components/struct.LayoutOrder.html>
|
||||||
|
|
@ -3487,7 +3487,6 @@ where
|
||||||
}
|
}
|
||||||
let elapsed = now.saturating_duration_since(last_frame);
|
let elapsed = now.saturating_duration_since(last_frame);
|
||||||
last_frame = now;
|
last_frame = now;
|
||||||
println!("Redrawing");
|
|
||||||
self.recorder.redraw();
|
self.recorder.redraw();
|
||||||
let capture = self.recorder.capture.take().assert("always present");
|
let capture = self.recorder.capture.take().assert("always present");
|
||||||
if assembler.sender.send((capture, elapsed)).is_err() {
|
if assembler.sender.send((capture, elapsed)).is_err() {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue