use crate::event::Event;
use crate::geometry::{Rect, Size};
use crate::text;
use crate::widget::{Axis, Container, EventCx, Flex, Length, MeasureCx, Node, PaintCx, Widget};
use super::Button;
use super::cells;
use super::layer::{self, Backdrop, SurfacePosition};
const DEFAULT_WIDTH: u16 = 56;
const ACTION_GAP: u16 = 2;
pub struct Modal<Msg> {
title: Option<String>,
variant: Option<String>,
width: u16,
on_close: Option<Msg>,
dismissable: bool,
click_outside_closes: bool,
parts: Vec<Node<Msg>>,
}
impl<Msg: Clone + 'static> Modal<Msg> {
#[must_use]
pub fn new() -> Self {
Self {
title: None,
variant: None,
width: DEFAULT_WIDTH,
on_close: None,
dismissable: true,
click_outside_closes: false,
parts: vec![body(Vec::new())],
}
}
#[must_use]
pub fn title(mut self, title: impl Into<String>) -> Self {
self.title = Some(title.into());
self
}
#[must_use]
pub fn variant(mut self, variant: impl Into<String>) -> Self {
self.variant = Some(variant.into());
self
}
#[must_use]
pub fn width(mut self, cells: u16) -> Self {
self.width = cells;
self
}
#[must_use]
pub fn on_close(mut self, message: Msg) -> Self {
self.on_close = Some(message);
self
}
#[must_use]
pub fn dismissable(mut self, dismissable: bool) -> Self {
self.dismissable = dismissable;
self
}
#[must_use]
pub fn close_on_click_outside(mut self, closes: bool) -> Self {
self.click_outside_closes = closes;
self
}
#[must_use]
pub fn action(mut self, button: Button<Msg>) -> Self {
let index = self.parts.len();
self.parts.push(Node::new(button, index));
self
}
}
impl<Msg> Modal<Msg> {
fn is_dismissable(&self) -> bool {
self.dismissable && self.on_close.is_some()
}
}
fn body<Msg: 'static>(children: Vec<Node<Msg>>) -> Node<Msg> {
let mut column = Node::new(Flex::new(Axis::Column, children), 0);
column.layout.width = Length::Fill(1);
column
}
impl<Msg: Clone + 'static> Default for Modal<Msg> {
fn default() -> Self {
Self::new()
}
}
impl<Msg: Clone + 'static> Container<Msg> for Modal<Msg> {
fn set_children(&mut self, children: Vec<Node<Msg>>) {
self.parts[0] = body(children);
}
}
impl<Msg: Clone + 'static> Widget<Msg> for Modal<Msg> {
fn measure(&self, _cx: &mut MeasureCx<'_>, _available: Size) -> Size {
Size::default()
}
fn paint(&self, cx: &mut PaintCx<'_>, area: Rect) {
cx.request_overlay(area);
}
fn paint_overlay(&self, cx: &mut PaintCx<'_>, _anchor: Rect) {
let screen = cx.clip();
let dismissable = self.is_dismissable();
let padding = layer::padding(cx, "modal", dismissable);
let width = self.width.min(screen.width.saturating_sub(2));
let inner_width = width.saturating_sub(padding.horizontal());
let title_lines = self.title.as_deref().map_or_else(Vec::new, |title| text::wrap(title, inner_width.max(1)));
let title_rows = match title_lines.len() {
0 => 0,
lines => u16::try_from(lines).unwrap_or(u16::MAX).saturating_add(1),
};
let (body, actions) = self.parts.split_first().expect("a modal always has its body");
let action_sizes: Vec<Size> =
actions.iter().map(|action| cx.measure_child(action, Size::new(inner_width, 1))).collect();
let placed = ActionRow::place(&action_sizes, inner_width);
let mut hints = Vec::new();
if dismissable {
hints.push(layer::hint(cx, "esc", "close"));
}
if body.count_focusable() + actions.len() > 1 {
hints.push(layer::hint(cx, "tab", "switch"));
}
let footer_rows: u16 = if actions.is_empty() && hints.is_empty() { 0 } else { placed.rows.max(1) + 1 };
let chrome = cells::sum([padding.vertical(), title_rows, footer_rows]);
let available_body = screen.height.saturating_sub(chrome.saturating_add(2));
let body_height = cx.measure_child(body, Size::new(inner_width, available_body)).height;
let size = Size::new(width, chrome.saturating_add(body_height));
let look = layer::Look { style: "modal", variant: self.variant.as_deref(), dismissable };
let surface = layer::open(cx, size, SurfacePosition::Center, look);
let inner = surface.inner;
cx.with_clip(surface.shown, |cx| {
for (y, line) in (inner.y..).zip(&title_lines) {
layer::title(cx, inner.x, y, inner.width, line);
}
let body_rect = Rect::new(
inner.x,
inner.y + i32::from(title_rows),
inner.width,
inner.height.saturating_sub(title_rows + footer_rows),
);
cx.paint_child(body, body_rect);
if footer_rows == 0 {
return;
}
let first_row = inner.bottom() - i32::from(placed.rows.max(1));
for (action, rect) in actions.iter().zip(&placed.rects) {
let rect = Rect::new(inner.right() - rect.x, first_row + rect.y, rect.width, rect.height);
cx.paint_child(action, rect);
}
let hint_width = crate::geometry::clamp_u16(i32::from(inner.width) - i32::from(placed.last_row_width));
layer::paint_hints(cx, inner.x, inner.bottom() - 1, hint_width, &hints);
});
layer::finish(cx, &surface);
}
fn event(&self, cx: &mut EventCx<'_, Msg>, event: &Event) -> bool {
match layer::backdrop_event(cx, event, self.is_dismissable(), self.click_outside_closes) {
Backdrop::Close => {
if let Some(message) = &self.on_close {
cx.emit(message.clone());
}
true
}
Backdrop::Swallowed => true,
Backdrop::Inside | Backdrop::Ignored => false,
}
}
fn children(&self) -> &[Node<Msg>] {
&self.parts
}
fn children_mut(&mut self) -> &mut [Node<Msg>] {
&mut self.parts
}
}
#[derive(Debug, Clone, PartialEq, Eq)]
struct ActionRow {
rows: u16,
rects: Vec<Rect>,
last_row_width: u16,
}
impl ActionRow {
fn place(sizes: &[Size], width: u16) -> Self {
if sizes.is_empty() {
return Self { rows: 0, rects: Vec::new(), last_row_width: ACTION_GAP };
}
let count = u16::try_from(sizes.len()).unwrap_or(u16::MAX);
let gaps = ACTION_GAP.saturating_mul(count - 1);
let one_row = cells::sum(sizes.iter().map(|size| size.width)).saturating_add(gaps);
if one_row <= width || sizes.len() == 1 {
let mut from_right = i32::from(one_row);
let rects = sizes
.iter()
.map(|size| {
let rect = Rect::new(from_right, 0, size.width, 1);
from_right -= i32::from(size.width.saturating_add(ACTION_GAP));
rect
})
.collect();
return Self { rows: 1, rects, last_row_width: one_row.saturating_add(ACTION_GAP) };
}
let column = sizes.iter().map(|size| size.width).max().unwrap_or(0).min(width);
let rects = (0..count).map(|index| Rect::new(i32::from(column), i32::from(index * 2), column, 1)).collect();
Self { rows: count * 2 - 1, rects, last_row_width: column.saturating_add(ACTION_GAP) }
}
}
#[cfg(test)]
mod tests {
use std::time::Duration;
use super::*;
use crate::runtime::{App, Command, Harness};
use crate::widget::View;
use crate::widgets::{Text, TextInput};
#[derive(Default)]
struct Demo {
open: bool,
nested: bool,
removed: u32,
name: String,
outside: bool,
busy: bool,
plain: bool,
}
#[derive(Clone)]
enum Msg {
Open,
Close,
Remove,
Nested(bool),
Name(String),
}
impl App for Demo {
type Msg = Msg;
fn update(&mut self, msg: Msg) -> Command<Msg> {
match msg {
Msg::Open => self.open = true,
Msg::Close => self.open = false,
Msg::Remove => {
self.removed += 1;
self.open = false;
}
Msg::Nested(on) => self.nested = on,
Msg::Name(name) => self.name = name,
}
Command::none()
}
fn view(&self, ui: &mut View<'_, Msg>) {
ui.column(|ui| {
ui.add(Text::new("Containers"));
ui.add(Button::new("Remove web").on_press(Msg::Open)).id("open");
ui.add(Button::new("Other").on_press(Msg::Nested(false))).id("other");
if self.open {
let mut modal = Modal::new().width(40).on_close(Msg::Close).dismissable(!self.busy);
if !self.plain {
modal = modal.title("Remove web?").variant("danger");
}
let modal = modal
.close_on_click_outside(self.outside)
.action(Button::new("Cancel").on_press(Msg::Close))
.action(Button::new("Remove").variant("danger").on_press(Msg::Remove));
ui.add_with(modal, |ui| {
ui.add(Text::new("Its volumes go too."));
ui.add(TextInput::new(&self.name).on_change(Msg::Name)).id("name");
if self.nested {
ui.add_with(Modal::new().title("Sure?").on_close(Msg::Nested(false)).width(24), |ui| {
ui.add(Text::new("Really."));
});
}
});
}
});
}
}
fn opened(demo: Demo) -> Harness<Demo> {
let mut h = Harness::new(demo, 50, 16);
h.press("tab").press("enter").advance(Duration::from_millis(200));
h
}
#[test]
fn draws_a_dimmed_screen_a_pillar_down_the_edge_a_close_mark_and_right_aligned_actions() {
let h = opened(Demo::default());
let screen = h.screen();
assert_eq!(
screen,
"Containers\n Remove web\n Other\n\n ▌ ×\n ▌ Remove web?\n ▌\n ▌ Its volumes go too.\n ▌ ▌ ❯\n ▌\n ▌ esc close Cancel Remove\n ▌\n\n\n\n\n",
"{screen}"
);
let theme = h.env().theme();
assert_eq!(h.bg(20, 5), theme.color("overlay"));
for row in 4..=11 {
assert_eq!(h.fg(5, row), theme.color("danger"), "pillar on row {row}");
}
assert!(h.is_bold(8, 5));
let text = theme.color("text").expect("text colour");
let dimmed = h.fg(0, 0).expect("dimmed text");
assert_ne!(dimmed, text, "the screen behind is dimmed");
}
#[test]
fn a_plain_dialog_has_an_accent_muted_pillar_and_its_close_mark_on_the_first_row() {
let h = opened(Demo { plain: true, ..Demo::default() });
let screen = h.screen();
let lines: Vec<&str> = screen.lines().collect();
assert_eq!(lines[5], " ▌ ×", "the top padding row: {screen}");
assert_eq!(lines[6], " ▌ Its volumes go too.", "{screen}");
let theme = h.env().theme();
let muted =
theme.color("accent").zip(theme.color("overlay")).map(|(accent, overlay)| overlay.mix(accent, 0.45));
let pillar = h.fg(5, 6).expect("pillar colour");
let expected = muted.expect("theme colours");
let close = |a: u8, b: u8| a.abs_diff(b) <= 1;
assert!(close(pillar.r, expected.r) && close(pillar.g, expected.g), "{pillar:?} vs {expected:?}");
assert_ne!(Some(pillar), theme.color("accent"), "muted, not the full accent");
}
#[test]
fn the_close_mark_lights_three_cells_under_the_pointer_and_closes_on_a_click() {
let mut h = opened(Demo::default());
let (x, y) = h.find("×").expect("close mark");
let (column, row) = (u16::try_from(x).expect("x"), u16::try_from(y).expect("y"));
let resting = h.bg(column, row);
h.hover(x - 1, y);
let lit = h.bg(column, row);
assert_ne!(lit, resting, "the mark lights up");
assert_eq!((h.bg(column - 1, row), h.bg(column + 1, row)), (lit, lit), "all three cells light up");
assert_eq!(h.bg(column - 2, row), resting, "and no more");
h.click(x + 1, y);
assert!(!h.app().open, "a click on the mark closes");
}
#[test]
fn a_dialog_that_is_not_dismissable_has_no_close_mark_and_ignores_esc_and_outside_clicks() {
let mut h = opened(Demo { busy: true, outside: true, ..Demo::default() });
let screen = h.screen();
assert!(!screen.contains('×') && !screen.contains("esc close"), "{screen}");
h.press("esc").click(1, 14).click(44, 5);
assert!(h.app().open, "Esc, the corner and the dimmed screen do nothing");
h.click_text("Cancel");
assert!(!h.app().open, "its own buttons still close it");
}
#[test]
fn escape_and_the_close_mark_always_come_together() {
let mut h = opened(Demo::default());
h.press("esc");
assert!(!h.app().open, "Esc closes a dismissable dialog");
let mut h = opened(Demo::default());
h.click_text("×");
assert!(!h.app().open, "and so does its mark");
}
#[test]
fn the_pillar_and_the_close_mark_enter_with_the_surface_and_ascii_keeps_both() {
let mut h = Harness::new(Demo::default(), 50, 16);
h.press("tab").press("enter");
let danger = h.env().theme().color("danger");
let entering: Vec<_> = (4..12).filter_map(|row| h.fg(7, row)).collect();
assert!(h.screen().contains('▌'), "{}", h.screen());
assert!(entering.iter().all(|color| Some(*color) != danger), "the pillar fades in with the surface");
h.advance(Duration::from_millis(200));
assert_eq!(h.fg(5, 5), h.env().theme().color("danger"));
h.set_glyph_mode(crate::icons::GlyphMode::Ascii);
let screen = h.screen();
assert!(screen.lines().nth(4).is_some_and(|line| line.ends_with('x')), "{screen}");
assert_eq!(h.bg(5, 7), h.env().theme().color("danger"), "the ASCII pillar is a coloured cell");
let mut h = Harness::new(Demo::default(), 50, 16);
h.set_reduced_motion(true).press("tab").press("enter");
assert_eq!(h.fg(5, 9), h.env().theme().color("danger"), "at once with reduced motion");
assert!(h.screen().contains('×'));
}
#[test]
fn narrow_screens_keep_the_close_mark_inside_the_surface() {
let mut h = Harness::new(Demo::default(), 24, 16);
h.set_reduced_motion(true).press("tab").press("enter");
let screen = h.screen();
let lines: Vec<&str> = screen.lines().collect();
let mark = lines.iter().position(|line| line.contains('×')).unwrap_or_default();
assert!(lines[mark].ends_with('×') && lines[mark].chars().count() <= 23, "{screen}");
assert!(lines[mark + 1].contains("Remove web?"), "the mark sits on the row above the title: {screen}");
}
#[test]
fn the_close_mark_takes_the_top_right_cells_of_the_surface() {
let mut h = opened(Demo::default());
let overlay = h.env().theme().color("overlay");
let (x, y) = h.find("×").expect("close mark");
let (column, row) = (u16::try_from(x).expect("x"), u16::try_from(y).expect("y"));
let on_surface = |h: &Harness<Demo>, column: u16, row: u16| h.bg(column, row) == overlay;
assert!(on_surface(&h, column - 3, row), "the mark's row belongs to the surface");
assert!(!on_surface(&h, column, row - 1), "and it is the surface's first row");
assert!(on_surface(&h, column + 1, row + 1), "the mark's last cell is on the surface's last column");
assert!(!on_surface(&h, column + 2, row + 1), "and nothing of the surface lies beyond it");
h.hover(x, y);
let lit = h.bg(column, row);
assert_ne!(lit, overlay, "the mark lights up");
assert_eq!([h.bg(column - 1, row), h.bg(column + 1, row)], [lit, lit], "its three cells light together");
assert_eq!(h.bg(column - 2, row), overlay);
}
#[test]
fn focus_is_trapped_and_returns_on_close() {
let mut h = opened(Demo::default());
assert!(h.is_focused("name"), "the first focusable widget inside is focused");
h.press("tab").press("tab").press("tab");
assert!(h.is_focused("name"), "tab cycles inside the dialog");
h.press("shift+tab");
assert!(h.screen().contains("Remove"), "{}", h.screen());
h.press("enter");
assert_eq!(h.app().removed, 1, "{}", h.screen());
assert!(h.is_focused("open"), "focus returns to the button that opened the dialog");
}
#[test]
fn escape_closes_and_keys_never_reach_widgets_beneath() {
let mut h = opened(Demo::default());
h.type_text("db");
assert_eq!(h.app().name, "db");
h.press("esc");
assert!(!h.app().open);
assert!(!h.screen().contains("Remove web?"));
}
#[test]
fn clicks_outside_are_swallowed_or_close_when_asked() {
let mut h = opened(Demo::default());
h.click_text("Containers");
assert!(h.app().open, "clicks on the dimmed screen do nothing by default");
let mut h = opened(Demo { outside: true, ..Demo::default() });
h.click(1, 14);
assert!(!h.app().open);
}
#[test]
fn dialogs_stack_and_the_top_one_owns_the_keys() {
let mut h = opened(Demo { nested: true, ..Demo::default() });
let screen = h.screen();
assert!(screen.contains("Sure?") && screen.contains("Really."), "{screen}");
h.press("esc");
assert!(!h.app().nested);
assert!(h.app().open, "only the top dialog closed");
}
#[test]
fn pops_in_and_appears_at_once_with_reduced_motion() {
let mut h = Harness::new(Demo::default(), 50, 16);
h.press("tab").press("enter");
let entering = h.bg(7, 5);
h.advance(Duration::from_millis(200));
assert_ne!(entering, h.bg(7, 5), "the surface grows in over motion.enter");
let mut h = Harness::new(Demo::default(), 50, 16);
h.set_reduced_motion(true).press("tab").press("enter");
assert_eq!(h.bg(7, 5), h.env().theme().color("overlay"));
}
struct ThreeWays {
chosen: Option<&'static str>,
}
impl App for ThreeWays {
type Msg = &'static str;
fn update(&mut self, msg: &'static str) -> Command<&'static str> {
self.chosen = Some(msg);
Command::none()
}
fn view(&self, ui: &mut View<'_, &'static str>) {
let modal = Modal::new()
.title("Quit?")
.on_close("closed")
.action(Button::new("Cancel").on_press("cancel"))
.action(Button::new("Leave running").on_press("leave"))
.action(Button::new("Finish and quit").variant("primary").on_press("finish"));
ui.add_with(modal, |ui| {
ui.add(Text::new("A session is running."));
});
}
}
#[test]
fn actions_that_do_not_fit_stand_one_under_another_with_the_last_at_the_bottom() {
let mut h = Harness::new(ThreeWays { chosen: None }, 40, 20);
h.set_reduced_motion(true).advance(Duration::from_millis(1));
let screen = h.screen();
assert!(!screen.contains('…'), "{screen}");
let place = |h: &Harness<ThreeWays>, label: &str| h.find(label).unwrap_or_else(|| panic!("{label}: {screen}"));
let (cancel, leave, finish) = (place(&h, "Cancel"), place(&h, "Leave running"), place(&h, "Finish and quit"));
assert_eq!((leave.1 - cancel.1, finish.1 - leave.1), (2, 2), "{screen}");
assert_eq!((cancel.0, leave.0), (finish.0, finish.0), "one column: {screen}");
let lines: Vec<&str> = screen.lines().collect();
let last = usize::try_from(finish.1).unwrap_or_default();
assert!(lines[last].contains("esc close"), "the hints share the last row: {screen}");
h.press("tab").press("tab").press("enter");
assert_eq!(h.app().chosen, Some("finish"), "Tab goes down the column");
let mut h = Harness::new(ThreeWays { chosen: None }, 40, 20);
h.set_reduced_motion(true).advance(Duration::from_millis(1));
h.click(leave.0 + 1, leave.1);
assert_eq!(h.app().chosen, Some("leave"));
}
#[test]
fn stacked_actions_take_the_width_of_the_widest() {
let wide = ActionRow::place(&[Size::new(10, 1), Size::new(17, 1)], 40);
assert_eq!((wide.rows, wide.rects[0].x, wide.rects[1].x), (1, 29, 17));
let narrow = ActionRow::place(&[Size::new(10, 1), Size::new(17, 1), Size::new(19, 1)], 32);
assert_eq!(narrow.rows, 5);
assert!(narrow.rects.iter().all(|rect| rect.width == 19 && rect.x == 19), "{narrow:?}");
assert_eq!(narrow.rects.iter().map(|rect| rect.y).collect::<Vec<_>>(), [0, 2, 4]);
}
#[test]
fn a_long_title_wraps_instead_of_being_cut() {
struct Long(&'static str);
impl App for Long {
type Msg = ();
fn update(&mut self, (): ()) -> Command<()> {
Command::none()
}
fn view(&self, ui: &mut View<'_, ()>) {
let modal = Modal::new().title(self.0).on_close(()).action(Button::new("OK").on_press(()));
ui.add_with(modal, |ui| {
ui.add(Text::new("Body"));
});
}
}
for (code, title) in [
("en", "Empty the trash for good, with every record in it?"),
("de", "Den Papierkorb endgültig leeren, mit allen Einträgen darin?"),
] {
let mut h = Harness::new(Long(title), 40, 16);
h.set_locale(code).set_reduced_motion(true).advance(Duration::from_millis(1));
let screen = h.screen();
assert!(!screen.contains('…'), "{code}: {screen}");
let shown: Vec<&str> = screen
.lines()
.map(|line| line.trim_start_matches(' ').trim_start_matches('▌').trim())
.filter(|line| !line.is_empty())
.collect();
assert!(shown.join(" ").contains(title), "every word of the title, in order: {code}: {screen}");
let body = shown.iter().position(|line| *line == "Body").unwrap_or_default();
let lines: Vec<&str> = screen.lines().collect();
let body_row = lines.iter().position(|line| line.contains("Body")).unwrap_or_default();
assert!(body >= 2, "{code}: {screen}");
assert!(
lines[body_row - 1].trim_start_matches(' ').trim_start_matches('▌').trim().is_empty(),
"a blank row after the title: {screen}"
);
}
}
}