From 7bb2d6871bd3e1fa42acda132e5dad258865789f Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Mon, 13 May 2019 15:58:04 -0700
Subject: [PATCH] Simlpified Slider (not totally working; position is off)

---
 .../SimplifiedConstants.qml                   | 18 +++++--
 .../simplifiedControls/Slider.qml             | 48 ++++++++++---------
 2 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml
index a2f1c9f189..f946ebbb40 100644
--- a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml
+++ b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml
@@ -52,14 +52,24 @@ QtObject {
                     }
                 }
                 readonly property QtObject handle: QtObject {
-                    readonly property color border: "#000000"
+                    readonly property color disabledBorder: "#2A2A2A"
+                    readonly property color enabledBorder: "#00B4EF"
+                    readonly property QtObject disabled: QtObject {
+                        readonly property color start: "#2A2A2A"
+                        readonly property color finish: "#2A2A2A"
+                    }
                     readonly property QtObject normal: QtObject {
                         readonly property color start: "#828282"
                         readonly property color finish: "#6A6A6A"
                     }
+                    readonly property QtObject hover: QtObject {
+                        readonly property color start: "#48C7F4"
+                        readonly property color finish: "#48C7F4"
+                    }
                     readonly property QtObject pressed: QtObject {
-                        readonly property color start: "#6A6A6A"
-                        readonly property color finish: "#828282"
+                        readonly property color start: "#48C7F4"
+                        readonly property color finish: "#48C7F4"
+                        readonly property color border: "#00B4EF"
                     }
                 }
             }
@@ -160,7 +170,7 @@ QtObject {
     readonly property QtObject sizes: QtObject {
         readonly property QtObject controls: QtObject {
             readonly property QtObject slider: QtObject {
-                readonly property int height: 14
+                readonly property int height: 16
                 readonly property int labelTextSize: 14
                 readonly property int backgroundHeight: 8
             }
diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Slider.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Slider.qml
index 8799136553..c75811130a 100644
--- a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Slider.qml
+++ b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/Slider.qml
@@ -53,6 +53,7 @@ Item {
         width: root.width * 0.6
         enabled: root.enabled
         anchors.right: parent.right
+        anchors.rightMargin: sliderHandle.width / 2
         anchors.verticalCenter: parent.verticalCenter
 
         onPressedChanged: {
@@ -76,7 +77,7 @@ Item {
             color: simplifiedUI.colors.controls.slider.background.empty
 
             Rectangle {
-                width: sliderControl.visualPosition * sliderControl.width
+                width: sliderControl.visualPosition * sliderBackground.width
                 height: parent.height
                 radius: height / 2
                 gradient: Gradient {
@@ -87,35 +88,38 @@ Item {
         }
 
         handle: Rectangle {
-            visible: root.enabled
+            id: sliderHandle
             width: sliderControl.height
-            height: sliderControl.height
-            x: sliderControl.visualPosition * (sliderControl.width - width)
+            height: width
+            x: sliderControl.visualPosition * (sliderBackground.width - (sliderHandle.width / 2))
             y: sliderControl.height / 2 - height / 2
             radius: height / 2
-            gradient: Gradient {
-                GradientStop {
-                    position: 0.0
-                    color: sliderControl.pressed
-                        ? (simplifiedUI.colors.controls.slider.handle.pressed.start)
-                        : (simplifiedUI.colors.controls.slider.handle.normal.start)
-                }
-                GradientStop {
-                    position: 1.0
-                    color: sliderControl.pressed
-                        ? (simplifiedUI.colors.controls.slider.handle.pressed.finish)
-                        : (simplifiedUI.colors.controls.slider.handle.normal.finish)
-                }
-            }
+            color: "#000000"
+            border.width: 1
+            border.color: sliderControl.hovered || sliderControl.pressed ? simplifiedUI.colors.controls.slider.handle.enabledBorder : simplifiedUI.colors.controls.slider.handle.disabledBorder
 
             Rectangle {
-                height: parent.height - 2
+                visible: root.enabled
+                height: sliderControl.pressed ? parent.height : parent.height - 4
                 width: height
                 radius: height / 2
                 anchors.centerIn: parent
-                color: "transparent"
-                border.width: 1
-                border.color: simplifiedUI.colors.controls.slider.handle.border
+                gradient: Gradient {
+                    GradientStop {
+                        position: 0.2
+                        color: sliderControl.enabled ? (sliderControl.hovered ? simplifiedUI.colors.controls.slider.handle.hover.start :
+                            (sliderControl.pressed
+                            ? (simplifiedUI.colors.controls.slider.handle.pressed.start)
+                            : (simplifiedUI.colors.controls.slider.handle.normal.start))) : simplifiedUI.colors.controls.slider.handle.disabled.start
+                    }
+                    GradientStop {
+                        position: 1.0
+                        color: sliderControl.enabled ? (sliderControl.hovered ? simplifiedUI.colors.controls.slider.handle.hover.finish :
+                            (sliderControl.pressed
+                            ? (simplifiedUI.colors.controls.slider.handle.pressed.finish)
+                            : (simplifiedUI.colors.controls.slider.handle.normal.finish))) : simplifiedUI.colors.controls.slider.handle.disabled.finish
+                    }
+                }
             }
         }
     }