UI Display and Visibility Example#7629

Merged

alice-i-cecile merged 31 commits intobevyengine:mainfrom

ickshonpe:display-example

Jun 19, 2023

Contributor

ickshonpe commented Feb 11, 2023 •

edited

Loading

Objective

An example demonstrating how Display and Visibility work in Bevy UI.

fixes #5380
related #5368

Changelog

Added the example flex_display.rs.

ickshonpe added 4 commits

February 11, 2023 20:39


          changes:

b6b11e4

* Added an example demonstrating how Display and Visibility work in the UI.


          cargo fmt --all

aab1812


          more contrast

51e3280


          build-example-pages

6d1f9bc

alice-i-cecile added C-Examples A-UI labels

ickshonpe added 2 commits

February 11, 2023 23:11


          changed colors

1e82c59


          fixed flex-direction bug

50b3f42

ickshonpe changed the title ~~UI Display and Visbility Example~~ UI Display and Visibility Example

ickshonpe added 2 commits

February 12, 2023 09:14


          larger font

b6984ab


          fixed left click bug

f5e8a4f

mockersf reviewed

View reviewed changes

examples/ui/flex_display.rs Outdated Show resolved Hide resolved

mockersf reviewed

View reviewed changes

Cargo.toml Outdated Show resolved Hide resolved


          * renamed example to "display_and_visbility.rs"

9b84d2d

* split up setup function
* added instructions text to example

Contributor

github-actions bot commented Feb 14, 2023

You added a new example but didn't add metadata for it. Please update the root Cargo.toml file.

ickshonpe added 4 commits

February 14, 2023 12:21


          change message on wasm build to press space instead of click right mouse

51fddf1

fmt

d319c9b


          build-example-pages

1c638bc


          changed labels into buttons

0d60e92

Contributor

rparrett commented Feb 15, 2023 •

edited

Loading

With all of the nodes arranged in a hierarchy as they are, aren't Display::None and Visibility::Hidden behaving pretty identically here?

Would it be more interesting to show the clickable nodes in a single parent flex container?


          changed labels into buttons

a2324c2

Contributor Author

ickshonpe commented Feb 15, 2023

With all of the nodes arranged in a hierarchy as they are, aren't Display::None and Visibility::Hidden behaving pretty identically here?

Would it be more interesting to show the clickable nodes in a single parent flex container?

I'm not quite sure what you mean, the behaviour is quite different isn't it? Display::None hides the node and all its descendants, while Visibility::Hidden hides itself and only its children that are Visibility::Inherited.

Contributor

rparrett commented Feb 15, 2023

I'm not quite sure what you mean, the behaviour is quite different isn't it? Display::None hides the node and all its descendants, while Visibility::Hidden hides itself and only its children that are Visibility::Inherited.

That's fair.

When I think of the difference between Display::None and Visibility::Hidden though, the first thing that comes to mind is that Visibility::Hidden doesn't affect layout, but Display::None does.

Although I'm not sure how to demonstrate both properties simultaneously.

"2" is Visibility::Hidden
+-----------+          
|+-+     +-+|          
||1|     |3||          
|+-+     +-+|          
+-----------+
          
"2" is Display::None
+-----------+          
|+-+ +-+    |          
||1| |3|    |          
|+-+ +-+    |          
+-----------+

Contributor Author

ickshonpe commented Feb 15, 2023 •

edited

Loading

Oh I get it, you are right. It needs to demonstrate how Display::None collapses the layout too, yes.


          Removed the Size constraint from the outer node of the left panel s…

940be11

…o that it collapses when `Display::None` is set on its child.

Contributor Author

ickshonpe commented Feb 15, 2023

Should be able to do something like that with the inner nodes too somehow.

Contributor Author

ickshonpe commented Feb 15, 2023 •

edited

Loading

Oh I know I can stuff each node with a second invisible panel.

That's much better.

ickshonpe added 3 commits

February 15, 2023 18:30


          Stuff each node on the left panel with a second invisable node.

6a86a77


          remove width constraints on inner nodes and cargo fmt

c9582e4


          lint fixes

53e23e6

omwda approved these changes

View reviewed changes

omwda left a comment

Looking good :)

james7132 added this to the 0.11 milestone

doup approved these changes

View reviewed changes

Contributor

doup left a comment

Approved with a couple of nits that I think are worth adding… but, up to you.
Nice example 👍

examples/ui/display_and_visibility.rs Show resolved Hide resolved

examples/ui/display_and_visibility.rs Outdated Show resolved Hide resolved

doup reviewed

View reviewed changes

examples/ui/display_and_visibility.rs Outdated Show resolved Hide resolved

doup mentioned this pull request

Setting the visibility of UI nodes is confusing and redundant #5368

Open

alice-i-cecile added the S-Ready-For-Final-Review label

Member

alice-i-cecile commented Jun 19, 2023

@ickshonpe can you fix the conflicts and make a call on the nits? I think they're an improvement, but I won't block on them.

Contributor Author

ickshonpe commented Jun 19, 2023

@ickshonpe can you fix the conflicts and make a call on the nits? I think they're an improvement, but I won't block on them.

Yep I'll take a look

ickshonpe added 2 commits

June 19, 2023 21:22


          Merge branch 'main' into display-example

9a04d5b


          Fixed errrors resulting from the merge.

094c98a

Contributor

github-actions bot commented Jun 19, 2023

You added a new example but didn't update the readme. Please run cargo run -p build-templated-pages -- update examples to update it, and commit the file change.

1 similar comment

Contributor

github-actions bot commented Jun 19, 2023

You added a new example but didn't update the readme. Please run cargo run -p build-templated-pages -- update examples to update it, and commit the file change.

ickshonpe added 2 commits

June 19, 2023 21:55


          Moved the button labels to child TextBundles rather instead adding …

7ded881

…the text components directly to the `ButtonBundle`s.


          Fixed the text button color changes when hovered.

823b611

Contributor

github-actions bot commented Jun 19, 2023

You added a new example but didn't update the readme. Please run cargo run -p build-templated-pages -- update examples to update it, and commit the file change.

1 similar comment

Contributor

github-actions bot commented Jun 19, 2023

You added a new example but didn't update the readme. Please run cargo run -p build-templated-pages -- update examples to update it, and commit the file change.


          Changed the palette to different blue-ish shades for the panels, text…

08b0580

… is red when properties set to `Display::None` or `Visibility::Hidden`.

Contributor

github-actions bot commented Jun 19, 2023

You added a new example but didn't update the readme. Please run cargo run -p build-templated-pages -- update examples to update it, and commit the file change.


          cargo run -p build-templated-pages -- update examples

d0789f2

mockersf approved these changes

View reviewed changes

alice-i-cecile added this pull request to the merge queue


          Added descriptions for some of the properties

d1c4b36

alice-i-cecile removed this pull request from the merge queue due to a manual request

Contributor Author

ickshonpe commented Jun 19, 2023

Everything resolved, should be ready as long as its passes CI checks.

alice-i-cecile enabled auto-merge

June 19, 2023 23:05

alice-i-cecile added this pull request to the merge queue

Merged via the queue into bevyengine:main with commit 50c50cd

This was referenced Jun 28, 2023

News: Release 0.11 (wrong branch ... see #657) bevyengine/bevy-website#656

Closed

News: Release 0.11 bevyengine/bevy-website#657

Merged

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

A-UI C-Examples S-Ready-For-Final-Review