mirror of
https://github.com/bevyengine/bevy
synced 2024-09-20 06:22:01 +00:00
a7aee1d03a
# Objective While doing a bunch of testing on examples, I noticed that this particular example had lots of room for improvement. This example is shown in example showcase, so it might as well look nice. - The "overflow containers" have no vertical separation from each other - The "overflow containers" are aligned awkwardly - The instructions say you can "toggle" overflow, but it's actually cycling through various overflow modes, with no indication of which mode is currently active. - The UI structure could be simplified ## Solution - Simplify the UI structure by - Moving the instructions into an absolutely positioned node, which we do in most other examples with instructions - Using a grid layout and removing some unnecessary containers - Show the current overflow mode - Add a gap between the overflow containers - Other misc cleanup ## Before / After <img width="1280" alt="Screenshot 2024-02-15 at 9 48 02 AM" src="https://github.com/bevyengine/bevy/assets/200550/046e53b3-f744-48a2-b5ac-24b3f35b64ca"> <img width="1280" alt="Screenshot 2024-02-15 at 9 48 26 AM" src="https://github.com/bevyengine/bevy/assets/200550/7e5e4ecf-dd1d-440a-b4a8-dd43bee3ef0a"> |
||
|---|---|---|
| .. | ||
| borders.rs | ||
| button.rs | ||
| display_and_visibility.rs | ||
| flex_layout.rs | ||
| font_atlas_debug.rs | ||
| grid.rs | ||
| overflow.rs | ||
| overflow_debug.rs | ||
| relative_cursor_position.rs | ||
| render_ui_to_texture.rs | ||
| size_constraints.rs | ||
| text.rs | ||
| text_debug.rs | ||
| text_wrap_debug.rs | ||
| transparency_ui.rs | ||
| ui.rs | ||
| ui_material.rs | ||
| ui_scaling.rs | ||
| ui_texture_atlas.rs | ||
| ui_texture_slice.rs | ||
| viewport_debug.rs | ||
| window_fallthrough.rs | ||
| z_index.rs | ||