Merge pull request #2239 from dtzxporter/scrollable-quad-fill

Introduce an appearance for a scrollable, ability to customize the scrollbar gap.

5 files changed, 110 insertions, 142 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 748bdfd0..317bfc8f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -40,10 +40,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Mouse movement events for `MouseArea`. [#2147](https://github.com/iced-rs/iced/pull/2147)
 - Dracula, Nord, Solarized, and Gruvbox variants for `Theme`. [#2170](https://github.com/iced-rs/iced/pull/2170)
 - Catppuccin, Tokyo Night, Kanagawa, Moonfly, Nightfly and Oxocarbon variants for `Theme`. [#2233](https://github.com/iced-rs/iced/pull/2233)
-
 - `From<T> where T: Into<PathBuf>` for `svg::Handle`. [#2235](https://github.com/iced-rs/iced/pull/2235)
 - `on_open` and `on_close` handlers for `PickList`. [#2174](https://github.com/iced-rs/iced/pull/2174)
 - Support for generic `Element` in `Tooltip`. [#2228](https://github.com/iced-rs/iced/pull/2228)
+- Container and `gap` styling for `Scrollable`. [#2239](https://github.com/iced-rs/iced/pull/2239)
 
 ### Changed
 - Enable WebGPU backend in `wgpu` by default instead of WebGL. [#2068](https://github.com/iced-rs/iced/pull/2068)
diff --git a/examples/scrollable/src/main.rs b/examples/scrollable/src/main.rs
index ff691917..29c39c36 100644
--- a/examples/scrollable/src/main.rs
+++ b/examples/scrollable/src/main.rs
@@ -1,13 +1,11 @@
 use iced::executor;
-use iced::theme;
-use iced::widget::scrollable::{Properties, Scrollbar, Scroller};
+use iced::widget::scrollable::Properties;
 use iced::widget::{
     button, column, container, horizontal_space, progress_bar, radio, row,
     scrollable, slider, text, vertical_space,
 };
 use iced::{
-    Alignment, Application, Border, Color, Command, Element, Length, Settings,
-    Theme,
+    Alignment, Application, Color, Command, Element, Length, Settings, Theme,
 };
 
 use once_cell::sync::Lazy;
@@ -263,7 +261,6 @@ impl Application for ScrollableDemo {
                         .scroller_width(self.scroller_width)
                         .alignment(self.alignment),
                 ))
-                .style(theme::Scrollable::custom(ScrollbarCustomStyle))
                 .id(SCROLLABLE_ID.clone())
                 .on_scroll(Message::Scrolled),
                 Direction::Multi => scrollable(
@@ -311,9 +308,6 @@ impl Application for ScrollableDemo {
                         vertical: properties,
                     }
                 })
-                .style(theme::Scrollable::Custom(Box::new(
-                    ScrollbarCustomStyle,
-                )))
                 .id(SCROLLABLE_ID.clone())
                 .on_scroll(Message::Scrolled),
             });
@@ -350,45 +344,6 @@ impl Application for ScrollableDemo {
     }
 }
 
-struct ScrollbarCustomStyle;
-
-impl scrollable::StyleSheet for ScrollbarCustomStyle {
-    type Style = Theme;
-
-    fn active(&self, style: &Self::Style) -> Scrollbar {
-        style.active(&theme::Scrollable::Default)
-    }
-
-    fn hovered(
-        &self,
-        style: &Self::Style,
-        is_mouse_over_scrollbar: bool,
-    ) -> Scrollbar {
-        style.hovered(&theme::Scrollable::Default, is_mouse_over_scrollbar)
-    }
-
-    fn hovered_horizontal(
-        &self,
-        style: &Self::Style,
-        is_mouse_over_scrollbar: bool,
-    ) -> Scrollbar {
-        if is_mouse_over_scrollbar {
-            Scrollbar {
-                background: style
-                    .active(&theme::Scrollable::default())
-                    .background,
-                border: Border::with_radius(2),
-                scroller: Scroller {
-                    color: Color::from_rgb8(250, 85, 134),
-                    border: Border::with_radius(2),
-                },
-            }
-        } else {
-            self.active(style)
-        }
-    }
-}
-
 fn progress_bar_custom_style(theme: &Theme) -> progress_bar::Appearance {
     progress_bar::Appearance {
         background: theme.extended_palette().background.strong.color.into(),
diff --git a/style/src/scrollable.rs b/style/src/scrollable.rs
index 6f37305f..d2348510 100644
--- a/style/src/scrollable.rs
+++ b/style/src/scrollable.rs
@@ -1,14 +1,26 @@
 //! Change the appearance of a scrollable.
+use crate::container;
 use crate::core::{Background, Border, Color};
 
-/// The appearance of a scrollable.
+/// The appearance of a scrolable.
+#[derive(Debug, Clone, Copy)]
+pub struct Appearance {
+    /// The [`container::Appearance`] of a scrollable.
+    pub container: container::Appearance,
+    /// The [`Scrollbar`] appearance.
+    pub scrollbar: Scrollbar,
+    /// The [`Background`] of the gap between a horizontal and vertical scrollbar.
+    pub gap: Option<Background>,
+}
+
+/// The appearance of the scrollbar of a scrollable.
 #[derive(Debug, Clone, Copy)]
 pub struct Scrollbar {
-    /// The [`Background`] of a scrollable.
+    /// The [`Background`] of a scrollbar.
     pub background: Option<Background>,
-    /// The [`Border`] of a scrollable.
+    /// The [`Border`] of a scrollbar.
     pub border: Border,
-    /// The appearance of the [`Scroller`] of a scrollable.
+    /// The appearance of the [`Scroller`] of a scrollbar.
     pub scroller: Scroller,
 }
 
@@ -26,37 +38,18 @@ pub trait StyleSheet {
     /// The supported style of the [`StyleSheet`].
     type Style: Default;
 
-    /// Produces the style of an active scrollbar.
-    fn active(&self, style: &Self::Style) -> Scrollbar;
+    /// Produces the [`Appearance`] of an active scrollable.
+    fn active(&self, style: &Self::Style) -> Appearance;
 
-    /// Produces the style of a scrollbar when the scrollable is being hovered.
+    /// Produces the [`Appearance`] of a scrollable when it is being hovered.
     fn hovered(
         &self,
         style: &Self::Style,
         is_mouse_over_scrollbar: bool,
-    ) -> Scrollbar;
+    ) -> Appearance;
 
-    /// Produces the style of a scrollbar that is being dragged.
-    fn dragging(&self, style: &Self::Style) -> Scrollbar {
+    /// Produces the [`Appearance`] of a scrollable when it is being dragged.
+    fn dragging(&self, style: &Self::Style) -> Appearance {
         self.hovered(style, true)
     }
-
-    /// Produces the style of an active horizontal scrollbar.
-    fn active_horizontal(&self, style: &Self::Style) -> Scrollbar {
-        self.active(style)
-    }
-
-    /// Produces the style of a horizontal scrollbar when the scrollable is being hovered.
-    fn hovered_horizontal(
-        &self,
-        style: &Self::Style,
-        is_mouse_over_scrollbar: bool,
-    ) -> Scrollbar {
-        self.hovered(style, is_mouse_over_scrollbar)
-    }
-
-    /// Produces the style of a horizontal scrollbar that is being dragged.
-    fn dragging_horizontal(&self, style: &Self::Style) -> Scrollbar {
-        self.hovered_horizontal(style, true)
-    }
 }
diff --git a/style/src/theme.rs b/style/src/theme.rs
index 5909498f..0b56e101 100644
--- a/style/src/theme.rs
+++ b/style/src/theme.rs
@@ -1188,18 +1188,22 @@ impl Scrollable {
 impl scrollable::StyleSheet for Theme {
     type Style = Scrollable;
 
-    fn active(&self, style: &Self::Style) -> scrollable::Scrollbar {
+    fn active(&self, style: &Self::Style) -> scrollable::Appearance {
         match style {
             Scrollable::Default => {
                 let palette = self.extended_palette();
 
-                scrollable::Scrollbar {
-                    background: Some(palette.background.weak.color.into()),
-                    border: Border::with_radius(2),
-                    scroller: scrollable::Scroller {
-                        color: palette.background.strong.color,
+                scrollable::Appearance {
+                    container: container::Appearance::default(),
+                    scrollbar: scrollable::Scrollbar {
+                        background: Some(palette.background.weak.color.into()),
                         border: Border::with_radius(2),
+                        scroller: scrollable::Scroller {
+                            color: palette.background.strong.color,
+                            border: Border::with_radius(2),
+                        },
                     },
+                    gap: None,
                 }
             }
             Scrollable::Custom(custom) => custom.active(self),
@@ -1210,19 +1214,24 @@ impl scrollable::StyleSheet for Theme {
         &self,
         style: &Self::Style,
         is_mouse_over_scrollbar: bool,
-    ) -> scrollable::Scrollbar {
+    ) -> scrollable::Appearance {
         match style {
             Scrollable::Default => {
                 if is_mouse_over_scrollbar {
                     let palette = self.extended_palette();
 
-                    scrollable::Scrollbar {
-                        background: Some(palette.background.weak.color.into()),
-                        border: Border::with_radius(2),
-                        scroller: scrollable::Scroller {
-                            color: palette.primary.strong.color,
+                    scrollable::Appearance {
+                        scrollbar: scrollable::Scrollbar {
+                            background: Some(
+                                palette.background.weak.color.into(),
+                            ),
                             border: Border::with_radius(2),
+                            scroller: scrollable::Scroller {
+                                color: palette.primary.strong.color,
+                                border: Border::with_radius(2),
+                            },
                         },
+                        ..self.active(style)
                     }
                 } else {
                     self.active(style)
@@ -1234,42 +1243,12 @@ impl scrollable::StyleSheet for Theme {
         }
     }
 
-    fn dragging(&self, style: &Self::Style) -> scrollable::Scrollbar {
+    fn dragging(&self, style: &Self::Style) -> scrollable::Appearance {
         match style {
             Scrollable::Default => self.hovered(style, true),
             Scrollable::Custom(custom) => custom.dragging(self),
         }
     }
-
-    fn active_horizontal(&self, style: &Self::Style) -> scrollable::Scrollbar {
-        match style {
-            Scrollable::Default => self.active(style),
-            Scrollable::Custom(custom) => custom.active_horizontal(self),
-        }
-    }
-
-    fn hovered_horizontal(
-        &self,
-        style: &Self::Style,
-        is_mouse_over_scrollbar: bool,
-    ) -> scrollable::Scrollbar {
-        match style {
-            Scrollable::Default => self.hovered(style, is_mouse_over_scrollbar),
-            Scrollable::Custom(custom) => {
-                custom.hovered_horizontal(self, is_mouse_over_scrollbar)
-            }
-        }
-    }
-
-    fn dragging_horizontal(
-        &self,
-        style: &Self::Style,
-    ) -> scrollable::Scrollbar {
-        match style {
-            Scrollable::Default => self.hovered_horizontal(style, true),
-            Scrollable::Custom(custom) => custom.dragging_horizontal(self),
-        }
-    }
 }
 
 /// The style of text.
diff --git a/widget/src/scrollable.rs b/widget/src/scrollable.rs
index 207b2539..3814c590 100644
--- a/widget/src/scrollable.rs
+++ b/widget/src/scrollable.rs
@@ -1,4 +1,5 @@
 //! Navigate an endless amount of content with a scrollbar.
+use crate::container;
 use crate::core::event::{self, Event};
 use crate::core::keyboard;
 use crate::core::layout;
@@ -15,7 +16,9 @@ use crate::core::{
 };
 use crate::runtime::Command;
 
-pub use crate::style::scrollable::{Scrollbar, Scroller, StyleSheet};
+pub use crate::style::scrollable::{
+    Appearance, Scrollbar, Scroller, StyleSheet,
+};
 pub use operation::scrollable::{AbsoluteOffset, RelativeOffset};
 
 /// A widget that can vertically display an infinite amount of content with a
@@ -878,6 +881,24 @@ pub fn draw<Theme, Renderer>(
         _ => mouse::Cursor::Unavailable,
     };
 
+    let appearance = if state.y_scroller_grabbed_at.is_some()
+        || state.x_scroller_grabbed_at.is_some()
+    {
+        theme.dragging(style)
+    } else if cursor_over_scrollable.is_some() {
+        theme.hovered(style, mouse_over_y_scrollbar || mouse_over_x_scrollbar)
+    } else {
+        theme.active(style)
+    };
+
+    let idle_scrollbar = theme.active(style).scrollbar;
+
+    container::draw_background(
+        renderer,
+        &appearance.container,
+        layout.bounds(),
+    );
+
     // Draw inner content
     if scrollbars.active() {
         renderer.with_layer(bounds, |renderer| {
@@ -902,7 +923,6 @@ pub fn draw<Theme, Renderer>(
             |renderer: &mut Renderer,
              style: Scrollbar,
              scrollbar: &internals::Scrollbar| {
-                //track
                 if scrollbar.bounds.width > 0.0
                     && scrollbar.bounds.height > 0.0
                     && (style.background.is_some()
@@ -921,7 +941,6 @@ pub fn draw<Theme, Renderer>(
                     );
                 }
 
-                //thumb
                 if scrollbar.scroller.bounds.width > 0.0
                     && scrollbar.scroller.bounds.height > 0.0
                     && (style.scroller.color != Color::TRANSPARENT
@@ -946,30 +965,52 @@ pub fn draw<Theme, Renderer>(
                 ..bounds
             },
             |renderer| {
-                //draw y scrollbar
                 if let Some(scrollbar) = scrollbars.y {
-                    let style = if state.y_scroller_grabbed_at.is_some() {
-                        theme.dragging(style)
-                    } else if cursor_over_scrollable.is_some() {
-                        theme.hovered(style, mouse_over_y_scrollbar)
-                    } else {
-                        theme.active(style)
-                    };
-
-                    draw_scrollbar(renderer, style, &scrollbar);
+                    draw_scrollbar(
+                        renderer,
+                        if mouse_over_y_scrollbar
+                            || state.y_scroller_grabbed_at.is_some()
+                        {
+                            appearance.scrollbar
+                        } else {
+                            idle_scrollbar
+                        },
+                        &scrollbar,
+                    );
                 }
 
-                //draw x scrollbar
                 if let Some(scrollbar) = scrollbars.x {
-                    let style = if state.x_scroller_grabbed_at.is_some() {
-                        theme.dragging_horizontal(style)
-                    } else if cursor_over_scrollable.is_some() {
-                        theme.hovered_horizontal(style, mouse_over_x_scrollbar)
-                    } else {
-                        theme.active_horizontal(style)
-                    };
+                    draw_scrollbar(
+                        renderer,
+                        if mouse_over_x_scrollbar
+                            || state.x_scroller_grabbed_at.is_some()
+                        {
+                            appearance.scrollbar
+                        } else {
+                            idle_scrollbar
+                        },
+                        &scrollbar,
+                    );
+                }
 
-                    draw_scrollbar(renderer, style, &scrollbar);
+                if let (Some(x), Some(y)) = (scrollbars.x, scrollbars.y) {
+                    let background =
+                        appearance.gap.or(appearance.container.background);
+
+                    if let Some(background) = background {
+                        renderer.fill_quad(
+                            renderer::Quad {
+                                bounds: Rectangle {
+                                    x: y.bounds.x,
+                                    y: x.bounds.y,
+                                    width: y.bounds.width,
+                                    height: x.bounds.height,
+                                },
+                                ..renderer::Quad::default()
+                            },
+                            background,
+                        );
+                    }
                 }
             },
         );