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 modal
.title("Other Modal") .title("Other Modal")
.child("This is another modal.") .child("This is another modal.")
.min_h(px(300.)) .min_h(px(100.))
.overlay(overlay) .overlay(overlay)
.keyboard(keyboard) .keyboard(keyboard)
.show_close(modal_show_close) .show_close(modal_show_close)

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

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