Cosmetic tweaks for base stylev5.2.0-beta1

- Now using more consitent image margins.
- Simplified and cleaned up the artwork.
- Reduced height of progress bar
- Added animation on hover

Change-Id: Idb030018e1c58c6f197f4fd5007727ef73d3ae88
Reviewed-by: Gabriel de Dietrich <gabriel.dedietrich@digia.com>

1 files changed, 18 insertions, 12 deletions

diff --git a/src/controls/Styles/Base/SliderStyle.qml b/src/controls/Styles/Base/SliderStyle.qml
index f55e7dd8..661f70c0 100644
--- a/src/controls/Styles/Base/SliderStyle.qml
+++ b/src/controls/Styles/Base/SliderStyle.qml
@@ -96,24 +96,29 @@ Style {
         You can access the slider through the \c control property
     */
     property Component handle: Item {
-        implicitWidth:  implicitHeight * 1.1
+        implicitWidth:  Math.round(implicitHeight * 1.1)
         implicitHeight: TextSingleton.implicitHeight
 
         BorderImage {
             anchors.fill: parent
-            source: "images/button.png"
-            border.top: 6
-            border.bottom: 6
-            border.left: 6
-            border.right: 6
+            anchors.margins: -1
+            source: "images/slider-handle.png"
+            border.top: 4
+            border.bottom: 4
+            border.left: 4
+            border.right: 4
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 2
+                radius: 2
+                color: "white"
+                opacity: control.hovered || control.activeFocus ? 0.2 : 0
+                Behavior on opacity {NumberAnimation{ duration: 100 }}
+            }
             BorderImage {
                 anchors.fill: parent
-                anchors.margins: -1
-                anchors.topMargin: -2
-                anchors.rightMargin: 0
-                anchors.bottomMargin: 1
                 source: "images/focusframe.png"
-                visible: control.activeFocus
+                opacity: control.activeFocus ? 1 : 0
                 border.left: 4
                 border.right: 4
                 border.top: 4
@@ -132,7 +137,8 @@ Style {
         implicitHeight: 8
         BorderImage {
             anchors.fill: parent
-            source: "images/button_down.png"
+            source: "images/slider-groove.png"
+            opacity: 0.8
             border.top: 3
             border.bottom: 3
             border.left: 6