From 0f920e0435932c0b6927c771424b2ba495ddb46e Mon Sep 17 00:00:00 2001
From: dtzxporter <dtzxporter@users.noreply.github.com>
Date: Tue, 6 Feb 2024 13:55:42 -0500
Subject: Introduce an appearance for a scrollable, ability to customize the
 scrollbar gap.

Update scrollable.rs
---
 widget/src/scrollable.rs | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

(limited to 'widget')

diff --git a/widget/src/scrollable.rs b/widget/src/scrollable.rs
index 207b2539..5c986757 100644
--- a/widget/src/scrollable.rs
+++ b/widget/src/scrollable.rs
@@ -15,7 +15,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 +880,19 @@ pub fn draw<Theme, Renderer>(
         _ => mouse::Cursor::Unavailable,
     };
 
+    // Draw background.
+    let appearence = theme.appearance(style);
+
+    if let Some(background) = appearence.background {
+        renderer.fill_quad(
+            renderer::Quad {
+                bounds,
+                ..Default::default()
+            },
+            background,
+        );
+    }
+
     // Draw inner content
     if scrollbars.active() {
         renderer.with_layer(bounds, |renderer| {
@@ -971,6 +986,26 @@ pub fn draw<Theme, Renderer>(
 
                     draw_scrollbar(renderer, style, &scrollbar);
                 }
+
+                //draw filler quad
+                if let (Some(x), Some(y)) = (scrollbars.x, scrollbars.y) {
+                    let background = appearence.gap.or(appearence.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,
+                        );
+                    }
+                }
             },
         );
     } else {
-- 
cgit 


From 0eaaeaa517a00765045de155bb1de01c2d8f553f Mon Sep 17 00:00:00 2001
From: Héctor Ramón Jiménez <hector@hecrj.dev>
Date: Mon, 12 Feb 2024 19:24:09 +0100
Subject: Simplify `scrollable` styling API

---
 widget/src/scrollable.rs | 76 ++++++++++++++++++++++++++----------------------
 1 file changed, 41 insertions(+), 35 deletions(-)

(limited to 'widget')

diff --git a/widget/src/scrollable.rs b/widget/src/scrollable.rs
index 5c986757..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;
@@ -880,18 +881,23 @@ pub fn draw<Theme, Renderer>(
         _ => mouse::Cursor::Unavailable,
     };
 
-    // Draw background.
-    let appearence = theme.appearance(style);
+    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)
+    };
 
-    if let Some(background) = appearence.background {
-        renderer.fill_quad(
-            renderer::Quad {
-                bounds,
-                ..Default::default()
-            },
-            background,
-        );
-    }
+    let idle_scrollbar = theme.active(style).scrollbar;
+
+    container::draw_background(
+        renderer,
+        &appearance.container,
+        layout.bounds(),
+    );
 
     // Draw inner content
     if scrollbars.active() {
@@ -917,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()
@@ -936,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
@@ -961,35 +965,37 @@ 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, style, &scrollbar);
+                    draw_scrollbar(
+                        renderer,
+                        if mouse_over_x_scrollbar
+                            || state.x_scroller_grabbed_at.is_some()
+                        {
+                            appearance.scrollbar
+                        } else {
+                            idle_scrollbar
+                        },
+                        &scrollbar,
+                    );
                 }
 
-                //draw filler quad
                 if let (Some(x), Some(y)) = (scrollbars.x, scrollbars.y) {
-                    let background = appearence.gap.or(appearence.background);
+                    let background =
+                        appearance.gap.or(appearance.container.background);
 
                     if let Some(background) = background {
                         renderer.fill_quad(
-- 
cgit