qiurui
/
qtdeclarative
mirror of https://github.com/qt/qtdeclarative.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Clean up visuals of elements test 

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>
This commit is contained in:
Damian Jansen 2012-05-15 14:32:07 +10:00 committed by Qt by Nokia
parent 486ec88d2b
commit f7e3a33cb8
24 changed files with 118 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
tests/testapplications/elements/content/AnimatedImageElement.qml
View 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 } }

4
tests/testapplications/elements/content/BorderImageElement.qml
View 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 }

7
tests/testapplications/elements/content/ColumnElement.qml
View 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 {

4
tests/testapplications/elements/content/DoubleValidatorElement.qml
View 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

4
tests/testapplications/elements/content/FlickableElement.qml
View 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

4
tests/testapplications/elements/content/FlipableElement.qml
View 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 {

15
tests/testapplications/elements/content/FlowElement.qml
View 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"+

4
tests/testapplications/elements/content/FontLoaderElement.qml
View 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
}

6
tests/testapplications/elements/content/GridElement.qml
View 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 }

4
tests/testapplications/elements/content/ImageElement.qml
View 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 {

4
tests/testapplications/elements/content/IntValidatorElement.qml
View 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

4
tests/testapplications/elements/content/ListViewElement.qml
View 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

9
tests/testapplications/elements/content/MouseAreaElement.qml
View 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

22
tests/testapplications/elements/content/ParallelAnimationElement.qml
View 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"
}
}

6
tests/testapplications/elements/content/RectangleElement.qml
View 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 } }

4
tests/testapplications/elements/content/RegExpValidatorElement.qml
View 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

17
tests/testapplications/elements/content/RepeaterElement.qml
View 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 } }
}

4
tests/testapplications/elements/content/RowElement.qml
View 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 {

4
tests/testapplications/elements/content/ScaleElement.qml
View 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

26
tests/testapplications/elements/content/SequentialAnimationElement.qml
View 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"
}
}

6
tests/testapplications/elements/content/SystemPaletteElement.qml
View 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." }
}
]

8
tests/testapplications/elements/content/TextEditElement.qml
View 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

4
tests/testapplications/elements/content/TextElement.qml
View 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 } }

6
tests/testapplications/elements/content/TextInputElement.qml
View 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