SameGame small cosmetic changes

2 files changed, 62 insertions, 31 deletions

diff --git a/demos/declarative/samegame/SameGame.qml b/demos/declarative/samegame/SameGame.qml
index d476e8b..a9d8140 100644
--- a/demos/declarative/samegame/SameGame.qml
+++ b/demos/declarative/samegame/SameGame.qml
@@ -1,34 +1,57 @@
 import Qt 4.6
-
 import "content"
 
 Rectangle {
-    id: page; width: 460; height: 700; color: activePalette.window
+    id: Screen
+    width: 460; height: 700
+
     Script { source: "content/samegame.js" }
+
     SystemPalette { id: activePalette; colorGroup: Qt.Active }
-    Rectangle {
-        id: gameCanvas
-        property int score: 0
-        z:20; y:20; color: "white"; border.width: 1
-        width:parent.width - tileSize - (parent.width % tileSize);
-        height:parent.height - tileSize - (parent.height % tileSize);
-        anchors.horizontalCenter: parent.horizontalCenter
-        Image { id:background;
-            source: "content/pics/background.png"
-            anchors.fill: parent
+
+    Item {
+        width: parent.width; anchors.top: parent.top; anchors.bottom: ToolBar.top
+
+        Image {
+            id: background
+            anchors.fill: parent; source: "content/pics/background.png"
+            fillMode: "PreserveAspectCrop"
         }
-        MouseRegion { id: gameMR
-            anchors.fill: parent; onClicked: handleClick(mouse.x,mouse.y);
+
+        Item {
+            id: gameCanvas
+            property int score: 0
+
+            z: 20; anchors.centerIn: parent
+            width: parent.width - tileSize - (parent.width % tileSize);
+            height: parent.height - tileSize - (parent.height % tileSize);
+
+            MouseRegion {
+                id: gameMR
+                anchors.fill: parent; onClicked: handleClick(mouse.x,mouse.y);
+            }
         }
     }
 
-    Dialog { id: dialog; anchors.centerIn: parent; z: 21}
-    Button {
-        id: btnA; text: "New Game"; onClicked: {initBoard();}
-        anchors.top: gameCanvas.bottom; anchors.topMargin: 4; anchors.left: gameCanvas.left;
-    }
-    Text {
-        text: "Score: " + gameCanvas.score; width:100; font.pointSize:14
-        anchors.top: gameCanvas.bottom; anchors.topMargin: 4; anchors.right: gameCanvas.right;
+    Dialog { id: dialog; anchors.centerIn: parent; z: 21 }
+
+    Rectangle {
+        id: ToolBar
+        color: activePalette.window
+        height: Score.height + 10; width: parent.width
+        anchors.bottom: Screen.bottom
+
+        Button {
+            id: btnA; text: "New Game"; onClicked: {initBoard();}
+            anchors.left: parent.left; anchors.leftMargin: 3
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Text {
+            id: Score
+            text: "Score: " + gameCanvas.score; font.pointSize: 11
+            anchors.right: parent.right; anchors.rightMargin: 3
+            anchors.verticalCenter: parent.verticalCenter
+        }
     }
 }
diff --git a/demos/declarative/samegame/content/Button.qml b/demos/declarative/samegame/content/Button.qml
index 70b175c..208c502 100644
--- a/demos/declarative/samegame/content/Button.qml
+++ b/demos/declarative/samegame/content/Button.qml
@@ -1,18 +1,26 @@
 import Qt 4.6
 
-Rectangle { 
-    id: page; color: activePalette.button; width: txtItem.width+20; height: txtItem.height+4
-    border.width: 1; border.color: activePalette.mid; radius: 10;
+Rectangle {
+    id: Container
+
     signal clicked
     property string text: "Button"
-    gradient: Gradient { 
-        GradientStop { id:topGrad; position: 0.0; 
-            color: if(mr.pressed){activePalette.dark;}else{activePalette.light;}}
+
+    color: activePalette.button; smooth: true
+    width: txtItem.width + 20; height: txtItem.height + 6
+    border.width: 1; border.color: activePalette.darker(activePalette.button); radius: 8;
+
+    gradient: Gradient {
+        GradientStop {
+            id: topGrad; position: 0.0
+            color: if (mr.pressed) { activePalette.dark } else { activePalette.light } }
         GradientStop { position: 1.0; color: activePalette.button }
     }
-    MouseRegion { id:mr; anchors.fill: parent; onClicked: page.clicked() }
+
+    MouseRegion { id: mr; anchors.fill: parent; onClicked: Container.clicked() }
+
     Text {
-        id: txtItem; text: page.text; anchors.centerIn: page; color: activePalette.buttonText 
-        font.pointSize: 14;
+        id: txtItem; text: Container.text; anchors.centerIn: Container; color: activePalette.buttonText
+        font.pointSize: 10;
     }
 }