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>

21 files changed, 100 insertions, 106 deletions

diff --git a/src/controls/Styles/Base/ButtonStyle.qml b/src/controls/Styles/Base/ButtonStyle.qml
index b7ddb5be..d6a87540 100644
--- a/src/controls/Styles/Base/ButtonStyle.qml
+++ b/src/controls/Styles/Base/ButtonStyle.qml
@@ -96,9 +96,10 @@ Style {
     /*! This defines the background of the button. */
     property Component background: Item {
         implicitWidth: 100
-        implicitHeight: 25
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.1))
         BorderImage {
             anchors.fill: parent
+            anchors.margins: -1
             source: control.pressed || (control.checkable && control.checked) ? "images/button_down.png" : "images/button.png"
             border.top: 6
             border.bottom: 6
@@ -107,17 +108,21 @@ Style {
             anchors.bottomMargin: -1
             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
                 border.bottom: 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 }}
+            }
         }
         Image {
             id: imageItem
diff --git a/src/controls/Styles/Base/CheckBoxStyle.qml b/src/controls/Styles/Base/CheckBoxStyle.qml
index fd7ba79e..ddb0a857 100644
--- a/src/controls/Styles/Base/CheckBoxStyle.qml
+++ b/src/controls/Styles/Base/CheckBoxStyle.qml
@@ -88,10 +88,11 @@ Style {
         text: control.text
         color: __syspal.text
         renderType: Text.NativeRendering
-        verticalAlignment: Text.AlignVCenter
     }
     /*! The background under indicator and label. */
-    property Component background
+    property Component background: Item {
+        implicitWidth: 100
+    }
 
     /*! The content padding. */
     padding {
@@ -106,15 +107,26 @@ Style {
 
     /*! This defines the indicator button. */
     property Component indicator:  Item {
-        implicitWidth: 18
+        implicitWidth: 16
         implicitHeight: 18
         BorderImage {
             anchors.fill: parent
             source: "images/editbox.png"
+            anchors.margins: -1
             border.top: 6
             border.bottom: 6
             border.left: 6
             border.right: 6
+            anchors.bottomMargin: 1
+            BorderImage {
+                anchors.fill: parent
+                source: "images/focusframe.png"
+                visible: control.activeFocus
+                border.left: 4
+                border.right: 4
+                border.top: 4
+                border.bottom: 4
+            }
         }
         Rectangle {
             height: 16
@@ -123,10 +135,9 @@ Style {
             visible: control.checked
             color: "#666"
             radius: 1
-            anchors.margins: 4
-            anchors.fill: parent
-            anchors.topMargin: 3
+            anchors.margins: 3
             anchors.bottomMargin: 5
+            anchors.fill: parent
             border.color: "#222"
             opacity: control.enabled ? 1 : 0.5
             Rectangle {
@@ -136,19 +147,6 @@ Style {
                 border.color: "#33ffffff"
             }
         }
-        BorderImage {
-            anchors.fill: parent
-            anchors.margins: -1
-            anchors.topMargin: -2
-            anchors.rightMargin: 0
-            anchors.bottomMargin: 1
-            source: "images/focusframe.png"
-            visible: control.activeFocus
-            border.left: 4
-            border.right: 4
-            border.top: 4
-            border.bottom: 4
-        }
     }
 
     /*! \internal */
@@ -157,7 +155,7 @@ Style {
         implicitHeight: Math.max(backgroundLoader.implicitHeight, labelLoader.implicitHeight + padding.top + padding.bottom,indicatorLoader.implicitHeight + padding.top + padding.bottom)
 
         Loader {
-            id:backgroundLoader
+            id: backgroundLoader
             sourceComponent: background
             anchors.fill: parent
         }
diff --git a/src/controls/Styles/Base/ComboBoxStyle.qml b/src/controls/Styles/Base/ComboBoxStyle.qml
index f539c8da..14a0ff47 100644
--- a/src/controls/Styles/Base/ComboBoxStyle.qml
+++ b/src/controls/Styles/Base/ComboBoxStyle.qml
@@ -67,9 +67,10 @@ Style {
     /*! This defines the background of the button. */
     property Component background: Item {
         implicitWidth: 125
-        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.1))
         BorderImage {
             anchors.fill: parent
+            anchors.margins: -1
             source: control.pressed ? "images/button_down.png" : "images/button.png"
             border.top: 6
             border.bottom: 6
@@ -78,17 +79,21 @@ Style {
             anchors.bottomMargin: -1
             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
                 border.bottom: 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 }}
+            }
             Image {
                 id: imageItem
                 source: "images/arrow-down.png"
@@ -102,11 +107,13 @@ Style {
 
     /*! \internal */
     property Component __editor: Item {
-        implicitWidth: 100
+        implicitWidth: 125
         implicitHeight: 25
         clip: true
         BorderImage {
             anchors.fill: parent
+            anchors.margins: -1
+            anchors.bottomMargin: 0
             anchors.rightMargin: -2
             source: "images/editbox.png"
             border.left: 4
@@ -115,10 +122,6 @@ Style {
             border.bottom: 4
             BorderImage {
                 anchors.fill: parent
-                anchors.margins: -1
-                anchors.topMargin: -2
-                anchors.rightMargin: 0
-                anchors.bottomMargin: 1
                 source: "images/focusframe.png"
                 visible: control.activeFocus
                 border.left: 4
@@ -132,7 +135,7 @@ Style {
             anchors.right: parent.right
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: 3
+            anchors.bottomMargin: 2
             anchors.topMargin: 1
             width: 1
         }
diff --git a/src/controls/Styles/Base/GroupBoxStyle.qml b/src/controls/Styles/Base/GroupBoxStyle.qml
index 84e9509f..c0c08d56 100644
--- a/src/controls/Styles/Base/GroupBoxStyle.qml
+++ b/src/controls/Styles/Base/GroupBoxStyle.qml
@@ -104,9 +104,6 @@ Style {
         BorderImage {
             anchors.fill: parent
             anchors.margins: -1
-            anchors.topMargin: -2
-            anchors.rightMargin: 0
-            anchors.bottomMargin: 1
             source: "images/focusframe.png"
             visible: control.activeFocus
             border.left: 4
diff --git a/src/controls/Styles/Base/ProgressBarStyle.qml b/src/controls/Styles/Base/ProgressBarStyle.qml
index ae7f36b3..fe76f300 100644
--- a/src/controls/Styles/Base/ProgressBarStyle.qml
+++ b/src/controls/Styles/Base/ProgressBarStyle.qml
@@ -116,7 +116,7 @@ Style {
             antialiasing: true
             anchors.fill: parent
             anchors.margins: 1
-            border.color: Qt.rgba(1,1,1,0.3)
+            border.color: Qt.rgba(1,1,1,0.1)
             Image {
                 visible: control.indeterminate
                 height: parent.height
@@ -139,12 +139,11 @@ Style {
     */
     property Component background: Item {
         implicitWidth: 200
-        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
+        implicitHeight: Math.max(17, Math.round(TextSingleton.implicitHeight * 0.7))
         BorderImage {
             anchors.fill: parent
-            anchors.bottomMargin: -2
-            anchors.leftMargin: -1
-            anchors.rightMargin: -1
+            anchors.topMargin: -1
+            anchors.bottomMargin: -1
             source: "images/editbox.png"
             border.left: 4
             border.right: 4
diff --git a/src/controls/Styles/Base/RadioButtonStyle.qml b/src/controls/Styles/Base/RadioButtonStyle.qml
index 82d5a282..c2cfbe00 100644
--- a/src/controls/Styles/Base/RadioButtonStyle.qml
+++ b/src/controls/Styles/Base/RadioButtonStyle.qml
@@ -91,6 +91,11 @@ Style {
         color: __syspal.text
     }
 
+    /*! The background under indicator and label. */
+    property Component background: Item {
+        implicitWidth: 100
+    }
+
     /*! The content padding. */
     padding { top: 0 ; left: 0 ; right: 4 ; bottom: 0 }
 
@@ -121,13 +126,23 @@ Style {
 
     /*! \internal */
     property Component panel: Item {
-        implicitWidth: Math.round(row.width + padding.left + padding.right)
-        implicitHeight: Math.max(indicatorLoader.implicitHeight, labelLoader.implicitHeight) + padding.top + padding.bottom
+        implicitWidth: Math.max(backgroundLoader.implicitWidth, row.implicitWidth + padding.left + padding.right)
+        implicitHeight: Math.max(backgroundLoader.implicitHeight, labelLoader.implicitHeight + padding.top + padding.bottom,indicatorLoader.implicitHeight + padding.top + padding.bottom)
 
+        Loader {
+            id:backgroundLoader
+            sourceComponent: background
+            anchors.fill: parent
+        }
         Row {
             id: row
-            y: padding.top
-            x: padding.left
+            anchors.fill: parent
+
+            anchors.leftMargin: padding.left
+            anchors.rightMargin: padding.right
+            anchors.topMargin: padding.top
+            anchors.bottomMargin: padding.bottom
+
             spacing: radiobuttonStyle.spacing
             Loader {
                 id: indicatorLoader
diff --git a/src/controls/Styles/Base/ScrollViewStyle.qml b/src/controls/Styles/Base/ScrollViewStyle.qml
index 4c21af2d..e8dddedf 100644
--- a/src/controls/Styles/Base/ScrollViewStyle.qml
+++ b/src/controls/Styles/Base/ScrollViewStyle.qml
@@ -192,7 +192,7 @@ Style {
                 anchors.fill: parent
                 anchors.margins: 1
                 color: "transparent"
-                border.color: "#88ffffff"
+                border.color: "#44ffffff"
             }
             Image {
                 source: styleData.horizontal ? "images/arrow-right.png" : "images/arrow-down.png"
@@ -232,7 +232,7 @@ Style {
                 anchors.fill: parent
                 anchors.margins: 1
                 color: "transparent"
-                border.color: "#88ffffff"
+                border.color: "#44ffffff"
             }
             Image {
                 source: styleData.horizontal ? "images/arrow-left.png" : "images/arrow-up.png"
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
diff --git a/src/controls/Styles/Base/SpinBoxStyle.qml b/src/controls/Styles/Base/SpinBoxStyle.qml
index 1617ba1f..5c04fd32 100644
--- a/src/controls/Styles/Base/SpinBoxStyle.qml
+++ b/src/controls/Styles/Base/SpinBoxStyle.qml
@@ -76,7 +76,7 @@ Style {
     }
 
     /*! The content margins of the text field. */
-    padding { top: 0 ; left: 5 ; right: 18 ; bottom: 0 }
+    padding { top: 1 ; left: 5 ; right: 18 ; bottom: 0 }
 
     /*! \qmlproperty enumeration horizontalAlignment
 
@@ -125,7 +125,6 @@ Style {
             anchors.centerIn: parent
             anchors.verticalCenterOffset: 1
             opacity: control.enabled ? 0.7 : 0.5
-            anchors.horizontalCenterOffset:  -1
         }
     }
 
@@ -136,18 +135,18 @@ Style {
             source: "images/arrow-down.png"
             anchors.centerIn: parent
             anchors.verticalCenterOffset: -2
-            anchors.horizontalCenterOffset:  -1
             opacity: control.enabled ? 0.7 : 0.5
         }
     }
 
     /*! The background of the SpinBox. */
     property Component background: Item {
-        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.1))
         implicitWidth: styleData.contentWidth + 26
         BorderImage {
             id: image
             anchors.fill: parent
+            anchors.margins: -1
             source: "images/editbox.png"
             border.left: 4
             border.right: 4
@@ -156,10 +155,6 @@ Style {
             anchors.bottomMargin: -1
             BorderImage {
                 anchors.fill: parent
-                anchors.margins: -1
-                anchors.topMargin: -2
-                anchors.bottomMargin: 1
-                anchors.rightMargin: 0
                 source: "images/focusframe.png"
                 visible: control.activeFocus
                 border.left: 4
diff --git a/src/controls/Styles/Base/TabViewStyle.qml b/src/controls/Styles/Base/TabViewStyle.qml
index 898713ef..e4d9c010 100644
--- a/src/controls/Styles/Base/TabViewStyle.qml
+++ b/src/controls/Styles/Base/TabViewStyle.qml
@@ -158,9 +158,7 @@ Style {
             }
             BorderImage {
                 anchors.fill: parent
-                anchors.topMargin: -2
-                anchors.leftMargin: -2
-                anchors.rightMargin: -1
+                anchors.margins: -1
                 source: "images/focusframe.png"
                 visible: styleData.activeFocus && styleData.selected
                 border.left: 4
diff --git a/src/controls/Styles/Base/TableViewStyle.qml b/src/controls/Styles/Base/TableViewStyle.qml
index 1330f17e..3397a81a 100644
--- a/src/controls/Styles/Base/TableViewStyle.qml
+++ b/src/controls/Styles/Base/TableViewStyle.qml
@@ -64,7 +64,7 @@ ScrollViewStyle {
     property color backgroundColor: control.backgroundVisible ? __syspal.base : "transparent"
 
     /*! The alternate background color. */
-    property color alternateBackgroundColor: Qt.darker(__syspal.base, 1.06)
+    property color alternateBackgroundColor: "#f5f5f5"
 
     /*! The text highlight color, used within selections. */
     property color highlightedTextColor: "white"
@@ -108,31 +108,10 @@ ScrollViewStyle {
     Delegate for header. This delegate is described in \l {TableView::rowDelegate}
     */
     property Component rowDelegate: Rectangle {
-        height: TextSingleton.implicitHeight * 1.2
-        property color selectedColor: styleData.hasActiveFocus ? "#38d" : "#999"
-        gradient: Gradient {
-            GradientStop {
-                color: styleData.selected ? Qt.lighter(selectedColor, 1.3) :
-                                            styleData.alternate ? alternateBackgroundColor : backgroundColor
-                position: 0
-            }
-            GradientStop {
-                color: styleData.selected ? Qt.lighter(selectedColor, 1.0) :
-                                            styleData.alternate ? alternateBackgroundColor : backgroundColor
-                position: 1
-            }
-        }
-        Rectangle {
-            anchors.bottom: parent.bottom
-            width: parent.width
-            height: 1
-            color: styleData.selected ? Qt.darker(selectedColor, 1.4) : "transparent"
-        }
-        Rectangle {
-            anchors.top: parent.top
-            width: parent.width ; height: 1
-            color: styleData.selected ? Qt.darker(selectedColor, 1.1) : "transparent"
-        }
+        height: Math.round(TextSingleton.implicitHeight * 1.2)
+        property color selectedColor: styleData.hasActiveFocus ? "#07c" : "#999"
+        color: styleData.selected ? selectedColor :
+                                    !styleData.alternate ? alternateBackgroundColor : backgroundColor
     }
 
     /*! \qmlproperty Component TableViewStyle::itemDelegate
diff --git a/src/controls/Styles/Base/TextFieldStyle.qml b/src/controls/Styles/Base/TextFieldStyle.qml
index 6c16c8de..e05ae82c 100644
--- a/src/controls/Styles/Base/TextFieldStyle.qml
+++ b/src/controls/Styles/Base/TextFieldStyle.qml
@@ -114,9 +114,10 @@ Style {
     /*! The background of the text field. */
     property Component background: Item {
         implicitWidth: 100
-        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.2))
+        implicitHeight: Math.max(25, Math.round(TextSingleton.implicitHeight * 1.1))
         BorderImage {
             anchors.fill: parent
+            anchors.margins: -1
             source: "images/editbox.png"
             border.left: 4
             border.right: 4
@@ -124,10 +125,6 @@ Style {
             border.bottom: 4
             BorderImage {
                 anchors.fill: parent
-                anchors.margins: -1
-                anchors.topMargin: -2
-                anchors.rightMargin: 0
-                anchors.bottomMargin: 1
                 source: "images/focusframe.png"
                 visible: control.activeFocus
                 border.left: 4
diff --git a/src/controls/Styles/Base/images/button.png b/src/controls/Styles/Base/images/button.png
index b2722f82..ba811a3f 100644
--- a/src/controls/Styles/Base/images/button.png
+++ b/src/controls/Styles/Base/images/button.png
diff --git a/src/controls/Styles/Base/images/button_down.png b/src/controls/Styles/Base/images/button_down.png
index 088ed20d..0190460b 100644
--- a/src/controls/Styles/Base/images/button_down.png
+++ b/src/controls/Styles/Base/images/button_down.png
diff --git a/src/controls/Styles/Base/images/editbox.png b/src/controls/Styles/Base/images/editbox.png
index 1f25e70d..974da0cd 100644
--- a/src/controls/Styles/Base/images/editbox.png
+++ b/src/controls/Styles/Base/images/editbox.png
diff --git a/src/controls/Styles/Base/images/focusframe.png b/src/controls/Styles/Base/images/focusframe.png
index 07d20829..3dcd870b 100644
--- a/src/controls/Styles/Base/images/focusframe.png
+++ b/src/controls/Styles/Base/images/focusframe.png
diff --git a/src/controls/Styles/Base/images/header.png b/src/controls/Styles/Base/images/header.png
index 2ef7d1c4..37d2a55f 100644
--- a/src/controls/Styles/Base/images/header.png
+++ b/src/controls/Styles/Base/images/header.png
diff --git a/src/controls/Styles/Base/images/scrollbar-handle-vertical.png b/src/controls/Styles/Base/images/scrollbar-handle-vertical.png
index 921a2fe3..6e6a5b7d 100644
--- a/src/controls/Styles/Base/images/scrollbar-handle-vertical.png
+++ b/src/controls/Styles/Base/images/scrollbar-handle-vertical.png
diff --git a/src/controls/Styles/Base/images/slider-groove.png b/src/controls/Styles/Base/images/slider-groove.png
new file mode 100644
index 00000000..90641422
--- /dev/null
+++ b/src/controls/Styles/Base/images/slider-groove.png
diff --git a/src/controls/Styles/Base/images/slider-handle.png b/src/controls/Styles/Base/images/slider-handle.png
new file mode 100644
index 00000000..abe15fff
--- /dev/null
+++ b/src/controls/Styles/Base/images/slider-handle.png
diff --git a/src/controls/Styles/styles.pri b/src/controls/Styles/styles.pri
index 50e9fac0..05a53619 100644
--- a/src/controls/Styles/styles.pri
+++ b/src/controls/Styles/styles.pri
@@ -54,6 +54,8 @@ STYLES_QML_FILES += \
     $$PWD/Base/images/groupbox.png \
     $$PWD/Base/images/focusframe.png \
     $$PWD/Base/images/tab_selected.png \
+    $$PWD/Base/images/slider-handle.png \
+    $$PWD/Base/images/slider-groove.png \
     $$PWD/Base/images/scrollbar-handle-horizontal.png \
     $$PWD/Base/images/scrollbar-handle-vertical.png \
     $$PWD/Base/images/scrollbar-handle-transient.png \