Added layout widget descriptions

This commit is contained in:
Jonathan Johnson 2024-01-07 11:49:39 -08:00
parent b82208887d
commit 01d6da3d35
No known key found for this signature in database
GPG key ID: A66D6A34D6620579
14 changed files with 162 additions and 20 deletions

View file

@ -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]()

View file

@ -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.

View file

@ -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

View file

@ -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.

View 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>

View 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>

View 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>

View 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>

View 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>

View file

@ -1 +0,0 @@
# Layout Widgets

View 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>

View 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>

View 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>

View file

@ -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() {