Merge branch 'master' into feature/overlay

2 files changed, 35 insertions, 12 deletions

diff --git a/examples/pane_grid/README.md b/examples/pane_grid/README.md
index 3653fc5b..a4cfcb7d 100644
--- a/examples/pane_grid/README.md
+++ b/examples/pane_grid/README.md
@@ -15,8 +15,8 @@ This example showcases the `PaneGrid` widget, which features:
 The __[`main`]__ file contains all the code of the example.
 
 <div align="center">
-  <a href="https://gfycat.com/mixedflatjellyfish">
-    <img src="https://thumbs.gfycat.com/MixedFlatJellyfish-small.gif">
+  <a href="https://gfycat.com/frailfreshairedaleterrier">
+    <img src="https://thumbs.gfycat.com/FrailFreshAiredaleterrier-small.gif">
   </a>
 </div>
 
diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs
index a821072f..09c33613 100644
--- a/examples/pane_grid/src/main.rs
+++ b/examples/pane_grid/src/main.rs
@@ -97,7 +97,15 @@ impl Sandbox for Example {
 
         let pane_grid =
             PaneGrid::new(&mut self.panes, |pane, content, focus| {
-                content.view(pane, focus, total_panes)
+                let is_focused = focus.is_some();
+                let title_bar =
+                    pane_grid::TitleBar::new(format!("Pane {}", content.id))
+                        .padding(10)
+                        .style(style::TitleBar { is_focused });
+
+                pane_grid::Content::new(content.view(pane, total_panes))
+                    .title_bar(title_bar)
+                    .style(style::Pane { is_focused })
             })
             .width(Length::Fill)
             .height(Length::Fill)
@@ -155,15 +163,14 @@ impl Content {
     fn view(
         &mut self,
         pane: pane_grid::Pane,
-        focus: Option<pane_grid::Focus>,
         total_panes: usize,
     ) -> Element<Message> {
         let Content {
-            id,
             scroll,
             split_horizontally,
             split_vertically,
             close,
+            ..
         } = self;
 
         let button = |state, label, message, style| {
@@ -209,7 +216,6 @@ impl Content {
             .width(Length::Fill)
             .spacing(10)
             .align_items(Align::Center)
-            .push(Text::new(format!("Pane {}", id)).size(30))
             .push(controls);
 
         Container::new(content)
@@ -217,9 +223,6 @@ impl Content {
             .height(Length::Fill)
             .padding(5)
             .center_y()
-            .style(style::Pane {
-                is_focused: focus.is_some(),
-            })
             .into()
     }
 }
@@ -245,6 +248,25 @@ mod style {
         0xC4 as f32 / 255.0,
     );
 
+    pub struct TitleBar {
+        pub is_focused: bool,
+    }
+
+    impl container::StyleSheet for TitleBar {
+        fn style(&self) -> container::Style {
+            let pane = Pane {
+                is_focused: self.is_focused,
+            }
+            .style();
+
+            container::Style {
+                text_color: Some(Color::WHITE),
+                background: Some(pane.border_color.into()),
+                ..Default::default()
+            }
+        }
+    }
+
     pub struct Pane {
         pub is_focused: bool,
     }
@@ -254,9 +276,10 @@ mod style {
             container::Style {
                 background: Some(Background::Color(SURFACE)),
                 border_width: 2,
-                border_color: Color {
-                    a: if self.is_focused { 1.0 } else { 0.3 },
-                    ..Color::BLACK
+                border_color: if self.is_focused {
+                    Color::BLACK
+                } else {
+                    Color::from_rgb(0.7, 0.7, 0.7)
                 },
                 ..Default::default()
             }