diff --git a/guide/src/SUMMARY.md b/guide/src/SUMMARY.md index 2660906..c26ca99 100644 --- a/guide/src/SUMMARY.md +++ b/guide/src/SUMMARY.md @@ -9,14 +9,14 @@ - [Widgets]() - [Layout Widgets](./widgets/layout.md) - [Align](./widgets/layout/align.md) - - [Collapse]() - - [Container]() - - [Expand]() - - [Grid]() - - [Layers]() - - [Resize]() - - [Stack]() - - [Wrap]() + - [Collapse](./widgets/layout/collapse.md) + - [Container](./widgets/layout/container.md) + - [Expand](./widgets/layout/expand.md) + - [Grid](./widgets/layout/grid.md) + - [Layers](./widgets/layout/layers.md) + - [Resize](./widgets/layout/resize.md) + - [Stack](./widgets/layout/stack.md) + - [Wrap](./widgets/layout/wrap.md) - [Controls](./widgets/controls.md) - [Button]() - [Canvas]() diff --git a/guide/src/about.md b/guide/src/about.md index 729bcd4..21315cb 100644 --- a/guide/src/about.md +++ b/guide/src/about.md @@ -7,11 +7,11 @@ when available. It does not utilize any existing widget libraries. Cushy's high-level goals are to be: -- Easy-to-use. -- Flexible. -- Predictable. -- Efficient. -- Accessible. +- Easy-to-use +- Flexible +- Predictable +- Efficient +- Accessible Being so early in development, Cushy has not yet achieved all of its goals, especially with regards to accessibility. diff --git a/guide/src/about/philosophies.md b/guide/src/about/philosophies.md index 7db8f71..b517b8b 100644 --- a/guide/src/about/philosophies.md +++ b/guide/src/about/philosophies.md @@ -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 widgets can contain other widgets. - 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 - aide in developers being able to compose more complex user interfaces from - more basic widgets. + is aimed at providing a suite of single-purpose widgets that can be composed + to create more complex user interfaces. - 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 have this flexibility, all provided widgets must only utilize functionality diff --git a/guide/src/intro.md b/guide/src/intro.md index e5cb461..7739816 100644 --- a/guide/src/intro.md +++ b/guide/src/intro.md @@ -41,8 +41,8 @@ pieces of data our user interface is going to work with, we can start assembling the interface. First, we create `name_input` by converting the `Dynamic` into a text -[`Input`][input]. Since `Dynamic` can be used as a -[`Label`][label], all that's left is laying out our two widgets. +input widget ([`Input`][input]). Since `Dynamic` can be used as +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 widgets as rows. diff --git a/guide/src/widgets/layout/collapse.md b/guide/src/widgets/layout/collapse.md new file mode 100644 index 0000000..aa83b36 --- /dev/null +++ b/guide/src/widgets/layout/collapse.md @@ -0,0 +1,15 @@ +# Collapse + +The [`Collapse`][collapse] widget shows and hides its child based on the value +of a [`Dynamic`][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> diff --git a/guide/src/widgets/layout/container.md b/guide/src/widgets/layout/container.md new file mode 100644 index 0000000..f496627 --- /dev/null +++ b/guide/src/widgets/layout/container.md @@ -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> diff --git a/guide/src/widgets/layout/expand.md b/guide/src/widgets/layout/expand.md new file mode 100644 index 0000000..b97e6f8 --- /dev/null +++ b/guide/src/widgets/layout/expand.md @@ -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> diff --git a/guide/src/widgets/layout/grid.md b/guide/src/widgets/layout/grid.md new file mode 100644 index 0000000..14ca93c --- /dev/null +++ b/guide/src/widgets/layout/grid.md @@ -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> diff --git a/guide/src/widgets/layout/layers.md b/guide/src/widgets/layout/layers.md new file mode 100644 index 0000000..27c616a --- /dev/null +++ b/guide/src/widgets/layout/layers.md @@ -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> diff --git a/guide/src/widgets/layout/layout.md b/guide/src/widgets/layout/layout.md deleted file mode 100644 index 40eefa2..0000000 --- a/guide/src/widgets/layout/layout.md +++ /dev/null @@ -1 +0,0 @@ -# Layout Widgets diff --git a/guide/src/widgets/layout/resize.md b/guide/src/widgets/layout/resize.md new file mode 100644 index 0000000..fb8d382 --- /dev/null +++ b/guide/src/widgets/layout/resize.md @@ -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]: +[px]: diff --git a/guide/src/widgets/layout/stack.md b/guide/src/widgets/layout/stack.md new file mode 100644 index 0000000..c1a905f --- /dev/null +++ b/guide/src/widgets/layout/stack.md @@ -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> diff --git a/guide/src/widgets/layout/wrap.md b/guide/src/widgets/layout/wrap.md new file mode 100644 index 0000000..9e227b5 --- /dev/null +++ b/guide/src/widgets/layout/wrap.md @@ -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> diff --git a/src/window.rs b/src/window.rs index cdd0c02..00a1d12 100644 --- a/src/window.rs +++ b/src/window.rs @@ -3487,7 +3487,6 @@ where } let elapsed = now.saturating_duration_since(last_frame); last_frame = now; - println!("Redrawing"); self.recorder.redraw(); let capture = self.recorder.capture.take().assert("always present"); if assembler.sender.send((capture, elapsed)).is_err() {