Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI Docs update #269

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+601 −21
Open

UI Docs update #269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b68f13d
move `Layout Controls` section to `containers.md`
aspiringLich Jul 20, 2024
96a16e7
add convention warning
aspiringLich Jul 20, 2024
f3a8636
update ui docs
aspiringLich Jul 21, 2024
aece4d6
tweak docs w/ new changes
aspiringLich Sep 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion src/SUMMARY.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,9 @@ SS14 By Example
- [Porting Appearance Visualizers](en/ss14-by-example/making-a-sprite-dynamic/porting-appearance-visualizers.md)
- [Basic Networking and You](en/ss14-by-example/basic-networking-and-you.md)
- [Fluent and Localization](en/ss14-by-example/fluent-and-localization.md)
- [UI Survival Guide](en/ss14-by-example/ui-survival-guide.md)
- [UI and You](en/ss14-by-example/ui-and-you.md)
- [UI Cookbook](en/ss14-by-example/ui-and-you/ui-cookbook.md)
- [UI Survival Guide](en/ss14-by-example/ui-survival-guide.md)


Robust Toolbox
Expand All @@ -78,6 +80,7 @@ Robust Toolbox
- [General](en/robust-toolbox/toolshed/commands/general.md)
- [Miscellaneous](en/robust-toolbox/toolshed/commands/misc.md)
- [User Interface](en/robust-toolbox/user-interface.md)
- [Containers](en/robust-toolbox/user-interface/containers.md)
- [IoC](en/robust-toolbox/ioc.md)
- [Rendering]()
- [Lighting and FoV](en/robust-toolbox/rendering/lighting-and-fov.md)
Expand Down
24 changes: 4 additions & 20 deletions src/en/robust-toolbox/user-interface.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
# User Interface

```admonish warning
The information on this page may not completely conform to conventions in Space Station 14 code.
```

I can't be bothered to think of an elegant opening paragraph for this page. This is the UI tutorial.

```admonish info
Expand Down Expand Up @@ -142,26 +146,6 @@ There are other useful layout properties you can use to influence layout of an i
* `SetSize`/`SetWidth`/`SetHeight`: Allows you to set a specific size for a control.
* `Margin`: Allows you to set a margin of blank space around a control.

## Layout Controls

There are many controls whose sole purpose is to lay their children out in a certain way, and otherwise be invisible. This section will go over some of them.

### `BoxContainer`

`BoxContainer` is perhaps one of the simplest layout controls there is. It lays out its children sequentially in a certain `Orientation`, either vertically or horizontally. Controls do not overlap.

### `GridContainer`

`GridContainer` lays out its children in a configurable grid.

### `ScrollContainer`

TODO

### `LayoutContainer`

TODO

## Common Attributes
These attributes are present on most layout controls.
### Margin
Expand Down
72 changes: 72 additions & 0 deletions src/en/robust-toolbox/user-interface/containers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
# Container Controls

There are many controls whose sole purpose is to lay their children out in a certain way, and otherwise be invisible. This section will go over some of them.

This is not a complete list, but it does cover the most commonly used ones. If you would like to complete this list and PR it that would be appreciated :).

## `BoxContainer`

`BoxContainer` is perhaps one of the simplest layout controls there is. It lays out its children sequentially in a certain `Orientation`, either vertically or horizontally. Controls do not overlap.

```admonish warning
You MUST include a `Orientation` for the `BoxContainer` to work.
```

| Field | Type | Effective Default Value | Description |
| -------------------- | ------------------- | ----------------------- | ----------------------------------------------------------- |
| `Orientation` | `LayoutOrientation` | | Whether to arrange the elements horizontally or vertically. |
| `Align` | `AlignMode` | | The alignment of the children along the orientation axis. |
| `SeparationOverride` | `int` | `0` | The separation between elements. |

## `GridContainer`

`GridContainer` lays out its children in a configurable grid.

| Field | Type | Effective Default Value | Description |
| --------------------- | ------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `Columns` | `int` | | The number of columns to organize the children into. |
| `Rows` | `int` | | The number of rows to organize the children into. |
| `MaxGridWidth` | `float` | | The maximum width of the grid of elements, and dynamically determines the number of columns based on the size of the elements. |
| `MaxGridHeight` | `float` | | The maximum height of the grid, and dynamically determines the number of rows based on the size of the elements |
| `VSeparationOverride` | `int` | `0` | The vertical separation between elements. |
| `HSeparationOverride` | `int` | `0` | The horizontal separation between elements. |
| `ExpandBackwards` | `bool` | `false` | Whether to expand the grid backwards, i.e. from the bottom-right to the top-left. |

## `ScrollContainer`

`ScrollContainer` is a container that shows a slice of its children, with scrollbars to scroll through the rest. You've seen a scrollbar before you know what this is.

| Field | Type | Effective Default Value | Description |
| ----------------------- | ------ | ----------------------- | --------------------------------------------------------------------------- |
| `FallbackDeltaScroll` | `bool` | `false` | If true, if we have a y-axis scroll it will convert it to an x-axis scroll. |
| `ScrollSpeedX` | `int` | `50` | The scroll speed in the x-direction. |
| `ScrollSpeedY` | `int` | `50` | The scroll speed in the y-direction. |
| `ReserveScrollbarSpace` | `bool` | `true` | Whether the scrollbar will take up space in the layout |
| `ReturnMeasure` | `bool` | `false` | _TODO: I do not know what this does_ |
| `VScrollEnabled` | `bool` | `true` | Whether vertical scrolling is enabled. |
| `HScrollEnabled` | `bool` | `true` | Whether horizontal scrolling is enabled. |

### `LayoutContainer`

`LayoutContainer` helps in complicated layouts by arranging its children.

| Field | Type | Effective Default Value | Description |
| --------------------- | ------- | ----------------------- | ------------------------------------------------------------------------------------------ |
| `AnchorBegin` | `float` | `0` | The value of an anchor that is at the beginning of the layout. |
| `AnchorEnd` | `float` | `1` | The value of an anchor that is at the end of the layout. |
| `InheritChildMeasure` | `bool` | `true` | If true, measurements of this control will be at least the size of any contained controls. |

Then children of the `LayoutContainer` may use to following fields to control their layout:

| Field | Type |
| ---------------- | ------- |
| `MarginLeft` | `float` |
| `MarginTop` | `float` |
| `MarginRight` | `float` |
| `MarginBottom` | `float` |
| `AnchorLeft` | `float` |
| `AnchorTop` | `float` |
| `AnchorRight` | `float` |
| `AnchorBottom` | `float` |
| `GrowHorizontal` | `bool` |
| `GrowVertical` | `bool` |
Loading
Loading