dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

modal: Display overlay at the correct z-index (#909)

Browse source 
| Before | After |
| - | - |
| <img width="1712" alt="SCR-20250528-ksil"
src="https://github.com/user-attachments/assets/3725f142-0792-478a-ac7e-1a9c5604821a"
/> | <img width="1712" alt="SCR-20250528-krmi"
src="https://github.com/user-attachments/assets/b0fac5db-97b2-4ebd-83e2-94786950185c"
/> |
This commit is contained in:
Floyd Wang 2025-05-28 11:57:23 +08:00 committed by GitHub
parent 49f1ac511d
commit 838ffe0a79
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 22 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
crates/story/src/modal_story.rs
View file

@ -144,7 +144,7 @@ impl ModalStory {
modal
.title("Other Modal")
.child("This is another modal.")
.min_h(px(300.))
.min_h(px(100.))
.overlay(overlay)
.keyboard(keyboard)
.show_close(modal_show_close)

2
crates/ui/src/modal.rs
View file

@ -135,7 +135,7 @@ impl Modal {
overlay: true,
keyboard: true,
layer_ix: 0,
overlay_visible: true,
overlay_visible: false,
on_close: Rc::new(|_, _, _| {}),
on_ok: None,
on_cancel: Rc::new(|_, _, _| true),

31
crates/ui/src/root.rs
View file

@ -356,35 +356,44 @@ impl Root {
let root = window.root::<Root>()??;
let active_modals = root.read(cx).active_modals.clone();
let mut has_overlay = false;
if active_modals.is_empty() {
return None;
}
Some(
div().children(active_modals.iter().enumerate().map(|(i, active_modal)| {
let mut show_overlay_ix = None;
let mut modals = active_modals
.iter()
.enumerate()
.map(|(i, active_modal)| {
let mut modal = Modal::new(window, cx);
modal = (active_modal.builder)(modal, window, cx);
modal.layer_ix = i;
// Give the modal the focus handle, because `modal` is a temporary value, is not possible to
// keep the focus handle in the modal.
//
// So we keep the focus handle in the `active_modal`, this is owned by the `Root`.
modal.focus_handle = active_modal.focus_handle.clone();
// Keep only have one overlay, we only render the first modal with overlay.
if has_overlay {
modal.overlay_visible = false;
}
modal.layer_ix = i;
// Find the modal which one needs to show overlay.
if modal.has_overlay() {
has_overlay = true;
show_overlay_ix = Some(i);
}
modal
})),
)
})
.collect::<Vec<_>>();
if let Some(ix) = show_overlay_ix {
if let Some(modal) = modals.get_mut(ix) {
modal.overlay_visible = true;
}
}
Some(div().children(modals))
}
/// Return the root view of the Root.