Updates from the launcher repo

7 files changed, 315 insertions, 17 deletions

diff --git a/basicsuite/About Qt on Android/AboutBoot2Qt.qml b/basicsuite/About Qt on Android/AboutBoot2Qt.qml
index e6d614e..6ffac40 100644
--- a/basicsuite/About Qt on Android/AboutBoot2Qt.qml
+++ b/basicsuite/About Qt on Android/AboutBoot2Qt.qml
@@ -25,7 +25,7 @@ Column {
     Column {
         id: diagram
         spacing: 1
-        width: parent.width * 0.8
+        width: parent.width * 0.5
         anchors.horizontalCenter: parent.horizontalCenter
         Box { text: "Application"; accentColor: "coral" }
         Box { text: "Qt Framework"; accentColor: Qt.rgba(0.64, 0.82, 0.15) }
diff --git a/basicsuite/About Qt on Android/Box.qml b/basicsuite/About Qt on Android/Box.qml
index fd63a00..cfbb995 100644
--- a/basicsuite/About Qt on Android/Box.qml
+++ b/basicsuite/About Qt on Android/Box.qml
@@ -6,7 +6,7 @@ Rectangle {
     width: parent.width
     height: label.font.pixelSize * 3
 
-    radius: height * 0.2
+    radius: 4
 
     antialiasing: true
 
diff --git a/basicsuite/About Qt on Android/QtForAndroid.qml b/basicsuite/About Qt on Android/QtForAndroid.qml
index d0c9d97..a1ab010 100644
--- a/basicsuite/About Qt on Android/QtForAndroid.qml
+++ b/basicsuite/About Qt on Android/QtForAndroid.qml
@@ -30,7 +30,7 @@ Column {
     Column {
         id: diagram
         spacing: 1
-        width: parent.width * 0.8
+        width: parent.width * 0.66
         anchors.horizontalCenter: parent.horizontalCenter
         Box { text: "Application"; accentColor: "coral" }
         Box { text: "Qt for Android"; accentColor: Qt.rgba(0.64, 0.82, 0.15) }
diff --git a/basicsuite/About Qt on Android/Title.qml b/basicsuite/About Qt on Android/Title.qml
index 5a462fe..8fb13cc 100644
--- a/basicsuite/About Qt on Android/Title.qml
+++ b/basicsuite/About Qt on Android/Title.qml
@@ -4,4 +4,5 @@ Text {
     font.pixelSize: engine.titleFontSize()
     font.italic: true
     color: "white"
+    anchors.horizontalCenter: parent.horizontalCenter
 }
diff --git a/basicsuite/About Qt on Android/main.qml b/basicsuite/About Qt on Android/main.qml
index c952500..6586811 100644
--- a/basicsuite/About Qt on Android/main.qml
+++ b/basicsuite/About Qt on Android/main.qml
@@ -1,4 +1,5 @@
 import QtQuick 2.0
+import QtQuick.Particles 2.0
 
 Item {
     id: root
@@ -13,12 +14,12 @@ Item {
 
     Flickable {
         id: flick
-        property real inertia: 0.2
+        property real inertia: 0.4
 
         property real cellWidth;
         property real cellHeight;
 
-        width: parent.width * 2 / 3
+        width: parent.width
         height: parent.height
         anchors.horizontalCenter: parent.horizontalCenter
 
@@ -26,17 +27,23 @@ Item {
 
         flickableDirection: Flickable.VerticalFlick
 
+        property real topOvershoot: Math.max(0, contentItem.y);
+        property real bottomOvershoot: Math.max(0, root.height - (contentItem.height + contentItem.y));
+//        onTopOvershootChanged: print("Top Overshoot:", topOvershoot);
+//        onBottomOvershootChanged: print("Bottom Overshoot:", bottomOvershoot);
+
         Item {
             id: shiftTrickery
 
-            width: content.width
+            width: flick.width
             height: content.height
 
             Column {
                 id: content;
 
                 y: -flick.contentItem.y + offsetY;
-                width: flick.width
+                width: flick.width * 2 / 3
+                anchors.horizontalCenter: parent.horizontalCenter
 
                 property real offsetY: 0;
                 property real inertia: flick.inertia;
@@ -71,4 +78,58 @@ Item {
 
         }
     }
+
+    ParticleSystem {
+
+        anchors.fill: parent
+
+        ImageParticle {
+            id: imageParticle
+            source: "particle.png"
+            color: "#80c342"
+            alpha: 0
+            colorVariation: 0.3
+            entryEffect: ImageParticle.None
+        }
+
+        Emitter {
+            id: topEmitter
+            width: root.width
+            height: 1
+            x: 0
+            y: -1
+            shape: EllipseShape { fill: true }
+
+            emitRate: 300
+            lifeSpan: 1000
+            size: 20
+            sizeVariation: 4
+            endSize: 0
+
+            enabled: flick.topOvershoot > 0
+
+            velocity: PointDirection { xVariation: 10; yVariation: 50; y: Math.sqrt(flick.topOvershoot) * 10; }
+            acceleration: PointDirection { y: 50 }
+        }
+
+        Emitter {
+            id: bottomEmitter
+            width: root.width
+            height: 1
+            x: 0
+            y: root.height + 1
+            shape: EllipseShape { fill: true }
+
+            emitRate: 300
+            lifeSpan: 1000
+            size: 20
+            sizeVariation: 4
+            endSize: 0
+
+            enabled: flick.bottomOvershoot > 0
+
+            velocity: PointDirection { xVariation: 10; yVariation: -50; y: Math.sqrt(flick.bottomOvershoot) * -10; }
+            acceleration: PointDirection { y: -50 }
+        }
+    }
 }
diff --git a/basicsuite/About Qt on Android/particle.png b/basicsuite/About Qt on Android/particle.png
new file mode 100644
index 0000000..5c83896
--- /dev/null
+++ b/basicsuite/About Qt on Android/particle.png
diff --git a/basicsuite/Photo Gallery/main.qml b/basicsuite/Photo Gallery/main.qml
index 13183d7..d3bedba 100644
--- a/basicsuite/Photo Gallery/main.qml
+++ b/basicsuite/Photo Gallery/main.qml
@@ -1,16 +1,252 @@
 import QtQuick 2.0
+import Qt.labs.folderlistmodel 1.0
 
-Rectangle {
-    width: 200
-    height: 200
-    color: "black"
+Item {
+    id: root
 
-    Text {
+    width: 320
+    height: 480
+
+    Rectangle {
+        anchors.fill: parent
+        color: "black"
+    }
+
+    FolderListModel {
+        id: imageList
+        folder: "/data/images"
+        nameFilters: ["*.png", "*.jpg"]
+    }
+
+    GridView {
+        id: grid
+
+        anchors.fill: parent
+
+        cellHeight: root.width / 3
+        cellWidth: cellHeight
+
+        model: imageList
+
+//        NumberAnimation on contentY { from: 0; to: 2000; duration: 3000; loops: 1; easing.type: Easing.InOutCubic }
+
+        delegate: Rectangle {
+
+            id: box
+            color: "white"
+            width: grid.cellWidth
+            height: grid.cellHeight
+            scale: 0.97
+            rotation: 2;
+            antialiasing: true
+
+            Rectangle {
+                id: sepia
+                color: "#b08050"
+                width: image.width
+                height: image.height
+                anchors.centerIn: parent
+
+                property real fakeOpacity: image.status == Image.Ready ? 1.5 : 0
+                Behavior on fakeOpacity { NumberAnimation { duration: 1000 } }
+
+                opacity: fakeOpacity
+                visible: image.opacity <= 0.99;
+                antialiasing: true
+            }
+
+            Image {
+                id: image
+                source: filePath
+                width: grid.cellWidth * 0.9
+                height: grid.cellHeight * 0.9
+                anchors.centerIn: sepia
+                asynchronous: true
+                opacity: sepia.fakeOpacity - .5
+                sourceSize.width: width;
+                antialiasing: true
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: {
+                    print("doing stuff..")
+                    root.showBigImage(filePath, box.x - grid.contentX, box.y - grid.contentY, image);
+                }
+            }
+        }
+    }
+
+    function showBigImage(filePath, itemX, itemY, image) {
+        fakeBigImage.x = itemX;
+        fakeBigImage.y = itemY;
+        fakeBigImage.sourceSize = image.sourceSize;
+        fakeBigImage.source = filePath;
+
+        print("painted sizes: ", fakeBigImage.paintedHeight, fakeBigImage.paintedWidth)
+
+        beginEnterLargeAnimation.running = true;
+    }
+
+    property int time: 500;
+    property real xPos: width < height ? 0 : width / 2 - height / 2;
+    property real yPos: width < height ? height / 2 - width / 2: 0;
+    property real size: Math.min(width, height);
+
+    states: [
+        State { name: "grid" },
+        State { name: "enter-large" },
+        State { name: "large" },
+        State { name: "exit-large" }
+    ]
+
+    SequentialAnimation {
+        id: beginEnterLargeAnimation
+        PropertyAction { target: mouseArea; property: "enabled"; value: "true" }
+        PropertyAction { target: fakeBigImage; property: "rotation"; value: 2; }
+        PropertyAction { target: fakeBigImage; property: "scale"; value: 0.97 * 0.9; }
+        PropertyAction { target: fakeBigImage; property: "width"; value: grid.cellWidth; }
+        PropertyAction { target: fakeBigImage; property: "height"; value: grid.cellHeight; }
+        PropertyAction { target: fakeBigImage; property: "visible"; value: true; }
+
+        ParallelAnimation {
+            NumberAnimation { target: fakeBigImage; property: "rotation"; to: 0; duration: root.time; easing.type: Easing.InOutCubic }
+            NumberAnimation { target: fakeBigImage; property: "scale"; to: 1; duration: root.time; easing.type: Easing.InOutCubic }
+            NumberAnimation { target: fakeBigImage; property: "x"; to: root.xPos; duration: root.time; easing.type: Easing.InOutCubic }
+            NumberAnimation { target: fakeBigImage; property: "y"; to: root.yPos; duration: root.time; easing.type: Easing.InOutCubic }
+            NumberAnimation { target: fakeBigImage; property: "width"; to: root.size; duration: root.time; easing.type: Easing.InOutCubic }
+            NumberAnimation { target: fakeBigImage; property: "height"; to: root.size; duration: root.time; easing.type: Easing.InOutCubic }
+            NumberAnimation { target: grid; property: "opacity"; to: 0; duration: root.time; easing.type: Easing.InOutCubic }
+        }
+        ScriptAction {
+            script: {
+
+                bigImage = realBigImageComponent.createObject(root);
+                bigImage.source = fakeBigImage.source;
+            }
+        }
+    }
+
+    property Item bigImage;
+    property real targetRotation: 0;
+    property real targetWidth: 0
+    property real targetHeight: 0
+    property bool bigImageShowing: false;
+
+    SequentialAnimation {
+        id: finalizeEnterLargeAnimation
+        ScriptAction { script: {
+                fakeBigImage.anchors.centerIn = root;
+            }
+        }
+        ParallelAnimation {
+            NumberAnimation { target: bigImage; property: "opacity"; to: 1; duration: root.time; easing.type: Easing.InOutCubic }
+            NumberAnimation { target: fakeBigImage; property: "rotation"; to: root.targetRotation; duration: root.time; easing.type: Easing.InOutCubic }
+            NumberAnimation { target: bigImage; property: "rotation"; to: root.targetRotation; duration: root.time; easing.type: Easing.InOutCubic }
+            NumberAnimation { target: fakeBigImage; property: "width"; to: root.targetWidth; duration: root.time; easing.type: Easing.InOutCubic }
+            NumberAnimation { target: fakeBigImage; property: "height"; to: root.targetHeight; duration: root.time; easing.type: Easing.InOutCubic }
+            NumberAnimation { target: bigImage; property: "width"; to: root.targetWidth; duration: root.time; easing.type: Easing.InOutCubic }
+            NumberAnimation { target: bigImage; property: "height"; to: root.targetHeight; duration: root.time; easing.type: Easing.InOutCubic }
+        }
+        PropertyAction { target: fakeBigImage; property: "visible"; value: false }
+        PropertyAction { target: root; property: "bigImageShowing"; value: true }
+    }
+
+    SequentialAnimation {
+        id: backToGridAnimation
+        ParallelAnimation {
+            NumberAnimation { target: bigImage; property: "opacity"; to: 0; duration: root.time; easing.type: Easing.InOutCubic }
+            NumberAnimation { target: grid; property: "opacity"; to: 1; duration: root.time; easing.type: Easing.InOutCubic }
+        }
+        PropertyAction { target: fakeBigImage; property: "source"; value: "" }
+        PropertyAction { target: root; property: "bigImageShowing"; value: false }
+        PropertyAction { target: mouseArea; property: "enabled"; value: false }
+        ScriptAction { script: {
+                bigImage.destroy();
+                fakeBigImage.anchors.centerIn = undefined
+            }
+        }
+    }
+
+    Image {
+        id: fakeBigImage
+        width: grid.cellWidth
+        height: grid.cellHeight
+        visible: false
+        antialiasing: true
+    }
+
+    Component {
+        id: realBigImageComponent
+
+        Image {
+            id: realBigImage
+
+            anchors.centerIn: parent;
+
+            asynchronous: true;
+
+            // Bound size to the current display size, to try to avoid any GL_MAX_TEXTURE_SIZE issues.
+            sourceSize: Qt.size(Math.max(root.width, root.height), Math.max(root.width, root.height));
+
+            opacity: 0
+            onStatusChanged: {
+
+                if (status != Image.Ready)
+                    return;
+
+                var imageIsLandscape = width > height;
+                var screenIsLandscape = root.width > root.height;
+
+                var targetScale;
+
+                // Rotation needed...
+                if (imageIsLandscape != screenIsLandscape) {
+                    root.targetRotation = 90;
+                    var aspect = width / height
+                    var screenAspect = root.height / root.width
+                    print("Aspect ratios in portrait: ", aspect, screenAspect);
+
+                    if (aspect > screenAspect) {
+                        targetScale = root.height / width
+                    } else {
+                        targetScale = root.width / height;
+                    }
+                } else {
+                    root.targetRotation = 0;
+                    var aspect = height / width;
+                    var screenAspect = root.height / root.width
+                    print("Aspect ratios in portrait: ", aspect, screenAspect);
+
+                    if (aspect > screenAspect) {
+                        targetScale = root.height / height
+                    } else {
+                        targetScale = root.width / width;
+                    }
+                }
+
+                root.targetWidth = width * targetScale
+                root.targetHeight = height * targetScale;
+
+                width = root.size
+                height = root.size;
+
+                print("BigImage size: ", width, height, targetWidth, targetHeight);
+
+                finalizeEnterLargeAnimation.running = true;
+            }
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
         anchors.fill: parent
-        color: "white"
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        text: "More to come..."
-        font.pixelSize: Math.min(width, height) * 0.03
+        enabled: false
+
+        onClicked: {
+            if (root.bigImageShowing)
+                backToGridAnimation.running = true;
+        }
     }
+
 }