Clean up visuals of elements test
authorDamian Jansen <damian.jansen@nokia.com>
Tue, 15 May 2012 04:32:07 +0000 (14:32 +1000)
committerQt by Nokia <qt-info@nokia.com>
Wed, 30 May 2012 04:01:49 +0000 (06:01 +0200)
Elements were not being displayed correctly on small screens,
i.e. devices. Should anchor these to the bottom, rather than center.
Also fix layout element child positions, as opacity is not used to
determine placement - use visible property instead.

Change-Id: I9fff7e64f3f03f1a4d60a242fb8f95629da6f7c9
Reviewed-by: Michael Brasser <michael.brasser@nokia.com>
24 files changed:
tests/testapplications/elements/content/AnimatedImageElement.qml
tests/testapplications/elements/content/BorderImageElement.qml
tests/testapplications/elements/content/ColumnElement.qml
tests/testapplications/elements/content/DoubleValidatorElement.qml
tests/testapplications/elements/content/FlickableElement.qml
tests/testapplications/elements/content/FlipableElement.qml
tests/testapplications/elements/content/FlowElement.qml
tests/testapplications/elements/content/FontLoaderElement.qml
tests/testapplications/elements/content/GridElement.qml
tests/testapplications/elements/content/ImageElement.qml
tests/testapplications/elements/content/IntValidatorElement.qml
tests/testapplications/elements/content/ListViewElement.qml
tests/testapplications/elements/content/MouseAreaElement.qml
tests/testapplications/elements/content/ParallelAnimationElement.qml
tests/testapplications/elements/content/RectangleElement.qml
tests/testapplications/elements/content/RegExpValidatorElement.qml
tests/testapplications/elements/content/RepeaterElement.qml
tests/testapplications/elements/content/RowElement.qml
tests/testapplications/elements/content/ScaleElement.qml
tests/testapplications/elements/content/SequentialAnimationElement.qml
tests/testapplications/elements/content/SystemPaletteElement.qml
tests/testapplications/elements/content/TextEditElement.qml
tests/testapplications/elements/content/TextElement.qml
tests/testapplications/elements/content/TextInputElement.qml

index 073a002..6af6776 100644 (file)
@@ -49,7 +49,9 @@ Item {
     Item {
         id: animatedimageelementcontainer
         height: 100; width: 100
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         AnimatedImage { id: animatedimageelement; anchors.fill: parent; source: "pics/cat.gif" }
         Behavior on height { NumberAnimation { duration: 1000 } }
         Behavior on width { NumberAnimation { duration: 1000 } }
index 67d54ed..427f140 100644 (file)
@@ -49,7 +49,9 @@ Item {
 
     BorderImage {
         id: borderimageelement
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         width: 100; height: 100
         source: "pics/qml-borderimage.png"
         border { left: bordervalue; top: bordervalue; right: bordervalue; bottom: bordervalue }
index 1b48db1..bd0ed39 100644 (file)
@@ -48,8 +48,11 @@ Item {
 
     Column {
         id: columnelement
-        height: 250; width: 200; spacing: 5
-        anchors.centerIn: parent
+        width: 200
+        spacing: 5
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         Rectangle { id: gr; color: "green"; height: 50; width: parent.width; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true }
         Rectangle { id: re; color: "red"; height: 50; width: parent.width; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true }
         Rectangle {
index aaf50aa..c186ff5 100644 (file)
@@ -56,7 +56,9 @@ Item {
         id: doublevalidatorelementbackground
         color: doublevalidatorelementinput.acceptableInput ? "green" : "red"; height: 50; width: parent.width *.8
         border.color: "gray"; opacity: 0.7; radius: 5
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
 
         TextInput {
             id: doublevalidatorelementinput
index ffb481f..b7797f4 100644 (file)
@@ -51,7 +51,9 @@ Item {
         id: flickableelementbox
         color: "lightgray"; border.color: "gray"; radius: 5; clip: true; opacity: .1
         height: 250; width: parent.width *.8
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
 
         Flickable {
             id: flickableelement
index cb2b11c..77187bd 100644 (file)
@@ -49,7 +49,9 @@ Item {
     Flipable {
         id: flipableelement
         height: 250; width: 250
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         front: Rectangle { color: "green"; anchors.fill: parent; border.color: "gray"; border.width: 3; opacity: .9; radius: 20; clip: true }
         back: Rectangle { color: "red"; anchors.fill: parent; border.color: "gray"; border.width: 3; opacity: .9; radius: 20; clip: true }
         transform: Rotation {
index 88a86bb..6752843 100644 (file)
@@ -50,15 +50,18 @@ Item {
 
     Flow {
         id: flowelement
-        height: 150; width: 150; spacing: 5; flow: Flow.LeftToRight
-        anchors.centerIn: parent
+        height: 110; width: 110
+        spacing: 5; flow: Flow.LeftToRight
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         Rectangle { id: gr; color: "green"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { anchors.centerIn: parent; text: "1" }
         }
         Rectangle { id: re; color: "red"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { anchors.centerIn: parent; text: "2" }
         }
-        Rectangle { id: bl; color: "blue"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: 0; radius: 5; clip: true
+        Rectangle { id: bl; color: "blue"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true; visible: false
             Text { anchors.centerIn: parent; text: "3" }
         }
         Rectangle { id: bk; color: "black"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true
@@ -82,20 +85,20 @@ Item {
                 "Next, let's add a rectangle to the Flow - it should slide in from the left and the black rectangle should move to give it space" }
         },
         State { name: "added"; when: statenum == 2
-            PropertyChanges { target: bl; opacity: .9 }
+            PropertyChanges { target: bl; visible: true }
             PropertyChanges { target: flowelementtest
                 testtext: "Flow should now be showing four rectangles - green, red, blue and black.\n"+
                 "Next let's change the direction of the flow to vertical." }
         },
         State { name: "vertical"; when: statenum == 3
-            PropertyChanges { target: bl; opacity: .9 }
+            PropertyChanges { target: bl; visible: true }
             PropertyChanges { target: flowelement; flow: Flow.TopToBottom }
             PropertyChanges { target: flowelementtest
                 testtext: "Flow should now be showing four rectangles - green, blue, red and black.\n"+
                 "Next, let's flip the layout direction to RightToLeft." }
         },
         State { name: "rtlvertical"; when: statenum == 4
-            PropertyChanges { target: bl; opacity: .9 }
+            PropertyChanges { target: bl; visible: true }
             PropertyChanges { target: flowelement; flow: Flow.TopToBottom; layoutDirection: Qt.RightToLeft }
             PropertyChanges { target: flowelementtest
                 testtext: "Flow should now be showing the four rectangles aligned to the right and in a column order flowing to the left"+
index 0dd9cf0..3aab22d 100644 (file)
@@ -55,7 +55,9 @@ Item {
 
     Text {
         id: textitem
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         height: 100; width: 250; text: fontloaderelement.name; font: fontloaderelement.name
         horizontalAlignment: Text.AlignHCenter; verticalAlignment: Text.AlignVCenter
     }
index da27b47..0a92e10 100644 (file)
@@ -48,8 +48,10 @@ Item {
 
     Grid {
         id: gridelement
-        height: 250; width: 120; spacing: 5; columns: 2
-        anchors.horizontalCenter: parent.horizontalCenter; anchors.bottom: parent.bottom; anchors.bottomMargin: 100
+        height: 120; width: 120; spacing: 5; columns: 2
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
 
         Rectangle { id: gr; color: "green"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true }
         Rectangle { id: re; color: "red"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true }
index b56d6e9..65000ee 100644 (file)
@@ -49,7 +49,9 @@ Item {
     Item {
         id: imageelementcontainer
         height: 100; width: 100; clip: true
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         Behavior on height { NumberAnimation { duration: 1000 } }
         Behavior on width { NumberAnimation { duration: 1000 } }
         Image {
index 12df298..f96e2e2 100644 (file)
@@ -54,7 +54,9 @@ Item {
         id: intvalidatorelementbackground
         color: intvalidatorelementinput.acceptableInput ? "green" : "red"
         height: 50; width: parent.width *.8; border.color: "gray"; opacity: 0.7; radius: 5
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
 
         TextInput {
             id: intvalidatorelementinput
index d021f8e..54b8784 100644 (file)
@@ -57,7 +57,9 @@ Item {
     ListView {
         id: listviewelement
         height: 250; width: parent.width *.8; clip: true
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         model: devices
         highlightFollowsCurrentItem: true
         highlight: highlightrect
index a5ee798..f4143e2 100644 (file)
@@ -45,13 +45,14 @@ Item {
     id: mouseareaelementtest
     anchors.fill: parent
     property string testtext: ""
-    property int sidelength: 1500
-
     focus: true
+
     Rectangle {
         id: mouseareaelementbox
-        color: "lightgray"; border.color: "gray"; radius: 5; clip: true; opacity: .7; height: 300; width: 300
-        anchors.centerIn: parent
+        color: "lightgray"; border.color: "gray"; radius: 5; clip: true; opacity: .7; height: 200; width: 200
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         MouseArea {
             id: mouseareaelement
             hoverEnabled: true
index ae0ed97..1eb4e1f 100644 (file)
@@ -47,16 +47,23 @@ Item {
     property string testtext: ""
     property int firstduration: 1000
     property int secondduration: 3000
+    property int firstY
+    firstY: parent.height * .6
+    property int secondY
+    secondY: parent.height * .8
+
+    Timer { id: startanimationtimer; interval: 1000; onTriggered: parallelanimationelement.start() }
+
     ParallelAnimation {
         id: parallelanimationelement
         running: false
-        NumberAnimation { id: movement; target: animatedrect; properties: "y"; to: 500; duration: firstduration }
+        NumberAnimation { id: movement; target: animatedrect; properties: "y"; to: secondY; duration: firstduration }
         ColorAnimation { id: recolor; target: animatedrect; properties: "color"; to: "green"; duration: secondduration }
     }
 
     Rectangle {
         id: animatedrect
-        width: 50; height: 50; color: "blue"; y: 300
+        width: 50; height: 50; color: "blue"; y: firstY
         anchors.horizontalCenter: parent.horizontalCenter
     }
 
@@ -67,26 +74,25 @@ Item {
 
     states: [
         State { name: "start"; when: statenum == 1
-            PropertyChanges { target: animatedrect; color: "blue"; y: 300 }
+            PropertyChanges { target: animatedrect; color: "blue"; y: firstY }
             PropertyChanges { target: parallelanimationelementtest
                 testtext: "This square will have two properties animated simultaneously.\n"+
                 "The next step will see it move quickly down the display, and slowly change its color to green, at the same time";
             }
         },
         State { name: "firstchange"; when: statenum == 2
-            PropertyChanges { target: parallelanimationelement; running: true }
+            StateChangeScript { script: { firstduration = 1000; secondduration = 3000; startanimationtimer.start() } }
             PropertyChanges { target: parallelanimationelementtest
                 testtext: "The square should have moved quickly, and recolored slowly\n"+
                 "Next, it will recolor quickly and move slowly back to it's original position"
             }
         },
         State { name: "secondchange"; when: statenum == 3
-            StateChangeScript { script: { firstduration = 3000; secondduration = 1000 } }
-            PropertyChanges { target: movement; to: 300 }
+            StateChangeScript { script: { firstduration = 3000; secondduration = 1000; startanimationtimer.start() } }
+            PropertyChanges { target: movement; to: firstY }
             PropertyChanges { target: recolor; to: "blue" }
-            PropertyChanges { target: parallelanimationelement; running: true }
             PropertyChanges { target: parallelanimationelementtest
-                testtext: "The square should have moved slowly, then recolored quickly, simultaneously\n"+
+                testtext: "The square should have simultaneously moved slowly and recolored quickly.\n"+
                 "Advance to restart the test"
             }
         }
index 327aa49..350bf75 100644 (file)
@@ -47,8 +47,10 @@ Item { id: rectangleelementtest
 
     Rectangle {
         id: rectangleelement
-        height: 100; width: 100; color: "blue"; border.width: 2; border.color: "red"; border.aligned: false; smooth: true
-        anchors.centerIn: parent
+        height: 100; width: 100; color: "blue"; border.width: 2; border.color: "red"; smooth: true
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         Behavior on height { NumberAnimation { duration: 1000 } }
         Behavior on width { NumberAnimation { duration: 1000 } }
         Behavior on radius { NumberAnimation { duration: 1000 } }
index 466619b..6908c14 100644 (file)
@@ -53,7 +53,9 @@ Item {
         id: regexpvalidatorelementbackground
         color: regexpvalidatorelementinput.acceptableInput ? "green" : "red"; height: 50; width: parent.width *.8
         border.color: "gray"; opacity: 0.7; radius: 5
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
 
         TextInput {
             id: regexpvalidatorelementinput
index ed9a74e..6134dca 100644 (file)
@@ -49,8 +49,11 @@ Item {
 
     Column {
         id: container
-        height: 50; width: 250; spacing: 5
-        anchors.centerIn: parent
+        height: 200; width: 250
+        spacing: 5
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         Repeater { id: repeaterelement; model: repeatermodel }
         Rectangle { height: 50; width: 150; color: "green" }
         move: Transition { NumberAnimation { properties: "x,y"; duration: 1000; easing.type: Easing.OutBounce } }
@@ -60,16 +63,16 @@ Item {
 
     VisualItemModel {
         id: repeatermodel
-        Rectangle { color: "blue"; height: 50; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
+        Rectangle { color: "blue"; height: 40; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { text: "I am Thing 1"; anchors.centerIn: parent } }
-        Rectangle { color: "blue"; height: 50; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
+        Rectangle { color: "blue"; height: 40; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { text: "I am Thing 2"; anchors.centerIn: parent } }
         Rectangle { visible: repeaterelementtest.showme;
-            color: "blue"; height: 50; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
+            color: "blue"; height: 40; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { text: "I am Thing 3"; anchors.centerIn: parent } }
-        Rectangle { color: "blue"; height: 50; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
+        Rectangle { color: "blue"; height: 40; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { text: "I am Thing 4"; anchors.centerIn: parent } }
-        Rectangle { color: "blue"; height: 50; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
+        Rectangle { color: "blue"; height: 40; width: 150; border.color: "black"; border.width: 3; opacity: .9; radius: 5; clip: true
             Text { text: "I am Thing 5"; anchors.centerIn: parent } }
     }
 
index 5e4805f..59876bf 100644 (file)
@@ -49,7 +49,9 @@ Item {
     Row {
         id: rowelement
         height: 50; width: 250; spacing: 5
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         Rectangle { id: gr; color: "green"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true }
         Rectangle { id: re; color: "red"; height: 50; width: 50; border.color: "gray"; border.width: 3; opacity: .9; radius: 5; clip: true }
         Rectangle {
index 0725898..7d23440 100644 (file)
@@ -49,7 +49,9 @@ Item {
     Rectangle {
         id: scaletarget
         color: "green"; height: 100; width: 100; border.color: "gray"; opacity: 0.7; radius: 5
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         transform: Scale {
             id: scaleelement
             property alias originx: scaleelement.origin.x
index e8de7fe..52fb472 100644 (file)
@@ -47,16 +47,23 @@ Item {
     property string testtext: ""
     property int firstduration: 1000
     property int secondduration: 3000
+    property int firstY
+    firstY: parent.height * .6
+    property int secondY
+    secondY: parent.height * .8
+
+    Timer { id: startanimationtimer; interval: 1000; onTriggered: sequentialanimationelement.start() }
+
     SequentialAnimation {
         id: sequentialanimationelement
         running: false
-        NumberAnimation { id: movement; target: animatedrect; properties: "y"; to: 500; duration: firstduration }
+        NumberAnimation { id: movement; target: animatedrect; properties: "y"; to: secondY; duration: firstduration }
         ColorAnimation { id: recolor; target: animatedrect; properties: "color"; to: "green"; duration: secondduration }
     }
 
     Rectangle {
         id: animatedrect
-        width: 50; height: 50; color: "blue"; y: 300
+        width: 50; height: 50; color: "blue"; y: firstY
         anchors.horizontalCenter: parent.horizontalCenter
     }
 
@@ -67,26 +74,25 @@ Item {
 
     states: [
         State { name: "start"; when: statenum == 1
-            PropertyChanges { target: animatedrect; color: "blue"; y: 300 }
+            PropertyChanges { target: animatedrect; color: "blue"; y: firstY }
             PropertyChanges { target: sequentialanimationelementtest
                 testtext: "This square will be animated in a sequence.\n"+
                 "The next step will see it move quickly down the display, then slowly change its color to green";
             }
         },
         State { name: "firstchange"; when: statenum == 2
-            PropertyChanges { target: sequentialanimationelement; running: true }
+            StateChangeScript { script: { firstduration = 1000; secondduration = 3000; startanimationtimer.start() } }
             PropertyChanges { target: sequentialanimationelementtest
-                testtext: "The square should have moved quickly and also recolored slowly\n"+
-                "Next, it will recolor quickly and move slowly back to it's original position at the same time"
+                testtext: "The square should have moved quickly and then recolored slowly\n"+
+                "Next, it will move slowly and recolor to blue, in sequence."
             }
         },
         State { name: "secondchange"; when: statenum == 3
-            StateChangeScript { script: { firstduration = 3000; secondduration = 1000 } }
-            PropertyChanges { target: movement; to: 300 }
+            StateChangeScript { script: { firstduration = 3000; secondduration = 1000; startanimationtimer.start() } }
+            PropertyChanges { target: movement; to: firstY }
             PropertyChanges { target: recolor; to: "blue" }
-            PropertyChanges { target: sequentialanimationelement; running: true }
             PropertyChanges { target: sequentialanimationelementtest
-                testtext: "The square should have moved slowly and also recolored quickly\n"+
+                testtext: "The square should have moved slowly and then recolored quickly\n"+
                 "Advance to restart the test"
             }
         }
index ea03a48..43aea92 100644 (file)
@@ -63,7 +63,7 @@ Item {
             }
             Rectangle {
                 id: button
-                width: 100; height: 30; radius: 5; border.color: "black"; color: clicky.pressed ? syspal.highlight : syspal.button
+                width: 150; height: 50; radius: 5; border.color: "black"; color: clicky.pressed ? syspal.highlight : syspal.button
                 Behavior on color { ColorAnimation { duration: 500 } }
                 anchors { left: parent.left; top: parent.top; leftMargin: 10; topMargin: 30 }
                 Text { anchors.centerIn: parent; text: "Button"; color: syspal.buttonText }
@@ -76,7 +76,7 @@ Item {
     }
 
     SystemTestHelp { id: helpbubble; visible: statenum != 0
-        anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 100 }
+        anchors { bottom: parent.bottom; horizontalCenter: parent.horizontalCenter; bottomMargin: 50 }
     }
     BugPanel { id: bugpanel }
 
@@ -85,7 +85,7 @@ Item {
             PropertyChanges { target: systempaletteelementtest
                 testtext: "This is an mock application shaded with the help of the SystemPalette element.\n"+
                 "The colors of the menu bar, menu text and button should mimic that of the OS it is running on.\n"+
-                "Pressing the lablelled button should shade it to the system highlight color." }
+                "Pressing the labelled button should shade it to the system highlight color." }
         }
     ]
 
index 3b34043..c25d8dc 100644 (file)
@@ -50,7 +50,9 @@ Item {
     Rectangle {
         id: texteditelementbackground
         color: "green"; height: 150; width: parent.width *.8; border.color: "gray"; opacity: 0.7; radius: 5; clip: true
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: secondarybackground.top
+        anchors.bottomMargin: 10
 
         TextEdit {
             id: texteditelement
@@ -63,8 +65,8 @@ Item {
 
     Rectangle {
         id: secondarybackground
-        color: "lightgray"; border.color: "gray"; opacity: 0.7; radius: 5; height: 150; width: parent.width *.8
-        anchors { top: texteditelementbackground.bottom; topMargin: 50; horizontalCenter: parent.horizontalCenter }
+        color: "lightgray"; border.color: "gray"; opacity: 0.7; radius: 5; height: 50; width: parent.width *.8
+        anchors { bottom: parent.bottom; bottomMargin: 15; horizontalCenter: parent.horizontalCenter }
 
         TextEdit {
             id: secondary
index 35980ce..bfdcc2e 100644 (file)
@@ -49,7 +49,9 @@ Item {
     Text {
         id: textelement
         property int pseudopointsize: 12
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 15
         height: 200; width: parent.width *.8; wrapMode: Text.WordWrap; font.pointSize: 12
         text: "Hello, my name is Text"; horizontalAlignment: Text.AlignHCenter; textFormat: Text.PlainText
         Behavior on font.pointSize { NumberAnimation { duration: 1000 } }
index 3b79657..30da071 100644 (file)
@@ -49,7 +49,9 @@ Item {
     Rectangle {
         id: textinputelementbackground
         color: "green"; height: 50; width: parent.width *.8; border.color: "gray"; opacity: 0.7; radius: 5
-        anchors.centerIn: parent
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.bottom: secondarybackground.top
+        anchors.bottomMargin: 10
         TextInput {
             id: textinputelement
             font.pointSize: 12; width: parent.width; text: ""; horizontalAlignment: Text.AlignHCenter
@@ -62,7 +64,7 @@ Item {
     Rectangle {
         id: secondarybackground
         color: "lightgray"; border.color: "gray"; opacity: 0.7; radius: 5; height: 50; width: parent.width *.8
-        anchors { top: textinputelementbackground.bottom; topMargin: 100; horizontalCenter: parent.horizontalCenter }
+        anchors { bottom: parent.bottom; bottomMargin: 15; horizontalCenter: parent.horizontalCenter }
 
         TextInput {
             id: secondary