From 2e5afa765ba21ad84f66476b84464d58814e2af2 Mon Sep 17 00:00:00 2001
From: Marco Martin <notmart@gmail.com>
Date: Tue, 8 Nov 2011 15:12:44 +0100
Subject: [PATCH] use roundshadow for sliders

---
 .../plasmacomponents/qml/RoundShadow.qml      | 27 ++++---
 .../plasmacomponents/qml/Slider.qml           | 76 +++++--------------
 2 files changed, 36 insertions(+), 67 deletions(-)

diff --git a/declarativeimports/plasmacomponents/qml/RoundShadow.qml b/declarativeimports/plasmacomponents/qml/RoundShadow.qml
index fce6f7eb9..8c20a9d5a 100644
--- a/declarativeimports/plasmacomponents/qml/RoundShadow.qml
+++ b/declarativeimports/plasmacomponents/qml/RoundShadow.qml
@@ -24,13 +24,19 @@ import org.kde.plasma.core 0.1 as PlasmaCore
 Item {
     id: main
     state: parent.state
+    property alias imagePath: shadowSvg.imagePath
+    property string hoverElement: "hover"
+    property string focusElement: "focus"
+    property alias shadowElement: shadow.elementId
+
+    PlasmaCore.Svg {
+        id: shadowSvg
+        imagePath: "widgets/actionbutton"
+    }
 
     PlasmaCore.SvgItem {
         id: hover
-        svg: PlasmaCore.Svg {
-            id: hoverSvg
-            imagePath: "widgets/actionbutton"
-        }
+        svg: shadowSvg
         elementId: "hover"
 
         anchors.fill: parent
@@ -40,10 +46,7 @@ Item {
 
     PlasmaCore.SvgItem {
         id: shadow
-        svg: PlasmaCore.Svg {
-            id: shadowSvg
-            imagePath: "widgets/actionbutton"
-        }
+        svg: shadowSvg
         elementId: "shadow"
 
         anchors.fill: parent
@@ -59,7 +62,7 @@ Item {
             PropertyChanges {
                 target: hover
                 opacity: 0
-                elementId: "hover"
+                elementId: hoverElement
             }
         },
         State {
@@ -71,7 +74,7 @@ Item {
             PropertyChanges {
                 target: hover
                 opacity: 1
-                elementId: "hover"
+                elementId: hoverElement
             }
         },
         State {
@@ -83,7 +86,7 @@ Item {
             PropertyChanges {
                 target: hover
                 opacity: 1
-                elementId: "focus"
+                elementId: focusElement
             }
         },
         State {
@@ -95,7 +98,7 @@ Item {
             PropertyChanges {
                 target: hover
                 opacity: 0
-                elementId: "hover"
+                elementId: hoverElement
             }
         }
     ]
diff --git a/declarativeimports/plasmacomponents/qml/Slider.qml b/declarativeimports/plasmacomponents/qml/Slider.qml
index 1458dc6ec..0c82ccbb2 100644
--- a/declarativeimports/plasmacomponents/qml/Slider.qml
+++ b/declarativeimports/plasmacomponents/qml/Slider.qml
@@ -40,7 +40,7 @@ Item {
     property bool updateValueWhileDragging: true
     property real handleSize: 22
 
-    // Convinience API
+    // Convenience API
     property bool _isVertical: orientation == Qt.Vertical
 
     width: _isVertical ? 22 : 200
@@ -109,8 +109,8 @@ Item {
             value: 0
             stepSize: 0.0
             inverted: false
-            positionAtMinimum: 0 + handle.width / 2
-            positionAtMaximum: contents.width - handle.width / 2
+            positionAtMinimum: 0
+            positionAtMaximum: contents.width - handle.width
         }
 
         PlasmaCore.Svg {
@@ -134,51 +134,26 @@ Item {
             imagePath: "widgets/slider"
             prefix: "groove-highlight"
             height: groove.height
-            width: inverted ? groove.width - handle.x : fakeHandle.x
+            width: inverted ? groove.width - handle.x : fakeHandle.x + handle.width/2
             x: inverted ? handle.x : 0
             anchors.verticalCenter: parent.verticalCenter
 
             visible: range.position > 0 && slider.enabled
         }
 
-        PlasmaCore.SvgItem {
-            id: focus
-
-            transform: Translate { x: - handle.width / 2 }
-            anchors {
-                fill: handle
-                margins: -1 // Hardcoded
-            }
-            opacity: slider.activeFocus ? 1 : 0
-            svg: PlasmaCore.Svg { imagePath: "widgets/slider" }
-            elementId: "horizontal-slider-hover"
-
-            Behavior on opacity {
-                PropertyAnimation { duration: 250 }
-            }
-        }
-
-        PlasmaCore.SvgItem {
-            id: hover
-
-            transform: Translate { x: - handle.width / 2 }
-            anchors {
-                fill: handle
-                margins: -2 // Hardcoded
-            }
-            opacity: 0
-            svg: PlasmaCore.Svg { imagePath: "widgets/slider" }
-            elementId: "horizontal-slider-hover"
-
-            Behavior on opacity {
-                PropertyAnimation { duration: 250 }
-            }
+        RoundShadow {
+            id: shadow
+            imagePath: "widgets/slider"
+            focusElement: "horizontal-slider-focus"
+            hoverElement: "horizontal-slider-hover"
+            shadowElement: "horizontal-slider-shadow"
+            state: slider.activeFocus ? "focus" : (mouseArea.containsMouse ? "hover" : "hidden")
+            anchors.fill: handle
         }
 
         PlasmaCore.SvgItem {
             id: handle
 
-            transform: Translate { x: - handle.width / 2 }
             x: fakeHandle.x
             anchors {
                 verticalCenter: groove.verticalCenter
@@ -203,7 +178,6 @@ Item {
             id: fakeHandle
             width: handle.width
             height: handle.height
-            transform: Translate { x: - handle.width / 2 }
         }
 
         MouseArea {
@@ -219,33 +193,25 @@ Item {
             }
             hoverEnabled: true
 
-            onEntered: {
-                hover.opacity = 1;
-            }
-            onExited: {
-                if (!pressed)
-                    hover.opacity = 0;
-            }
             onPressed: {
                 // Clamp the value
-                var newX = Math.max(mouse.x, drag.minimumX);
-                newX = Math.min(newX, drag.maximumX);
+                var newX = Math.max(mouse.x, drag.minimumX)
+                newX = Math.min(newX, drag.maximumX)
 
                 // Debounce the press: a press event inside the handler will not
                 // change its position, the user needs to drag it.
-                if (Math.abs(newX - fakeHandle.x) > handle.width / 2)
-                    range.position = newX;
+                if (Math.abs(newX - fakeHandle.x) > handle.width / 2) {
+                    range.position = newX
+                }
 
-                slider.forceActiveFocus();
+                slider.forceActiveFocus()
             }
             onReleased: {
                 // If we don't update while dragging, this is the only
                 // moment that the range is updated.
-                if (!slider.updateValueWhileDragging)
-                    range.position = fakeHandle.x;
-
-                if (!containsMouse)
-                    hover.opacity = 0;
+                if (!slider.updateValueWhileDragging) {
+                    range.position = fakeHandle.x
+                }
             }
         }
     }