Some styling fixes for qml style.

- New header graphics
- Lighter buttons
- Lighter and better scroll bars
- Fixed incorrect focus for tabs
- Removed borders on item view rows

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

12 files changed, 56 insertions, 53 deletions

diff --git a/src/private/TabBar.qml b/src/private/TabBar.qml
index 28c351d4c..e9214c740 100644
--- a/src/private/TabBar.qml
+++ b/src/private/TabBar.qml
@@ -148,6 +148,7 @@ FocusScope {
                         readonly property alias nextSelected: tabitem.nextSelected
                         readonly property alias previsousSelected: tabitem.previousSelected
                         readonly property alias hovered: tabitem.hover
+                        readonly property bool activeFocus: tabbar.activeFocus
                     }
                 }
 
diff --git a/src/styles/ComboBoxStyle.qml b/src/styles/ComboBoxStyle.qml
index 7b55a9289..deb5ea507 100644
--- a/src/styles/ComboBoxStyle.qml
+++ b/src/styles/ComboBoxStyle.qml
@@ -98,7 +98,9 @@ Style {
         implicitWidth: textitem.implicitWidth + 20
         Text {
             id: textitem
-            anchors.centerIn: parent
+            anchors.left: parent.left
+            anchors.leftMargin: 4
+            anchors.verticalCenter: parent.verticalCenter
             text: control.currentText
             renderType: Text.NativeRendering
             color: __syspal.text
diff --git a/src/styles/GroupBoxStyle.qml b/src/styles/GroupBoxStyle.qml
index 83904209b..f5f2c9f49 100644
--- a/src/styles/GroupBoxStyle.qml
+++ b/src/styles/GroupBoxStyle.qml
@@ -62,7 +62,7 @@ Style {
     property Component panel:
         Item {
         implicitWidth: control.contentWidth + 2 * margin
-        implicitHeight: control.contentHeight + 2 * margin + 12
+        implicitHeight: control.contentHeight + 2 * margin + 11
         Text {
             anchors.top: parent.top
             anchors.left: parent.left
diff --git a/src/styles/ScrollViewStyle.qml b/src/styles/ScrollViewStyle.qml
index 38dea2b42..a6f3a39a2 100644
--- a/src/styles/ScrollViewStyle.qml
+++ b/src/styles/ScrollViewStyle.qml
@@ -121,22 +121,13 @@ Style {
         \endlist
     */
 
-    property Component handle: Item {
-        implicitWidth: 16
-        implicitHeight: 16
-        Rectangle {
-            anchors.fill: parent
-            color: hovered ? "#ddd" : "lightgray"
-            border.color: "#aaa"
-            anchors.rightMargin: horizontal ? 0 : -1
-            anchors.bottomMargin: horizontal ? -1 : 0
-            Rectangle {
-                anchors.fill: parent
-                anchors.margins: 1
-                color: "transparent"
-                border.color: "#44ffffff"
-            }
-        }
+    property Component handle: BorderImage{
+        opacity: pressed ? 0.5 : hovered ? 1 : 0.8
+        source: "images/scrollbar-handle-" + (horizontal ? "horizontal" : "vertical") + ".png"
+        border.left: 2
+        border.top: 2
+        border.right: 2
+        border.bottom: 2
     }
 
     /*! This component controls the appearance of the
@@ -158,6 +149,12 @@ Style {
             anchors.bottomMargin: -1
             anchors.rightMargin: -1
             border.color: "#aaa"
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 1
+                color: "transparent"
+                border.color: "#88ffffff"
+            }
             Image {
                 source: horizontal ? "images/arrow-right.png" : "images/arrow-down.png"
                 anchors.centerIn: parent
@@ -189,6 +186,12 @@ Style {
             anchors.bottomMargin: horizontal ? -1 : 0
             anchors.rightMargin: horizontal ? 0 : -1
             color: "lightgray"
+            Rectangle {
+                anchors.fill: parent
+                anchors.margins: 1
+                color: "transparent"
+                border.color: "#88ffffff"
+            }
             Image {
                 source: horizontal ? "images/arrow-left.png" : "images/arrow-up.png"
                 anchors.centerIn: parent
diff --git a/src/styles/SpinBoxStyle.qml b/src/styles/SpinBoxStyle.qml
index 4c9665668..07ddf6d7b 100644
--- a/src/styles/SpinBoxStyle.qml
+++ b/src/styles/SpinBoxStyle.qml
@@ -56,7 +56,7 @@ Style {
     readonly property SpinBox control: __control
 
     /*! The content margins of the text field. */
-    property Margins margins: Margins { top: 0 ; left: 4 ; right: 12 ; bottom: 0 }
+    property Margins margins: Margins { top: 0 ; left: 5 ; right: 12 ; bottom: 0 }
 
     /*! The text color. */
     property color textColor: __syspal.text
@@ -85,7 +85,7 @@ Style {
         Image {
             source: "images/arrow-down.png"
             anchors.centerIn: parent
-            anchors.verticalCenterOffset: -1
+            anchors.verticalCenterOffset: -2
             anchors.horizontalCenterOffset:  -1
             opacity: control.enabled ? 0.7 : 0.5
         }
@@ -93,14 +93,17 @@ Style {
 
     /*! The background of the SpinBox. */
     property Component background: Item {
+        implicitHeight: 25
+        implicitWidth: 80
         BorderImage {
+            id: image
             anchors.fill: parent
             source: "images/editbox.png"
             border.left: 4
             border.right: 4
             border.top: 4
             border.bottom: 4
-            anchors.bottomMargin: -2
+            anchors.bottomMargin: -1
             BorderImage {
                 anchors.fill: parent
                 anchors.margins: -1
@@ -121,7 +124,7 @@ Style {
     property Component panel: Item {
         id: styleitem
         implicitWidth: controlState.contentWidth + 26
-        implicitHeight: 23
+        implicitHeight: backgroundLoader.implicitHeight
 
         property color foregroundColor: spinboxStyle.textColor
         property color selectionColor: spinboxStyle.selectionColor
diff --git a/src/styles/TabViewStyle.qml b/src/styles/TabViewStyle.qml
index 48a401d1c..b08848917 100644
--- a/src/styles/TabViewStyle.qml
+++ b/src/styles/TabViewStyle.qml
@@ -130,6 +130,7 @@ Style {
             \li readonly property bool nextSelected = The next tab is selected.
             \li readonly property bool previsousSelected - The previous tab is selected.
             \li readonly property bool hovered - The tab is currently under the mouse.
+            \li readonly property bool activeFocus - The tab button has keyboard focus.
         \endtable
     */
     property Component tab: Item {
@@ -158,20 +159,20 @@ Style {
                 anchors.leftMargin: -2
                 anchors.rightMargin: -1
                 source: "images/focusframe.png"
-                visible: control.activeFocus && tab.selected
+                visible: tab.activeFocus && tab.selected
                 border.left: 4
                 border.right: 4
                 border.top: 4
                 border.bottom: 4
             }
-            Text {
-                id: textitem
-                anchors.centerIn: parent
-                text: tab.title
-                renderType: Text.NativeRendering
-                scale: control.tabPosition === Qt.TopEdge ? 1 : -1
-                color: __syspal.text
-            }
+        }
+        Text {
+            id: textitem
+            anchors.centerIn: parent
+            text: tab.title
+            renderType: Text.NativeRendering
+            scale: control.tabPosition === Qt.TopEdge ? 1 : -1
+            color: __syspal.text
         }
     }
 }
diff --git a/src/styles/TableViewStyle.qml b/src/styles/TableViewStyle.qml
index e2d3c0c78..669b934f2 100644
--- a/src/styles/TableViewStyle.qml
+++ b/src/styles/TableViewStyle.qml
@@ -65,15 +65,11 @@ ScrollViewStyle {
     /*! Activates items on single click. */
     property bool activateItemOnSingleClick: false
 
-    /* Delegate for header. This delegate is described in \l TableView::headerDelegate */
-    property Component headerDelegate: Rectangle {
-        gradient: Gradient {
-            GradientStop {position: 0 ; color: "#eee"}
-            GradientStop {position: 1 ; color: "#ddd"}
-        }
+    padding.top: control.headerVisible ? 0 : 1
 
-        implicitHeight: 16
-        implicitWidth: 80
+    /* Delegate for header. This delegate is described in \l TableView::headerDelegate */
+    property Component headerDelegate: BorderImage {
+        source: "images/header.png"
         Text {
             anchors.fill: parent
             verticalAlignment: Text.AlignVCenter
@@ -84,16 +80,10 @@ ScrollViewStyle {
             renderType: Text.NativeRendering
         }
         Rectangle {
-            anchors.bottom: parent.bottom
-            width: parent.width
-            height: 1
-            color: "#aaa"
-        }
-        Rectangle {
             anchors.right: parent.right
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-            anchors.bottomMargin: 2
+            anchors.bottomMargin: 1
             width: 1
             color: "#ccc"
         }
@@ -103,22 +93,21 @@ ScrollViewStyle {
     property Component rowDelegate: Rectangle {
         implicitHeight: 20
         implicitWidth: 80
-        property color selectedColor: hasActiveFocus ? "#49e" : "#999"
+        property color selectedColor: hasActiveFocus ? "#38d" : "#999"
         gradient: Gradient {
-            GradientStop { color: rowSelected ? Qt.lighter(selectedColor, 1.1)  : alternateBackground ? "#eee" : "white" ; position: 1 }
-            GradientStop { color: rowSelected ? Qt.lighter(selectedColor, 1.2)  : alternateBackground ? "#eee" : "white" ; position: 0 }
+            GradientStop { color: rowSelected ? Qt.lighter(selectedColor, 1.3)  : alternateBackground ? "#f2f2f2" : "white" ; position: 0 }
+            GradientStop { color: rowSelected ? Qt.lighter(selectedColor, 1.0)  : alternateBackground ? "#f2f2f2" : "white" ; position: 1 }
         }
         Rectangle {
             anchors.bottom: parent.bottom
             width: parent.width
             height: 1
-            color: rowSelected ? Qt.darker(selectedColor, 1.1) : "transparent"
+            color: rowSelected ? Qt.darker(selectedColor, 1.4) : "transparent"
         }
         Rectangle {
             anchors.top: parent.top
-            width: parent.width
-            height: 1
-            color: rowSelected ? Qt.darker(selectedColor, 1.1) : Qt.darker(parent.color, 1.15)
+            width: parent.width ; height: 1
+            color: rowSelected ? Qt.darker(selectedColor, 1.1) : "transparent"
         }
     }
 
@@ -136,6 +125,7 @@ ScrollViewStyle {
             anchors.right: parent.right
             horizontalAlignment: itemTextAlignment
             anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenterOffset: 1
             elide: itemElideMode
             text: itemValue != undefined ? itemValue : ""
             color: itemTextColor
diff --git a/src/styles/images/button.png b/src/styles/images/button.png
index 9ee7d8ee0..b2722f820 100644
--- a/src/styles/images/button.png
+++ b/src/styles/images/button.png
diff --git a/src/styles/images/header.png b/src/styles/images/header.png
new file mode 100644
index 000000000..2ef7d1c4d
--- /dev/null
+++ b/src/styles/images/header.png
diff --git a/src/styles/images/scrollbar-handle-horizontal.png b/src/styles/images/scrollbar-handle-horizontal.png
new file mode 100644
index 000000000..069ca10d9
--- /dev/null
+++ b/src/styles/images/scrollbar-handle-horizontal.png
diff --git a/src/styles/images/scrollbar-handle-vertical.png b/src/styles/images/scrollbar-handle-vertical.png
new file mode 100644
index 000000000..921a2fe39
--- /dev/null
+++ b/src/styles/images/scrollbar-handle-vertical.png
diff --git a/src/styles/styles.pro b/src/styles/styles.pro
index 308065654..615f70789 100644
--- a/src/styles/styles.pro
+++ b/src/styles/styles.pro
@@ -46,9 +46,12 @@ QML_FILES += \
     images/button.png \
     images/button_down.png \
     images/tab.png \
+    images/header.png \
     images/groupbox.png \
     images/focusframe.png \
     images/tab_selected.png \
+    images/scrollbar-handle-horizontal.png \
+    images/scrollbar-handle-vertical.png \
     images/editbox.png \
     images/arrow-up.png \
     images/arrow-up@2x.png \