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.

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

Collapsing header with custom header #1538

Merged
merged 14 commits into from
Apr 28, 2022
Merged

Collapsing header with custom header #1538

merged 14 commits into from
Apr 28, 2022

Conversation

emilk
Copy link
Owner

@emilk emilk commented Apr 27, 2022

This makes it possible to construct collapsing headers with custom header contents.

Closes #754
Closes #1036

let id = ui.make_persistent_id("my_collapsing_header");
egui::collapsing_header::CollapsingState::load_with_default_open(ui.ctx(), id, false)
    .show_header(ui, |ui| {
        ui.label("Header"); // you can put checkboxes or whatever here
    })
    .body(|ui| ui.label("Body"));

I think this is a better approach for making header selectable, which means we could/should deprecate CollapsingHeader::selectable, which is buggy anyway (i.e. clicking both selects and toggles, which is very annoying).

This introduces a separate CollapsingState which is perhaps a bit confusing, but CollapsingHeader is a bit overloaded with features and I didn't want to pile onto it. CollapsingState can also be used as a more low-level building block (and is indeed used by CollapsingHeader and by Window).

TODO

  • Fix window collapse animation
  • Improve UI: break up show_custom_header into two calls

@emilk emilk marked this pull request as ready for review April 27, 2022 19:55
@emilk emilk changed the title Collapsing header building blocks Collapsing header with custom header Apr 27, 2022
@Mingun
Copy link
Contributor

Mingun commented Apr 28, 2022

I think, this will help with #1036 as well?

@gents83
Copy link
Contributor

gents83 commented Apr 28, 2022

I really like the idea of having header separate from the body itself and It looks nicer.
I just didn't get the example that show the selected state, that seems now just a tree (Sorry I'm looking at it from mobile and it's not really helping 😅)
Is It left to the user instead of being managed automatically?

@emilk
Copy link
Owner Author

emilk commented Apr 28, 2022

@gents83 yeah, that's the point. Instead of having "selectable" as part of CollapsingHeader you can built it yourself, with all the details you want:

let id = ui.make_persistent_id("my_collapsing_header");
egui::collapsing_header::CollapsingState::load_with_default_open(ui.ctx(), id, true)
    .show_header(ui, |ui| {
        ui.toggle_value(&mut self.selected, "Click to select/unselect header");
    }).body(|ui| {
        ui.label("Body");
    });

@emilk
Copy link
Owner Author

emilk commented Apr 28, 2022

I think I can improve the UI of this feature a bit though

@emilk emilk marked this pull request as draft April 28, 2022 06:57
@emilk emilk marked this pull request as ready for review April 28, 2022 07:40
@emilk emilk merged commit 39917be into master Apr 28, 2022
@emilk emilk deleted the collapsing-header-blocks branch April 28, 2022 09:09
@isolune
Copy link

isolune commented Apr 30, 2022

Is it possible to maintain "click header to expand tree" behavior with these semantics? I would like to use this to make a normal tree but with a context menu on each header, for example.

@emilk
Copy link
Owner Author

emilk commented Apr 30, 2022

@lumlune you should be able to do that like so:

let response = CollapsingHeader::new("header").show(ui, |ui| ui.label("body"));
response.header_response.context_menu(|ui| ui.label("Shown on right-clicks"));

it should work already on egui 0.17.0 IIRC

theoparis added a commit to theoparis/dyadikos-rs that referenced this pull request May 1, 2022
For now I have removed the selectable method call from the collapsing
entity ui. This can be re-added in the future, once the engine is more
complete. (see
emilk/egui#1538).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Generalize CollapsingHeader to show any widget as a header
4 participants