examples/quick/positioners: Colors changed and layout obeys screen resolution

Change-Id: I61b6358d6d5dff4cc9a14f8774b1c3597e83b550
Reviewed-by: Martin Smith <martin.smith@digia.com>

3 files changed, 210 insertions, 164 deletions

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
--- a/examples/quick/positioners/doc/images/qml-positioners-example.png
+++ b/examples/quick/positioners/doc/images/qml-positioners-example.png
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 }
     }
 }