More styling improvements for Base Style

- Better scalability
- Retina support
- Added glow filter to Private
- Added focus rects

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

1 files changed, 74 insertions, 35 deletions

diff --git a/src/controls/Styles/Base/ProgressBarStyle.qml b/src/controls/Styles/Base/ProgressBarStyle.qml
index fe76f300..63397edf 100644
--- a/src/controls/Styles/Base/ProgressBarStyle.qml
+++ b/src/controls/Styles/Base/ProgressBarStyle.qml
@@ -98,40 +98,65 @@ Style {
     /*! \qmlproperty Component ProgressBarStyle::progress
         The progress component for this style.
     */
-    property Component progress: Rectangle {
+    property Component progress: Item {
         property color progressColor: "#49d"
         anchors.fill: parent
-        radius: 2
-        antialiasing: true
-        gradient: Gradient {
-            GradientStop {color: Qt.lighter(progressColor, 1.3)  ; position: 0}
-            GradientStop {color: progressColor ; position: 1.4}
-        }
-        border.width: 1
-        border.color: Qt.darker(progressColor, 1.2)
+        clip: true
         Rectangle {
-            color: "transparent"
-            radius: 1.5
-            clip: true
+            id: base
+            width: control.width
+            height: control.height
+            radius: TextSingleton.implicitHeight * 0.16
             antialiasing: true
-            anchors.fill: parent
-            anchors.margins: 1
-            border.color: Qt.rgba(1,1,1,0.1)
-            Image {
-                visible: control.indeterminate
-                height: parent.height
-                NumberAnimation on x {
-                    from: -39
-                    to: 0
-                    running: control.indeterminate
-                    duration: 800
-                    loops: Animation.Infinite
+            gradient: Gradient {
+                GradientStop {color: Qt.lighter(progressColor, 1.3)  ; position: 0}
+                GradientStop {color: progressColor ; position: 1.4}
+            }
+            border.width: 1
+            border.color: Qt.darker(progressColor, 1.2)
+            Rectangle {
+                color: "transparent"
+                radius: 1.5
+                clip: true
+                antialiasing: true
+                anchors.fill: parent
+                anchors.margins: 1
+                border.color: Qt.rgba(1,1,1,0.1)
+                Image {
+                    visible: control.indeterminate
+                    height: parent.height
+                    NumberAnimation on x {
+                        from: -39
+                        to: 0
+                        running: control.indeterminate
+                        duration: 800
+                        loops: Animation.Infinite
+                    }
+                    fillMode: Image.Tile
+                    width: parent.width + 25
+                    source: "images/progress-indeterminate.png"
                 }
-                fillMode: Image.Tile
-                width: parent.width + 25
-                source: "images/progress-indeterminate.png"
             }
         }
+        Rectangle {
+            height: parent.height - 2
+            width: 1
+            y: 1
+            anchors.right: parent.right
+            anchors.rightMargin: 1
+            color:  Qt.rgba(1,1,1,0.1)
+            visible: splitter.visible
+        }
+        Rectangle {
+            id: splitter
+            height: parent.height - 2
+            width: 1
+            y: 1
+            anchors.right: parent.right
+            color: Qt.darker(progressColor, 1.2)
+            property int offset: currentProgress * control.width
+            visible: offset > base.radius && offset < control.width - base.radius + 1
+        }
     }
 
     /*! \qmlproperty Component ProgressBarStyle::background
@@ -140,15 +165,29 @@ Style {
     property Component background: Item {
         implicitWidth: 200
         implicitHeight: Math.max(17, Math.round(TextSingleton.implicitHeight * 0.7))
-        BorderImage {
+        Rectangle {
             anchors.fill: parent
-            anchors.topMargin: -1
-            anchors.bottomMargin: -1
-            source: "images/editbox.png"
-            border.left: 4
-            border.right: 4
-            border.top: 4
-            border.bottom: 4
+            anchors.bottomMargin: control.pressed ? 0 : -1
+            color: "#44ffffff"
+            radius: baserect.radius
+        }
+        Rectangle {
+            id: baserect
+            gradient: Gradient {
+                GradientStop {color: "#eee" ; position: 0}
+                GradientStop {color: "#fff" ; position: 0.1}
+                GradientStop {color: "#fff" ; position: 1}
+            }
+            radius: TextSingleton.implicitHeight * 0.16
+            anchors.fill: parent
+            border.color: control.activeFocus ? "#47b" : "#999"
+            Rectangle {
+                anchors.fill: parent
+                radius: parent.radius
+                color: control.activeFocus ? "#47b" : "white"
+                opacity: control.hovered || control.activeFocus ? 0.1 : 0
+                Behavior on opacity {NumberAnimation{ duration: 100 }}
+            }
         }
     }