Improve declarative tabs example.

2 files changed, 60 insertions, 33 deletions

diff --git a/examples/declarative/tabwidget/TabWidget.qml b/examples/declarative/tabwidget/TabWidget.qml
index f0dfee8..f0f7164 100644
--- a/examples/declarative/tabwidget/TabWidget.qml
+++ b/examples/declarative/tabwidget/TabWidget.qml
@@ -1,42 +1,50 @@
 import Qt 4.6
 
 Item {
-    id: page
+    id: tabWidget
     property int current: 0
     default property alias content: stack.children
+
     onCurrentChanged: setOpacities()
     Component.onCompleted: setOpacities()
+
     function setOpacities()
     {
-        for (var i=0; i<stack.children.length; ++i) {
-            stack.children[i].opacity = i==current ? 1 : 0
+        for (var i = 0; i < stack.children.length; ++i) {
+            stack.children[i].opacity = i == current ? 1 : 0
         }
     }
+
     Row {
         id: header
         Repeater {
             delegate:
+            Rectangle {
+                width: tabWidget.width / stack.children.length; height: 36
                 Rectangle {
-                    width: page.width / stack.children.length
-                    height: 15
-                    color: page.current == index ? "grey" : "lightGrey"
-                    Text {
-                        anchors.fill: parent
-                        text: stack.children[index].title
-                        elide: Text.ElideRight
-                    }
-                    MouseArea {
-                        anchors.fill: parent
-                        onClicked: page.current = index
-                    }
+                    color: "#acb2c2"; width: parent.width; height: 1
+                    anchors { bottom: parent.bottom; bottomMargin: 1 }
+                }
+                BorderImage {
+                    source: "tab.png"; visible: tabWidget.current == index; border.left: 7; border.right: 7
+                    anchors { fill: parent; leftMargin: 2; topMargin: 5; rightMargin: 1 }
                 }
+                Text {
+                    horizontalAlignment: Qt.AlignHCenter; verticalAlignment: Qt.AlignVCenter
+                    anchors.fill: parent; text: stack.children[index].title
+                    elide: Text.ElideRight; font.bold: tabWidget.current == index
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    onClicked: tabWidget.current = index
+                }
+            }
             model: stack.children.length
         }
     }
+
     Item {
         id: stack
-        anchors.top: header.bottom
-        anchors.bottom: page.bottom
-        width: page.width
+        anchors.top: header.bottom; anchors.bottom: tabWidget.bottom; width: tabWidget.width
     }
 }
diff --git a/examples/declarative/tabwidget/tabs.qml b/examples/declarative/tabwidget/tabs.qml
index 54ed7df..1d11b03 100644
--- a/examples/declarative/tabwidget/tabs.qml
+++ b/examples/declarative/tabwidget/tabs.qml
@@ -2,28 +2,47 @@ import Qt 4.6
 
 TabWidget {
     id: tabs
-    width: 200
-    height: 200
-    current: 2
+    width: 640; height: 480
+
     Rectangle {
         property string title: "Red"
-        color: "red"
-        anchors.fill: parent
-        Text { anchors.centerIn: parent; text: "<div align=center>Roses are red"; font.pixelSize: 24
-            wrap: true; width: parent.width-20 }
+        anchors.fill: parent; color: "#e3e3e3"
+        Rectangle {
+            anchors { fill: parent; topMargin: 20; leftMargin: 20; rightMargin: 20; bottomMargin: 20 }
+            color: "#ff7f7f"
+            Text {
+                anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
+                text: "Roses are red"; font.pixelSize: 20
+                wrap: true; width: parent.width - 20
+            }
+        }
     }
+
     Rectangle {
         property string title: "Green"
-        color: "green"
-        anchors.fill: parent
-        Text { anchors.centerIn: parent; text: "<div align=center>Flower stems are green"; font.pixelSize: 24;
-            wrap: true; width: parent.width-20 }
+        anchors.fill: parent; color: "#e3e3e3"
+        Rectangle {
+            anchors { fill: parent; topMargin: 20; leftMargin: 20; rightMargin: 20; bottomMargin: 20 }
+            color: "#7fff7f"
+            Text {
+                anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
+                text: "Flower stems are green"; font.pixelSize: 20
+                wrap: true; width: parent.width - 20
+            }
+        }
     }
+
     Rectangle {
         property string title: "Blue"
-        color: "blue"
-        anchors.fill: parent
-        Text { anchors.centerIn: parent; text: "<div align=center>Violets are blue"; color: "white"; font.pixelSize: 24
-            wrap: true; width: parent.width-20 }
+        anchors.fill: parent; color: "#e3e3e3"
+        Rectangle {
+            anchors { fill: parent; topMargin: 20; leftMargin: 20; rightMargin: 20; bottomMargin: 20 }
+            color: "#7f7fff"
+            Text {
+                anchors.centerIn: parent; horizontalAlignment: Qt.AlignHCenter
+                text: "Violets are blue"; font.pixelSize: 20
+                wrap: true; width: parent.width - 20
+            }
+        }
     }
 }