Add support for themed application dialog

This commit is contained in:
Jeremy Soller 2024-02-27 09:34:39 -07:00
parent 94905c5201
commit 16aaf10b56
5 changed files with 200 additions and 56 deletions

View file

@ -44,7 +44,7 @@ pub use self::core::Core;
pub use self::settings::Settings;
use crate::prelude::*;
use crate::theme::THEME;
use crate::widget::{context_drawer, nav_bar};
use crate::widget::{context_drawer, nav_bar, popover};
use apply::Apply;
use iced::Subscription;
#[cfg(all(feature = "winit", feature = "multi-window"))]
@ -418,6 +418,11 @@ where
None
}
/// Displays a dialog in the center of the application window when `Some`.
fn dialog(&self) -> Option<Element<Self::Message>> {
None
}
/// Attaches elements to the start section of the header.
fn header_start(&self) -> Vec<Element<Self::Message>> {
Vec::new()
@ -659,7 +664,7 @@ impl<App: Application> ApplicationExt for App {
content_row.into()
};
let view_element: Element<_> = crate::widget::column::with_capacity(2)
let view_column = crate::widget::column::with_capacity(2)
.push_maybe(if core.window.show_headerbar {
Some({
let mut header = crate::widget::header_bar()
@ -707,8 +712,16 @@ impl<App: Application> ApplicationExt for App {
None
})
// The content element contains every element beneath the header.
.push(content)
.into();
.push(content);
// Show any current dialog on top and centered over the view content
// We have to use a popover even without a dialog to keep the tree from changing
let mut popover = popover(view_column);
if let Some(dialog) = self.dialog() {
popover = popover.popup(dialog.map(Message::App));
}
let view_element: Element<_> = popover.into();
view_element.debug(core.debug)
}
}

View file

@ -530,11 +530,9 @@ impl container::StyleSheet for Theme {
}
Container::Dialog => container::Appearance {
icon_color: Some(Color::from(cosmic.primary.component.on)),
text_color: Some(Color::from(cosmic.primary.component.on)),
background: Some(iced::Background::Color(
cosmic.primary.component.base.into(),
)),
icon_color: Some(Color::from(cosmic.primary.on)),
text_color: Some(Color::from(cosmic.primary.on)),
background: Some(iced::Background::Color(cosmic.primary.base.into())),
border: Border {
color: cosmic.primary.divider.into(),
width: 1.0,

128
src/widget/dialog.rs Normal file
View file

@ -0,0 +1,128 @@
use crate::{iced::Length, style, theme, widget, Element};
use std::borrow::Cow;
pub fn dialog<'a, Message>(title: impl Into<Cow<'a, str>>) -> Dialog<'a, Message> {
Dialog::new(title)
}
pub struct Dialog<'a, Message> {
title: Cow<'a, str>,
icon: Option<Element<'a, Message>>,
body: Option<Cow<'a, str>>,
controls: Vec<Element<'a, Message>>,
primary_action: Option<(Cow<'a, str>, Message, bool)>,
secondary_action: Option<(Cow<'a, str>, Message)>,
tertiary_action: Option<(Cow<'a, str>, Message)>,
}
impl<'a, Message> Dialog<'a, Message> {
pub fn new(title: impl Into<Cow<'a, str>>) -> Self {
Self {
title: title.into(),
icon: None,
body: None,
controls: Vec::new(),
primary_action: None,
secondary_action: None,
tertiary_action: None,
}
}
pub fn icon(mut self, icon: impl Into<Element<'a, Message>>) -> Self {
self.icon = Some(icon.into());
self
}
pub fn body(mut self, body: impl Into<Cow<'a, str>>) -> Self {
self.body = Some(body.into());
self
}
pub fn control(mut self, control: impl Into<Element<'a, Message>>) -> Self {
self.controls.push(control.into());
self
}
pub fn primary_action(mut self, name: impl Into<Cow<'a, str>>, message: Message) -> Self {
self.primary_action = Some((name.into(), message, false));
self
}
pub fn primary_action_destructive(
mut self,
name: impl Into<Cow<'a, str>>,
message: Message,
) -> Self {
self.primary_action = Some((name.into(), message, true));
self
}
pub fn secondary_action(mut self, name: impl Into<Cow<'a, str>>, message: Message) -> Self {
self.secondary_action = Some((name.into(), message));
self
}
pub fn tertiary_action(mut self, name: impl Into<Cow<'a, str>>, message: Message) -> Self {
self.tertiary_action = Some((name.into(), message));
self
}
}
impl<'a, Message: Clone + 'static> From<Dialog<'a, Message>> for Element<'a, Message> {
fn from(dialog: Dialog<'a, Message>) -> Self {
let cosmic_theme::Spacing {
space_l,
space_m,
space_s,
space_xxs,
..
} = theme::THEME.with(|theme_cell| {
let theme = theme_cell.borrow();
let theme = theme.cosmic();
theme.spacing
});
let mut content_col = widget::column::with_capacity(3 + dialog.controls.len() * 2);
content_col = content_col.push(widget::text::title3(dialog.title));
if let Some(body) = dialog.body {
content_col = content_col.push(widget::vertical_space(Length::Fixed(space_xxs.into())));
content_col = content_col.push(widget::text::body(body));
}
for control in dialog.controls {
content_col = content_col.push(widget::vertical_space(Length::Fixed(space_s.into())));
content_col = content_col.push(control);
}
let mut content_row = widget::row::with_capacity(2).spacing(space_s);
if let Some(icon) = dialog.icon {
content_row = content_row.push(icon);
}
content_row = content_row.push(content_col);
let mut button_row = widget::row::with_capacity(4).spacing(space_xxs);
if let Some((name, message)) = dialog.tertiary_action {
button_row = button_row.push(widget::button::text(name).on_press(message));
}
button_row = button_row.push(widget::horizontal_space(Length::Fill));
if let Some((name, message)) = dialog.secondary_action {
button_row = button_row.push(widget::button::standard(name).on_press(message));
}
if let Some((name, message, destructive)) = dialog.primary_action {
if destructive {
button_row = button_row.push(widget::button::destructive(name).on_press(message));
} else {
button_row = button_row.push(widget::button::suggested(name).on_press(message));
}
}
Element::from(
widget::container(
widget::column::with_children(vec![content_row.into(), button_row.into()])
.spacing(space_l),
)
.style(style::Container::Dialog)
.padding(space_m)
.width(Length::Fixed(570.0)),
)
}
}

View file

@ -58,6 +58,9 @@ pub mod column {
pub mod cosmic_container;
pub use cosmic_container::LayerContainer;
pub mod dialog;
pub use dialog::{dialog, Dialog};
/// An element to distinguish a boundary between two elements.
pub mod divider {
/// Horizontal variant of a divider.

View file

@ -18,42 +18,36 @@ pub use iced_style::container::{Appearance, StyleSheet};
pub fn popover<'a, Message, Renderer>(
content: impl Into<Element<'a, Message, crate::Theme, Renderer>>,
popup: impl Into<Element<'a, Message, crate::Theme, Renderer>>,
) -> Popover<'a, Message, Renderer> {
Popover::new(content, popup)
Popover::new(content)
}
pub struct Popover<'a, Message, Renderer> {
content: Element<'a, Message, crate::Theme, Renderer>,
// XXX Avoid refcell; improve iced overlay API?
popup: RefCell<Element<'a, Message, crate::Theme, Renderer>>,
popup: Option<RefCell<Element<'a, Message, crate::Theme, Renderer>>>,
position: Option<Point>,
show_popup: bool,
}
impl<'a, Message, Renderer> Popover<'a, Message, Renderer> {
pub fn new(
content: impl Into<Element<'a, Message, crate::Theme, Renderer>>,
popup: impl Into<Element<'a, Message, crate::Theme, Renderer>>,
) -> Self {
pub fn new(content: impl Into<Element<'a, Message, crate::Theme, Renderer>>) -> Self {
Self {
content: content.into(),
popup: RefCell::new(popup.into()),
popup: None,
position: None,
show_popup: true,
}
}
pub fn popup(mut self, popup: impl Into<Element<'a, Message, crate::Theme, Renderer>>) -> Self {
self.popup = Some(RefCell::new(popup.into()));
self
}
pub fn position(mut self, position: Point) -> Self {
self.position = Some(position);
self
}
pub fn show_popup(mut self, show_popup: bool) -> Self {
self.show_popup = show_popup;
self
}
// TODO More options for positioning similar to GdkPopup, xdg_popup
}
@ -63,11 +57,19 @@ where
Renderer: iced_core::Renderer,
{
fn children(&self) -> Vec<Tree> {
vec![Tree::new(&self.content), Tree::new(&*self.popup.borrow())]
if let Some(popup) = &self.popup {
vec![Tree::new(&self.content), Tree::new(&*popup.borrow())]
} else {
vec![Tree::new(&self.content)]
}
}
fn diff(&mut self, tree: &mut Tree) {
tree.diff_children(&mut [&mut self.content, &mut self.popup.borrow_mut()]);
if let Some(popup) = &mut self.popup {
tree.diff_children(&mut [&mut self.content, &mut popup.borrow_mut()]);
} else {
tree.diff_children(&mut [&mut self.content]);
}
}
fn size(&self) -> Size<Length> {
@ -163,37 +165,37 @@ where
layout: Layout<'_>,
_renderer: &Renderer,
) -> Option<overlay::Element<'b, Message, crate::Theme, Renderer>> {
if !self.show_popup {
return None;
if let Some(popup) = &self.popup {
let bounds = layout.bounds();
let (position, centered) = match self.position {
Some(relative) => (
bounds.position() + Vector::new(relative.x, relative.y),
false,
),
None => {
// Set position to center
(
Point::new(
bounds.x + bounds.width / 2.0,
bounds.y + bounds.height / 2.0,
),
true,
)
}
};
// XXX needed to use RefCell to get &mut for popup element
Some(overlay::Element::new(
position,
Box::new(Overlay {
tree: &mut tree.children[1],
content: popup,
centered,
}),
))
} else {
None
}
let bounds = layout.bounds();
let (position, centered) = match self.position {
Some(relative) => (
bounds.position() + Vector::new(relative.x, relative.y),
false,
),
None => {
// Set position to center
(
Point::new(
bounds.x + bounds.width / 2.0,
bounds.y + bounds.height / 2.0,
),
true,
)
}
};
// XXX needed to use RefCell to get &mut for popup element
Some(overlay::Element::new(
position,
Box::new(Overlay {
tree: &mut tree.children[1],
content: &self.popup,
centered,
}),
))
}
}