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

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

2 files changed, 44 insertions, 72 deletions

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.