modal fix to fix overlay. just position is weird?

examples/modal/src/main.rs

@@ -1,7 +1,7 @@
 use iced::{
     alignment::{self, Horizontal},
     font,
-    widget::{container, text, Button, Container, Row, Text},
+    widget::{container, pick_list, text, Button, Container, Row, Text},
     Alignment, Application, Command, Element, Length, Settings, Theme,
 };
 
@@ -17,6 +17,7 @@ enum Message {
     CloseModal,
     CancelButtonPressed,
     OkButtonPressed,
+    ChangeTheme(Theme),
     #[allow(dead_code)]
     Loaded(Result<(), String>),
     FontLoaded(Result<(), font::Error>),
@@ -32,6 +33,7 @@ enum ModalExample {
 struct State {
     show_modal: bool,
     last_message: Option<Message>,
+    theme: Theme,
 }
 
 async fn load() -> Result<(), String> {
@@ -71,6 +73,7 @@ impl Application for ModalExample {
                     Message::CloseModal => state.show_modal = false,
                     Message::CancelButtonPressed => state.show_modal = false,
                     Message::OkButtonPressed => state.show_modal = false,
+                    Message::ChangeTheme(ref t) => state.theme = t.clone(),
                     _ => {}
                 }
 
@@ -99,6 +102,11 @@ impl Application for ModalExample {
                         .spacing(10)
                         .align_items(Alignment::Center)
                         .push(Button::new(Text::new("Open modal!")).on_press(Message::OpenModal))
+                        .push(pick_list(
+                            Theme::ALL,
+                            Some(&state.theme),
+                            Message::ChangeTheme,
+                        ))
                         .push(Text::new(format!(
                             "Last message: {}",
                             match state.last_message.as_ref() {
@@ -107,6 +115,7 @@ impl Application for ModalExample {
                                     Message::CloseModal => "Modal closed",
                                     Message::CancelButtonPressed => "Modal canceled",
                                     Message::OkButtonPressed => "Modal accepted",
+                                    Message::ChangeTheme(_) => "Changed Theme",
                                     _ => "None",
                                 },
                                 None => "None",
@@ -125,6 +134,11 @@ impl Application for ModalExample {
                                 .spacing(10)
                                 .padding(5)
                                 .width(Length::Fill)
+                                .push(pick_list(
+                                    Theme::ALL,
+                                    Some(&state.theme),
+                                    Message::ChangeTheme,
+                                ))
                                 .push(
                                     Button::new(
                                         Text::new("Cancel")
@@ -141,7 +155,7 @@ impl Application for ModalExample {
                                     .on_press(Message::OkButtonPressed),
                                 ),
                         )
-                        .max_width(300.0)
+                        .max_width(500.0)
                         //.width(Length::Shrink)
                         .on_close(Message::CloseModal),
                     )
@@ -157,4 +171,11 @@ impl Application for ModalExample {
             }
         }
     }
+
+    fn theme(&self) -> Theme {
+        match self {
+            ModalExample::Loading => Theme::Light,
+            ModalExample::Loaded(state) => state.theme.clone(),
+        }
+    }
 }

src/native/modal.rs

@@ -7,7 +7,8 @@ use super::overlay::modal::ModalOverlay;
 use iced::{
     advanced::{
         layout::{Limits, Node},
-        overlay, renderer,
+        overlay::{self, Group},
+        renderer,
         widget::{Operation, Tree},
         Clipboard, Layout, Shell, Widget,
     },
@@ -237,26 +238,34 @@ where
         renderer: &Renderer,
         translation: Vector,
     ) -> Option<overlay::Element<'b, Message, Theme, Renderer>> {
+        let mut group = Group::new();
+        let mut children = state.children.iter_mut();
+
+        if let Some(underlay) =
+            self.underlay
+                .as_widget_mut()
+                .overlay(children.next()?, layout, renderer, translation)
+        {
+            group = group.push(underlay);
+        }
+
         if let Some(overlay) = &mut self.overlay {
-            overlay.as_widget().diff(&mut state.children[1]);
+            if let Some(el) = children.next() {
+                overlay.as_widget().diff(el);
 
-            Some(overlay::Element::new(Box::new(ModalOverlay::new(
-                &mut state.children[1],
-                overlay,
-                self.backdrop.clone(),
-                self.esc.clone(),
-                self.style.clone(),
-                self.horizontal_alignment,
-                self.vertical_alignment,
-            ))))
-        } else {
-            self.underlay.as_widget_mut().overlay(
-                &mut state.children[0],
-                layout,
-                renderer,
-                translation,
-            )
+                group = group.push(overlay::Element::new(Box::new(ModalOverlay::new(
+                    el,
+                    overlay,
+                    self.backdrop.clone(),
+                    self.esc.clone(),
+                    self.style.clone(),
+                    self.horizontal_alignment,
+                    self.vertical_alignment,
+                ))));
+            }
         }
+
+        Some(group.overlay())
     }
 
     fn operate<'b>(

src/native/overlay/modal.rs

@@ -5,13 +5,13 @@ use crate::style::modal::StyleSheet;
 use iced::{
     advanced::{
         layout::{Limits, Node},
-        renderer,
-        widget::Tree,
+        overlay, renderer,
+        widget::{Operation, Tree},
         Clipboard, Layout, Overlay, Shell,
     },
     alignment, event, keyboard,
     mouse::{self, Cursor},
-    touch, Alignment, Border, Color, Element, Event, Rectangle, Shadow, Size,
+    touch, Alignment, Border, Color, Element, Event, Rectangle, Shadow, Size, Vector,
 };
 
 /// The overlay of the modal.
@@ -212,4 +212,34 @@ where
             &bounds,
         );
     }
+
+    fn overlay<'c>(
+        &'c mut self,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+    ) -> Option<overlay::Element<'c, Message, Theme, Renderer>> {
+        let content_layout = layout.children().next()?;
+        self.content.as_widget_mut().overlay(
+            self.state,
+            content_layout,
+            renderer,
+            Vector::new(0.0, 0.0),
+        )
+    }
+
+    fn operate(
+        &mut self,
+        layout: Layout<'_>,
+        renderer: &Renderer,
+        operation: &mut dyn Operation<Message>,
+    ) {
+        let content_layout = layout
+            .children()
+            .next()
+            .expect("Native: Layout should have a content layout.");
+
+        self.content
+            .as_widget()
+            .operate(self.state, content_layout, renderer, operation);
+    }
 }