Reducing nesting in UI examples

[MiniaczQ]

Objective

Reduce the nesting in UI examples through extraction.
Fixes #3850

Status

Testing which layouts scale better.

[IceSentry]

I think I'd prefer passing in the text as an argument to at least hint at the fact that it is an abstraction.

[MiniaczQ]

This is fine for now, but it still scales awfully with more elements nested.

[IceSentry]

I like the direction this is going. It's nice that layout and styling isn't mixed together, but this also shows how painful the whole parent,with_children is

[MiniaczQ]

Yeah, there is also a rare insert in between,

There is also the option of putting Commands into the functions,
but that reduces the layout readability.
It may be worth it if spaced well.

[alice-i-cecile]

but this also shows how painful the whole parent.with_children is

Yep. My opinion is that this API should just be removed.

[MiniaczQ]

What would replace it though?

[alice-i-cecile]

What would replace it though?

.push_children, and the friends in #3855.

[ickshonpe]

You could reduce the nesting by reusing the root element's EntityCommands instead of having a root level with_children,

let root = root.spawn_bundle(root_element());

 // left vertical fill (border)
 root.spawn_bundle(left_vertical_fill_border())
    .with_children(|parent| {
       ...
    });

// right vertical fill
root.spawn_bundle(right_vertical_fill())
    .with_children(|parent| {
        ...
    });

etc

[MiniaczQ]

Gonna wait for a UI api refactor