Column, Row, Grid, Flow: add support for padding

[ChangeLog][QtQuick] Added padding, leftPadding, topPadding,
rightPadding and bottomPadding properties in Positioners,
including Column, Row, Grid and Flow.

Task-number: QTBUG-41559
Change-Id: If3be7b2243a79c01dad0a5600e22d30eeea43c8a
Reviewed-by: Jan Arve Sæther <jan-arve.saether@theqtcompany.com>

7 files changed, 468 insertions, 3 deletions

diff --git a/tests/auto/quick/qquickpositioners/data/allInvisible.qml b/tests/auto/quick/qquickpositioners/data/allInvisible.qml
index 5894171434..3b95a5e1da 100644
--- a/tests/auto/quick/qquickpositioners/data/allInvisible.qml
+++ b/tests/auto/quick/qquickpositioners/data/allInvisible.qml
@@ -1,4 +1,4 @@
-import QtQuick 2.0
+import QtQuick 2.6
 
 Item{
     width: 400
@@ -41,4 +41,42 @@ Item{
             visible: false
         }
     }
+    Grid{
+        spacing: 20
+        objectName: "grid"
+        Item{
+            width: 0
+            height: 20
+            visible: false
+        }
+        Item{
+            width: 20
+            height: 0
+            visible: false
+        }
+        Item{
+            width: 20
+            height: 20
+            visible: false
+        }
+    }
+    Flow{
+        spacing: 20
+        objectName: "flow"
+        Item{
+            width: 0
+            height: 20
+            visible: false
+        }
+        Item{
+            width: 20
+            height: 0
+            visible: false
+        }
+        Item{
+            width: 20
+            height: 20
+            visible: false
+        }
+    }
 }
diff --git a/tests/auto/quick/qquickpositioners/data/flowtest-padding.qml b/tests/auto/quick/qquickpositioners/data/flowtest-padding.qml
new file mode 100644
index 0000000000..a85e7a5c52
--- /dev/null
+++ b/tests/auto/quick/qquickpositioners/data/flowtest-padding.qml
@@ -0,0 +1,44 @@
+import QtQuick 2.6
+
+Item {
+    width: 90
+    height: 480
+    property bool testRightToLeft: false
+
+    Flow {
+        objectName: "flow"
+        width: parent.width
+        layoutDirection: testRightToLeft ? Qt.RightToLeft : Qt.LeftToRight
+        padding: 1; topPadding: 2; leftPadding: 3; rightPadding: 4; bottomPadding: 5
+        Rectangle {
+            objectName: "one"
+            color: "red"
+            width: 50
+            height: 50
+        }
+        Rectangle {
+            objectName: "two"
+            color: "green"
+            width: 20
+            height: 50
+        }
+        Rectangle {
+            objectName: "three"
+            color: "blue"
+            width: 50
+            height: 20
+        }
+        Rectangle {
+            objectName: "four"
+            color: "cyan"
+            width: 50
+            height: 50
+        }
+        Rectangle {
+            objectName: "five"
+            color: "magenta"
+            width: 10
+            height: 10
+        }
+    }
+}
diff --git a/tests/auto/quick/qquickpositioners/data/gridtest-padding.qml b/tests/auto/quick/qquickpositioners/data/gridtest-padding.qml
new file mode 100644
index 0000000000..46244ecef5
--- /dev/null
+++ b/tests/auto/quick/qquickpositioners/data/gridtest-padding.qml
@@ -0,0 +1,47 @@
+import QtQuick 2.6
+
+Item {
+    width: 640
+    height: 480
+    property bool testRightToLeft: false
+    property int testHAlignment: Grid.AlignLeft;
+    property int testVAlignment: Grid.AlignTop;
+    Grid {
+        layoutDirection: testRightToLeft ? Qt.RightToLeft : Qt.LeftToRight
+        horizontalItemAlignment: testHAlignment
+        verticalItemAlignment: testVAlignment
+        objectName: "grid"
+        columns: 3
+        padding: 1; topPadding: 1; leftPadding: 1; rightPadding: 1; bottomPadding: 1
+        Rectangle {
+            objectName: "one"
+            color: "red"
+            width: 50
+            height: 50
+        }
+        Rectangle {
+            objectName: "two"
+            color: "green"
+            width: 20
+            height: 50
+        }
+        Rectangle {
+            objectName: "three"
+            color: "blue"
+            width: 30
+            height: 20
+        }
+        Rectangle {
+            objectName: "four"
+            color: "cyan"
+            width: 50
+            height: 50
+        }
+        Rectangle {
+            objectName: "five"
+            color: "magenta"
+            width: 10
+            height: 10
+        }
+    }
+}
diff --git a/tests/auto/quick/qquickpositioners/data/horizontal-padding.qml b/tests/auto/quick/qquickpositioners/data/horizontal-padding.qml
new file mode 100644
index 0000000000..d320c4789f
--- /dev/null
+++ b/tests/auto/quick/qquickpositioners/data/horizontal-padding.qml
@@ -0,0 +1,30 @@
+import QtQuick 2.6
+
+Item {
+    width: 640
+    height: 480
+    property bool testRightToLeft: false
+    Row {
+        objectName: "row"
+        layoutDirection: testRightToLeft ? Qt.RightToLeft : Qt.LeftToRight
+        padding: 1; topPadding: 1; leftPadding: 1; rightPadding: 1; bottomPadding: 1
+        Rectangle {
+            objectName: "one"
+            color: "red"
+            width: 50
+            height: 50
+        }
+        Rectangle {
+            objectName: "two"
+            color: "red"
+            width: 20
+            height: 10
+        }
+        Rectangle {
+            objectName: "three"
+            color: "red"
+            width: 40
+            height: 20
+        }
+    }
+}
diff --git a/tests/auto/quick/qquickpositioners/data/repeatertest-padding.qml b/tests/auto/quick/qquickpositioners/data/repeatertest-padding.qml
new file mode 100644
index 0000000000..577d4ef0b7
--- /dev/null
+++ b/tests/auto/quick/qquickpositioners/data/repeatertest-padding.qml
@@ -0,0 +1,53 @@
+import QtQuick 2.6
+
+Item {
+    width: 640
+    height: 480
+    Row {
+        padding: 1; topPadding: 2; leftPadding: 3; rightPadding: 4; bottomPadding: 5
+        Repeater{ model: 3;
+            delegate: Component {
+                Rectangle {
+                    color: "red"
+                    width: 50
+                    height: 50
+                    z: {
+                        if (index == 0)
+                            return 2;
+                        else if (index == 1)
+                            return 1;
+                        else
+                            return 3;
+                    }
+                    objectName: {
+                        if (index == 0)
+                            return "one";
+                        else if (index == 1)
+                            return "two";
+                        else
+                            return "three";
+                    }
+                }
+            }
+        }
+    }
+
+    //This crashed once (QTBUG-16959) because the repeater ended up on the end of the list
+    //If this grid just instantiates without crashing, then it has not regressed.
+    Grid {
+        id: grid
+        rows: 2
+        flow: Grid.TopToBottom
+
+        Repeater {
+            model: 13
+            Rectangle {
+                color: "goldenrod"
+                width: 100
+                height: 100
+                radius: 10
+                border.width: 1
+            }
+        }
+    }
+}
diff --git a/tests/auto/quick/qquickpositioners/data/repeatertest.qml b/tests/auto/quick/qquickpositioners/data/repeatertest.qml
index d90e1cf160..ae3d961c75 100644
--- a/tests/auto/quick/qquickpositioners/data/repeatertest.qml
+++ b/tests/auto/quick/qquickpositioners/data/repeatertest.qml
@@ -10,8 +10,22 @@ Item {
                     color: "red"
                     width: 50
                     height: 50
-                    z: {if(index == 0){2;}else if(index == 1){1;} else{3;}}
-                    objectName: {if(index == 0){"one";}else if(index == 1){"two";} else{"three";}}
+                    z: {
+                        if (index == 0)
+                            return 2;
+                        else if (index == 1)
+                            return 1;
+                        else
+                            return 3;
+                    }
+                    objectName: {
+                        if (index == 0)
+                            return "one";
+                        else if (index == 1)
+                            return "two";
+                        else
+                            return "three";
+                    }
                 }
             }
         }
diff --git a/tests/auto/quick/qquickpositioners/data/transitions-padding.qml b/tests/auto/quick/qquickpositioners/data/transitions-padding.qml
new file mode 100644
index 0000000000..e3175c480c
--- /dev/null
+++ b/tests/auto/quick/qquickpositioners/data/transitions-padding.qml
@@ -0,0 +1,239 @@
+import QtQuick 2.6
+
+Rectangle {
+    id: root
+    width: 500
+    height: 500
+
+    property int duration: 50
+
+    property real incrementalSize: 5
+
+    property int populateTransitionsDone
+    property int addTransitionsDone
+    property int displaceTransitionsDone
+
+    property var targetTrans_items: new Object()
+    property var targetTrans_targetIndexes: new Array()
+    property var targetTrans_targetItems: new Array()
+
+    property var displacedTrans_items: new Object()
+    property var displacedTrans_targetIndexes: new Array()
+    property var displacedTrans_targetItems: new Array()
+
+    // for QQmlListProperty types
+    function copyList(propList) {
+        var temp = new Array()
+        for (var i=0; i<propList.length; i++)
+            temp.push(propList[i])
+        return temp
+    }
+
+    function checkPos(x, y, name) {
+        if (Qt.point(x, y) == targetItems_transitionFrom)
+            model_targetItems_transitionFrom.addItem(name, "")
+        if (Qt.point(x, y) == displacedItems_transitionVia)
+            model_displacedItems_transitionVia.addItem(name, "")
+    }
+
+    Component.onCompleted: {
+        if (dynamicallyPopulate) {
+            for (var i=0; i<30; i++)
+                testModel.addItem("item " + i, "")
+        }
+    }
+
+    Transition {
+        id: populateTransition
+        enabled: usePopulateTransition
+
+        SequentialAnimation {
+            ScriptAction {
+                script: {
+                    root.targetTrans_items[populateTransition.ViewTransition.item.nameData] = populateTransition.ViewTransition.index
+                    root.targetTrans_targetIndexes.push(populateTransition.ViewTransition.targetIndexes)
+                    root.targetTrans_targetItems.push(root.copyList(populateTransition.ViewTransition.targetItems))
+                }
+            }
+            ParallelAnimation {
+                NumberAnimation { properties: "x"; from: targetItems_transitionFrom.x; duration: root.duration }
+                NumberAnimation { properties: "y"; from: targetItems_transitionFrom.y; duration: root.duration }
+            }
+
+            ScriptAction { script: root.populateTransitionsDone += 1 }
+        }
+    }
+
+    Transition {
+        id: addTransition
+        enabled: enableAddTransition
+
+        SequentialAnimation {
+            ScriptAction {
+                script: {
+                    root.targetTrans_items[addTransition.ViewTransition.item.nameData] = addTransition.ViewTransition.index
+                    root.targetTrans_targetIndexes.push(addTransition.ViewTransition.targetIndexes)
+                    root.targetTrans_targetItems.push(root.copyList(addTransition.ViewTransition.targetItems))
+                }
+            }
+            ParallelAnimation {
+                NumberAnimation { properties: "x"; from: targetItems_transitionFrom.x; duration: root.duration }
+                NumberAnimation { properties: "y"; from: targetItems_transitionFrom.y; duration: root.duration }
+            }
+
+            ScriptAction { script: root.addTransitionsDone += 1 }
+        }
+    }
+
+    Transition {
+        id: displaced
+
+        SequentialAnimation {
+            ScriptAction {
+                script: {
+                    root.displacedTrans_items[displaced.ViewTransition.item.nameData] = displaced.ViewTransition.index
+                    root.displacedTrans_targetIndexes.push(displaced.ViewTransition.targetIndexes)
+                    root.displacedTrans_targetItems.push(root.copyList(displaced.ViewTransition.targetItems))
+                }
+            }
+            ParallelAnimation {
+                NumberAnimation { properties: "x"; duration: root.duration; to: displacedItems_transitionVia.x }
+                NumberAnimation { properties: "y"; duration: root.duration; to: displacedItems_transitionVia.y }
+            }
+            NumberAnimation { properties: "x,y"; duration: root.duration }
+
+            ScriptAction { script: root.displaceTransitionsDone += 1 }
+        }
+
+    }
+
+    Row {
+        objectName: "row"
+
+        property int count: children.length - 1 // omit Repeater
+
+        x: 50; y: 50
+        width: 400; height: 400
+        padding: 1; topPadding: 2; leftPadding: 3; rightPadding: 4; bottomPadding: 5
+        Repeater {
+            objectName: "repeater"
+            model: testedPositioner == "row" ? testModel : undefined
+            Rectangle {
+                property string nameData: name
+                objectName: "wrapper"
+                width: 30 + index*root.incrementalSize
+                height: 30 + index*root.incrementalSize
+                border.width: 1
+                Column {
+                    Text { text: index }
+                    Text { objectName: "name"; text: name }
+                    Text { text: parent.parent.y }
+                }
+                onXChanged: root.checkPos(x, y, name)
+                onYChanged: root.checkPos(x, y, name)
+            }
+        }
+
+        populate: populateTransition
+        add: addTransition
+        move: displaced
+    }
+
+    Column {
+        objectName: "column"
+
+        property int count: children.length - 1 // omit Repeater
+
+        x: 50; y: 50
+        width: 400; height: 400
+        padding: 1; topPadding: 2; leftPadding: 3; rightPadding: 4; bottomPadding: 5
+        Repeater {
+            objectName: "repeater"
+            model: testedPositioner == "column" ? testModel : undefined
+            Rectangle {
+                property string nameData: name
+                objectName: "wrapper"
+                width: 30 + index*root.incrementalSize
+                height: 30 + index*root.incrementalSize
+                border.width: 1
+                Column {
+                    Text { text: index }
+                    Text { objectName: "name"; text: name }
+                    Text { text: parent.parent.y }
+                }
+                onXChanged: root.checkPos(x, y, name)
+                onYChanged: root.checkPos(x, y, name)
+            }
+        }
+
+        populate: populateTransition
+        add: addTransition
+        move: displaced
+    }
+
+    Grid {
+        objectName: "grid"
+
+        property int count: children.length - 1 // omit Repeater
+
+        x: 50; y: 50
+        width: 400; height: 400
+        padding: 1; topPadding: 2; leftPadding: 3; rightPadding: 4; bottomPadding: 5
+        Repeater {
+            objectName: "repeater"
+            model: testedPositioner == "grid" ? testModel : undefined
+            Rectangle {
+                property string nameData: name
+                objectName: "wrapper"
+                width: 30 + index*root.incrementalSize
+                height: 30 + index*root.incrementalSize
+                border.width: 1
+                Column {
+                    Text { text: index }
+                    Text { objectName: "name"; text: name }
+                    Text { text: parent.parent.y }
+                }
+
+                onXChanged: root.checkPos(x, y, name)
+                onYChanged: root.checkPos(x, y, name)
+            }
+        }
+
+        populate: populateTransition
+        add: addTransition
+        move: displaced
+    }
+
+    Flow {
+        objectName: "flow"
+
+        property int count: children.length - 1 // omit Repeater
+
+        x: 50; y: 50
+        width: 400; height: 400
+        padding: 1; topPadding: 2; leftPadding: 3; rightPadding: 4; bottomPadding: 5
+        Repeater {
+            objectName: "repeater"
+            model: testedPositioner == "flow" ? testModel : undefined
+            Rectangle {
+                property string nameData: name
+                objectName: "wrapper"
+                width: 30 + index*root.incrementalSize
+                height: 30 + index*root.incrementalSize
+                border.width: 1
+                Column {
+                    Text { text: index }
+                    Text { objectName: "name"; text: name }
+                    Text { text: parent.parent.x + " " + parent.parent.y }
+                }
+                onXChanged: root.checkPos(x, y, name)
+                onYChanged: root.checkPos(x, y, name)
+            }
+        }
+
+        populate: populateTransition
+        add: addTransition
+        move: displaced
+    }
+}
+