Implement styling for `Scrollable`

3 files changed, 35 insertions, 12 deletions

diff --git a/wgpu/src/renderer/widget/scrollable.rs b/wgpu/src/renderer/widget/scrollable.rs
index 42a4a743..30d7f337 100644
--- a/wgpu/src/renderer/widget/scrollable.rs
+++ b/wgpu/src/renderer/widget/scrollable.rs
@@ -7,6 +7,8 @@ const SCROLLBAR_WIDTH: u16 = 10;
 const SCROLLBAR_MARGIN: u16 = 2;
 
 impl scrollable::Renderer for Renderer {
+    type Style = Box<dyn iced_style::scrollable::StyleSheet>;
+
     fn scrollbar(
         &self,
         bounds: Rectangle,
@@ -53,6 +55,7 @@ impl scrollable::Renderer for Renderer {
         is_mouse_over_scrollbar: bool,
         scrollbar: Option<scrollable::Scrollbar>,
         offset: u32,
+        style_sheet: &Self::Style,
         (content, mouse_cursor): Self::Output,
     ) -> Self::Output {
         let clip = Primitive::Clip {
@@ -64,17 +67,23 @@ impl scrollable::Renderer for Renderer {
         (
             if let Some(scrollbar) = scrollbar {
                 if is_mouse_over || state.is_scroller_grabbed() {
+                    let style = if state.is_scroller_grabbed() {
+                        style_sheet.dragging()
+                    } else if is_mouse_over_scrollbar {
+                        style_sheet.hovered()
+                    } else {
+                        style_sheet.active()
+                    };
+
                     let scroller = Primitive::Quad {
                         bounds: scrollbar.scroller.bounds,
-                        background: Background::Color(
-                            [0.0, 0.0, 0.0, 0.7].into(),
-                        ),
-                        border_radius: 5,
-                        border_width: 0,
-                        border_color: Color::TRANSPARENT,
+                        background: Background::Color(style.scroller.color),
+                        border_radius: style.scroller.border_radius,
+                        border_width: style.scroller.border_width,
+                        border_color: style.scroller.border_color,
                     };
 
-                    if is_mouse_over_scrollbar || state.is_scroller_grabbed() {
+                    if style.background.is_some() || style.border_width > 0 {
                         let scrollbar = Primitive::Quad {
                             bounds: Rectangle {
                                 x: scrollbar.bounds.x
@@ -83,12 +92,12 @@ impl scrollable::Renderer for Renderer {
                                     - f32::from(2 * SCROLLBAR_MARGIN),
                                 ..scrollbar.bounds
                             },
-                            background: Background::Color(
-                                [0.0, 0.0, 0.0, 0.3].into(),
+                            background: style.background.unwrap_or(
+                                Background::Color(Color::TRANSPARENT),
                             ),
-                            border_radius: 5,
-                            border_width: 0,
-                            border_color: Color::TRANSPARENT,
+                            border_radius: style.border_radius,
+                            border_width: style.border_width,
+                            border_color: style.border_color,
                         };
 
                         Primitive::Group {
diff --git a/wgpu/src/widget.rs b/wgpu/src/widget.rs
index 1d7e57c4..fb90b2b5 100644
--- a/wgpu/src/widget.rs
+++ b/wgpu/src/widget.rs
@@ -1,3 +1,4 @@
 pub mod button;
 pub mod container;
+pub mod scrollable;
 pub mod text_input;
diff --git a/wgpu/src/widget/scrollable.rs b/wgpu/src/widget/scrollable.rs
new file mode 100644
index 00000000..1d236105
--- /dev/null
+++ b/wgpu/src/widget/scrollable.rs
@@ -0,0 +1,13 @@
+//! Navigate an endless amount of content with a scrollbar.
+use crate::Renderer;
+
+pub use iced_native::scrollable::State;
+pub use iced_style::scrollable::{Scrollbar, Scroller, StyleSheet};
+
+/// A widget that can vertically display an infinite amount of content
+/// with a scrollbar.
+///
+/// This is an alias of an `iced_native` scrollable with a default
+/// `Renderer`.
+pub type Scrollable<'a, Message> =
+    iced_native::Scrollable<'a, Message, Renderer>;