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

Modal dialogs #686

Open
sourcebox opened this issue Aug 31, 2021 · 8 comments · May be fixed by #839
Open

Modal dialogs #686

sourcebox opened this issue Aug 31, 2021 · 8 comments · May be fixed by #839
Assignees
@lucasmerlin
Labels
design Some architectual design work needed feature New feature or request rerun Desired for Rerun.io
Milestone
Next Major Release

Comments

@sourcebox
Copy link

I had a look into the various areas of the demo and could not find anything. Is it already possible to use modal dialogs, e.g. for errors, user confirmation or an "about box" with credits?
@Muqito

This comment was marked as outdated.

Sign in to view
@sourcebox
Copy link
Author

Hmm... The settings window in the demo is not modal, it loses focus when you click another window.

@emilk
Copy link
Owner

emilk commented Sep 9, 2021

There is no modal windows in egui at the moment, but I suspect adding support for it would be pretty easy (just ignore interactions with the non-modal Area).

I wonder if one should also darken the background when showing a modal window?

@sourcebox
Copy link
Author

I wonder if one should also darken the background when showing a modal window?

Something like that would be nice, so the user can easily recognize that his attention is required.

@emilk emilk added the feature New feature or request label Sep 28, 2021
@Dinopaterno22
Copy link

Definitely something that I'd be interested in having, as my current "project" would need to implement a sort of dialog boxes for data introduction! Thanks for hearing @sourcebox out, @emilk :)

@plasticartsshow
Copy link

I would like to open a PR that might solve this. Can I?

@plasticartsshow plasticartsshow linked a pull request Oct 25, 2021 that will close this issue
Draft
5 tasks
@emilk emilk added the design Some architectual design work needed label Jan 3, 2022
@coderedart coderedart mentioned this issue Aug 26, 2022
Open
@emilk emilk added the rerun Desired for Rerun.io label Nov 14, 2023
@abey79 abey79 mentioned this issue Dec 18, 2023
Merged
4 tasks
abey79 added a commit to rerun-io/rerun that referenced this issue Dec 19, 2023
@abey79 @Wumpf
Add support for modal windows to re_ui and use it for the Space Vie…
cde58b1 
…w entity picker (#4577)

### What

Since egui doesn't have support for modal windows yet (emilk/egui#686),
we rolled our own for the Space View entity picker ("Add/remove
entities"). This PR abstracts the modal creation code into a dedicated
feature in `re_ui`, and use that abstraction for the space view entity
picker.

The new `re_ui::modal` has support for two aspects of modal window
management:
- The modal window itself (`re_ui::modal::Modal`), which handles dimming
the background, a close button, and exiting with ESC and/or clicking
outside of the window.
- The handling of the modal window (`re_ui::modal::ModalHandler`). The
`Modal` struct should be kept only while the modal is actually shown, so
it's typically held in and `Option<Modal>`. `ModalHandler` implements
the house keeping of populating the `Option` when the modal must be
displayed, and dropping it when the modal is closed.

**Note**: with this PR, the modals are now properly centred, although
erroneous centring behaviour might happen that require deleting your
`app.ron`. This will eventually be fixed with a new egui release that
includes emilk/egui#3721

Usage:

<img width="583" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/a079def4-f11a-4eeb-a3ec-6c777d078bdd">


<img width="443" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/13114dd4-3051-486c-9e4a-df4c783a0780">



### Checklist
* [x] I have read and agree to [Contributor
Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and
the [Code of
Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md)
* [x] I've included a screenshot or gif (if applicable)
* [x] I have tested the web demo (if applicable):
* Using newly built examples:
[app.rerun.io](https://app.rerun.io/pr/4577/index.html)
* Using examples from latest `main` build:
[app.rerun.io](https://app.rerun.io/pr/4577/index.html?manifest_url=https://app.rerun.io/version/main/examples_manifest.json)
* Using full set of examples from `nightly` build:
[app.rerun.io](https://app.rerun.io/pr/4577/index.html?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json)
* [x] The PR title and labels are set such as to maximize their
usefulness for the next release's CHANGELOG

- [PR Build Summary](https://build.rerun.io/pr/4577)
- [Docs
preview](https://rerun.io/preview/fb5add0047f108769c413393d65d52e362cbcc8e/docs)
<!--DOCS-PREVIEW-->
- [Examples
preview](https://rerun.io/preview/fb5add0047f108769c413393d65d52e362cbcc8e/examples)
<!--EXAMPLES-PREVIEW-->
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

---------

Co-authored-by: Andreas Reich <[email protected]>
@emilk emilk mentioned this issue Dec 28, 2023
Open
@emilk emilk added this to the Next Major Release milestone Oct 29, 2024
@emilk
Copy link
Owner

emilk commented Oct 29, 2024 •
edited
Loading

A proper modal window should have the following properties:

A) it should open on top of all existing windows
B) it should support having tooltips and menus
C) it should support opening another modal window
D) everything behind the top-most modal window should be non-interactive
E) everything behind the top-most modal window should fade out subtly

This implies some sort of ordered stack of modal LayerIds.
If that stack is empty, there is no modal window open, and everything is normal.
If the stack is non-empty, then everything behind the top-most modal window should be non-interactive, and faded out.
This could be done by inserting an extra area/layer behind the modal that covers the entire screen, with transparency. That then solves both the input-stealing and the fade-out.

It should also be easy to configure how to dismiss a modal by e.g. pressing escape (should only escape the top-most modal!) or pressing anywhere on the background.

@crumblingstatue
Copy link
Contributor

crumblingstatue commented Oct 29, 2024 •
edited
Loading

C) it should support opening another modal window

Thank you for pointing that out. I'm currently using egui-file-dialog, which supports being modal, and also displaying a custom right panel.

image

I want to add a button to the right panel to select an optional "metafile" to use for the selected file (a feature of my hex editor), which would open up another modal file dialog to select the metafile.
I want to be able to do this without closing the currently opened file dialog, so proper support for this would be awesome!

@lucasmerlin lucasmerlin self-assigned this Nov 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@lucasmerlin lucasmerlin

Labels
design Some architectual design work needed feature New feature or request rerun Desired for Rerun.io
Projects
None yet
Milestone
Next Major Release
Development

Successfully merging a pull request may close this issue.

Modal Dialogs plasticartsshow/egui
7 participants
@Dinopaterno22 @emilk @sourcebox @crumblingstatue @Muqito @lucasmerlin @plasticartsshow