feat(widget): add ContextDrawer widget
This commit is contained in:
Michael Aaron Murphy
Michael Murphy
parent
8c86dae449
commit
3127de3296
4 changed files with 383 additions and 0 deletions
22
src/widget/context_drawer/mod.rs
Normal file
22
src/widget/context_drawer/mod.rs
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
// Copyright 2023 System76 <info@system76.com>
|
||||
// SPDX-License-Identifier: MPL-2.0
|
||||
|
||||
mod overlay;
|
||||
|
||||
mod widget;
|
||||
pub use widget::ContextDrawer;
|
||||
|
||||
use crate::Element;
|
||||
|
||||
pub fn context_drawer<'a, Message: Clone + 'static, Content, Drawer>(
|
||||
header: &'a str,
|
||||
on_close: Message,
|
||||
content: Content,
|
||||
drawer: Drawer,
|
||||
) -> ContextDrawer<'a, Message>
|
||||
where
|
||||
Content: Into<Element<'a, Message>>,
|
||||
Drawer: Into<Element<'a, Message>>,
|
||||
{
|
||||
ContextDrawer::new(header, content, drawer, on_close)
|
||||
}
|
||||
119
src/widget/context_drawer/overlay.rs
Normal file
119
src/widget/context_drawer/overlay.rs
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
// Copyright 2023 System76 <info@system76.com>
|
||||
// SPDX-License-Identifier: MPL-2.0
|
||||
|
||||
use crate::Element;
|
||||
|
||||
use iced::advanced::layout::{self, Layout};
|
||||
use iced::advanced::widget::{self, Operation, OperationOutputWrapper};
|
||||
use iced::advanced::{overlay, renderer};
|
||||
use iced::advanced::{Clipboard, Shell};
|
||||
use iced::{event, mouse, Event, Point, Rectangle, Size};
|
||||
use iced_core::Widget;
|
||||
|
||||
pub(super) struct Overlay<'a, 'b, Message> {
|
||||
pub(super) content: &'b mut Element<'a, Message>,
|
||||
pub(super) tree: &'b mut widget::Tree,
|
||||
pub(super) width: f32,
|
||||
}
|
||||
|
||||
impl<'a, 'b, Message> overlay::Overlay<Message, crate::Renderer> for Overlay<'a, 'b, Message>
|
||||
where
|
||||
Message: Clone,
|
||||
{
|
||||
fn layout(&self, renderer: &crate::Renderer, bounds: Size, position: Point) -> layout::Node {
|
||||
let limits = layout::Limits::new(Size::ZERO, bounds)
|
||||
.width(self.width)
|
||||
.height(bounds.height - 8.0 - position.y);
|
||||
|
||||
let mut node = self.content.as_widget().layout(renderer, &limits);
|
||||
let node_size = node.size();
|
||||
|
||||
node.move_to(Point {
|
||||
x: if bounds.width > node_size.width - 8.0 {
|
||||
bounds.width - node_size.width - 8.0
|
||||
} else {
|
||||
0.0
|
||||
},
|
||||
y: if bounds.height > node_size.height - 8.0 {
|
||||
bounds.height - node_size.height - 8.0
|
||||
} else {
|
||||
0.0
|
||||
},
|
||||
});
|
||||
|
||||
node
|
||||
}
|
||||
|
||||
fn on_event(
|
||||
&mut self,
|
||||
event: Event,
|
||||
layout: Layout<'_>,
|
||||
cursor: mouse::Cursor,
|
||||
renderer: &crate::Renderer,
|
||||
clipboard: &mut dyn Clipboard,
|
||||
shell: &mut Shell<'_, Message>,
|
||||
) -> event::Status {
|
||||
self.content.as_widget_mut().on_event(
|
||||
self.tree,
|
||||
event,
|
||||
layout,
|
||||
cursor,
|
||||
renderer,
|
||||
clipboard,
|
||||
shell,
|
||||
&layout.bounds(),
|
||||
)
|
||||
}
|
||||
|
||||
fn draw(
|
||||
&self,
|
||||
renderer: &mut crate::Renderer,
|
||||
theme: &crate::Theme,
|
||||
style: &renderer::Style,
|
||||
layout: Layout<'_>,
|
||||
cursor: mouse::Cursor,
|
||||
) {
|
||||
self.content.draw(
|
||||
self.tree,
|
||||
renderer,
|
||||
theme,
|
||||
style,
|
||||
layout,
|
||||
cursor,
|
||||
&layout.bounds(),
|
||||
);
|
||||
}
|
||||
|
||||
fn operate(
|
||||
&mut self,
|
||||
layout: Layout<'_>,
|
||||
renderer: &crate::Renderer,
|
||||
operation: &mut dyn Operation<OperationOutputWrapper<Message>>,
|
||||
) {
|
||||
self.content
|
||||
.as_widget_mut()
|
||||
.operate(self.tree, layout, renderer, operation);
|
||||
}
|
||||
|
||||
fn mouse_interaction(
|
||||
&self,
|
||||
layout: Layout<'_>,
|
||||
cursor: mouse::Cursor,
|
||||
viewport: &Rectangle,
|
||||
renderer: &crate::Renderer,
|
||||
) -> mouse::Interaction {
|
||||
self.content
|
||||
.as_widget()
|
||||
.mouse_interaction(self.tree, layout, cursor, viewport, renderer)
|
||||
}
|
||||
|
||||
fn overlay<'c>(
|
||||
&'c mut self,
|
||||
layout: Layout<'_>,
|
||||
renderer: &crate::Renderer,
|
||||
) -> Option<overlay::Element<'c, Message, crate::Renderer>> {
|
||||
self.content
|
||||
.as_widget_mut()
|
||||
.overlay(self.tree, layout, renderer)
|
||||
}
|
||||
}
|
||||
239
src/widget/context_drawer/widget.rs
Normal file
239
src/widget/context_drawer/widget.rs
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
// Copyright 2023 System76 <info@system76.com>
|
||||
// SPDX-License-Identifier: MPL-2.0
|
||||
|
||||
use crate::widget::{
|
||||
button, column, container, icon, row, scrollable, text, LayerContainer, Space,
|
||||
};
|
||||
use crate::{Apply, Element, Renderer, Theme};
|
||||
|
||||
use super::overlay::Overlay;
|
||||
|
||||
use iced_core::alignment;
|
||||
use iced_core::event::{self, Event};
|
||||
use iced_core::widget::{Operation, Tree};
|
||||
use iced_core::{
|
||||
layout, mouse, overlay as iced_overlay, renderer, Clipboard, Color, Layout, Length, Padding,
|
||||
Rectangle, Shell, Widget,
|
||||
};
|
||||
|
||||
use iced_renderer::core::widget::OperationOutputWrapper;
|
||||
pub use iced_style::container::{Appearance, StyleSheet};
|
||||
|
||||
#[must_use]
|
||||
pub struct ContextDrawer<'a, Message> {
|
||||
content: Element<'a, Message>,
|
||||
drawer: Element<'a, Message>,
|
||||
on_close: Option<Message>,
|
||||
}
|
||||
|
||||
impl<'a, Message: Clone + 'static> ContextDrawer<'a, Message> {
|
||||
/// Creates an empty [`ContextDrawer`].
|
||||
pub fn new<Content, Drawer>(
|
||||
header: &'a str,
|
||||
content: Content,
|
||||
drawer: Drawer,
|
||||
on_close: Message,
|
||||
) -> Self
|
||||
where
|
||||
Content: Into<Element<'a, Message>>,
|
||||
Drawer: Into<Element<'a, Message>>,
|
||||
{
|
||||
let header = row::with_capacity(3)
|
||||
.height(Length::Fixed(80.0))
|
||||
.width(Length::Fixed(480.0))
|
||||
.padding(Padding {
|
||||
top: 0.0,
|
||||
bottom: 0.0,
|
||||
left: 32.0,
|
||||
right: 32.0,
|
||||
})
|
||||
.push(Space::new(Length::FillPortion(1), Length::Shrink))
|
||||
.push(
|
||||
text::heading(header)
|
||||
.width(Length::FillPortion(1))
|
||||
.height(Length::Fill)
|
||||
.horizontal_alignment(alignment::Horizontal::Center)
|
||||
.vertical_alignment(alignment::Vertical::Center),
|
||||
)
|
||||
.push(
|
||||
button::text("Close")
|
||||
.trailing_icon(icon::from_name("go-next-symbolic"))
|
||||
.on_press(on_close)
|
||||
.apply(container)
|
||||
.width(Length::FillPortion(1))
|
||||
.height(Length::Fill)
|
||||
.align_x(alignment::Horizontal::Right)
|
||||
.center_y(),
|
||||
);
|
||||
|
||||
let pane = column::with_capacity(2).push(header).push(scrollable(
|
||||
container(drawer.into()).padding(Padding {
|
||||
top: 0.0,
|
||||
left: 32.0,
|
||||
right: 32.0,
|
||||
bottom: 32.0,
|
||||
}),
|
||||
));
|
||||
|
||||
ContextDrawer {
|
||||
content: content.into(),
|
||||
drawer: LayerContainer::new(pane)
|
||||
.style(crate::style::Container::custom(move |theme| {
|
||||
let palette = theme.cosmic();
|
||||
|
||||
container::Appearance {
|
||||
icon_color: Some(Color::from(palette.primary.on)),
|
||||
text_color: Some(Color::from(palette.primary.on)),
|
||||
background: Some(iced::Background::Color(palette.primary.base.into())),
|
||||
border_radius: 8.0.into(),
|
||||
border_width: 0.0,
|
||||
border_color: Color::TRANSPARENT,
|
||||
}
|
||||
}))
|
||||
.layer(cosmic_theme::Layer::Primary)
|
||||
.width(Length::Fill)
|
||||
.height(Length::Fill)
|
||||
.max_width(480.0)
|
||||
.into(),
|
||||
on_close: None,
|
||||
}
|
||||
}
|
||||
|
||||
// Optionally assigns message to `on_close` event.
|
||||
pub fn on_close_maybe(mut self, message: Option<Message>) -> Self {
|
||||
self.on_close = message;
|
||||
self
|
||||
}
|
||||
}
|
||||
|
||||
impl<'a, Message: Clone> Widget<Message, Renderer> for ContextDrawer<'a, Message> {
|
||||
fn children(&self) -> Vec<Tree> {
|
||||
vec![Tree::new(&self.content), Tree::new(&self.drawer)]
|
||||
}
|
||||
|
||||
fn diff(&mut self, tree: &mut Tree) {
|
||||
tree.diff_children(&mut [&mut self.content, &mut self.drawer]);
|
||||
}
|
||||
|
||||
fn width(&self) -> Length {
|
||||
self.content.as_widget().width()
|
||||
}
|
||||
|
||||
fn height(&self) -> Length {
|
||||
self.content.as_widget().height()
|
||||
}
|
||||
|
||||
fn layout(&self, renderer: &Renderer, limits: &layout::Limits) -> layout::Node {
|
||||
self.content.as_widget().layout(renderer, limits)
|
||||
}
|
||||
|
||||
fn operate(
|
||||
&self,
|
||||
tree: &mut Tree,
|
||||
layout: Layout<'_>,
|
||||
renderer: &Renderer,
|
||||
operation: &mut dyn Operation<OperationOutputWrapper<Message>>,
|
||||
) {
|
||||
self.content
|
||||
.as_widget()
|
||||
.operate(&mut tree.children[0], layout, renderer, operation);
|
||||
}
|
||||
|
||||
fn on_event(
|
||||
&mut self,
|
||||
tree: &mut Tree,
|
||||
event: Event,
|
||||
layout: Layout<'_>,
|
||||
cursor: mouse::Cursor,
|
||||
renderer: &Renderer,
|
||||
clipboard: &mut dyn Clipboard,
|
||||
shell: &mut Shell<'_, Message>,
|
||||
viewport: &Rectangle,
|
||||
) -> event::Status {
|
||||
self.content.as_widget_mut().on_event(
|
||||
&mut tree.children[0],
|
||||
event,
|
||||
layout,
|
||||
cursor,
|
||||
renderer,
|
||||
clipboard,
|
||||
shell,
|
||||
viewport,
|
||||
)
|
||||
}
|
||||
|
||||
fn mouse_interaction(
|
||||
&self,
|
||||
tree: &Tree,
|
||||
layout: Layout<'_>,
|
||||
cursor: mouse::Cursor,
|
||||
viewport: &Rectangle,
|
||||
renderer: &Renderer,
|
||||
) -> mouse::Interaction {
|
||||
self.content.as_widget().mouse_interaction(
|
||||
&tree.children[0],
|
||||
layout,
|
||||
cursor,
|
||||
viewport,
|
||||
renderer,
|
||||
)
|
||||
}
|
||||
|
||||
fn draw(
|
||||
&self,
|
||||
tree: &Tree,
|
||||
renderer: &mut Renderer,
|
||||
theme: &Theme,
|
||||
renderer_style: &renderer::Style,
|
||||
layout: Layout<'_>,
|
||||
cursor: mouse::Cursor,
|
||||
viewport: &Rectangle,
|
||||
) {
|
||||
self.content.as_widget().draw(
|
||||
&tree.children[0],
|
||||
renderer,
|
||||
theme,
|
||||
renderer_style,
|
||||
layout,
|
||||
cursor,
|
||||
viewport,
|
||||
);
|
||||
}
|
||||
|
||||
fn overlay<'b>(
|
||||
&'b mut self,
|
||||
tree: &'b mut Tree,
|
||||
layout: Layout<'_>,
|
||||
_renderer: &Renderer,
|
||||
) -> Option<iced_overlay::Element<'b, Message, Renderer>> {
|
||||
let bounds = layout.bounds();
|
||||
|
||||
Some(iced_overlay::Element::new(
|
||||
layout.position(),
|
||||
Box::new(Overlay {
|
||||
content: &mut self.drawer,
|
||||
tree: &mut tree.children[1],
|
||||
width: bounds.width,
|
||||
}),
|
||||
))
|
||||
}
|
||||
|
||||
#[cfg(feature = "a11y")]
|
||||
/// get the a11y nodes for the widget
|
||||
fn a11y_nodes(
|
||||
&self,
|
||||
layout: Layout<'_>,
|
||||
state: &Tree,
|
||||
p: mouse::Cursor,
|
||||
) -> iced_accessibility::A11yTree {
|
||||
let c_layout = layout.children().next().unwrap();
|
||||
let c_state = &state.children[0];
|
||||
self.content.as_widget().a11y_nodes(c_layout, c_state, p)
|
||||
}
|
||||
}
|
||||
|
||||
impl<'a, Message: 'a + Clone> From<ContextDrawer<'a, Message>> for Element<'a, Message> {
|
||||
fn from(widget: ContextDrawer<'a, Message>) -> Element<'a, Message> {
|
||||
Element::new(widget)
|
||||
}
|
||||
}
|
||||
|
|
@ -31,6 +31,9 @@ pub use card::*;
|
|||
pub mod color_picker;
|
||||
pub use color_picker::{ColorPicker, ColorPickerModel};
|
||||
|
||||
pub mod context_drawer;
|
||||
pub use context_drawer::{context_drawer, ContextDrawer};
|
||||
|
||||
pub use column::{column, Column};
|
||||
pub mod column {
|
||||
pub type Column<'a, Message> = iced::widget::Column<'a, Message, crate::Renderer>;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue