From 47dedfde74fec30ba5fa436c4fad258eee927296 Mon Sep 17 00:00:00 2001
From: Ashley Wulber <ashley@system76.com>
Date: Wed, 17 Jul 2024 16:21:11 -0400
Subject: [PATCH] fix: draw color picker handle on top of gradient

---
 src/widget/color_picker/mod.rs | 72 +++++++++++++++++++---------------
 1 file changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/widget/color_picker/mod.rs b/src/widget/color_picker/mod.rs
index ff2894b1..aea43a8c 100644
--- a/src/widget/color_picker/mod.rs
+++ b/src/widget/color_picker/mod.rs
@@ -606,39 +606,49 @@ where
             (1.0 - self.active_color.value).mul_add(bounds.height, bounds.position().y)
                 - handle_radius,
         );
-        renderer.fill_quad(
-            Quad {
-                bounds: Rectangle {
-                    x,
-                    y,
-                    width: handle_radius.mul_add(2.0, 1.0),
-                    height: handle_radius.mul_add(2.0, 1.0),
-                },
-                border: Border {
-                    width: 1.0,
-                    color: t.palette.neutral_5.into(),
-                    radius: (1.0 + handle_radius).into(),
-                },
-                shadow: Shadow::default(),
+        renderer.with_layer(
+            Rectangle {
+                x,
+                y,
+                width: handle_radius.mul_add(2.0, 1.0),
+                height: handle_radius.mul_add(2.0, 1.0),
             },
-            Color::TRANSPARENT,
-        );
-        renderer.fill_quad(
-            Quad {
-                bounds: Rectangle {
-                    x,
-                    y,
-                    width: handle_radius * 2.0,
-                    height: handle_radius * 2.0,
-                },
-                border: Border {
-                    width: 1.0,
-                    color: t.palette.neutral_10.into(),
-                    radius: handle_radius.into(),
-                },
-                shadow: Shadow::default(),
+            |renderer| {
+                renderer.fill_quad(
+                    Quad {
+                        bounds: Rectangle {
+                            x,
+                            y,
+                            width: handle_radius.mul_add(2.0, 1.0),
+                            height: handle_radius.mul_add(2.0, 1.0),
+                        },
+                        border: Border {
+                            width: 1.0,
+                            color: t.palette.neutral_5.into(),
+                            radius: (1.0 + handle_radius).into(),
+                        },
+                        shadow: Shadow::default(),
+                    },
+                    Color::TRANSPARENT,
+                );
+                renderer.fill_quad(
+                    Quad {
+                        bounds: Rectangle {
+                            x,
+                            y,
+                            width: handle_radius * 2.0,
+                            height: handle_radius * 2.0,
+                        },
+                        border: Border {
+                            width: 1.0,
+                            color: t.palette.neutral_10.into(),
+                            radius: handle_radius.into(),
+                        },
+                        shadow: Shadow::default(),
+                    },
+                    Color::TRANSPARENT,
+                );
             },
-            Color::TRANSPARENT,
         );
     }