Refactor and clean up public style API

Change-Id: I10271c860abd9b45a262e3548628e6a3026e1a4f
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>

8 files changed, 49 insertions, 65 deletions

diff --git a/examples/quick/controls/gallery/content/Styles.qml b/examples/quick/controls/gallery/content/Styles.qml
index 6a3a9c57..f6892b7a 100644
--- a/examples/quick/controls/gallery/content/Styles.qml
+++ b/examples/quick/controls/gallery/content/Styles.qml
@@ -70,12 +70,12 @@ Item {
             spacing: 8
             Button {
                 text: "Set color…"
-                style: ButtonStyle { backgroundColor: colorDialog.color }
+                style: ButtonStyle { }
                 onClicked: colorDialog.open()
             }
             Button {
                 text: "Push me"
-                style: ButtonStyle { backgroundColor: "#eee" }
+                style: ButtonStyle { }
             }
             Button {
                 text: "Push me"
@@ -85,30 +85,15 @@ Item {
         Row {
             spacing: 8
             TextField {
-                style: TextFieldStyle { backgroundColor: colorDialog.color }
+                style: TextFieldStyle { }
             }
             TextField {
-                style: TextFieldStyle { backgroundColor: "#eee" }
+                style: TextFieldStyle { }
             }
             TextField {
                 style: textfieldStyle
             }
         }
-        Row {
-            spacing: 8
-            SpinBox {
-                width: 100
-                style: SpinBoxStyle { backgroundColor: colorDialog.color }
-            }
-            SpinBox {
-                width: 100
-                style: SpinBoxStyle { backgroundColor: "#eee" }
-            }
-            SpinBox {
-                width: 100
-                style: spinboxStyle
-            }
-        }
 
         Row {
             spacing: 8
@@ -138,13 +123,13 @@ Item {
                 value: 50
                 maximumValue: 100
                 width: 100
-                style: ProgressBarStyle{ backgroundColor: colorDialog.color }
+                style: ProgressBarStyle{ }
             }
             ProgressBar {
                 value: 50
                 maximumValue: 100
                 width: 100
-                style: ProgressBarStyle{ backgroundColor: "#eee" }
+                style: ProgressBarStyle{ }
             }
             ProgressBar {
                 value: 50
@@ -187,13 +172,17 @@ Item {
     // Style delegates:
 
     property Component buttonStyle: ButtonStyle {
-        background: Rectangle {
+        panel: Rectangle {
             implicitHeight: 20
             implicitWidth: 100
             color: control.pressed ? "darkGray" : "lightGray"
             antialiasing: true
             border.color: "gray"
             radius: height/2
+            Text {
+                anchors.centerIn: parent
+                text: control.text
+            }
         }
     }
 
@@ -218,7 +207,7 @@ Item {
             radius: height/2
         }
 
-        background: Rectangle {
+        groove: Rectangle {
             height: 8
             implicitWidth: 100
             implicitHeight: 20
@@ -230,45 +219,38 @@ Item {
         }
     }
 
-    property Component spinboxStyle: SpinBoxStyle {
-        leftMargin: 8
-        topMargin: 1
-        background: Rectangle {
-            width: 100
-            height: 20
-            color: "#f0f0f0"
-            border.color: "gray"
-            antialiasing: true
-            radius: height/2
-        }
-    }
-
     property Component progressbarStyle: ProgressBarStyle {
-        background: Rectangle {
-            width: 100
-            height: 20
+        panel: Rectangle {
+            implicitWidth: 100
+            implicitHeight: 20
             color: "#f0f0f0"
             border.color: "gray"
             antialiasing: true
             radius: height/2
+            Rectangle {
+                implicitWidth: 100
+                implicitHeight: 20
+                color: "#f0f0f0"
+                border.color: "gray"
+                antialiasing: true
+                radius: height/2
+            }
         }
     }
 
     property Component tabViewStyle: TabViewStyle {
         tabOverlap: 16
-        leftMargin: 12
+        tabsLeftPadding: 12
+        frameOverlap: 4
 
-        frame: Item {
-            Rectangle {
-                gradient: Gradient{
-                    GradientStop { color: "#e5e5e5" ; position: 0 }
-                    GradientStop { color: "#e0e0e0" ; position: 1 }
-                }
-                anchors.fill: parent
-                anchors.topMargin: -4
-                border.color: "#898989"
-                Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
+        frame: Rectangle {
+            gradient: Gradient{
+                GradientStop { color: "#e5e5e5" ; position: 0 }
+                GradientStop { color: "#e0e0e0" ; position: 1 }
             }
+            border.color: "#898989"
+            Rectangle { anchors.fill: parent ; anchors.margins: 1 ; border.color: "white" ; color: "transparent" }
+
         }
         tab: Item {
             implicitWidth: image.sourceSize.width
diff --git a/examples/quick/controls/tableview/main.qml b/examples/quick/controls/tableview/main.qml
index 92901bf6..997a2241 100644
--- a/examples/quick/controls/tableview/main.qml
+++ b/examples/quick/controls/tableview/main.qml
@@ -103,9 +103,9 @@ Rectangle {
 
     ListModel {
         id: nestedModel
-        ListElement{attributes:  ListElement { description: "Core" ; color:"#ffaacc"}}
-        ListElement{attributes: ListElement { description: "Second" ; color:"#ffccaa"}}
-        ListElement{attributes: ListElement { description: "Third" ; color:"#ffffaa"}}
+        ListElement{controlState:  ListElement { description: "Core" ; color:"#ffaacc"}}
+        ListElement{controlState: ListElement { description: "Second" ; color:"#ffccaa"}}
+        ListElement{controlState: ListElement { description: "Third" ; color:"#ffffaa"}}
     }
 
     ListModel {
@@ -175,7 +175,7 @@ Rectangle {
                     anchors.margins: 12
 
                     TableViewColumn {
-                        role: "attributes"
+                        role: "controlState"
                         title: "Text and Color"
                         width: 220
                     }
diff --git a/examples/quick/controls/touch/content/ButtonPage.qml b/examples/quick/controls/touch/content/ButtonPage.qml
index cc5925ce..635ce3b9 100644
--- a/examples/quick/controls/touch/content/ButtonPage.qml
+++ b/examples/quick/controls/touch/content/ButtonPage.qml
@@ -94,7 +94,7 @@ Item {
     Component {
         id: touchStyle
         ButtonStyle {
-            background: Item {
+            panel: Item {
                 implicitHeight: 50
                 implicitWidth: 320
                 BorderImage {
@@ -106,10 +106,15 @@ Item {
                     border.right: 8
                     anchors.margins: control.pressed ? -4 : 0
                     source: control.pressed ? "../images/button_pressed.png" : "../images/button_default.png"
+                    Text {
+                        text: control.text
+                        anchors.centerIn: parent
+                        color: "white"
+                        font.pixelSize: 23
+                        renderType: Text.NativeRendering
+                    }
                 }
             }
-            foregroundColor: "white"
-            font.pixelSize: 23
         }
     }
 }
diff --git a/examples/quick/controls/touch/content/ProgressBarPage.qml b/examples/quick/controls/touch/content/ProgressBarPage.qml
index 86a46b69..dc0f5521 100644
--- a/examples/quick/controls/touch/content/ProgressBarPage.qml
+++ b/examples/quick/controls/touch/content/ProgressBarPage.qml
@@ -96,7 +96,7 @@ Item {
     Component {
         id: touchStyle
         ProgressBarStyle {
-            background: Rectangle {
+            panel: Rectangle {
                 implicitHeight: 15
                 implicitWidth: 400
                 color: "#444"
diff --git a/examples/quick/controls/touch/content/SliderPage.qml b/examples/quick/controls/touch/content/SliderPage.qml
index 8d9ff0b1..8eb91902 100644
--- a/examples/quick/controls/touch/content/SliderPage.qml
+++ b/examples/quick/controls/touch/content/SliderPage.qml
@@ -83,7 +83,7 @@ Item {
                 color: Qt.lighter("#468bb7", 1.2)
             }
 
-            background: Item {
+            groove: Item {
                 implicitHeight: 50
                 implicitWidth: 400
                 Rectangle {
diff --git a/examples/quick/controls/touch/content/TabBarPage.qml b/examples/quick/controls/touch/content/TabBarPage.qml
index 41de7822..c96314be 100644
--- a/examples/quick/controls/touch/content/TabBarPage.qml
+++ b/examples/quick/controls/touch/content/TabBarPage.qml
@@ -70,7 +70,8 @@ Item {
     Component {
         id: touchStyle
         TabViewStyle {
-            tabBarAlignment: "center"
+            tabsAlignment: Qt.AlignVCenter
+            tabOverlap: 0
             frame: Item { }
             tab: Item {
                 implicitWidth: control.width/control.count
diff --git a/examples/quick/controls/touch/content/TextInputPage.qml b/examples/quick/controls/touch/content/TextInputPage.qml
index 3f408d47..605afef2 100644
--- a/examples/quick/controls/touch/content/TextInputPage.qml
+++ b/examples/quick/controls/touch/content/TextInputPage.qml
@@ -87,7 +87,7 @@ Item {
         id: touchStyle
 
         TextFieldStyle {
-            foregroundColor: "white"
+            textColor: "white"
             font.pixelSize: 28
             background: Item {
                 implicitHeight: 50
diff --git a/examples/quick/controls/touch/main.qml b/examples/quick/controls/touch/main.qml
index 342d4f2d..3058a0d3 100644
--- a/examples/quick/controls/touch/main.qml
+++ b/examples/quick/controls/touch/main.qml
@@ -38,10 +38,6 @@
 **
 ****************************************************************************/
 
-
-
-
-
 import QtQuick 2.1
 import QtQuick.Controls 1.0
 import "content"