dynamic example now meets minimum aesthetic requirements

Task-number: QT-2270
Reviewed-by: Yann Bodson

2 files changed, 41 insertions, 14 deletions

diff --git a/examples/declarative/dynamic/Button.qml b/examples/declarative/dynamic/Button.qml
new file mode 100644
index 0000000..0b8b6db
--- /dev/null
+++ b/examples/declarative/dynamic/Button.qml
@@ -0,0 +1,24 @@
+import Qt 4.6
+
+Rectangle {
+    id: container
+
+    property var text
+    signal clicked
+
+    SystemPalette { id: activePalette; colorGroup: Qt.Active }
+    height: text.height + 10
+    width: text.width + 20
+    border.width: 1
+    radius: 4
+    gradient: Gradient {
+        GradientStop { position: 0.0; 
+            color: if(!mr.pressed){activePalette.light;}else{activePalette.button;}
+        }
+        GradientStop { position: 1.0;
+            color: if(!mr.pressed){activePalette.button;}else{activePalette.dark;}
+        }
+    }
+    MouseRegion { id:mr; anchors.fill: parent; onClicked: container.clicked() }
+    Text { id: text; anchors.centerIn:parent; font.pointSize: 10; text: parent.text; color: activePalette.buttonText }
+}
diff --git a/examples/declarative/dynamic/dynamic.qml b/examples/declarative/dynamic/dynamic.qml
index e6c3812..e083a5b 100644
--- a/examples/declarative/dynamic/dynamic.qml
+++ b/examples/declarative/dynamic/dynamic.qml
@@ -45,20 +45,29 @@ Item {
         ColorAnimation { duration: 3000 }
     }
 
-    //TODO: Below feature needs beautification to meet minimum standards
+    SystemPalette { id: activePalette; colorGroup: Qt.Active }
+
     // toolbox
     Rectangle {
         id: toolbox
         z: 3 //Above ground
-        color: "white"
+        color: activePalette.window;
         width: 480
         anchors { right: parent.right; top:parent.top; bottom: parent.bottom }
+        Rectangle { //Not a child of any positioner
+            color: "white"; border.color: "black"; 
+            width: toolRow.width + 4
+            height: toolRow.height + 4
+            x: toolboxPositioner.x + toolRow.x - 2
+            y: toolboxPositioner.y + toolRow.y - 2
+        }
         Column{
             id: toolboxPositioner
             anchors.centerIn: parent
-            spacing: 4
+            spacing: 8
             Text{ text: "Drag an item into the scene." }
-            Row{ spacing: 4; 
+            Row{ id: toolRow
+                spacing: 8; 
                 height: childrenRect.height//TODO: Put bug in JIRA when it comes back up
                 PaletteItem{ 
                     anchors.verticalCenter: parent.verticalCenter
@@ -97,17 +106,11 @@ Item {
                 focusOnPress: true
                 font.pixelSize: 16
                 
-                text: "import Qt 4.6\nImage { id: smile;\n  x: 500*Math.random();\n  y: 250*Math.random(); \n  source: 'images/face-smile.png';\n  opacity: NumberAnimation{ \n    running:true; to: 0; duration: 1500;\n  }\n   Component.onCompleted: smile.destroy(1500);\n}"
+                text: "import Qt 4.6\nImage { id: smile;\n  x: 500*Math.random();\n  y: 200*Math.random(); \n  source: 'images/face-smile.png';\n  opacity: NumberAnimation{ \n    running:true; to: 0; duration: 1500;\n  }\n   Component.onCompleted: smile.destroy(1500);\n}"
             }
-            Rectangle {
-                width: 80
-                height: 20
-                color: "lightsteelblue"
-                Text{ anchors.centerIn: parent; text: "Create" }
-                MouseRegion { 
-                    anchors.fill: parent; 
-                    onClicked: {var obj=createQmlObject(qmlText.text, window, 'CustomObject'); obj.parent=window;}
-                }
+            Button {
+                text: "Create"
+                onClicked: {var obj=createQmlObject(qmlText.text, window, 'CustomObject'); obj.parent=window;}
             }
         }
     }