feat(material_theme): implement `pane_grid::Catalog`

3 files changed, 216 insertions, 107 deletions

diff --git a/crates/material_theme/src/lib.rs b/crates/material_theme/src/lib.rs
index 0df5b1c..416c958 100644
--- a/crates/material_theme/src/lib.rs
+++ b/crates/material_theme/src/lib.rs
@@ -12,6 +12,7 @@ pub mod dialog;
 #[cfg(feature = "markdown")]
 pub mod markdown;
 pub mod menu;
+pub mod pane_grid;
 pub mod pick_list;
 pub mod progress_bar;
 #[cfg(feature = "qr_code")]
diff --git a/crates/material_theme/src/pane_grid.rs b/crates/material_theme/src/pane_grid.rs
new file mode 100644
index 0000000..d66e475
--- /dev/null
+++ b/crates/material_theme/src/pane_grid.rs
@@ -0,0 +1,38 @@
+use iced_widget::core::{Background, border};
+use iced_widget::pane_grid::{Catalog, Highlight, Line, Style, StyleFn};
+
+use super::Theme;
+use crate::utils::{HOVERED_LAYER_OPACITY, mix};
+
+impl Catalog for Theme {
+    type Class<'a> = StyleFn<'a, Self>;
+
+    fn default<'a>() -> <Self as Catalog>::Class<'a> {
+        Box::new(default)
+    }
+
+    fn style(&self, class: &<Self as Catalog>::Class<'_>) -> Style {
+        class(self)
+    }
+}
+
+pub fn default(theme: &Theme) -> Style {
+    Style {
+        hovered_region: Highlight {
+            background: Background::Color(mix(
+                theme.colorscheme.tertiary.tertiary_container,
+                theme.colorscheme.surface.on_surface,
+                HOVERED_LAYER_OPACITY,
+            )),
+            border: border::rounded(12),
+        },
+        picked_split: Line {
+            color: theme.colorscheme.outline.variant,
+            width: 2.0,
+        },
+        hovered_split: Line {
+            color: theme.colorscheme.surface.on_surface,
+            width: 6.0,
+        },
+    }
+}
diff --git a/theme_test/src/main.rs b/theme_test/src/main.rs
index d564ee5..b8653b5 100644
--- a/theme_test/src/main.rs
+++ b/theme_test/src/main.rs
@@ -1,7 +1,7 @@
 use iced::Length::Fill;
 use iced::widget::{
-    button, center, checkbox, column, container, horizontal_rule, pick_list,
-    radio, row, slider, text_input, toggler,
+    button, center, checkbox, column, container, horizontal_rule, pane_grid,
+    pick_list, radio, row, slider, text_input, toggler,
 };
 use iced::{Element, Length};
 use iced_anim::{Animated, Animation, Event};
@@ -32,10 +32,11 @@ enum Message {
     Bool(bool),
     Radio(Choice),
     Slider(f32),
+    Resize(pane_grid::ResizeEvent),
     SwitchTheme(Event<Theme>),
 }
 
-#[derive(Debug, Default)]
+#[derive(Debug)]
 pub struct State {
     theme: Animated<Theme>,
     show_dialog: bool,
@@ -43,6 +44,28 @@ pub struct State {
     is_checked: bool,
     selection: Option<Choice>,
     value: f32,
+    panes: pane_grid::State<Pane>,
+}
+
+impl Default for State {
+    fn default() -> Self {
+        Self {
+            theme: Default::default(),
+            show_dialog: Default::default(),
+            content: Default::default(),
+            is_checked: Default::default(),
+            selection: Default::default(),
+            value: Default::default(),
+            panes: pane_grid::State::with_configuration(
+                pane_grid::Configuration::Split {
+                    axis: pane_grid::Axis::Vertical,
+                    ratio: 0.5,
+                    a: Box::new(pane_grid::Configuration::Pane(Pane::Left)),
+                    b: Box::new(pane_grid::Configuration::Pane(Pane::Right)),
+                },
+            ),
+        }
+    }
 }
 
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
@@ -52,6 +75,12 @@ pub enum Choice {
     C,
 }
 
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Pane {
+    Left,
+    Right,
+}
+
 impl State {
     fn update(&mut self, message: Message) {
         match message {
@@ -66,118 +95,159 @@ impl State {
             Message::Bool(is_checked) => self.is_checked = is_checked,
             Message::Radio(choice) => self.selection = Some(choice),
             Message::Slider(value) => self.value = value,
+            Message::Resize(pane_grid::ResizeEvent { split, ratio }) => {
+                self.panes.resize(split, ratio);
+            }
             Message::SwitchTheme(event) => {
                 self.theme.update(event);
             }
         }
     }
     fn view(&self) -> Element<'_, Message, Theme> {
-        let base = container(
-            row![
-                column![
-                    button("Disabled"),
-                    button("Filled").on_press(Message::Noop),
-                    button("Filled Tonal")
-                        .on_press(Message::Noop)
-                        .style(filled_tonal),
-                    button("Elevated").on_press(Message::Noop).style(elevated),
-                    button("Outlined").on_press(Message::Noop).style(outlined),
-                    button("Text").on_press(Message::Noop).style(text),
-                    button("Text Disabled").style(text),
-                ]
-                .spacing(10),
-                column![
-                    container("None").padding(8),
-                    container("Primary").padding(8).style(primary),
-                    container("Primary Container")
-                        .padding(8)
-                        .style(primary_container),
-                    container("Secondary").padding(8).style(secondary),
-                    container("Secondary Container")
-                        .padding(8)
-                        .style(secondary_container),
-                    container("Tertiary").padding(8).style(tertiary),
-                    container("Tertiary Container")
-                        .padding(8)
-                        .style(tertiary_container),
-                    container("Error").padding(8).style(error),
-                    container("Error Container")
-                        .padding(8)
-                        .style(error_container),
-                    container("Surface").padding(8).style(surface),
-                    container(
-                        iced::widget::text("Surface Variant")
-                            .style(surface_variant)
+        let base: pane_grid::PaneGrid<'_, Message, Theme> =
+            pane_grid(&self.panes, |_pane, state, _is_maximized| {
+                pane_grid::Content::new(match state {
+                    Pane::Left => container(
+                        row![
+                            column![
+                                button("Disabled"),
+                                button("Filled").on_press(Message::Noop),
+                                button("Filled Tonal")
+                                    .on_press(Message::Noop)
+                                    .style(filled_tonal),
+                                button("Elevated")
+                                    .on_press(Message::Noop)
+                                    .style(elevated),
+                                button("Outlined")
+                                    .on_press(Message::Noop)
+                                    .style(outlined),
+                                button("Text")
+                                    .on_press(Message::Noop)
+                                    .style(text),
+                                button("Text Disabled").style(text),
+                            ]
+                            .spacing(10),
+                            column![
+                                container("None").padding(8),
+                                container("Primary").padding(8).style(primary),
+                                container("Primary Container")
+                                    .padding(8)
+                                    .style(primary_container),
+                                container("Secondary")
+                                    .padding(8)
+                                    .style(secondary),
+                                container("Secondary Container")
+                                    .padding(8)
+                                    .style(secondary_container),
+                                container("Tertiary")
+                                    .padding(8)
+                                    .style(tertiary),
+                                container("Tertiary Container")
+                                    .padding(8)
+                                    .style(tertiary_container),
+                                container("Error").padding(8).style(error),
+                                container("Error Container")
+                                    .padding(8)
+                                    .style(error_container),
+                                container("Surface").padding(8).style(surface),
+                                container(
+                                    iced::widget::text("Surface Variant")
+                                        .style(surface_variant)
+                                )
+                                .padding(8)
+                                .style(surface),
+                                container("Inverse Surface")
+                                    .padding(8)
+                                    .style(inverse_surface),
+                                container("Surface Container Lowest")
+                                    .padding(8)
+                                    .style(surface_container_lowest),
+                                container("Surface Container Low")
+                                    .padding(8)
+                                    .style(surface_container_low),
+                                container("Surface Container")
+                                    .padding(8)
+                                    .style(surface_container),
+                                container("Surface Container High")
+                                    .padding(8)
+                                    .style(surface_container_high),
+                                container("Surface Container Highest")
+                                    .padding(8)
+                                    .style(surface_container_highest),
+                            ]
+                            .spacing(10),
+                        ]
+                        .spacing(10),
                     )
-                    .padding(8)
-                    .style(surface),
-                    container("Inverse Surface")
-                        .padding(8)
-                        .style(inverse_surface),
-                    container("Surface Container Lowest")
-                        .padding(8)
-                        .style(surface_container_lowest),
-                    container("Surface Container Low")
-                        .padding(8)
-                        .style(surface_container_low),
-                    container("Surface Container")
-                        .padding(8)
-                        .style(surface_container),
-                    container("Surface Container High")
-                        .padding(8)
-                        .style(surface_container_high),
-                    container("Surface Container Highest")
-                        .padding(8)
-                        .style(surface_container_highest),
-                ]
-                .spacing(10),
-                column![
-                    // Pick List
-                    pick_list(
-                        [LIGHT.clone(), DARK.clone()],
-                        Some(self.theme.target()),
-                        |theme| Message::SwitchTheme(theme.into())
+                    .width(Length::Fill)
+                    .height(Length::Fill)
+                    .padding(12),
+
+                    Pane::Right => container(
+                        column![
+                            // Pick List
+                            pick_list(
+                                [LIGHT.clone(), DARK.clone()],
+                                Some(self.theme.target()),
+                                |theme| Message::SwitchTheme(theme.into())
+                            )
+                            .placeholder("Select a theme..."),
+                            horizontal_rule(1),
+                            // Button
+                            button("Open Dialog").on_press(Message::OpenDialog),
+                            horizontal_rule(1),
+                            // Text Input
+                            text_input("Type something here...", &self.content)
+                                .on_input(Message::Input),
+                            horizontal_rule(1),
+                            // Checkbox
+                            checkbox("Normal", self.is_checked)
+                                .on_toggle(Message::Bool),
+                            checkbox("Error", self.is_checked)
+                                .on_toggle(Message::Bool)
+                                .style(material_theme::checkbox::error),
+                            checkbox("Disabled", self.is_checked),
+                            horizontal_rule(1),
+                            // Radio
+                            radio(
+                                "A",
+                                Choice::A,
+                                self.selection,
+                                Message::Radio,
+                            ),
+                            radio(
+                                "B",
+                                Choice::B,
+                                self.selection,
+                                Message::Radio,
+                            ),
+                            radio(
+                                "C",
+                                Choice::C,
+                                self.selection,
+                                Message::Radio,
+                            ),
+                            horizontal_rule(1),
+                            // Slider
+                            center(iced::widget::text!("{:.1}", self.value))
+                                .width(Length::Fill)
+                                .height(Length::Shrink),
+                            slider(0.0..=100.0, self.value, Message::Slider)
+                                .step(0.1),
+                            horizontal_rule(1),
+                            // Toggler
+                            toggler(self.is_checked)
+                                .on_toggle(Message::Bool)
+                                .size(24.0)
+                        ]
+                        .spacing(10),
                     )
-                    .placeholder("Select a theme..."),
-                    horizontal_rule(1),
-                    // Button
-                    button("Open Dialog").on_press(Message::OpenDialog),
-                    horizontal_rule(1),
-                    // Text Input
-                    text_input("Type something here...", &self.content)
-                        .on_input(Message::Input),
-                    horizontal_rule(1),
-                    // Checkbox
-                    checkbox("Normal", self.is_checked)
-                        .on_toggle(Message::Bool),
-                    checkbox("Error", self.is_checked)
-                        .on_toggle(Message::Bool)
-                        .style(material_theme::checkbox::error),
-                    checkbox("Disabled", self.is_checked),
-                    horizontal_rule(1),
-                    // Radio
-                    radio("A", Choice::A, self.selection, Message::Radio,),
-                    radio("B", Choice::B, self.selection, Message::Radio,),
-                    radio("C", Choice::C, self.selection, Message::Radio,),
-                    horizontal_rule(1),
-                    // Slider
-                    center(iced::widget::text!("{:.1}", self.value))
-                        .width(Length::Fill)
-                        .height(Length::Shrink),
-                    slider(0.0..=100.0, self.value, Message::Slider).step(0.1),
-                    horizontal_rule(1),
-                    // Toggler
-                    toggler(self.is_checked)
-                        .on_toggle(Message::Bool)
-                        .size(24.0)
-                ]
-                .spacing(10)
-            ]
-            .spacing(20),
-        )
-        .width(Fill)
-        .height(Fill)
-        .padding(12);
+                    .width(Length::Fill)
+                    .height(Length::Fill)
+                    .padding(12),
+                })
+            })
+            .on_resize(10, Message::Resize);
 
         let dialog =
             dialog(self.show_dialog, base, iced::widget::text("Say Hi!"))