Merge pull request #146 from hecrj/feature/custom-styling

Custom styling

1 files changed, 45 insertions, 36 deletions

diff --git a/wgpu/src/renderer/widget/slider.rs b/wgpu/src/renderer/widget/slider.rs
index c73a4e56..c8ebd0da 100644
--- a/wgpu/src/renderer/widget/slider.rs
+++ b/wgpu/src/renderer/widget/slider.rs
@@ -1,10 +1,14 @@
-use crate::{Primitive, Renderer};
+use crate::{
+    slider::{HandleShape, StyleSheet},
+    Primitive, Renderer,
+};
 use iced_native::{slider, Background, Color, MouseCursor, Point, Rectangle};
 
-const HANDLE_WIDTH: f32 = 8.0;
 const HANDLE_HEIGHT: f32 = 22.0;
 
 impl slider::Renderer for Renderer {
+    type Style = Box<dyn StyleSheet>;
+
     fn height(&self) -> u32 {
         30
     }
@@ -16,9 +20,18 @@ impl slider::Renderer for Renderer {
         range: std::ops::RangeInclusive<f32>,
         value: f32,
         is_dragging: bool,
+        style_sheet: &Self::Style,
     ) -> Self::Output {
         let is_mouse_over = bounds.contains(cursor_position);
 
+        let style = if is_dragging {
+            style_sheet.dragging()
+        } else if is_mouse_over {
+            style_sheet.hovered()
+        } else {
+            style_sheet.active()
+        };
+
         let rail_y = bounds.y + (bounds.height / 2.0).round();
 
         let (rail_top, rail_bottom) = (
@@ -29,8 +42,10 @@ impl slider::Renderer for Renderer {
                     width: bounds.width,
                     height: 2.0,
                 },
-                background: Color::from_rgb(0.6, 0.6, 0.6).into(),
+                background: Background::Color(style.rail_colors.0),
                 border_radius: 0,
+                border_width: 0,
+                border_color: Color::TRANSPARENT,
             },
             Primitive::Quad {
                 bounds: Rectangle {
@@ -39,51 +54,45 @@ impl slider::Renderer for Renderer {
                     width: bounds.width,
                     height: 2.0,
                 },
-                background: Background::Color(Color::WHITE),
+                background: Background::Color(style.rail_colors.1),
                 border_radius: 0,
+                border_width: 0,
+                border_color: Color::TRANSPARENT,
             },
         );
 
         let (range_start, range_end) = range.into_inner();
 
-        let handle_offset = (bounds.width - HANDLE_WIDTH)
+        let (handle_width, handle_height, handle_border_radius) =
+            match style.handle.shape {
+                HandleShape::Circle { radius } => {
+                    (f32::from(radius * 2), f32::from(radius * 2), radius)
+                }
+                HandleShape::Rectangle {
+                    width,
+                    border_radius,
+                } => (f32::from(width), HANDLE_HEIGHT, border_radius),
+            };
+
+        let handle_offset = (bounds.width - handle_width)
             * ((value - range_start) / (range_end - range_start).max(1.0));
 
-        let (handle_border, handle) = (
-            Primitive::Quad {
-                bounds: Rectangle {
-                    x: bounds.x + handle_offset.round() - 1.0,
-                    y: rail_y - HANDLE_HEIGHT / 2.0 - 1.0,
-                    width: HANDLE_WIDTH + 2.0,
-                    height: HANDLE_HEIGHT + 2.0,
-                },
-                background: Color::from_rgb(0.6, 0.6, 0.6).into(),
-                border_radius: 5,
+        let handle = Primitive::Quad {
+            bounds: Rectangle {
+                x: bounds.x + handle_offset.round(),
+                y: rail_y - handle_height / 2.0,
+                width: handle_width,
+                height: handle_height,
             },
-            Primitive::Quad {
-                bounds: Rectangle {
-                    x: bounds.x + handle_offset.round(),
-                    y: rail_y - HANDLE_HEIGHT / 2.0,
-                    width: HANDLE_WIDTH,
-                    height: HANDLE_HEIGHT,
-                },
-                background: Background::Color(
-                    if is_dragging {
-                        [0.85, 0.85, 0.85]
-                    } else if is_mouse_over {
-                        [0.90, 0.90, 0.90]
-                    } else {
-                        [0.95, 0.95, 0.95]
-                    }
-                    .into(),
-                ),
-                border_radius: 4,
-            },
-        );
+            background: Background::Color(style.handle.color),
+            border_radius: handle_border_radius,
+            border_width: style.handle.border_width,
+            border_color: style.handle.border_color,
+        };
 
         (
             Primitive::Group {
-                primitives: vec![rail_top, rail_bottom, handle_border, handle],
+                primitives: vec![rail_top, rail_bottom, handle],
             },
             if is_dragging {
                 MouseCursor::Grabbing