From 0ba7c5c0d5254a5b67d1216da24f1ad728812e37 Mon Sep 17 00:00:00 2001
From: Henning Gruendl <henning.gruendl@qt.io>
Date: Fri, 9 Jul 2021 16:15:00 +0200
Subject: [PATCH] QmlDesigner: Update Hue/OpacitySlider handle

* Update the look of the HueSlider and OpacitySlider handle to be more
  visible and at the same time show the picked color/transparency
* Fix undefined warning in ExtendedFunctionLogic

Change-Id: Ib593a385f80f199e80aeff5a862efb22aca88c3a
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>
---
 .../HelperWidgets/ExtendedFunctionLogic.qml    |  2 +-
 .../imports/HelperWidgets/HueSlider.qml        | 18 +++++++++++-------
 .../imports/HelperWidgets/OpacitySlider.qml    | 18 +++++++++++-------
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExtendedFunctionLogic.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExtendedFunctionLogic.qml
index d3b6a9deeca..58b82a7c24d 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExtendedFunctionLogic.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExtendedFunctionLogic.qml
@@ -61,7 +61,7 @@ Item {
                 extendedFunctionButton.color = StudioTheme.Values.themeInteraction
             }
         } else {
-            if (backendValue.complexNode !== null
+            if (backendValue.complexNode !== undefined
                     && backendValue.complexNode.exists) {
 
             } else {
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/HueSlider.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/HueSlider.qml
index 50c930d64b5..a09fc23d7f3 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/HueSlider.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/HueSlider.qml
@@ -42,7 +42,7 @@ Item {
     function updatePos() {
         if (root.maximum > root.minimum) {
             var pos = (track.width - handle.width) * (root.value - root.minimum) / (root.maximum - root.minimum)
-            return Math.min(Math.max(pos, 0), track.width - 8)
+            return Math.min(Math.max(pos, 0), track.width - handle.width)
         } else {
             return 0
         }
@@ -74,20 +74,24 @@ Item {
         Rectangle {
             id: handle
             width: StudioTheme.Values.hueSliderHandleWidth
-            height: track.height
+            height: track.height - 4
             anchors.verticalCenter: parent.verticalCenter
             smooth: true
-            opacity: 0.9
+            color: "transparent"
             radius: 2
             border.color: "black"
             border.width: 1
             x: root.updatePos()
+            y: 2
             z: 1
 
-            gradient: Gradient {
-                GradientStop {color: "#2c2c2c" ; position: 0}
-                GradientStop {color: "#343434" ; position: 0.15}
-                GradientStop {color: "#373737" ; position: 1.0}
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 1
+                color: "transparent"
+                radius: 1
+                border.color: "white"
+                border.width: 1
             }
         }
 
diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OpacitySlider.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OpacitySlider.qml
index cf1fea7d07b..176b493a19b 100644
--- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OpacitySlider.qml
+++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OpacitySlider.qml
@@ -43,7 +43,7 @@ Item {
     function updatePos() {
         if (root.maximum > root.minimum) {
             var pos = (track.width - handle.width) * (root.value - root.minimum) / (root.maximum - root.minimum)
-            return Math.min(Math.max(pos, 0), track.width - 8)
+            return Math.min(Math.max(pos, 0), track.width - handle.width)
         } else {
             return 0
         }
@@ -77,20 +77,24 @@ Item {
         Rectangle {
             id: handle
             width: StudioTheme.Values.hueSliderHandleWidth
-            height: track.height
+            height: track.height - 4
             anchors.verticalCenter: parent.verticalCenter
             smooth: true
-            opacity: 0.9
+            color: "transparent"
             radius: 2
             border.color: "black"
             border.width: 1
             x: root.updatePos()
+            y: 2
             z: 1
 
-            gradient: Gradient {
-                GradientStop {color: "#2c2c2c" ; position: 0}
-                GradientStop {color: "#343434" ; position: 0.15}
-                GradientStop {color: "#373737" ; position: 1.0}
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 1
+                color: "transparent"
+                radius: 1
+                border.color: "white"
+                border.width: 1
             }
         }