Enhance samegame high score dialog

'Better' layout mechanics, included animated resize for those people
with long names.

3 files changed, 18 insertions, 3 deletions

diff --git a/demos/declarative/samegame/content/Dialog.qml b/demos/declarative/samegame/content/Dialog.qml
index f9a281a..5bd1123 100644
--- a/demos/declarative/samegame/content/Dialog.qml
+++ b/demos/declarative/samegame/content/Dialog.qml
@@ -11,6 +11,7 @@ Rectangle {
         page.opacity = 1;
     }
     signal closed();
+    property Item text: myText
     color: "white"; border.width: 1; width: myText.width + 20; height: myText.height + 40;
     opacity: 0
     opacity: Behavior {
diff --git a/demos/declarative/samegame/content/samegame.js b/demos/declarative/samegame/content/samegame.js
index 0a42e88..41ed84c 100755
--- a/demos/declarative/samegame/content/samegame.js
+++ b/demos/declarative/samegame/content/samegame.js
@@ -158,7 +158,11 @@ function victoryCheck()
     //Checks for game over
     if(deservesBonus || !(floodMoveCheck(0,maxY-1, -1))){
         timer = new Date() - timer;
+        //scoreName.show("You won! Please enter your name:                 ");
         scoreName.show("You won! Please enter your name:                 ");
+        scoreName.initialWidth = scoreName.text.width + 20;
+        scoreName.width = scoreName.initialWidth;
+        scoreName.text.opacity = 0;//Just a spacer
         //dialog.show("Game Over. Your score is " + gameCanvas.score);
     }
 }
diff --git a/demos/declarative/samegame/samegame.qml b/demos/declarative/samegame/samegame.qml
index 626c76b..c2557ae 100644
--- a/demos/declarative/samegame/samegame.qml
+++ b/demos/declarative/samegame/samegame.qml
@@ -38,20 +38,30 @@ Rectangle {
     Dialog { id: dialog; anchors.centerIn: parent; z: 21 }
     Dialog {
         id: scoreName; anchors.centerIn: parent; z: 22;
+        property int initialWidth: 0
+        width: Behavior{NumberAnimation{} enabled: initialWidth!=0}
         Text {
             id: spacer
-            opacity: 0
-            text: "   You won! Please enter your name:"
+            anchors.left: scoreName.left
+            anchors.leftMargin: 20
+            anchors.verticalCenter: parent.verticalCenter
+            text: "You won! Please enter your name: "
         }
         TextInput {
             id: editor
+            onTextChanged: {
+                var newWidth = editor.width + spacer.width + 40;
+                if((newWidth > scoreName.width && newWidth < screen.width) 
+                        || (scoreName.width > scoreName.initialWidth))
+                    scoreName.width = newWidth;
+            }
             onAccepted: {
                 if(scoreName.opacity==1&&editor.text!="")
                     saveHighScore(editor.text);
                 scoreName.forceClose();
             }
             anchors.verticalCenter: parent.verticalCenter
-            width: 72; focus: true
+            focus: true
             anchors.left: spacer.right
         }
     }