From 66a4894e0ef252bb5085b705fbdae96ab3b61369 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kari=20Hautam=C3=A4ki?= Date: Wed, 24 Sep 2014 10:05:02 +0300 Subject: examples/quick/positioners: Colors changed and layout obeys screen resolution Change-Id: I61b6358d6d5dff4cc9a14f8774b1c3597e83b550 Reviewed-by: Martin Smith --- .../doc/images/qml-positioners-example.png | Bin 17947 -> 5687 bytes .../positioners/positioners-attachedproperties.qml | 202 ++++++++++++--------- .../quick/positioners/positioners-transitions.qml | 172 ++++++++++-------- 3 files changed, 210 insertions(+), 164 deletions(-) (limited to 'examples/quick') diff --git a/examples/quick/positioners/doc/images/qml-positioners-example.png b/examples/quick/positioners/doc/images/qml-positioners-example.png index 0c02f4a56a..d835aa433f 100644 Binary files a/examples/quick/positioners/doc/images/qml-positioners-example.png and b/examples/quick/positioners/doc/images/qml-positioners-example.png differ diff --git a/examples/quick/positioners/positioners-attachedproperties.qml b/examples/quick/positioners/positioners-attachedproperties.qml index 753e553c7b..b5c6e57b2f 100644 --- a/examples/quick/positioners/positioners-attachedproperties.qml +++ b/examples/quick/positioners/positioners-attachedproperties.qml @@ -39,97 +39,127 @@ ****************************************************************************/ import QtQuick 2.0 +import QtQuick.Controls 1.1 Rectangle { - width: 320 - height: 480 - - // Create column with four rectangles, the fourth one is hidden - Column { - id: column - - //! [0] - Rectangle { - id: red - color: "red" - width: 100 - height: 100 - - Text { - anchors.left: parent.right - anchors.leftMargin: 20 - anchors.verticalCenter: parent.verticalCenter - text: "Index: " + parent.Positioner.index - + (parent.Positioner.isFirstItem ? " (First)" : "") - + (parent.Positioner.isLastItem ? " (Last)" : "") - } - - // When mouse is clicked, display the values of the positioner - MouseArea { - anchors.fill: parent - onClicked: column.showInfo(red.Positioner) - } - } - //! [0] - - Rectangle { - id: green - color: "green" - width: 100 - height: 100 - - Text { - anchors.left: parent.right - anchors.leftMargin: 20 - anchors.verticalCenter: parent.verticalCenter - text: "Index: " + parent.Positioner.index - + (parent.Positioner.isFirstItem ? " (First)" : "") - + (parent.Positioner.isLastItem ? " (Last)" : "") - } - - // When mouse is clicked, display the values of the positioner - MouseArea { - anchors.fill: parent - onClicked: column.showInfo(green.Positioner) - } - } + id: page - Rectangle { - id: blue - color: "blue" - width: 100 - height: 100 - - Text { - anchors.left: parent.right - anchors.leftMargin: 20 - anchors.verticalCenter: parent.verticalCenter - text: "Index: " + parent.Positioner.index - + (parent.Positioner.isFirstItem ? " (First)" : "") - + (parent.Positioner.isLastItem ? " (Last)" : "") - } - - // When mouse is clicked, display the values of the positioner - MouseArea { - anchors.fill: parent - onClicked: column.showInfo(blue.Positioner) - } - } + property real ratio: width / 320 < height / 440 ? width / 320 : height / 440 + property int elementSpacing: 6.3 * ratio - // This rectangle is not visible, so it doesn't have a positioner value - Rectangle { - color: "black" - width: 100 - height: 100 - visible: false + width: 320 + height: 440 + + Button { + anchors.top: parent.top + anchors.right: parent.right + anchors.margins: 10 + text: hidingRect.visible ? "Hide" : "Show" + onClicked: hidingRect.visible = !hidingRect.visible } - // Print the index of the child item in the positioner and convenience - // properties showing if it's the first or last item. - function showInfo(positioner) { - console.log("Item Index = " + positioner.index) - console.log(" isFirstItem = " + positioner.isFirstItem) - console.log(" isLastItem = " + positioner.isLastItem) + // Create column with four rectangles, the fourth one is hidden + Column { + id: column + + anchors.top: parent.top + anchors.left: parent.left + anchors.leftMargin: page.width / 32 + anchors.topMargin: page.height / 48 + spacing: elementSpacing + + //! [0] + Rectangle { + id: green + color: "#80c342" + width: 100 * ratio + height: 100 * ratio + + Text { + anchors.left: parent.right + anchors.leftMargin: 20 + anchors.verticalCenter: parent.verticalCenter + text: "Index: " + parent.Positioner.index + + (parent.Positioner.isFirstItem ? " (First)" : "") + + (parent.Positioner.isLastItem ? " (Last)" : "") + } + + // When mouse is clicked, display the values of the positioner + MouseArea { + anchors.fill: parent + onClicked: column.showInfo(green.Positioner) + } + } + //! [0] + + Rectangle { + id: blue + color: "#14aaff" + width: 100 * ratio + height: 100 * ratio + + Text { + anchors.left: parent.right + anchors.leftMargin: 20 + anchors.verticalCenter: parent.verticalCenter + text: "Index: " + parent.Positioner.index + + (parent.Positioner.isFirstItem ? " (First)" : "") + + (parent.Positioner.isLastItem ? " (Last)" : "") + } + + // When mouse is clicked, display the values of the positioner + MouseArea { + anchors.fill: parent + onClicked: column.showInfo(blue.Positioner) + } + } + + Rectangle { + id: purple + color: "#6400aa" + width: 100 * ratio + height: 100 * ratio + + Text { + anchors.left: parent.right + anchors.leftMargin: 20 + anchors.verticalCenter: parent.verticalCenter + text: "Index: " + parent.Positioner.index + + (parent.Positioner.isFirstItem ? " (First)" : "") + + (parent.Positioner.isLastItem ? " (Last)" : "") + } + + // When mouse is clicked, display the values of the positioner + MouseArea { + anchors.fill: parent + onClicked: column.showInfo(purple.Positioner) + } + } + + // This rectangle is not visible, so it doesn't have a positioner value + Rectangle { + id: hidingRect + color: "#006325" + width: 100 * ratio + height: 100 * ratio + visible: false + + Text { + anchors.left: parent.right + anchors.leftMargin: 20 + anchors.verticalCenter: parent.verticalCenter + text: "Index: " + parent.Positioner.index + + (parent.Positioner.isFirstItem ? " (First)" : "") + + (parent.Positioner.isLastItem ? " (Last)" : "") + } + } + + // Print the index of the child item in the positioner and convenience + // properties showing if it's the first or last item. + function showInfo(positioner) { + console.log("Item Index = " + positioner.index) + console.log(" isFirstItem = " + positioner.isFirstItem) + console.log(" isLastItem = " + positioner.isLastItem) + } } - } } diff --git a/examples/quick/positioners/positioners-transitions.qml b/examples/quick/positioners/positioners-transitions.qml index 8341d6c442..f65db86cca 100644 --- a/examples/quick/positioners/positioners-transitions.qml +++ b/examples/quick/positioners/positioners-transitions.qml @@ -40,10 +40,16 @@ import QtQuick 2.0 -Rectangle { +Item { id: page - width: 320; height: 480 + property real effectiveOpacity: 1.0 + property real ratio: width / 320 < height / 440 ? width / 320 : height / 440 + property int smallSize: 45 * ratio + property int bigSize: 2 * smallSize + property int elementSpacing: 0.14 * smallSize + + anchors.fill: parent Timer { interval: 2000 @@ -53,10 +59,16 @@ Rectangle { } Column { - y: 0 + anchors { + left: parent.left + leftMargin: page.width / 32 + top: parent.top + topMargin: page.height / 48 + } + spacing: elementSpacing populate: Transition { - NumberAnimation { properties: "x,y"; from: 200; duration: 1500; easing.type: Easing.OutBounce } + NumberAnimation { properties: "x,y"; from: 200; duration: 100; easing.type: Easing.OutBounce } } add: Transition { NumberAnimation { properties: "y"; easing.type: Easing.OutQuad } @@ -65,41 +77,45 @@ Rectangle { NumberAnimation { properties: "y"; easing.type: Easing.OutBounce } } - Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "#80c342"; width: bigSize; height: smallSize } Rectangle { - id: blueV1 + id: greenV1 visible: opacity != 0 - width: 100; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 + width: bigSize; height: smallSize + color: "#006325" + border.color: "transparent" Behavior on opacity { NumberAnimation {} } opacity: effectiveOpacity } - Rectangle { color: "green"; width: 100; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "#14aaff"; width: bigSize; height: smallSize } Rectangle { - id: blueV2 + id: greenV2 visible: opacity != 0 - width: 100; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 + width: bigSize; height: smallSize + color: "#006325" + border.color: "transparent" Behavior on opacity { NumberAnimation {} } opacity: effectiveOpacity } - Rectangle { color: "orange"; width: 100; height: 50; border.color: "black"; radius: 15 } - Rectangle { color: "red"; width: 100; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "#6400aa"; width: bigSize; height: smallSize } + Rectangle { color: "#80c342"; width: bigSize; height: smallSize } } Row { - y: 320 + anchors { + left: page.left + leftMargin: page.width / 32 + bottom: page.bottom + bottomMargin: page.height / 48 + } + spacing: elementSpacing populate: Transition { - NumberAnimation { properties: "x,y"; from: 200; duration: 1500; easing.type: Easing.OutBounce } + NumberAnimation { properties: "x,y"; from: 200; duration: 100; easing.type: Easing.OutBounce } } add: Transition { NumberAnimation { properties: "x"; easing.type: Easing.OutQuad } @@ -108,42 +124,43 @@ Rectangle { NumberAnimation { properties: "x"; easing.type: Easing.OutBounce } } - Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 } + Rectangle { color: "#80c342"; width: smallSize; height: bigSize } Rectangle { id: blueH1 visible: opacity != 0 - width: 50; height: 100 - color: "lightsteelblue" - border.color: "black" - radius: 15 + width: smallSize; height: bigSize + color: "#006325" + border.color: "transparent" Behavior on opacity { NumberAnimation {} } opacity: effectiveOpacity } - Rectangle { color: "green"; width: 50; height: 100; border.color: "black"; radius: 15 } + Rectangle { color: "#14aaff"; width: smallSize; height: bigSize } Rectangle { - id: blueH2 + id: greenH2 visible: opacity != 0 - width: 50; height: 100 - color: "lightsteelblue" - border.color: "black" - radius: 15 + width: smallSize; height: bigSize + color: "#006325" + border.color: "transparent" Behavior on opacity { NumberAnimation {} } opacity: effectiveOpacity } - Rectangle { color: "orange"; width: 50; height: 100; border.color: "black"; radius: 15 } - Rectangle { color: "red"; width: 50; height: 100; border.color: "black"; radius: 15 } + Rectangle { color: "#6400aa"; width: smallSize; height: bigSize } + Rectangle { color: "#80c342"; width: smallSize; height: bigSize } } Grid { - x: 120; y: 0 + anchors.top: parent.top + anchors.topMargin: page.height / 48 + anchors.left: flow.left columns: 3 + spacing: elementSpacing populate: Transition { - NumberAnimation { properties: "x,y"; from: 200; duration: 1500; easing.type: Easing.OutBounce } + NumberAnimation { properties: "x,y"; from: 200; duration: 100; easing.type: Easing.OutBounce } } add: Transition { NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } @@ -152,53 +169,55 @@ Rectangle { NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce } } - - Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "#80c342"; width: smallSize; height: smallSize } Rectangle { - id: blueG1 + id: greenG1 visible: opacity != 0 - width: 50; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 + width: smallSize; height: smallSize + color: "#006325" + border.color: "transparent" Behavior on opacity { NumberAnimation {} } opacity: effectiveOpacity } - Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "#14aaff"; width: smallSize; height: smallSize } Rectangle { - id: blueG2 + id: greenG2 visible: opacity != 0 - width: 50; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 + width: smallSize; height: smallSize + color: "#006325" + border.color: "transparent" Behavior on opacity { NumberAnimation {} } opacity: effectiveOpacity } - Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "#6400aa"; width: smallSize; height: smallSize } Rectangle { - id: blueG3 + id: greenG3 visible: opacity != 0 - width: 50; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 + width: smallSize; height: smallSize + color: "#006325" + border.color: "transparent" Behavior on opacity { NumberAnimation {} } opacity: effectiveOpacity } - Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } - Rectangle { color: "green"; width: 50; height: 50; border.color: "black"; radius: 15 } - Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "#80c342"; width: smallSize; height: smallSize } + Rectangle { color: "#14aaff"; width: smallSize; height: smallSize } + Rectangle { color: "#6400aa"; width: smallSize; height: smallSize } } Flow { - x: 120; y: 160; width: 150 + id: flow + + anchors.right: page.right + anchors.rightMargin: page.width / 32 + y: 2 * bigSize + width: 1.8 * bigSize + spacing: elementSpacing //! [move] move: Transition { @@ -214,49 +233,46 @@ Rectangle { //! [populate] populate: Transition { - NumberAnimation { properties: "x,y"; from: 200; duration: 1500; easing.type: Easing.OutBounce } + NumberAnimation { properties: "x,y"; from: 200; duration: 100; easing.type: Easing.OutBounce } } //! [populate] - Rectangle { color: "red"; width: 50; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "#80c342"; width: smallSize; height: smallSize } Rectangle { - id: blueF1 + id: greenF1 visible: opacity != 0 - width: 60; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 + width: 0.6 * bigSize; height: smallSize + color: "#006325" + border.color: "transparent" Behavior on opacity { NumberAnimation {} } opacity: effectiveOpacity } - Rectangle { color: "green"; width: 30; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "#14aaff"; width: 0.3 * bigSize; height: smallSize } Rectangle { - id: blueF2 + id: greenF2 visible: opacity != 0 - width: 60; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 + width: 0.6 * bigSize; height: smallSize + color: "#006325" + border.color: "transparent" Behavior on opacity { NumberAnimation {} } opacity: effectiveOpacity } - Rectangle { color: "orange"; width: 50; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "#6400aa"; width: smallSize; height: smallSize } Rectangle { - id: blueF3 + id: greenF3 visible: opacity != 0 - width: 40; height: 50 - color: "lightsteelblue" - border.color: "black" - radius: 15 + width: 0.4 * bigSize; height: smallSize + color: "#006325" + border.color: "transparent" Behavior on opacity { NumberAnimation {} } opacity: effectiveOpacity } - Rectangle { color: "red"; width: 80; height: 50; border.color: "black"; radius: 15 } + Rectangle { color: "#80c342"; width: 0.8 * bigSize; height: smallSize } } } -- cgit v1.2.3