add align option to modal

examples/modal/src/main.rs

@@ -146,6 +146,7 @@ impl Application for ModalExample {
  )
  .backdrop(Message::CloseModal)
  .on_esc(Message::CloseModal)
+ .align_y(alignment::Vertical::Top)
  .into()
  }
  }

src/native/modal.rs

@@ -2,7 +2,7 @@
 //!
 //! *This API requires the following crate features to be activated: modal*
 use iced_widget::core::{
- self, event,
+ self, alignment, event,
  layout::{Limits, Node},
  mouse::{self, Cursor},
  overlay, renderer,
@@ -55,6 +55,8 @@ where
  esc: Option<Message>,
  /// The style of the [`ModalOverlay`](ModalOverlay).
  style: <Renderer::Theme as StyleSheet>::Style,
+ horizontal_alignment: alignment::Horizontal,
+ vertical_alignment: alignment::Vertical,
 }
 
 impl<'a, Message, Renderer> Modal<'a, Message, Renderer>
@@ -74,18 +76,20 @@ where
  /// * the underlay [`Element`] on which this [`Modal`](Modal)
  /// will be wrapped around.
  /// * the content [`Element`] of the [`Modal`](Modal).
- pub fn new<U, C>(show_modal: bool, underlay: U, content: C) -> Self
- where
- U: Into<Element<'a, Message, Renderer>>,
- C: Into<Element<'a, Message, Renderer>>,
- {
+ pub fn new(
+  show_modal: bool,
+ underlay: impl Into<Element<'a, Message, Renderer>>,
+ content: impl Into<Element<'a, Message, Renderer>>,
+ ) -> Self {
  Modal {
  show_modal,
  underlay: underlay.into(),
  content: content.into(),
  backdrop: None,
  esc: None,
  style: <Renderer::Theme as StyleSheet>::Style::default(),
+ horizontal_alignment: alignment::Horizontal::Center,
+ vertical_alignment: alignment::Vertical::Center,
  }
  }
 
@@ -113,6 +117,20 @@ where
  self.style = style;
  self
  }
+
+ /// Sets the content alignment for the horizontal axis of the [`Modal`](Modal).
+ #[must_use]
+ pub fn align_x(mut self, alignment: alignment::Horizontal) -> Self {
+ self.horizontal_alignment = alignment;
+ self
+ }
+
+ /// Sets the content alignment for the vertical axis of the [`Modal`](Modal).
+ #[must_use]
+ pub fn align_y(mut self, alignment: alignment::Vertical) -> Self {
+ self.vertical_alignment = alignment;
+ self
+ }
 }
 
 impl<'a, Message, Renderer> Widget<Message, Renderer> for Modal<'a, Message, Renderer>
@@ -229,6 +247,8 @@ where
  self.backdrop.clone(),
  self.esc.clone(),
  self.style,
+ self.horizontal_alignment,
+ self.vertical_alignment,
  )),
  ))
  } else {

src/native/overlay/modal.rs

@@ -2,11 +2,11 @@
 //!
 //! *This API requires the following crate features to be activated: modal*
 use iced_widget::core::{
- self, event, keyboard, layout,
+ self, alignment, event, keyboard, layout,
  mouse::{self, Cursor},
  renderer, touch,
  widget::Tree,
- Clipboard, Color, Element, Event, Layout, Overlay, Point, Rectangle, Shell, Size, Vector,
+ Alignment, Clipboard, Color, Element, Event, Layout, Overlay, Point, Rectangle, Shell, Size,
 };
 
 use crate::style::modal::StyleSheet;
@@ -29,6 +29,8 @@ where
  esc: Option<Message>,
  /// The style of the [`ModalOverlay`](ModalOverlay).
  style: <Renderer::Theme as StyleSheet>::Style,
+ horizontal_alignment: alignment::Horizontal,
+ vertical_alignment: alignment::Vertical,
 }
 
 impl<'a, 'b, Message, Renderer> ModalOverlay<'a, 'b, Message, Renderer>
@@ -44,13 +46,17 @@ where
  backdrop: Option<Message>,
  esc: Option<Message>,
  style: <Renderer::Theme as StyleSheet>::Style,
+ horizontal_alignment: alignment::Horizontal,
+ vertical_alignment: alignment::Vertical,
  ) -> Self {
  ModalOverlay {
  state,
  content,
  backdrop,
  esc,
  style,
+ horizontal_alignment,
+ vertical_alignment,
  }
  }
 }
@@ -62,25 +68,16 @@ where
  Renderer: core::Renderer,
  Renderer::Theme: StyleSheet,
 {
- fn layout(&self, renderer: &Renderer, bounds: Size, position: Point) -> layout::Node {
+ fn layout(&self, renderer: &Renderer, bounds: Size, _position: Point) -> layout::Node {
  let limits = layout::Limits::new(Size::ZERO, bounds);
-
  let mut content = self.content.as_widget().layout(renderer, &limits);
-
- // Center position
  let max_size = limits.max();
- let container_half_width = max_size.width / 2.0;
- let container_half_height = max_size.height / 2.0;
- let content_half_width = content.bounds().width / 2.0;
- let content_half_height = content.bounds().height / 2.0;
 
- let position = position
- + Vector::new(
- container_half_width - content_half_width,
- container_half_height - content_half_height,
- );
-
- content.move_to(position);
+ content.align(
+ Alignment::from(self.horizontal_alignment),
+ Alignment::from(self.vertical_alignment),
+ max_size,
+ );
 
  layout::Node::with_children(max_size, vec![content])
  }