Add home screen example

This is a simple home screen using the TransitionView

Change-Id: Ia5634e8ff9a5d1b8b0897535adff6a3abdffbdff
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

5 files changed, 741 insertions, 1 deletions

diff --git a/examples/TransitionItem/FontAwesome.otf b/examples/TransitionItem/FontAwesome.otf
new file mode 100644
index 0000000..401ec0f
--- /dev/null
+++ b/examples/TransitionItem/FontAwesome.otf
diff --git a/examples/TransitionItem/Icon.qml b/examples/TransitionItem/Icon.qml
new file mode 100644
index 0000000..0a6d4e0
--- /dev/null
+++ b/examples/TransitionItem/Icon.qml
@@ -0,0 +1,165 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.0
+
+Item {
+    id: element1
+    width: 196
+    height: 196
+    property alias text: element.text
+    property string identifer: "069"
+    Rectangle {
+        id: rectangle
+        x: -2
+        y: -2
+        color: "#a6a6a6"
+        radius: 16
+        clip: true
+        anchors.rightMargin: -2
+        anchors.leftMargin: -2
+        anchors.bottomMargin: -2
+        anchors.topMargin: -2
+        anchors.fill: parent
+        z: -1
+
+        Rectangle {
+            id: rectangle1
+            x: -48
+            y: -48
+            width: 300
+            height: 300
+            rotation: 45
+            gradient: Gradient {
+                GradientStop {
+                    position: 0
+                    color: "#33b2bc62"
+                }
+
+                GradientStop {
+                    position: 1
+                    color: "#cc0f4274"
+                }
+            }
+        }
+    }
+
+    onIdentiferChanged: {
+        textLabel.text =String.fromCharCode(parseInt(identifer, 16));
+    }
+    Text {
+        id: textLabel
+        width: 196
+        height: 196
+        renderType: Text.NativeRendering
+
+
+
+
+        FontLoader {
+            id: fontLoader
+            source: "FontAwesome.otf"
+        }
+        font.family: fontLoader.name
+        text: "\uf069"
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        styleColor: "#868686"
+        style: Text.Sunken
+        font.pixelSize: 182
+        color: "#dddddd"
+    }
+
+    Text {
+        id: element
+        color: "#dddddd"
+        text: qsTr("Text")
+        font.bold: true
+        anchors.bottomMargin: -56
+        verticalAlignment: Text.AlignVCenter
+        horizontalAlignment: Text.AlignHCenter
+        anchors.right: parent.right
+        anchors.left: parent.left
+        anchors.bottom: parent.bottom
+        font.pixelSize: 32
+    }
+
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*##^## Designer {
+    D{i:0;height:196;width:196}
+}
+ ##^##*/
diff --git a/examples/TransitionItem/Screen04.ui.qml b/examples/TransitionItem/Screen04.ui.qml
new file mode 100644
index 0000000..59c1b92
--- /dev/null
+++ b/examples/TransitionItem/Screen04.ui.qml
@@ -0,0 +1,518 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+import QtQuick 2.12
+import TransitionItem 1.0
+import TransitionView 1.0
+
+Rectangle {
+    width: 1080
+    height: 1920
+    color: "#060606"
+
+    SimpleIndicator {
+        x: 440
+        y: 1776
+        list: pageList
+    }
+
+    TransitionList {
+        id: pageList
+        intialItem: screen01
+        items: [screen01, screen02, screen03]
+    }
+
+    TransitionList {
+        id: pageList2
+        intialItem: appView
+        items: [appView, settings]
+    }
+
+    TransitionView {
+        id: mainView
+
+        anchors.fill: parent
+
+        activatedItem: pageList2.currentItem
+
+        interaction: SwipeInteraction {
+            transitionView: mainView
+            list: pageList2
+            horizontal: false
+        }
+
+        transitions: [
+            PageTransition {
+                from: appView
+                to: settings
+
+                effect: PageSlideDownEffect {
+                    itemHeight: settings.height
+                    outOpacity: 0
+                }
+            },
+
+            PageTransition {
+                from: settings
+                to: appView
+
+                effect: PagePushUpEffect {
+                    fromItemHeight: settings.height
+                    revealCurrent: true
+                    inOpacity: 0.2
+                }
+            }
+        ]
+
+        TransitionView {
+            id: appView
+
+            objectName: "appView"
+
+            x: 32
+            y: 42
+            width: mainView.width - 64
+            height: mainView.height - 84
+
+            activatedItem: pageList.currentItem
+
+            interaction: SwipeInteraction {
+                transitionView: appView
+                list: pageList
+                horizontal: true
+            }
+
+            transitions: [
+                PageTransition {
+                    from: screen01
+                    to: screen02
+
+                    effect: PagePushRightEffect {
+                        scale: 0.6
+                        opacity: 0
+                    }
+                },
+
+                PageTransition {
+                    from: screen02
+                    to: screen03
+
+                    effect: PagePushRightEffect {
+                        scale: 0.6
+                        opacity: 0
+                    }
+                },
+                PageTransition {
+                    from: screen03
+                    to: screen02
+
+                    effect: PagePushLeftEffect {
+                        scale: 0.6
+                        opacity: 0
+                    }
+                },
+                PageTransition {
+                    from: screen02
+                    to: screen01
+
+                    effect: PagePushLeftEffect {
+                        scale: 0.6
+                        opacity: 0
+                    }
+                }
+            ]
+
+            Grid {
+                id: screen01
+                width: appView.width
+                height: appView.height
+                columns: 4
+                spacing: 76
+
+                Icon {
+                    text: "Eye"
+                    identifer: "f06e"
+                }
+
+                Icon {
+                    text: "Notify"
+                    identifer: "f024"
+                }
+
+                Icon {
+                    text: "Alarm"
+                    identifer: "f0f3"
+                }
+
+                Icon {
+                    text: "Wizard"
+
+                    identifer: "f1d8"
+                }
+
+                Icon {
+                    text: "Foder"
+
+                    identifer: "f187"
+                }
+
+                Icon {
+                    text: "Night"
+
+                    identifer: "f186"
+                }
+
+                Icon {
+                    text: "Picker"
+
+                    identifer: "f1fb"
+                }
+
+                Icon {
+                    text: "Writer"
+
+                    identifer: "f0e0"
+                }
+
+                Icon {
+                    text: "Keyboard"
+
+                    identifer: "f11c"
+                }
+
+                Icon {
+                    text: "Home"
+
+                    identifer: "f015"
+                }
+
+                Icon {
+                    text: "Update"
+                    identifer: "f06e"
+                }
+
+                Icon {
+                    text: "Flag"
+                    identifer: "f024"
+                }
+
+                Icon {
+                    text: "Notification"
+                    identifer: "f0f3"
+                }
+
+                Icon {
+                    identifer: "f1d8"
+                }
+
+                Icon {
+                    identifer: "f187"
+                }
+
+                Icon {
+                    text: "Battery"
+                    identifer: "f06d"
+                }
+
+                Icon {
+                    text: "Color"
+                    identifer: "f1fb"
+                }
+
+                Icon {
+                    text: "Bus"
+                    identifer: "f207"
+                }
+
+                Icon {
+                    text: "Image"
+                    identifer: "f03e"
+                }
+
+                Icon {
+                    text: "World"
+                    identifer: "f0ac"
+                }
+
+                Icon {
+                    text: "Message"
+                    identifer: "f06c"
+                }
+
+                Icon {
+                    identifer: "f0e0"
+                }
+
+                Icon {
+                    text: "Settings"
+                    identifer: "f11c"
+                }
+
+                Icon {
+                    text: "Bugs"
+                    identifer: "f188"
+                }
+            }
+
+            Grid {
+                id: screen02
+                width: appView.width
+                height: appView.height
+                Icon {
+                    identifer: "f06e"
+                }
+
+                Icon {
+                    identifer: "f0b1"
+                }
+
+                Icon {
+                    identifer: "f207"
+                }
+
+                Icon {
+                    identifer: "f14e"
+                }
+
+                Icon {
+                    identifer: "f187"
+                }
+
+                Icon {
+                    identifer: "f084"
+                }
+
+                Icon {
+                    identifer: "f085"
+                }
+
+                Icon {
+                    identifer: "f0e0"
+                }
+
+                Icon {
+                    text: "Preview"
+                    identifer: "f1d8"
+                }
+
+                Icon {
+                    identifer: "f015"
+                }
+
+                Icon {
+                    identifer: "f06e"
+                }
+
+                Icon {
+                    identifer: "f024"
+                }
+
+                Icon {
+                    identifer: "f06b"
+                }
+
+                Icon {
+                    text: "Woman"
+                    identifer: "f182"
+                }
+
+                Icon {
+                    text: "Memory"
+                    identifer: "f0a0"
+                }
+
+                Icon {
+                    identifer: "f186"
+                }
+
+                Icon {
+                    identifer: "f1fb"
+                }
+
+                Icon {
+                    text: "Transport"
+                    identifer: "f207"
+                }
+
+                Icon {
+                    text: "Lightness"
+                    identifer: "f0eb"
+                }
+
+                Icon {
+                    identifer: "f193"
+                }
+
+                Icon {
+                    identifer: "f06c"
+                }
+
+                Icon {
+                    identifer: "f0e0"
+                }
+
+                Icon {
+                    identifer: "f275"
+                }
+
+                Icon {
+                    identifer: "f188"
+                }
+                spacing: 76
+                columns: 4
+            }
+
+            Grid {
+                id: screen03
+                width: appView.width
+                height: appView.height
+                Icon {
+                    identifer: "f06e"
+                }
+
+                Icon {
+                    identifer: "f024"
+                }
+
+                Icon {
+                    identifer: "f0f3"
+                }
+
+                Icon {
+                    identifer: "f1d8"
+                }
+
+                Icon {
+                    identifer: "f187"
+                }
+
+                Icon {
+                    identifer: "f186"
+                }
+
+                Icon {
+                    text: "Bluetooth"
+                    identifer: "f293"
+                }
+
+                Icon {
+                    identifer: "f0e0"
+                }
+
+                Icon {
+                    text: "Mail"
+                    identifer: "f2b6"
+                }
+
+                Icon {
+                    text: "Male"
+                    identifer: "f183"
+                }
+
+                Icon {
+                    text: "Games"
+                    identifer: "f11b"
+                }
+
+                Icon {
+                    text: "Comment"
+                    identifer: "f075"
+                }
+
+                Icon {
+                    identifer: "f0f3"
+                }
+
+                Icon {
+                    identifer: "f1d8"
+                }
+
+                Icon {
+                    identifer: "f187"
+                }
+
+                Icon {
+                    text: "Address Book"
+                    identifer: "f2b9"
+                }
+
+                Icon {
+                    identifer: "f1fb"
+                }
+
+                Icon {
+                    identifer: "f207"
+                }
+
+                Icon {
+                    text: "Pause"
+                    identifer: "f254"
+                }
+
+                Icon {
+                    identifer: "f0ac"
+                }
+
+                Icon {
+                    text: "Rate"
+                    identifer: "f005"
+                }
+
+                Icon {
+                    identifer: "f0e0"
+                }
+
+                Icon {
+                    text: "Chip"
+                    identifer: "f2db"
+                }
+
+                Icon {
+                    identifer: "f118"
+                }
+                spacing: 76
+                columns: 4
+            }
+        }
+
+        Rectangle {
+            id: settings
+            Rectangle {
+                color: "#ffffff"
+                width: mainView.width
+                height: 20
+            }
+
+            color: "#ffffff"
+            width: mainView.width
+            height: mainView.height * 0.5
+            objectName: "settings"
+            radius: 16
+        }
+    }
+}
diff --git a/examples/TransitionItem/SimpleIndicator.qml b/examples/TransitionItem/SimpleIndicator.qml
new file mode 100644
index 0000000..96d6be3
--- /dev/null
+++ b/examples/TransitionItem/SimpleIndicator.qml
@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2018 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Quick Designer Components.
+**
+** $QT_BEGIN_LICENSE:GPL$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 or (at your option) any later version
+** approved by the KDE Free Qt Foundation. The licenses are as published by
+** the Free Software Foundation and appearing in the file LICENSE.GPL3
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.12
+import TransitionItem 1.0
+import QtQuick.Controls 2.3
+import QtQuick.Timeline 1.0
+
+Row {
+    spacing: 40
+    property var list
+    Repeater {
+        model: list.length
+
+        Rectangle {
+            width: 40
+            height: 40
+            radius: 20
+            color: list.currentItem === list.items[modelData] ? "white" : "#7f7f7f"
+        }
+    }
+}
+
+
+
+/*##^## Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+ ##^##*/
diff --git a/examples/TransitionItem/TransitionItem.qml b/examples/TransitionItem/TransitionItem.qml
index ce7b967..10fdfdc 100644
--- a/examples/TransitionItem/TransitionItem.qml
+++ b/examples/TransitionItem/TransitionItem.qml
@@ -34,6 +34,8 @@ Item {
     width: Constants.width
     height: Constants.height
 
-    Screen03 {
+    Screen04 {
+        transformOrigin: Item.TopLeft
+        scale: 0.5
     }
 }