Inital commit of the Komplex Hub

build/qml/FlowView/+DesignMode/FlowItem.qml

@@ -0,0 +1,100 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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 FlowView 1.0
+
+Item {
+    id: flowItem
+
+    width: 400
+    height: 400
+
+    property var flowView: Item {}
+
+    property string __designer_url__
+
+    property alias loaderSource: loader.source
+
+    property var stateChangeTarget
+
+    property string defaultState
+
+    clip: true
+
+    function setState(state) {
+
+    }
+
+    onStateChangeTargetChanged: {
+        loader.source = stateChangeTarget['__designer_url__']
+        loader.item.state = flowItem.targetState
+        flowItem.width = flowItem.stateChangeTarget.width
+        flowItem.height = flowItem.stateChangeTarget.height
+    }
+
+
+    property string targetState
+
+    onTargetStateChanged: {
+        loader.active = false
+        loader.active = true
+        loader.item.state = flowItem.targetState
+    }
+
+    Text {
+        text: flowItem.targetState
+    }
+
+    property bool active: false
+
+
+    function init() {
+        flowItem.defaultState = flowItem.state
+        if (FlowState.loading)
+            return
+
+        if (loader.source == "")
+            return
+
+        FlowState.loading = true
+        flowItem.active = true
+    }
+
+    Loader {
+        id: loader
+        active: flowItem.active
+        onLoaded: {
+            flowItem.width = loader.item.childrenRect.width
+            flowItem.height = loader.item.childrenRect.height
+            FlowState.loading = false
+        }
+    }
+}

build/qml/FlowView/+DesignMode/FlowView.qml

@@ -0,0 +1,311 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.10
+
+Item {
+    id: root
+    width: 200
+    height: 200
+
+    property FlowTransition defaultTransition
+
+    property FlowTransition currentTransition
+
+    property FlowTransition __forceTransition
+
+    property list<FlowTransition> flowTransitions
+    property list<FlowDecision> flowDecisions
+    property list<FlowWildcard> flowWildcards
+
+    property Item interaction: Item {
+    }
+
+    enum EffectEnum {
+        Instant,
+        Dissolve,
+        Fade,
+        Pop
+    }
+
+    property bool __blockHistory: false
+
+    property bool __isFlowView: true
+
+    function goBack() {
+        if (root.__history.length === 0)
+            return
+
+        var poppedItem = root.__history.pop()
+
+        root.__blockHistory = true
+        root.activatedItem = poppedItem
+        root.__activateItem()
+        root.__blockHistory = false
+
+
+        if (root.__history.length > 0)
+            root.lastItem = root.__history.slice(-1)[0]
+        else
+            root.lastItem = null
+    }
+
+    function __activateItem() {
+        if (!__isCompleted)
+            return
+
+        if (root.activatedItem === root.currentItem)
+            return;
+
+        if (root.activatedItem === root.nextItem)
+            return;
+
+        root.nextItem = root.activatedItem
+
+        for (var i = 0; i <  root.allChildren.length; ++i) {
+            if (root.allChildren[i] === root.activatedItem)
+                root.currentIndex = i
+        }
+
+    }
+
+    default property alias item: stack.data
+
+    property Item nextItem
+
+    property Item currentItem
+    property Item activatedItem
+    property Item lastItem
+    property int currentIndex: 0
+
+    //property list<Item> __history
+    property var __history: []
+
+    property int maxIndex: 0
+
+    signal transitionFinished
+
+    property alias __stack: stack
+
+    Item {
+        id: stack
+        visible: true
+    }
+
+    property bool __isCompleted: false
+
+    property real progress: 0
+
+    property bool __blockSchedule: false
+
+    onActivatedItemChanged: {
+        root.__activateItem()
+    }
+
+    function resetCurrentIndex() {
+        root.__blockSchedule = true
+        root.lastItem = root.currentItem
+        root.__history.push(root.lastItem)
+
+        for (var i = 0; i <  root.allChildren.length; ++i) {
+            if (root.allChildren[i] === root.currentItem)
+                root.currentIndex = i
+        }
+        root.__blockSchedule = false
+    }
+
+    Component.onCompleted: {
+        root.maxIndex = stack.children.length - 1
+
+        root.allChildren = []
+
+        for (var i = 0; i < stack.children.length; ++i) {
+            root.allChildren.push(stack.children[i])
+            if (stack.children[i].flowView !== undefined) {
+                stack.children[i].flowView = root
+                stack.children[i].init()
+            }
+        }
+
+        /* Assign view to all flowTransitions */
+        if (defaultTransition) {
+            defaultTransition.transitionView = root
+        }
+
+        for (i = 0; i < root.flowWildcards.length; ++i) {
+            var w = root.flowWildcards[i]
+            w.transitionView = root
+        }
+
+        var t
+
+        for (i = 0; i < root.flowTransitions.length; ++i) {
+            t = root.flowTransitions[i]
+            t.transitionView = root
+        }
+
+        for (i = 0; i < root.flowTransitions.length; ++i) {
+            t = root.flowTransitions[i]
+            if (root.checkInclude(t.from, root)) {
+                root.currentItem = t.to[0]
+                if (root.currentItem.stateChangeTarget !== undefined) {
+                    root.currentItem.stateChangeTarget.setState(root.currentItem.targetState)
+                    root.currentItem = root.currentItem.stateChangeTarget
+                }
+            }
+        }
+
+        root.resetCurrentIndex()
+
+        __setupCurrentItem()
+        __isCompleted = true
+    }
+
+    function checkInclude(list, item)
+    {
+        for (var i = 0; i < list.length; ++i) {
+            if (list[i] === item)
+                return true
+        }
+        return false
+    }
+
+    function scheduleTransition()
+    {
+        root.progress = 0
+
+        var pageTransition = null
+
+        /* find correct transition */
+        for (var i = 0; i < root.flowTransitions.length; ++i) {
+            var t = root.flowTransitions[i]
+            if (checkInclude(t.from, root.currentItem) && checkInclude(t.to, root.nextItem)) {
+                pageTransition = t
+            }
+        }
+
+        if (pageTransition !== null) {
+
+        } else {
+            pageTransition = root.defaultTransition
+        }
+
+        if (root.currentTransition)
+            root.currentTransition.__stop()
+
+        /* If a specific transition is forced then use this one. */
+        if (__forceTransition)
+            pageTransition = __forceTransition
+        __forceTransition = null
+
+        root.currentTransition = pageTransition
+        if (root.currentTransition)
+            root.currentTransition.__reset(root.currentItem, root.nextItem)
+
+        root.progress = Qt.binding(function () {
+            if (root.currentTransition)
+                return root.currentTransition.progress
+            return 0
+        })
+    }
+
+    onCurrentIndexChanged: {
+        root.nextItem = root.allChildren[root.currentIndex]
+
+       if (root.nextItem === root.currentItem)
+            return
+
+        if (root.__blockSchedule)
+            return
+
+        if (root.nextItem.stateChangeTarget !== undefined) {
+            var itemVar = root.nextItem.stateChangeTarget
+            var stateVar = root.nextItem.targetState
+            itemVar.state = stateVar
+            for (var i = 0; i <  root.allChildren.length; ++i) {
+                if (root.allChildren[i] === itemVar)
+                    root.currentIndex = i
+            }
+        }
+
+        scheduleTransition()
+
+        if (!root.__blockHistory) {
+            root.lastItem = root.currentItem
+            if (!Array.isArray(root.__history))
+                root.__history = []
+
+            root.__history.push(root.lastItem)
+        }
+
+        root.currentTransition.__start()
+    }
+
+    function __setupCurrentItem() {
+        if (root.currentItem)
+            root.currentItem.parent = stack
+
+        if (root.nextItem)
+            root.currentItem = root.nextItem
+        else
+            root.currentItem = root.allChildren[root.currentIndex]
+
+
+        root.currentItem.parent = root
+        root.currentTransition = null
+        transitionFinished()
+    }
+
+    function gotoPage(transition) {
+        var page = transition.to[0]
+        /* There might be another transition that fits. We are forcing this one. */
+        __forceTransition = transition
+        for (var i = 0; i < root.allChildren.length; ++i) {
+            if (page === root.allChildren[i]) {
+                root.currentIndex = i
+            }
+        }
+    }
+
+    property var allChildren
+
+    property Item __fromContentItem: Item {
+        width: root.width
+        height: root.height
+        parent: root
+    }
+
+    property Item __toContentItem: Item {
+        width: root.width
+        height: root.height
+        parent: root
+    }
+}
+
+

build/qml/FlowView/DefaultFlowEffect.qml

@@ -0,0 +1,35 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.15
+
+FlowEffect {
+    //No Effect
+    duration: 0
+}

build/qml/FlowView/FlowActionArea.qml

@@ -0,0 +1,213 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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 QtQuick.Studio.EventSystem 1.0
+
+Item {
+    width: 80
+    height: 40
+
+    id: root
+
+    enum ActionType{
+        LeftPress = 0,
+        LeftDoublePress = 1,
+        LeftLongPress = 2,
+        RightPress = 3,
+        RightDoublePress = 4,
+        RightLongPress = 5,
+        FlickUp = 6,
+        FlickDown = 7,
+        FlickLeft = 8,
+        FlickRight = 9,
+        PinchIn = 10,
+        PinchOut = 11
+    }
+
+    Item {
+        id: priv
+
+        property double dragStartTime;
+        property point dragStartPoint;
+    }
+
+    signal triggered
+
+    property real maxDragTime: 500
+    property real minDragDistance: 50
+    property real minPinchFactor: 2.0
+
+    property int eventType: FlowActionArea.LeftPress
+
+    TapHandler {
+        enabled: (root.eventType >= FlowActionArea.LeftPress && root.eventType <= FlowActionArea.LeftLongPress)
+        acceptedButtons: Qt.LeftButton
+        onTapped: if (root.eventType === FlowActionArea.LeftPress) { root.trigger(); }
+        onDoubleTapped: if (root.eventType === FlowActionArea.LeftDoublePress) { root.trigger(); }
+        onLongPressed: if (root.eventType === FlowActionArea.LeftLongPress) { root.trigger(); }
+    }
+
+    TapHandler {
+        enabled: (root.eventType >= FlowActionArea.RightPress && root.eventType <= FlowActionArea.RightLongPress)
+        acceptedButtons: Qt.RightButton
+        onTapped: if (root.eventType === FlowActionArea.RightPress) { root.trigger(); }
+        onDoubleTapped: if (root.eventType === FlowActionArea.RightDoublePress) { root.trigger(); }
+        onLongPressed: if (root.eventType === FlowActionArea.RightLongPress) { root.trigger(); }
+    }
+
+    PointHandler {
+        enabled: (root.eventType >= FlowActionArea.FlickUp && root.eventType <= FlowActionArea.FlickRight)
+        target: null
+
+        onActiveChanged: {
+            if (active) {
+                priv.dragStartTime = Date.now();
+                priv.dragStartPoint = point.position;
+            } else {
+                var time = Date.now() - priv.dragStartTime;
+                var distance = root.moveDistance(priv.dragStartPoint, point.position);
+                if (time < root.maxDragTime && distance > root.minDragDistance){
+                    var angle = root.moveAngle(priv.dragStartPoint, point.position);
+
+                    switch (root.eventType){
+                    case FlowActionArea.FlickUp:
+                        if (angle > 2.618 || angle < -2.618) {
+                            root.trigger();
+                        }
+                        break;
+                    case FlowActionArea.FlickDown:
+                        if (angle < 0.524 && angle > -0.524) {
+                            root.trigger();
+                        }
+                        break;
+                    case FlowActionArea.FlickLeft:
+                        if (angle < -1.047 && angle > -2.094) {
+                            root.trigger();
+                        }
+                        break;
+                    case FlowActionArea.FlickRight:
+                        if (angle < 2.094 && angle > 1.047) {
+                            root.trigger();
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    PinchHandler {
+        enabled: (root.eventType === FlowActionArea.PinchIn || root.eventType === FlowActionArea.PinchOut)
+        target: null
+
+        onActiveChanged: {
+            if (active) {
+                priv.dragStartTime = Date.now();
+            } else {
+                var time = Date.now() - priv.dragStartTime;
+                if (time < root.maxDragTime) {
+                    if (root.eventType  === FlowActionArea.PinchIn && activeScale < (1.0 / root.minPinchFactor)) {
+                        root.trigger();
+                    } else if (root.eventType === FlowActionArea.PinchOut && activeScale > root.minPinchFactor) {
+                        root.trigger();
+                    }
+                }
+            }
+        }
+    }
+
+    function moveDistance(start, end){
+        var x = end.x - start.x;
+        var y = end.y - start.y;
+        return Math.sqrt(x*x+y*y);
+    }
+
+    function moveAngle(start, end){
+        var x = end.x - start.x;
+        var y = end.y - start.y;
+        return Math.atan2(x,y);
+    }
+
+    function trigger() {
+
+        var one = root.activeState
+        var two = root.parent.state
+
+        if (one !== two)
+            return
+
+        if (root.goBack) {
+            var par = root.parent
+            while (par) {
+                if (par.__isFlowView) {
+                    par.goBack()
+                    return
+                }
+                par = par.parent
+            }
+        } else {
+            target.trigger()
+        }
+
+        root.triggered()
+    }
+
+    property Connections connections : Connections {
+        id: connections
+    }
+
+    property QtObject target
+
+    readonly property bool isActionArea: true
+    property bool fromStateChange: false
+
+    property string activeState: ""
+
+    enabled: (target !== null || root.goBack) && (root.activeState === root.parent.state)
+
+    property bool goBack: false
+
+    property alias eventIds: eventListener.eventIds
+
+    function __receiveEvent(parameters) {
+        var flowItem = root.parent
+        var flow = flowItem.parent
+
+        if (flow.currentItem !== flowItem)
+            return;
+
+        root.trigger()
+    }
+
+    EventListener {
+        id: eventListener
+        onTriggered: root.__receiveEvent(parameters)
+    }
+}

build/qml/FlowView/FlowDecision.qml

@@ -0,0 +1,126 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.15
+import QtQuick.Window 2.14
+import QtQuick.Controls 2.15
+
+QtObject {
+    id: root
+
+    property list<FlowTransition> targets
+
+    readonly property bool isFlowDecision: true
+
+    property string dialogTitle: qsTr("Title")
+
+    function trigger() {
+        var hasDialog = false
+        for (var i = 0; i <  root.targets.length; ++i) {
+            if (root.targets[i].question !== "")
+                hasDialog = true
+        }
+
+        if (hasDialog) {
+            loader.show()
+        }
+    }
+
+    property Loader loader: Loader {
+        active: false
+        function show() {
+            active = true
+            item.show()
+            item.raise()
+            item.requestActivate()
+        }
+
+        sourceComponent: windowComponent
+    }
+
+    property Component windowComponent:  Component {
+
+        Window {
+
+            id: dialog
+
+            title: root.dialogTitle
+            modality: Qt.WindowModal
+            transientParent: root.Window.window
+
+            width: 400
+            height: column.height
+
+            minimumWidth: 400
+            minimumHeight: 100
+            flags: Qt.Dialog | Qt.WindowStaysOnTopHint | Qt.WindowTitleHint
+
+            Rectangle {
+                id: background
+                anchors.fill: parent
+
+                ScrollView {
+                    anchors.fill: parent
+
+
+                    Column {
+                        id: column
+                        Repeater {
+                            model: targets
+                            Rectangle {
+                                visible: root.targets[index].question !== ""
+                                width: background.width
+                                height: 20
+                                opacity: mouseArea.containsMouse ? 1 : 0.8
+                                color: index / 2 ? "#ebecf0" : "white"
+                                MouseArea {
+                                    id: mouseArea
+                                    hoverEnabled: true
+                                    onClicked: {
+                                        root.targets[index].__decisionTrigger()
+                                        loader.item.close()
+                                        loader.active = false
+                                    }
+                                    anchors.fill: parent
+                                }
+
+                                Text {
+                                    height: 20
+                                    text: root.targets[index].question
+                                    verticalAlignment: Text.AlignVCenter
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+    }
+}

build/qml/FlowView/FlowEffect.qml

@@ -0,0 +1,155 @@
+/****************************************************************************
+**
+** 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.15
+import QtQuick.Timeline 1.0
+
+QtObject {
+    id: root
+    signal finished
+    signal started
+    signal reseted
+    function reset() {
+        /*
+        if (root.duration === 0) {
+            root.transitionView.__setupCurrentItem()
+            return
+        }*/
+
+        /* We set the parents to the content items to apply effects */
+
+        resetProperties()
+
+        from.parent = transitionView.__fromContentItem
+        to.parent = transitionView.__toContentItem
+        root.progress = root.backwards ? 100 : 0
+
+        enable()
+        root.progress = -1
+        root.progress = 0
+    }
+
+    property bool __aborted: false
+
+    function enable() {
+        timeline.enabled = true
+        root.started()
+    }
+
+    function start() {
+        anim.from = Math.min(root.progress, 100)
+        anim.to = root.backwards ? 0 : 100
+        anim.duration = root.duration * Math.abs(anim.to - anim.from) / 100
+
+        root.__aborted = false
+
+        anim.start()
+    }
+
+    function abort() {
+
+        anim.from = root.progress
+        anim.to = root.backwards ? 100 : 0
+
+        anim.duration = root.duration * Math.abs(anim.from - anim.to) / 100
+
+        root.__aborted = true
+        anim.restart()
+
+    }
+
+    function stop() {
+        anim.stop()
+    }
+
+    property Item from
+    property Item to
+
+    property Item transitionView
+
+    property real duration: 250
+    property alias easing: anim.easing
+
+    property Timeline timeline: Timeline {
+
+    }
+
+    property real progress: 0
+
+    property bool backwards: false
+
+    property Binding timelineBinding: Binding {
+        target: timeline
+        property: "currentFrame"
+        value: root.progress * 10
+    }
+
+    function resetProperties() {
+        transitionView.__fromContentItem.opacity = 1
+        transitionView.__fromContentItem.x = 0
+        transitionView.__fromContentItem.y = 0
+        transitionView.__fromContentItem.z = 0
+        transitionView.__fromContentItem.scale = 1
+
+        transitionView.__toContentItem.opacity = 1
+        transitionView.__toContentItem.x = 0
+        transitionView.__toContentItem.y = 0
+        transitionView.__toContentItem.z = 0
+        transitionView.__toContentItem.scale = 1
+    }
+
+    property PropertyAnimation __anim: PropertyAnimation {
+        id: anim
+        duration: 250
+        loops: 1
+        target: root
+        property: "progress"
+        onStopped: {
+            timeline.enabled = false
+            /* reset all typical properties */
+
+            resetProperties()
+
+            root.finished()
+
+            if (!root.__aborted) {
+                root.transitionView.__setupCurrentItem()
+            } else {
+                if (root.transitionView.nextItem) {
+                    root.transitionView.nextItem.parent = transitionView.__stack
+                    root.transitionView.nextItem = root.transitionView.currentItem
+                }
+                root.transitionView.__setupCurrentItem()
+                root.transitionView.nextItem = null
+            }
+
+            root.progress = 0
+        }
+    }
+
+}

build/qml/FlowView/FlowFadeEffect.qml

@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.10
+import QtQuick.Timeline 1.0
+
+FlowEffect {
+    id: effect
+    //Fade Effect
+    duration: 250
+    onStarted: {
+        group01.target = transitionView.__fromContentItem
+        group02.target = transitionView.__toContentItem
+    }
+
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            id: group01
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group02
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
+    }
+}

build/qml/FlowView/FlowItem.qml

@@ -0,0 +1,116 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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
+
+Item {
+    id: flowItem
+
+    width: 400
+    height: 400
+
+    property var flowView: Item {}
+
+    property alias loaderSource: loader.source
+
+    property var stateChangeTarget
+
+    property string targetState
+
+    property string defaultState: undefined
+
+    property bool forceActive: false
+
+    property bool __isFlowItem: true
+
+    function setState(newState) {
+        flowItem.state = newState
+    }
+
+    property bool active: {
+        if (flowItem.forceActive)
+            return true;
+        if (flowItem.flowView !== null
+                && flowItem.flowView.currentItem !== undefined
+                && flowItem.flowView.currentItem === flowItem)
+            return true
+
+        if (flowItem.flowView !== null
+                && flowItem.flowView.nextItem !== undefined
+                && flowItem.flowView.nextItem === flowItem)
+            return true
+
+        return false
+    }
+
+    Loader {
+        id: loader
+        active: flowItem.active
+    }
+
+
+    function init() {
+
+        flowItem.x = 0
+        flowItem.y = 0
+
+        flowItem.defaultState = flowItem.state
+        var itemVar
+        var i
+
+        if (flowItem.stateChangeTarget === undefined) {
+
+            for (i = 0; i < flowItem.children.length; ++i) {
+                itemVar = flowItem.children[i]
+                if (itemVar.isActionArea === true
+                        && !itemVar.fromStateChange) {
+                    itemVar.activeState = flowItem.state
+                }
+
+            }
+        } else {
+            var childNum = flowItem.children.length
+            var childArray = []
+
+            for (i = 0; i < flowItem.children.length; ++i) {
+                childArray.push(flowItem.children[i])
+            }
+
+            for (i = 0; i < childNum; ++i) {
+                itemVar = childArray[i]
+
+                if (itemVar.isActionArea === true) {
+                    itemVar.fromStateChange = true
+                    itemVar.activeState = flowItem.targetState
+                    itemVar.parent = flowItem.stateChangeTarget
+                }
+            }
+        }
+    }
+}

build/qml/FlowView/FlowMoveEffect.qml

@@ -0,0 +1,102 @@
+/****************************************************************************
+**
+** 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.10
+import QtQuick.Timeline 1.0
+
+FlowEffect {
+    id: effect
+
+    property real itemHeight: transitionView.height
+    property int direction: 0
+    //left, right, up, down
+
+    duration: 250
+    onStarted: {
+        group01.target = effect.transitionView.__toContentItem
+        group02.target = effect.transitionView.__toContentItem
+    }
+
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            id: group01
+
+            property: "x"
+
+            Keyframe {
+                frame: 0
+
+                value: {
+                    if (effect.direction === 0)
+                        return -effect.transitionView.width
+                    if (effect.direction === 1)
+                        return effect.transitionView.width
+                    return 0
+                }
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+
+
+        KeyframeGroup {
+            id: group02
+
+            property: "y"
+
+            Keyframe {
+                frame: 0
+
+                value: {
+                    if (effect.direction === 2)
+                        return -effect.itemHeight
+                    if (effect.direction === 3)
+                        return effect.itemHeight
+                    return 0
+                }
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+
+
+
+    }
+}

build/qml/FlowView/FlowPushEffect.qml

@@ -0,0 +1,231 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.10
+import QtQuick.Timeline 1.0
+
+FlowEffect {
+    id: effect
+
+    property real scale: 1
+    property real inOpacity: 1
+    property real outOpacity: 1
+
+    property int direction: 0
+    //left, right, up, down
+
+    property bool revealCurrent: false
+    property int itemHeight: effect.transitionView.height
+
+    duration: 250
+    onStarted: {
+        group01.target = transitionView.__fromContentItem
+        group02.target = transitionView.__toContentItem
+        group03.target = transitionView.__fromContentItem
+        group04.target = transitionView.__toContentItem
+        group05.target = transitionView.__fromContentItem
+        group06.target = transitionView.__toContentItem
+        group07.target = transitionView.__fromContentItem
+        group08.target = transitionView.__toContentItem
+        if (effect.revealCurrent)
+            group01.target.z = 1
+    }
+
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            id: group01
+
+            property: "x"
+
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                frame: 1000
+                value: {
+                    if (effect.direction === 0)
+                        return effect.transitionView.width
+                    if (effect.direction === 1)
+                        return -effect.transitionView.width
+                    return 0
+                }
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group02
+
+            property: "x"
+
+            Keyframe {
+                frame: 0
+                value: {
+                    if (effect.revealCurrent)
+                        return 0
+                    if (effect.direction === 0)
+                        return -effect.transitionView.width
+                    if (effect.direction === 1)
+                        return effect.transitionView.width
+                    return 0
+                }
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group03
+
+            property: "scale"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.scale
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group04
+
+            property: "scale"
+
+            Keyframe {
+                frame: 0
+                value: effect.scale
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group05
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.outOpacity
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group06
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: effect.inOpacity
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group07
+
+            property: "y"
+
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                frame: 1000
+
+                value: {
+                    if (effect.direction === 2)
+                        return -effect.itemHeight
+                    if (effect.direction === 3)
+                        return effect.itemHeight
+                    return 0
+                }
+
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group08
+
+            property: "y"
+
+            Keyframe {
+                frame: 0
+
+                value: {
+                    if (effect.revealCurrent)
+                        return 0
+                    if (effect.direction === 2)
+                        return effect.itemHeight
+                    if (effect.direction === 3)
+                        return -effect.itemHeight
+                    return 0
+                }
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+    }
+}

build/qml/FlowView/FlowPushLeftEffect.qml

@@ -0,0 +1,155 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.10
+import QtQuick.Timeline 1.0
+
+FlowEffect {
+    id: effect
+
+    property real scale: 1
+    property real opacity: 1
+
+    duration: 250
+    onStarted: {
+        group01.target = transitionView.__fromContentItem
+        group02.target = transitionView.__toContentItem
+        group03.target = transitionView.__fromContentItem
+        group04.target = transitionView.__toContentItem
+        group05.target = transitionView.__fromContentItem
+        group06.target = transitionView.__toContentItem
+    }
+
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            id: group01
+
+            property: "x"
+
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.transitionView.width
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group02
+
+            property: "x"
+
+            Keyframe {
+                frame: 0
+                value: -effect.transitionView.width
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group03
+
+            property: "scale"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.scale
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group04
+
+            property: "scale"
+
+            Keyframe {
+                frame: 0
+                value: effect.scale
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group05
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.opacity
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group06
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: effect.opacity
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
+    }
+}

build/qml/FlowView/FlowPushRightEffect.qml

@@ -0,0 +1,155 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.10
+import QtQuick.Timeline 1.0
+
+FlowEffect {
+    id: effect
+
+    property real scale: 1
+    property real opacity: 1
+
+    duration: 250
+    onStarted: {
+        group01.target = transitionView.__fromContentItem
+        group02.target = transitionView.__toContentItem
+        group03.target = transitionView.__fromContentItem
+        group04.target = transitionView.__toContentItem
+        group05.target = transitionView.__fromContentItem
+        group06.target = transitionView.__toContentItem
+    }
+
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            id: group01
+
+            property: "x"
+
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                frame: 1000
+                value: -effect.transitionView.width
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group02
+
+            property: "x"
+
+            Keyframe {
+                frame: 0
+                value: effect.transitionView.width
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group03
+
+            property: "scale"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.scale
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group04
+
+            property: "scale"
+
+            Keyframe {
+                frame: 0
+                value: effect.scale
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group05
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.opacity
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group06
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: effect.opacity
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
+    }
+}

build/qml/FlowView/FlowPushUpEffect.qml

@@ -0,0 +1,162 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.10
+import QtQuick.Timeline 1.0
+
+FlowEffect {
+    id: effect
+
+    property real scale: 1
+    property real inOpacity: 1
+    property real outOpacity: 1
+
+    property int fromItemHeight: effect.transitionView.height
+
+    property bool revealCurrent: false
+
+    duration: 250
+    onStarted: {
+        group01.target = transitionView.__fromContentItem
+        group02.target = transitionView.__toContentItem
+        group03.target = transitionView.__fromContentItem
+        group04.target = transitionView.__toContentItem
+        group05.target = transitionView.__fromContentItem
+        group06.target = transitionView.__toContentItem
+        if (effect.revealCurrent)
+            group01.target.z = 1
+    }
+
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            id: group01
+
+            property: "y"
+
+            Keyframe {
+                frame: 0
+                value: 0
+            }
+
+            Keyframe {
+                frame: 1000
+                value: -fromItemHeight
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group02
+
+            property: "y"
+
+            Keyframe {
+                frame: 0
+                value: effect.revealCurrent ? 0 : effect.transitionView.height
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group03
+
+            property: "scale"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.scale
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group04
+
+            property: "scale"
+
+            Keyframe {
+                frame: 0
+                value: effect.scale
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group05
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.outOpacity
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group06
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: effect.inOpacity
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 1
+                easing: effect.easing
+            }
+        }
+    }
+}

build/qml/FlowView/FlowSlideDownEffect.qml

@@ -0,0 +1,84 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.10
+import QtQuick.Timeline 1.0
+
+FlowEffect {
+    id: effect
+
+    property real itemHeight: transitionView.height
+    property real outOpacity: 1
+
+    duration: 250
+    onStarted: {
+        group01.target = transitionView.__toContentItem
+        group02.target = transitionView.__fromContentItem
+        group01.target.z = 1
+    }
+
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            id: group01
+
+            property: "y"
+
+            Keyframe {
+                frame: 0
+                value: -effect.itemHeight
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+
+        KeyframeGroup {
+            id: group02
+
+            property: "opacity"
+
+            Keyframe {
+                frame: 0
+                value: 1
+            }
+
+            Keyframe {
+                frame: 1000
+                value: effect.outOpacity
+                easing: effect.easing
+            }
+        }
+    }
+}

build/qml/FlowView/FlowSlideLeftEffect.qml

@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** 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.10
+import QtQuick.Timeline 1.0
+
+FlowEffect {
+    id: effect
+
+    duration: 250
+    onStarted: group01.target = transitionView.__toContentItem
+
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            id: group01
+
+            property: "x"
+
+            Keyframe {
+                frame: 0
+                value: -transitionView.width
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+    }
+}

build/qml/FlowView/FlowSlideRightEffect.qml

@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.10
+import QtQuick.Timeline 1.0
+
+FlowEffect {
+    id: effect
+
+    duration: 250
+    onStarted: group01.target = transitionView.__toContentItem
+
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            id: group01
+
+            property: "x"
+
+            Keyframe {
+                frame: 0
+                value:transitionView.width
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+    }
+}

build/qml/FlowView/FlowSlideUpEffect.qml

@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.10
+import QtQuick.Timeline 1.0
+
+FlowEffect {
+    id: effect
+
+    duration: 250
+    onStarted: group01.target = transitionView.__toContentItem
+
+    timeline: Timeline {
+        startFrame: 0
+        endFrame: 1000
+
+        KeyframeGroup {
+            id: group01
+
+            property: "y"
+
+            Keyframe {
+                frame: 0
+                value: transitionView.height
+            }
+
+            Keyframe {
+                frame: 1000
+                value: 0
+                easing: effect.easing
+            }
+        }
+    }
+}

build/qml/FlowView/FlowState.qml

@@ -0,0 +1,36 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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$
+**
+****************************************************************************/
+pragma Singleton
+import QtQuick 2.15
+
+QtObject {
+    id: object
+
+    property bool loading: false
+}

build/qml/FlowView/FlowTransition.qml

@@ -0,0 +1,154 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.15
+import QtQuick.Studio.EventSystem 1.0
+
+QtObject {
+    id: root
+
+    signal finished
+
+    /* Those should be lists that allow a n*n mappings. */
+    //property Item from: null
+    //property Item to: null
+    property list<QtObject> from
+    property list<QtObject> to
+    property int duration
+
+    property var transitionView: Item {}
+
+    property real progress: effect.progress
+
+    property bool condition: true
+
+    property string question
+
+    function __start() {
+        root.effect.start()
+    }
+
+    function __enable() {
+        effect.enable()
+    }
+
+    function __reset(current, next) {
+        root.effect.from = current
+        root.effect.to = next
+        root.effect.transitionView = root.transitionView
+
+        root.effect.reset()
+    }
+
+    function __stop(current, next) {
+        root.effect.stop()
+    }
+
+    function __checkInclude(list, item) {
+        for (var i = 0; i < list.length; ++i) {
+            if (list[i] === item)
+                return true
+        }
+        return false
+    }
+
+    property alias eventIds: eventListener.eventIds
+
+    function __receiveEvent(parameters) {
+        var flowItem = root.from[0]
+        var flow = root.transitionView
+
+        if (flowItem.stateChangeTarget !== undefined
+                && flowItem.stateChangeTarget === flow.currentItem) {
+            if (flowItem.targetState === flow.currentItem.state)
+                flowItem = flowItem.stateChangeTarget
+        }
+
+        if (flow.currentItem !== flowItem)
+            return;
+
+        root.trigger()
+    }
+
+    property EventListener eventListener: EventListener {
+        id: eventListener
+        onTriggered: root.__receiveEvent(parameters)
+    }
+
+    function trigger() {
+        var fromEmpty = root.from.length === 0
+
+        if (to[0].isFlowDecision === true)
+            to[0].trigger();
+
+        var stateChanger = false
+
+        if (root.from[0] !== undefined)
+            stateChanger = root.from[0].stateChangeTarget !== undefined
+
+        var toStateChanger = false
+
+        if (root.to[0] !== undefined)
+            toStateChanger = root.to[0].stateChangeTarget !== undefined
+
+        if (!toStateChanger && root.to[0].defaultState !== undefined)
+            root.to[0].state = root.to[0].defaultState
+
+        if (stateChanger || fromEmpty || __checkInclude(root.from, transitionView.currentItem))
+            timer.restart()
+    }
+
+    function __decisionTrigger() {
+        /* Workaround for flowDecisions with multiple sources */
+        if (!__checkInclude(root.from, transitionView.currentItem) && root.from.length !== 0)
+            root.from = []
+        root.trigger()
+    }
+
+    property Timer timer: Timer {
+        interval: 1
+        running: false
+        repeat: false
+        onTriggered: transitionView.gotoPage(root)
+    }
+
+    property FlowEffect effect: DefaultFlowEffect {
+        transitionView: transitionView
+
+    }
+
+    onEffectChanged: {
+        root.effect.transitionView = root.transitionView
+    }
+
+    property Connections effectConnection: Connections {
+        target: root.effect
+        function onFinished() { root.finished() }
+    }
+}

build/qml/FlowView/FlowTransitionList.qml

@@ -0,0 +1,101 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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
+
+QtObject {
+    id: list
+    property Item intialItem
+    //has next prev and most likely currentIndex, count
+    property var items
+
+    property Item nextItem
+    property Item prevItem
+
+    property Item currentItem
+
+    onCurrentItemChanged:  {
+
+        var currentIndex = list.__indexForCurrentItem()
+
+        if (currentIndex < (list.items.length - 1))
+            list.nextItem = list.items[currentIndex + 1]
+        if (currentIndex > 0)
+            list.prevItem = list.items[currentIndex - 1]
+
+    }
+
+    function __indexForCurrentItem() {
+        var currentIndex = -1
+        for (var i = 0; i < list.items.length; ++i) {
+            var item = list.items[i]
+            if (item === list.currentItem)
+                currentIndex = i
+        }
+        return currentIndex
+    }
+
+    property int length: items.length
+
+    function next() {
+        var currentIndex = list.__indexForCurrentItem()
+
+        list.nextItem = null
+
+        if (currentIndex > -1 && (currentIndex < list.items.length - 1)) {
+            list.prevItem = list.items[currentIndex]
+            list.currentItem = list.items[currentIndex + 1]
+            if (currentIndex + 2 < list.items.length)
+                list.nextItem = list.items[currentIndex + 2]
+        }
+    }
+
+    function prev() {
+        var currentIndex = list.__indexForCurrentItem()
+
+        list.prevItem = null
+
+        if (currentIndex > 0 && currentIndex < (list.items.length)) {
+            if (currentIndex - 2 >= 0)
+                list.prevItem = list.items[currentIndex - 2]
+            list.currentItem = list.items[currentIndex - 1]
+
+            list.nextItem = list.items[currentIndex]
+        }
+    }
+
+    Component.onCompleted: {
+        list.currentItem = list.intialItem
+        var currentIndex = list.__indexForCurrentItem()
+        if (currentIndex < (list.items.length - 1))
+            list.nextItem = list.items[currentIndex + 1]
+        if (currentIndex > 0)
+            list.prevItem = list.items[currentIndex - 1]
+    }
+}

build/qml/FlowView/FlowView.qml

@@ -0,0 +1,348 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.10
+
+Item {
+    id: root
+    width: 200
+    height: 200
+
+    property FlowTransition defaultTransition
+
+    property FlowTransition currentTransition
+
+    property FlowTransition __forceTransition
+
+    property list<FlowTransition> flowTransitions
+    property list<FlowDecision> flowDecisions
+    property list<FlowWildcard> flowWildcards
+
+    property Item interaction: Item {
+    }
+
+    property bool __parentFlowChanged: false
+
+    enum EffectEnum {
+        Instant,
+        Dissolve,
+        Fade,
+        Pop
+    }
+
+    property bool __blockHistory: false
+
+    property bool __isFlowView: true
+
+    function goBack() {
+        if (root.__history.length === 0)
+            return
+
+        if (root.__parentFlowChanged) {
+            root.__parentFlowChanged = false
+            parentFlowView().goBack()
+        }
+
+        var poppedItem = root.__history.pop()
+
+        root.__blockHistory = true
+        root.activatedItem = poppedItem
+        root.__activateItem()
+        root.__blockHistory = false
+
+
+        if (root.__history.length > 0)
+            root.lastItem = root.__history.slice(-1)[0]
+        else
+            root.lastItem = null
+    }
+
+    function __activateItem() {
+        if (!__isCompleted)
+            return
+
+        if (root.activatedItem === root.currentItem)
+            return;
+
+        if (root.activatedItem === root.nextItem)
+            return;
+
+        root.nextItem = root.activatedItem
+
+        for (var i = 0; i <  root.allChildren.length; ++i) {
+            if (root.allChildren[i] === root.activatedItem)
+                root.currentIndex = i
+        }
+
+    }
+
+    function parentFlowView() {
+        var par = root.parent
+        while (par) {
+            if (par.__isFlowView)
+                return par
+            par = par.parent
+        }
+        return null
+    }
+
+    function parentFlowItem() {
+        var par = root.parent
+        while (par) {
+            if (par.__isFlowItem)
+                return par
+            par = par.parent
+        }
+        return null
+
+    }
+
+    default property alias item: stack.data
+
+    property Item nextItem
+
+    property Item currentItem
+    property Item activatedItem
+    property Item lastItem
+    property int currentIndex: 0
+
+    //property list<Item> __history
+    property var __history: []
+
+    property int maxIndex: 0
+
+    signal transitionFinished
+
+    property alias __stack: stack
+
+    Item {
+        id: stack
+        visible: false
+    }
+
+    property bool __isCompleted: false
+
+    property real progress: 0
+
+    property bool __blockSchedule: false
+
+    onActivatedItemChanged: {
+        root.__activateItem()
+    }
+
+    function resetCurrentIndex() {
+        root.__blockSchedule = true
+        root.lastItem = root.currentItem
+        root.__history.push(root.lastItem)
+
+        for (var i = 0; i <  root.allChildren.length; ++i) {
+            if (root.allChildren[i] === root.currentItem)
+                root.currentIndex = i
+        }
+        root.__blockSchedule = false
+    }
+
+    Component.onCompleted: {
+        root.maxIndex = stack.children.length - 1
+
+        root.allChildren = []
+
+        for (var i = 0; i < stack.children.length; ++i) {
+            root.allChildren.push(stack.children[i])
+            if (stack.children[i].flowView !== undefined) {
+                stack.children[i].flowView = root
+                stack.children[i].init()
+            }
+        }
+
+        /* Assign view to all flowTransitions */
+        if (defaultTransition) {
+            defaultTransition.transitionView = root
+        }
+
+        for (i = 0; i < root.flowWildcards.length; ++i) {
+            var w = root.flowWildcards[i]
+            w.transitionView = root
+        }
+
+        var t
+
+        for (i = 0; i < root.flowTransitions.length; ++i) {
+            t = root.flowTransitions[i]
+            t.transitionView = root
+        }
+
+        for (i = 0; i < root.flowTransitions.length; ++i) {
+            t = root.flowTransitions[i]
+            if (root.checkInclude(t.from, root)) {
+                root.currentItem = t.to[0]
+                if (root.currentItem.stateChangeTarget !== undefined) {
+                    root.currentItem.stateChangeTarget.setState(root.currentItem.targetState)
+                    root.currentItem = root.currentItem.stateChangeTarget
+                }
+            }
+        }
+
+        root.resetCurrentIndex()
+
+        __setupCurrentItem()
+        __isCompleted = true
+    }
+
+    function checkInclude(list, item)
+    {
+        for (var i = 0; i < list.length; ++i) {
+            if (list[i] === item)
+                return true
+        }
+        return false
+    }
+
+    function scheduleTransition()
+    {
+        root.progress = 0
+
+        var pageTransition = null
+
+        /* find correct transition */
+        for (var i = 0; i < root.flowTransitions.length; ++i) {
+            var t = root.flowTransitions[i]
+            if (checkInclude(t.from, root.currentItem) && checkInclude(t.to, root.nextItem)) {
+                pageTransition = t
+            }
+        }
+
+        if (pageTransition !== null) {
+
+        } else {
+            pageTransition = root.defaultTransition
+        }
+
+        if (root.currentTransition)
+            root.currentTransition.__stop()
+
+        /* If a specific transition is forced then use this one. */
+        if (__forceTransition)
+            pageTransition = __forceTransition
+        __forceTransition = null
+
+        root.currentTransition = pageTransition
+        if (root.currentTransition)
+            root.currentTransition.__reset(root.currentItem, root.nextItem)
+
+        root.progress = Qt.binding(function () {
+            if (root.currentTransition)
+                return root.currentTransition.progress
+            return 0
+        })
+    }
+
+    onCurrentIndexChanged: {
+        root.nextItem = root.allChildren[root.currentIndex]
+
+       if (root.nextItem === root.currentItem)
+            return
+
+        if (root.__blockSchedule)
+            return
+
+        if (root.nextItem.stateChangeTarget !== undefined) {
+            var itemVar = root.nextItem.stateChangeTarget
+            var stateVar = root.nextItem.targetState
+            itemVar.state = stateVar
+            for (var i = 0; i <  root.allChildren.length; ++i) {
+                if (root.allChildren[i] === itemVar)
+                    root.currentIndex = i
+            }
+        }
+
+        scheduleTransition()
+
+        if (!root.__blockHistory) {
+            root.lastItem = root.currentItem
+            if (!Array.isArray(root.__history))
+                root.__history = []
+
+            root.__history.push(root.lastItem)
+        }
+
+        root.currentTransition.__start()
+    }
+
+    function __setupCurrentItem() {
+        if (root.currentItem)
+            root.currentItem.parent = stack
+
+        if (root.nextItem)
+            root.currentItem = root.nextItem
+        else
+            root.currentItem = root.allChildren[root.currentIndex]
+
+
+        root.currentItem.parent = root
+        root.currentTransition = null
+        transitionFinished()
+    }
+
+    function gotoPage(transition) {
+        var page = transition.to[0]
+        /* There might be another transition that fits. We are forcing this one. */
+        __forceTransition = transition
+        for (var i = 0; i < root.allChildren.length; ++i) {
+            if (page === root.allChildren[i]) {
+                root.currentIndex = i
+            }
+        }
+    }
+
+    function gotoItem(item) {
+        for (var i = 0; i < root.allChildren.length; ++i) {
+            if (item === root.allChildren[i]) {
+                root.currentIndex = i
+                print("index " + i )
+            }
+        }
+    }
+
+    property var allChildren
+
+    property Item __fromContentItem: Item {
+        width: root.width
+        height: root.height
+        parent: root
+    }
+
+    property Item __toContentItem: Item {
+        width: root.width
+        height: root.height
+        parent: root
+    }
+}
+
+

build/qml/FlowView/FlowView.qmltypes

@@ -0,0 +1,8 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by qmltyperegistrar.
+
+Module {}

build/qml/FlowView/FlowView_qml_module_dir_map.qrc

@@ -0,0 +1,6 @@
+<RCC>
+  <qresource prefix="/">
+    <file alias="/qt-project.org/imports/FlowView">/home/parametheus/Projects/QtDesigner/KomplexHub/build/qml/FlowView</file>
+
+  </qresource>
+</RCC>

build/qml/FlowView/FlowWildcard.qml

@@ -0,0 +1,77 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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.15
+import QtQuick.Studio.EventSystem 1.0
+
+QtObject {
+    id: root
+
+    property list<FlowItem> positivelist
+    property list<FlowItem> negativelist
+
+    default property list<QtObject> data
+
+    property FlowTransition target
+
+    property var transitionView: Item {}
+
+    property bool globalWildcard: false
+
+    function trigger() {
+        var cItem = root.transitionView.currentItem
+
+        if (root.globalWildcard && root.transitionView.parentFlowView()) {
+            root.transitionView.__parentFlowChanged = true
+            root.transitionView.parentFlowView().gotoItem(root.transitionView.parentFlowItem())
+        }
+
+        if (cItem === undefined)
+            return
+
+        if (root.transitionView.checkInclude(root.negativelist, cItem))
+            return;
+
+        if (root.positivelist.length !== 0) {
+            if (!root.transitionView.checkInclude(root.positivelist, cItem))
+                return;
+        }
+
+        root.target.trigger()
+    }
+
+    property EventListener eventListener: EventListener {
+        id: eventListener
+        onTriggered: root.trigger()
+    }
+
+    property alias eventIds: eventListener.eventIds
+}
+
+

build/qml/FlowView/SwipeInteraction.qml

@@ -0,0 +1,118 @@
+/****************************************************************************
+**
+** Copyright (C) 2020 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
+
+Item {
+    id: root
+    property var transitionView
+    property var list
+    parent: transitionView
+    anchors.fill: parent
+    z: -1
+
+    property real threshold: 35
+    property bool horizontal: true
+    property Item __activeItem
+    property bool __reactToTransition: false
+
+    Timer {
+        id: blocker
+        running: false
+        interval: 200
+        repeat: false
+        onTriggered: handler.enabled = true
+    }
+
+    Connections {
+        target: transitionView
+        function onTransitionFinished() {
+            if (!root.__reactToTransition)
+                return
+            /* This is a tricky one. We have to also update the list.
+               The connection could be also done the other way around */
+            list.currentItem = root.__activeItem
+            root.__reactToTransition = false
+        }
+    }
+
+    DragHandler {
+        id: handler
+        xAxis.enabled: root.horizontal
+        yAxis.enabled: !root.horizontal
+        target: null
+        enabled: true
+
+        function distance() {
+            if (root.horizontal)
+                return (centroid.position.x - centroid.pressPosition.x) / transitionView.width
+            return -(centroid.position.y - centroid.pressPosition.y) / transitionView.height
+        }
+
+        onActiveChanged: {
+            if (handler.active) {
+                if (distance() < 0)
+                    transitionView.nextItem = list.nextItem
+                else
+                    transitionView.nextItem = list.prevItem
+
+                transitionView.scheduleTransition()
+                if (transitionView.currentTransition)
+                    transitionView.currentTransition.effect.enable()
+            } else {
+                var p = Math.abs(distance()) * 100
+                if (transitionView.currentTransition && transitionView.currentTransition.effect.progress > root.threshold) {
+                    root.__activeItem = transitionView.nextItem
+                    root.__reactToTransition = true
+                    transitionView.currentTransition.__start()
+                } else { /* Drag was released, but threshold was not passed */
+                    if (transitionView.currentTransition)
+                        transitionView.currentTransition.effect.abort()
+                }
+                /* Block for 100ms */
+                handler.enabled = false
+                blocker.start()
+            }
+        }
+
+        onCentroidChanged: {
+            if (!handler.enabled)
+                return
+
+            var p = Math.abs(distance()) * 100
+
+            if (transitionView.currentTransition)
+                transitionView.currentTransition.effect.progress = p * 2
+        }
+    }
+}

build/qml/FlowView/qmldir

@@ -0,0 +1,46 @@
+module FlowView
+designersupported
+typeinfo FlowView.qmltypes
+DefaultFlowEffect 6.0 DefaultFlowEffect.qml
+DefaultFlowEffect 1.0 DefaultFlowEffect.qml
+SwipeInteraction 6.0 SwipeInteraction.qml
+SwipeInteraction 1.0 SwipeInteraction.qml
+FlowEffect 6.0 FlowEffect.qml
+FlowEffect 1.0 FlowEffect.qml
+FlowFadeEffect 6.0 FlowFadeEffect.qml
+FlowFadeEffect 1.0 FlowFadeEffect.qml
+FlowPushLeftEffect 6.0 FlowPushLeftEffect.qml
+FlowPushLeftEffect 1.0 FlowPushLeftEffect.qml
+FlowPushRightEffect 6.0 FlowPushRightEffect.qml
+FlowPushRightEffect 1.0 FlowPushRightEffect.qml
+FlowSlideDownEffect 6.0 FlowSlideDownEffect.qml
+FlowSlideDownEffect 1.0 FlowSlideDownEffect.qml
+FlowSlideLeftEffect 6.0 FlowSlideLeftEffect.qml
+FlowSlideLeftEffect 1.0 FlowSlideLeftEffect.qml
+FlowSlideRightEffect 6.0 FlowSlideRightEffect.qml
+FlowSlideRightEffect 1.0 FlowSlideRightEffect.qml
+FlowSlideUpEffect 6.0 FlowSlideUpEffect.qml
+FlowSlideUpEffect 1.0 FlowSlideUpEffect.qml
+FlowMoveEffect 6.0 FlowMoveEffect.qml
+FlowMoveEffect 1.0 FlowMoveEffect.qml
+FlowPushEffect 6.0 FlowPushEffect.qml
+FlowPushEffect 1.0 FlowPushEffect.qml
+FlowTransition 6.0 FlowTransition.qml
+FlowTransition 1.0 FlowTransition.qml
+FlowTransitionList 6.0 FlowTransitionList.qml
+FlowTransitionList 1.0 FlowTransitionList.qml
+FlowView 6.0 FlowView.qml
+FlowView 1.0 FlowView.qml
+FlowPushUpEffect 6.0 FlowPushUpEffect.qml
+FlowPushUpEffect 1.0 FlowPushUpEffect.qml
+FlowItem 6.0 FlowItem.qml
+FlowItem 1.0 FlowItem.qml
+FlowDecision 6.0 FlowDecision.qml
+FlowDecision 1.0 FlowDecision.qml
+FlowWildcard 6.0 FlowWildcard.qml
+FlowWildcard 1.0 FlowWildcard.qml
+FlowActionArea 6.0 FlowActionArea.qml
+FlowActionArea 1.0 FlowActionArea.qml
+singleton FlowState 6.0 FlowState.qml
+singleton FlowState 1.0 FlowState.qml
+

build/qml/KomplexHub/Constants.qml

@@ -0,0 +1,69 @@
+pragma Singleton
+import QtQuick
+import QtQuick.Studio.Application
+
+QtObject {
+    readonly property int width: 1920
+    readonly property int height: 1080
+
+    property string relativeFontDirectory: "fonts"
+
+    readonly property font largeFont: Qt.font({
+        family: Qt.application.font.family,
+        pixelSize: Qt.application.font.pixelSize * 1.6,
+    })
+    readonly property font mediumFont: Qt.font({
+        family: Qt.application.font.family,
+        pixelSize: Qt.application.font.pixelSize * 1.3
+    })
+    readonly property font font: Qt.font({
+        family: Qt.application.font.family,
+        pixelSize: Qt.application.font.pixelSize
+    })
+    readonly property font smallFont: Qt.font({
+        family: Qt.application.font.family,
+        pixelSize: Qt.application.font.pixelSize * 0.8
+    })
+    readonly property font h1Font: Qt.font({
+        family: Qt.application.font.family,
+        pixelSize: Qt.application.font.pixelSize * 1.8,
+        bold: true
+    })
+    readonly property font h2Font: Qt.font({
+        family: Qt.application.font.family,
+        pixelSize: Qt.application.font.pixelSize * 1.6,
+        bold: true
+    })
+    readonly property font h3Font: Qt.font({
+        family: Qt.application.font.family,
+        pixelSize: Qt.application.font.pixelSize * 1.4,
+        bold: true
+    })
+    readonly property font h4Font: Qt.font({
+        family: Qt.application.font.family,
+        pixelSize: Qt.application.font.pixelSize * 1.3,
+        bold: true
+    })
+    readonly property font h5Font: Qt.font({
+        family: Qt.application.font.family,
+        pixelSize: Qt.application.font.pixelSize * 1,
+        bold: true
+    })
+    readonly property font h6Font: Qt.font({
+        family: Qt.application.font.family,
+        pixelSize: Qt.application.font.pixelSize * 0.8,
+        bold: true
+    })
+
+    readonly property int largeMargin: 12
+    readonly property int mediumMargin: 6
+    readonly property int smallMargin: 3
+
+    readonly property int slowAnimationDuration: 750
+    readonly property int normalAnimationDuration: 250
+    readonly property int fastAnimationDuration: 125
+
+    property StudioApplication application: StudioApplication {
+        fontPath: Qt.resolvedUrl("../KomplexHubContent/" + relativeFontDirectory)
+    }
+}

build/qml/KomplexHub/Controls/KomplexHubMod_Controls.qmltypes

@@ -0,0 +1,8 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by qmltyperegistrar.
+
+Module {}

build/qml/KomplexHub/Controls/KomplexHubMod_Controls_qml_module_dir_map.qrc

@@ -0,0 +1,6 @@
+<RCC>
+  <qresource prefix="/">
+    <file alias="/qt/qml/KomplexHub/Controls">/home/parametheus/Projects/QtDesigner/KomplexHub/build/qml/KomplexHub/Controls</file>
+
+  </qresource>
+</RCC>

build/qml/KomplexHub/Controls/KomplexHubModule_Controls.qmltypes

@@ -0,0 +1,8 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by qmltyperegistrar.
+
+Module {}

build/qml/KomplexHub/Controls/KomplexHubModule_Controls_qml_module_dir_map.qrc

@@ -0,0 +1,6 @@
+<RCC>
+  <qresource prefix="/">
+    <file alias="/qt/qml/KomplexHub/Controls">/home/parametheus/Projects/QtDesigner/KomplexHub/build/qml/KomplexHub/Controls</file>
+
+  </qresource>
+</RCC>

build/qml/KomplexHub/Controls/LineEdit.qml

@@ -0,0 +1,119 @@
+/*
+ *  QML LineEdit Control
+ *  Copyright (C) 2026 @DigitalArtifex | github.com/DigitalArtifex | digitalartifex.dev
+ *
+ *  This control provides a wrapped TextInput that looks and acts more like the
+ *  LineEdit control from QtWidgets
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>
+ */
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+
+    /* Grouped Settings */
+    component BorderSettings: QtObject {
+        property color color: palette.alternateBase.lighter(1.75)
+        property int width: 1
+        property bool pixelAligned: true
+    }
+
+    component Corners: QtObject {
+        property int bottom: 0
+        property int left: 0
+        property int right: 0
+        property int top: 0
+    }
+
+    component Radius: QtObject {
+        property int topLeft: 0
+        property int topRight: 0
+        property int bottomLeft: 0
+        property int bottomRight: 0
+    }
+    /* End Grouped Settings */
+
+    property var background: palette.alternateBase
+    property BorderSettings border: BorderSettings {}
+
+    property Corners margins: Corners {bottom: 3; top: 3; left: 3; right: 3}
+    property Radius radius: Radius {}
+    property font font
+    property color color: palette.text
+    property Corners padding: Corners {bottom: 6; top: 6; left: 6; right: 6}
+    property alias text: lineEditInput.text
+
+    signal accepted
+    signal editingFinished
+
+    id: lineEditRoot
+
+    ColumnLayout {
+        anchors.fill: parent
+
+        Rectangle {
+            id: lineEditBackground
+
+            border.color: lineEditRoot.border.color
+            border.width: lineEditRoot.border.width
+            border.pixelAligned: lineEditRoot.border.pixelAligned
+
+            color: lineEditRoot.background
+
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+
+            Layout.topMargin: lineEditRoot.margins.top
+            Layout.bottomMargin: lineEditRoot.margins.bottom
+            Layout.leftMargin: lineEditRoot.margins.left
+            Layout.rightMargin: lineEditRoot.margins.right
+
+            bottomLeftRadius: lineEditRoot.radius.bottomLeft
+            bottomRightRadius: lineEditRoot.radius.bottomRight
+            topLeftRadius: lineEditRoot.radius.topLeft
+            topRightRadius: lineEditRoot.radius.topRight
+
+            TextInput {
+                id: lineEditInput
+                anchors.fill: parent
+                color: lineEditRoot.color
+                font: lineEditRoot.font
+
+                anchors.leftMargin: lineEditRoot.padding.left
+                anchors.topMargin: lineEditRoot.padding.top
+                anchors.bottomMargin: lineEditRoot.padding.bottom
+                anchors.rightMargin: lineEditRoot.padding.right
+
+                onAccepted: () => lineEditRoot.accepted()
+                onTextChanged: () => lineEditRoot.text = lineEditInput.text
+                onEditingFinished: () => lineEditRoot.editingFinished()
+            }
+
+            states: [
+                State {
+                    name: "focused"
+                    when: lineEditInput.focus
+                    PropertyChanges {
+                        target: lineEditBackground
+                        border.color: palette.accent
+                    }
+                }
+
+            ]
+        }
+    }
+}

build/qml/KomplexHub/Controls/MenuButton.qml

@@ -0,0 +1,134 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import KomplexHub
+
+Item {
+    id: menuButtonRoot
+    property string text: "Button Text"
+    property IconSettings icon: IconSettings {}
+    property var page: null
+    property bool selected: false
+
+    signal triggered
+
+    component IconSettings: QtObject {
+        property int width: 16
+        property int height: 16
+        property string url: ""
+    }
+
+    Rectangle {
+        id: menuButtonBackground
+
+        anchors.fill: parent
+        color: "transparent"
+
+        ColumnLayout {
+            spacing: 0
+            anchors.fill: parent
+            layoutDirection: Qt.LeftToRight
+
+            Image {
+                id: menuButtonIcon
+                source: icon.url
+
+                Layout.preferredWidth: icon.height
+                Layout.preferredHeight: icon.width
+                Layout.topMargin: Constants.mediumMargin
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+            }
+
+            Text {
+                color: palette.text
+                text: menuButtonRoot.text
+
+                elide: Text.ElideMiddle
+                horizontalAlignment: Qt.AlignHCenter
+                font.pixelSize: 12
+
+                Layout.fillWidth: true
+                Layout.topMargin: Constants.mediumMargin
+                Layout.bottomMargin: Constants.mediumMargin
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+            }
+        }
+
+        Behavior on color {
+            ColorAnimation { duration: Constants.fastAnimationDuration }
+        }
+    }
+
+    MouseArea {
+        property string lastState
+        id: mouseArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+
+        onEntered: () => {
+            menuButtonRoot.state = "hovered"
+        }
+
+        onExited: () => {
+            lastState = ""
+
+            if(selected)
+                menuButtonRoot.state = "selected"
+            else
+                menuButtonRoot.state = ""
+        }
+
+        onPressed: () => {
+            lastState = menuButtonRoot.state
+            menuButtonRoot.state = "clicked"
+        }
+
+        onReleased: () => {
+            if(!mouseArea.containsMouse)
+                return;
+
+            if(!selected)
+                selected = true
+        }
+    }
+
+    onSelectedChanged: () => {
+        if(selected) {
+            triggered()
+            state = "selected"
+        }
+        else {
+            state = ""
+        }
+    }
+
+    states: [
+        State {
+            name: "selected"
+
+            PropertyChanges {
+                target: menuButtonBackground
+                color: palette.accent.darker(1.5)
+            }
+        },
+        State {
+            name: "hovered"
+            //when: mouseArea.containsMouse
+
+            PropertyChanges {
+                target: menuButtonBackground
+                color: palette.button
+            }
+        },
+        State {
+            name: "clicked"
+            //when: mouseArea.containsPress
+
+            PropertyChanges {
+                target: menuButtonBackground
+                color: palette.button.darker(1.5)
+            }
+        }
+    ]
+}

build/qml/KomplexHub/Controls/SearchBar.qml

@@ -0,0 +1,63 @@
+/*
+This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
+It is supposed to be strictly declarative and only uses a subset of QML. If you edit
+this file manually, you might introduce QML code that is not supported by Qt Design Studio.
+Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
+*/
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import KomplexHub
+
+Item {
+    property string searchTerm: ""
+    property string icon: ""
+
+    id: searchBarRootItem
+    clip: true
+
+    Rectangle {
+        color: palette.base
+        anchors.fill: parent
+
+        RowLayout {
+            id: searchContainerLayout
+            anchors.fill: parent
+
+            LineEdit {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                padding.top: 12
+
+                font.pixelSize: 12
+
+                onAccepted: () => searchBarRootItem.searchTerm = text
+            }
+
+            SquareButton {
+                margins: 0
+                id: searchButton
+
+                Layout.fillHeight: true
+                Layout.preferredWidth: height
+                Layout.rightMargin: Constants.mediumMargin
+                Layout.topMargin: Constants.smallMargin
+                Layout.bottomMargin: Constants.smallMargin
+
+                icon.source: searchBarRootItem.icon
+                icon.width: 16
+                icon.height: 16
+            }
+        }
+    }
+
+    states: [
+        State {
+            name: "hidden"
+            PropertyChanges {
+                target: searchBarRootItem
+                visible: false
+            }
+        }
+    ]
+}

build/qml/KomplexHub/Controls/SquareButton.qml

@@ -0,0 +1,222 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+    property string text: qsTr("")
+    property IconSettings icon: IconSettings {}
+    property alias spacing: squareButtonLayout.spacing
+    property int margins: 4
+    property bool checkable: false
+    property bool checked: false
+    property color color: palette.button
+    property Gradient gradient: defaultGradient
+    property BorderSettings border: BorderSettings {}
+
+    signal triggered
+
+    height: 36
+    width: 180
+
+    id: squareButtonRoot
+
+    //icon properties. access them after Component.onLoad()
+    component IconSettings: QtObject {
+        property int width: 16
+        property int height: 16
+        property string source: "images/icons/icons8-next.svg"
+    }
+
+    component BorderSettings: QtObject {
+    }
+
+    Gradient {
+        id: clickedGradient
+        GradientStop { position: 0.0; color: palette.button.darker(1.25) }
+        GradientStop { position: 1.0; color: palette.button }
+    }
+
+    Gradient {
+        id: defaultGradient
+        GradientStop { position: 0.0; color: palette.button.lighter(1.25) }
+        GradientStop { position: 1.0; color: palette.button }
+    }
+
+    Gradient {
+        id: hoveredGradient
+        GradientStop { position: 0.0; color: palette.button.lighter(1.5) }
+        GradientStop { position: 1.0; color: palette.button.lighter(1.25) }
+    }
+
+    Rectangle {
+        id: squareButtonBackground
+        anchors.fill: parent
+        gradient: squareButtonRoot.gradient
+        border.color: palette.button.lighter()
+
+        RowLayout {
+            id: squareButtonLayout
+
+            anchors.fill: parent
+
+            Rectangle {
+                Layout.preferredHeight: squareButtonRoot.height < squareButtonRoot.width ? squareButtonRoot.height : squareButtonRoot.width
+                Layout.preferredWidth: squareButtonRoot.height < squareButtonRoot.width ? squareButtonRoot.height : squareButtonRoot.width
+
+                id: iconContainer
+
+                color: "transparent"
+
+                ColumnLayout {
+                    anchors.fill: parent
+
+                    Image {
+                        id: squareButtonIcon
+
+                        Layout.preferredWidth: icon.width
+                        Layout.preferredHeight: icon.height
+                        Layout.maximumHeight: icon.height
+                        Layout.maximumWidth: icon.width
+
+                        source: icon.source
+                        fillMode: Image.PreserveAspectFit
+                        Layout.alignment: Qt.AlignCenter
+                    }
+                }
+            }
+
+            Text {
+                id: squareButtonText
+                color: palette.text
+                verticalAlignment: Text.AlignVCenter
+                horizontalAlignment: Text.AlignHCenter
+                elide: Text.ElideMiddle
+                text: squareButtonRoot.text
+
+                font.pixelSize: 14
+
+                visible: text.length > 0
+
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.leftMargin: iconContainer.width * -1
+            }
+        }
+
+        Behavior on color {
+            ColorAnimation { duration: 250 }
+        }
+
+        // Behavior on gradient {
+        //     PropertyAnimation { duration: 250 }
+        // }
+    }
+
+    MouseArea {
+        property string lastState
+        id: mouseArea
+
+        anchors.fill: parent
+        hoverEnabled: true
+
+        onEntered: () => {
+            squareButtonRoot.state = "hovered"
+        }
+
+        onExited: () => {
+            lastState = ""
+
+            if(checked)
+                squareButtonRoot.state = "checked"
+            else
+                squareButtonRoot.state = ""
+        }
+
+        onPressed: () => {
+            lastState = squareButtonRoot.state
+            squareButtonRoot.state = "clicked"
+        }
+
+        onReleased: () => {
+            if(!mouseArea.containsMouse)
+                return;
+
+            squareButtonRoot.state = lastState
+
+            if(checkable)
+                checked = !checked
+
+            triggered()
+        }
+    }
+
+    onCheckedChanged: () => {
+        if(checked) {
+            squareButtonRoot.triggered()
+            squareButtonRoot.state = "checked"
+        }
+        else {
+            squareButtonRoot.state = ""
+        }
+    }
+
+    states:[
+        State {
+            name: "hovered"
+            PropertyChanges {
+                target: squareButtonBackground
+                border.color: palette.accent
+                gradient: hoveredGradient
+            }
+
+            PropertyChanges {
+                target: squareButtonText
+                color: palette.text
+            }
+        },
+
+        State {
+            name: "clicked"
+            PropertyChanges {
+                target: squareButtonBackground
+                border.color: palette.accent.darker(1.5)
+                gradient: clickedGradient
+            }
+
+            PropertyChanges {
+                target: squareButtonText
+                color: palette.text
+            }
+        },
+
+        State {
+            name: "checked"
+            PropertyChanges {
+                target: squareButtonBackground
+                border.color: palette.accent.darker(1.5)
+                gradient: clickedGradient
+            }
+
+            PropertyChanges {
+                target: squareButtonText
+                color: palette.text
+            }
+        },
+
+        State {
+            name: "disabled"
+            PropertyChanges {
+                target: squareButtonBackground
+                color: palette.button.darker()
+                gradient: null
+            }
+
+            PropertyChanges {
+                target: squareButtonText
+                color: palette.text.darker()
+            }
+        }
+
+    ]
+
+}

build/qml/KomplexHub/Controls/Throbber.qml

@@ -0,0 +1,126 @@
+import QtQuick
+import QtQuick.Shapes
+import QtQuick.Effects
+
+Item {
+    id: throbberRoot
+
+    Rectangle {
+        anchors.fill: parent
+        color: "transparent"
+
+        Item
+        {
+            id: outerRing
+            anchors.fill: parent
+
+            Shape
+            {
+                anchors.fill: parent
+                asynchronous: true
+
+                ShapePath
+                {
+                    property double progress: 0
+                    property int dashSpaceLength: 15
+                    property int dashLength: 1
+
+                    id: outerRingPath
+                    strokeColor: palette.accent.darker(1 + (progress - 0.25))
+                    fillColor: "transparent"
+                    strokeWidth: 3
+                    strokeStyle: ShapePath.DashLine
+
+                    startX: 0
+                    startY: outerRing.height * 0.5
+
+                    dashPattern: [
+                        dashSpaceLength - (dashSpaceLength * progress),
+                        dashSpaceLength * progress
+                    ]
+
+                    PathArc
+                    {
+                        x: outerRing.width
+                        y: outerRing.height * 0.5
+
+                        radiusX: outerRing.width / 2
+                        radiusY: outerRing.height / 2
+
+                        useLargeArc: false
+                    }
+
+                    PathArc
+                    {
+                        x: 0
+                        y: outerRing.height * 0.5
+
+                        radiusX: outerRing.width / 2
+                        radiusY: outerRing.height / 2
+
+                        useLargeArc: false
+                    }
+                }
+            }
+
+            transform: Rotation {
+                id: outerRingRotation
+                origin.x: outerRing.width / 2
+                origin.y: outerRing.height / 2
+            }
+
+            NumberAnimation {
+                property bool reverse: false
+
+                target: outerRingPath
+                property: "progress"
+                duration: 1600
+                //easing.type: Easing.InOutQuad
+
+                from: 0
+                to: 1
+                loops: 1
+                running: true
+
+                onFinished: () => {
+                    if(reverse)
+                    {
+                        from = 0
+                        to = 1
+                        start()
+                    }
+                    else
+                    {
+                        from = 1
+                        to = 0
+                        start()
+                    }
+
+                    reverse = !reverse
+                }
+            }
+
+            NumberAnimation {
+                target: outerRingRotation
+                property: "angle"
+                duration: 16000
+                easing.type: Easing.InOutQuad
+
+                from: 0
+                to: (360 * 4)
+                loops: NumberAnimation.Infinite
+                running: true
+            }
+        }
+
+        MultiEffect {
+            source: outerRing
+            anchors.fill: outerRing
+            brightness: 0.4
+            saturation: 0.2
+            blurEnabled: true
+            blurMax: 64
+            blur: 1.0
+        }
+    }
+}

build/qml/KomplexHub/Controls/qmldir

@@ -0,0 +1,12 @@
+module KomplexHub.Controls
+linktarget KomplexHubModule_Controlsplugin
+optional plugin KomplexHubModule_Controlsplugin
+classname KomplexHub_ControlsPlugin
+typeinfo KomplexHubModule_Controls.qmltypes
+prefer :/qt/qml/KomplexHub/Controls/
+LineEdit 1.0 LineEdit.qml
+MenuButton 1.0 MenuButton.qml
+SearchBar 1.0 SearchBar.qml
+SquareButton 1.0 SquareButton.qml
+Throbber 1.0 Throbber.qml
+

build/qml/KomplexHub/EventListModel.qml

@@ -0,0 +1,12 @@
+import QtQuick
+
+ListModel {
+    id: eventListModel
+
+    ListElement {
+        eventId: "enterPressed"
+        eventDescription: "Emitted when pressing the enter button"
+        shortcut: "Return"
+        parameters: "Enter"
+    }
+}

build/qml/KomplexHub/EventListSimulator.qml

@@ -0,0 +1,22 @@
+import QtQuick
+import QtQuick.Studio.EventSimulator
+import QtQuick.Studio.EventSystem
+
+QtObject {
+    id: simulator
+    property bool active: true
+
+    property Timer __timer: Timer {
+        id: timer
+        interval: 100
+        onTriggered: {
+            EventSimulator.show()
+        }
+    }
+
+    Component.onCompleted: {
+        EventSystem.init(Qt.resolvedUrl("EventListModel.qml"))
+        if (simulator.active)
+            timer.start()
+    }
+}

build/qml/KomplexHub/Kero/KeroBuildingAnimation.qml

@@ -0,0 +1,82 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import KomplexHub
+
+Item {
+    property string title: qsTr("Loading")
+    property string description: qsTr("Kero is busy looking for wallpapers..we promise")
+    property color color: palette.window
+
+    id: keroLoadingOverlayRoot
+
+    Rectangle {
+        anchors.fill: parent
+        color: keroLoadingOverlayRoot.color
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            Rectangle {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.minimumWidth: 64
+                Layout.minimumHeight: 64
+                Layout.maximumWidth: 512
+                Layout.maximumHeight: 512
+                Layout.alignment: Qt.AlignCenter
+
+                color: "transparent"
+
+                Image {
+                    id: keroLoadingImage
+                    anchors.fill: parent
+
+                    source: "../images/kero/kero_build_1.png"
+                    antialiasing: true
+                    fillMode: Image.PreserveAspectFit
+
+                    Timer {
+                        property int frame: 1
+                        id: animationTimer
+                        interval: 175
+                        running: parent.visible
+                        repeat: true
+
+                        onTriggered: () => {
+                            frame += 1;
+
+                            if(frame >= 4)
+                                frame = 1
+
+                            keroLoadingImage.source = "../images/kero/kero_build_" + frame + ".png"
+                        }
+                    }
+                }
+
+                ColumnLayout {
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    Text {
+                        color: palette.text
+                        text: keroLoadingOverlayRoot.title
+                        font: Constants.h1Font
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                    }
+
+                    Text {
+                        id: errorText
+                        text: keroLoadingOverlayRoot.description
+                        color: palette.text.darker()
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                        Layout.bottomMargin: Constants.largeMargin
+                    }
+                }
+            }
+        }
+    }
+}

build/qml/KomplexHub/Kero/KeroChoiceAvatar.qml

@@ -0,0 +1,65 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import KomplexHub
+
+Item {
+    property string title: qsTr("Please make a choice")
+    property string description: qsTr("")
+    property color color: palette.window
+
+    id: keroWarningAvatarRoot
+
+    Rectangle {
+        id: keroWarningAvatarBackground
+        anchors.fill: parent
+        color: keroWarningAvatarRoot.color
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            Rectangle {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.minimumWidth: 64
+                Layout.minimumHeight: 64
+                Layout.maximumWidth: 512
+                Layout.maximumHeight: 512
+                Layout.alignment: Qt.AlignCenter
+
+                color: "transparent"
+
+                Image {
+                    anchors.fill: parent
+
+                    source: "../images/kero/kero_choice.png"
+                    antialiasing: true
+                    fillMode: Image.PreserveAspectFit
+                }
+
+                ColumnLayout {
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    Text {
+                        color: palette.text
+                        text: keroWarningAvatarRoot.title
+                        font.pixelSize: Constants.largeFont.pixelSize * 1.5
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                    }
+
+                    Text {
+                        id: errorText
+                        text: keroWarningAvatarRoot.description
+                        color: palette.text.darker()
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                        Layout.bottomMargin: Constants.largeMargin
+                    }
+                }
+            }
+        }
+    }
+}

build/qml/KomplexHub/Kero/KeroErrorAvatar.qml

@@ -0,0 +1,66 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import KomplexHub
+
+Item {
+    property string title: qsTr("Error")
+    property string description: qsTr("A description of the error")
+    property color color: palette.window
+
+    id: errorOverlayRoot
+
+    Rectangle {
+        id: errorOverlayBackground
+        anchors.fill: parent
+        color: errorOverlayRoot.color
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            Rectangle {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.minimumWidth: 64
+                Layout.minimumHeight: 64
+                Layout.maximumWidth: 512
+                Layout.maximumHeight: 512
+                Layout.alignment: Qt.AlignCenter
+
+                color: "transparent"
+
+
+                Image {
+
+                    anchors.fill: parent
+
+                    source: "../images/kero/kero_error.png"
+                    antialiasing: true
+                    fillMode: Image.PreserveAspectFit
+                }
+
+                ColumnLayout {
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    Text {
+                        color: palette.text
+                        text: errorOverlayRoot.title
+                        font: Constants.h1Font
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                    }
+                    Text {
+                        id: errorText
+                        text: errorOverlayRoot.description
+                        color: palette.text.darker()
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                        Layout.bottomMargin: Constants.largeMargin
+                    }
+                }
+            }
+        }
+    }
+}

build/qml/KomplexHub/Kero/KeroHelloAvatar.qml

@@ -0,0 +1,65 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import KomplexHub
+
+Item {
+    property string title: qsTr("Hello!")
+    property string description: qsTr("")
+    property color color: palette.window
+
+    id: keroHelloAvatarRoot
+
+    Rectangle {
+        id: keroHelloAvatarBackground
+        anchors.fill: parent
+        color: keroHelloAvatarRoot.color
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            Rectangle {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.minimumWidth: 64
+                Layout.minimumHeight: 64
+                Layout.maximumWidth: 512
+                Layout.maximumHeight: 512
+                Layout.alignment: Qt.AlignCenter
+
+                color: "transparent"
+
+                Image {
+                    anchors.fill: parent
+
+                    source: "../images/kero/kero_hello.png"
+                    antialiasing: true
+                    fillMode: Image.PreserveAspectFit
+                }
+
+                ColumnLayout {
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    Text {
+                        color: palette.text
+                        text: keroHelloAvatarRoot.title
+                        font: Constants.h1Font
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                    }
+
+                    Text {
+                        id: errorText
+                        text: keroHelloAvatarRoot.description
+                        color: palette.text.darker()
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                        Layout.bottomMargin: Constants.largeMargin
+                    }
+                }
+            }
+        }
+    }
+}

build/qml/KomplexHub/Kero/KeroLoadingAnimation.qml

@@ -0,0 +1,82 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import KomplexHub
+
+Item {
+    property string title: qsTr("Loading")
+    property string description: qsTr("Kero is busy looking for wallpapers..we promise")
+    property color color: palette.window
+
+    id: keroLoadingOverlayRoot
+
+    Rectangle {
+        anchors.fill: parent
+        color: keroLoadingOverlayRoot.color
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            Rectangle {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.minimumWidth: 64
+                Layout.minimumHeight: 64
+                Layout.maximumWidth: 512
+                Layout.maximumHeight: 512
+                Layout.alignment: Qt.AlignCenter
+
+                color: "transparent"
+
+                Image {
+                    id: keroLoadingImage
+                    anchors.fill: parent
+
+                    source: "../images/kero/kero_run_1.png"
+                    antialiasing: true
+                    fillMode: Image.PreserveAspectFit
+
+                    Timer {
+                        property int frame: 1
+                        id: animationTimer
+                        interval: 175
+                        running: parent.visible
+                        repeat: true
+
+                        onTriggered: () => {
+                            frame += 1;
+
+                            if(frame >= 4)
+                                frame = 1
+
+                            keroLoadingImage.source = "../images/kero/kero_run_" + frame + ".png"
+                        }
+                    }
+                }
+
+                ColumnLayout {
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    Text {
+                        color: palette.text
+                        text: keroLoadingOverlayRoot.title
+                        font.pixelSize: Constants.largeFont.pixelSize * 1.5
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                    }
+
+                    Text {
+                        id: errorText
+                        text: keroLoadingOverlayRoot.description
+                        color: palette.text.darker()
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                        Layout.bottomMargin: Constants.largeMargin
+                    }
+                }
+            }
+        }
+    }
+}

build/qml/KomplexHub/Kero/KeroNoResultsAvatar.qml

@@ -0,0 +1,64 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import KomplexHub
+
+Item {
+    property string title: qsTr("No Results")
+    property string description: qsTr("Kero couldn't find any wallpapers with that search term")
+    property color color: palette.window
+
+    id: noResultsOverlayRoot
+
+    Rectangle {
+        id: noResultsOverlayBackground
+        anchors.fill: parent
+        color: noResultsOverlayRoot.color
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            Rectangle {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.minimumWidth: 64
+                Layout.minimumHeight: 64
+                Layout.maximumWidth: 512
+                Layout.maximumHeight: 512
+                Layout.alignment: Qt.AlignCenter
+
+                color: "transparent"
+
+                Image {
+                    anchors.fill: parent
+
+                    source: "../images/kero/kero_no_results.png"
+                    antialiasing: true
+                    fillMode: Image.PreserveAspectFit
+                }
+
+                ColumnLayout {
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    Text {
+                        color: palette.text
+                        text: noResultsOverlayRoot.title
+                        font.pixelSize: Constants.largeFont.pixelSize * 1.5
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                    }
+                    Text {
+                        id: errorText
+                        text: noResultsOverlayRoot.description
+                        color: palette.text.darker()
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                        Layout.bottomMargin: Constants.largeMargin
+                    }
+                }
+            }
+        }
+    }
+}

build/qml/KomplexHub/Kero/KeroWarningAvatar.qml

@@ -0,0 +1,65 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import KomplexHub
+
+Item {
+    property string title: qsTr("Warning")
+    property string description: qsTr("Kero noticed there might be an issue")
+    property color color: palette.window
+
+    id: keroWarningAvatarRoot
+
+    Rectangle {
+        id: keroWarningAvatarBackground
+        anchors.fill: parent
+        color: keroWarningAvatarRoot.color
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            Rectangle {
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                Layout.minimumWidth: 64
+                Layout.minimumHeight: 64
+                Layout.maximumWidth: 512
+                Layout.maximumHeight: 512
+                Layout.alignment: Qt.AlignCenter
+
+                color: "transparent"
+
+                Image {
+                    anchors.fill: parent
+
+                    source: "../images/kero/kero_warning.png"
+                    antialiasing: true
+                    fillMode: Image.PreserveAspectFit
+                }
+
+                ColumnLayout {
+                    anchors.bottom: parent.bottom
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+
+                    Text {
+                        color: palette.text
+                        text: keroWarningAvatarRoot.title
+                        font.pixelSize: Constants.largeFont.pixelSize * 1.5
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                    }
+
+                    Text {
+                        id: errorText
+                        text: keroWarningAvatarRoot.description
+                        color: palette.text.darker()
+
+                        Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+                        Layout.bottomMargin: Constants.largeMargin
+                    }
+                }
+            }
+        }
+    }
+}

build/qml/KomplexHub/Kero/KomplexHubMod_Kero.qmltypes

@@ -0,0 +1,8 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by qmltyperegistrar.
+
+Module {}

build/qml/KomplexHub/Kero/KomplexHubMod_Kero_qml_module_dir_map.qrc

@@ -0,0 +1,6 @@
+<RCC>
+  <qresource prefix="/">
+    <file alias="/qt/qml/KomplexHub/Kero">/home/parametheus/Projects/QtDesigner/KomplexHub/build/qml/KomplexHub/Kero</file>
+
+  </qresource>
+</RCC>

build/qml/KomplexHub/Kero/KomplexHubModule_Kero.qmltypes

@@ -0,0 +1,8 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by qmltyperegistrar.
+
+Module {}

build/qml/KomplexHub/Kero/KomplexHubModule_Kero_qml_module_dir_map.qrc

@@ -0,0 +1,6 @@
+<RCC>
+  <qresource prefix="/">
+    <file alias="/qt/qml/KomplexHub/Kero">/home/parametheus/Projects/QtDesigner/KomplexHub/build/qml/KomplexHub/Kero</file>
+
+  </qresource>
+</RCC>

build/qml/KomplexHub/Kero/qmldir

@@ -0,0 +1,14 @@
+module KomplexHub.Kero
+linktarget KomplexHubModule_Keroplugin
+optional plugin KomplexHubModule_Keroplugin
+classname KomplexHub_KeroPlugin
+typeinfo KomplexHubModule_Kero.qmltypes
+prefer :/qt/qml/KomplexHub/Kero/
+KeroBuildingAnimation 1.0 KeroBuildingAnimation.qml
+KeroChoiceAvatar 1.0 KeroChoiceAvatar.qml
+KeroErrorAvatar 1.0 KeroErrorAvatar.qml
+KeroHelloAvatar 1.0 KeroHelloAvatar.qml
+KeroLoadingAnimation 1.0 KeroLoadingAnimation.qml
+KeroNoResultsAvatar 1.0 KeroNoResultsAvatar.qml
+KeroWarningAvatar 1.0 KeroWarningAvatar.qml
+

build/qml/KomplexHub/KomplexHubModule.qmltypes

@@ -0,0 +1,8 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by qmltyperegistrar.
+
+Module {}

build/qml/KomplexHub/KomplexHubModule_qml_module_dir_map.qrc

@@ -0,0 +1,6 @@
+<RCC>
+  <qresource prefix="/">
+    <file alias="/qt/qml/KomplexHub">/home/parametheus/Projects/QtDesigner/KomplexHub/build/qml/KomplexHub</file>
+
+  </qresource>
+</RCC>

build/qml/KomplexHub/WallpaperModelData.qml

@@ -0,0 +1,67 @@
+import QtQuick
+import QtQuick.Controls
+
+ListModel {
+    ListElement {
+        author: "Wizmart"
+        name: "Some cool name 1"
+        description: "This is not a real wallpaper or person"
+        thumbnail: ""
+        uuid: "{aafd-311-afaa}"
+        url: ""
+    }
+
+    ListElement {
+        author: "Wizmart"
+        name: "Some cool name 2"
+        description: "This is not a real wallpaper or person"
+        thumbnail: ""
+        uuid: "{aafd-311-afaa}"
+        url: ""
+    }
+
+    ListElement {
+        author: "Wizmart"
+        name: "Some cool name 3"
+        description: "This is not a real wallpaper or person"
+        thumbnail: ""
+        uuid: "{aafd-311-afaa}"
+        url: ""
+    }
+
+    ListElement {
+        author: "Wizmart"
+        name: "Some cool name 4"
+        description: "This is not a real wallpaper or person"
+        thumbnail: ""
+        uuid: "{aafd-311-afaa}"
+        url: ""
+    }
+
+    ListElement {
+        author: "Wizmart"
+        name: "Some cool name 5"
+        description: "This is not a real wallpaper or person"
+        thumbnail: ""
+        uuid: "{aafd-311-afaa}"
+        url: ""
+    }
+
+    ListElement {
+        author: "Wizmart"
+        name: "Some cool name 6"
+        description: "This is not a real wallpaper or person"
+        thumbnail: ""
+        uuid: "{aafd-311-afaa}"
+        url: ""
+    }
+
+    ListElement {
+        author: "Wizmart"
+        name: "Some cool name 7"
+        description: "This is not a real wallpaper or person"
+        thumbnail: ""
+        uuid: "{aafd-311-afaa}"
+        url: ""
+    }
+}

build/qml/KomplexHub/qmldir

@@ -0,0 +1,11 @@
+module KomplexHub
+linktarget KomplexHubModuleplugin
+optional plugin KomplexHubModuleplugin
+classname KomplexHubPlugin
+typeinfo KomplexHubModule.qmltypes
+prefer :/qt/qml/KomplexHub/
+singleton Constants 1.0 Constants.qml
+EventListModel 1.0 EventListModel.qml
+EventListSimulator 1.0 EventListSimulator.qml
+WallpaperModelData 1.0 WallpaperModelData.qml
+

build/qml/KomplexHubContent/App.qml

@@ -0,0 +1,18 @@
+import QtQuick
+import KomplexHub
+
+Window {
+
+    visible: true
+    flags: Qt.Window
+    title: "KomplexHub"
+
+    MainScreen {
+        antialiasing: true
+        id: mainScreen
+
+        anchors.fill: parent
+    }
+
+}
+

build/qml/KomplexHubContent/KomplexHubContent.qmltypes

@@ -0,0 +1,8 @@
+import QtQuick.tooling 1.2
+
+// This file describes the plugin-supplied types contained in the library.
+// It is used for QML tooling purposes only.
+//
+// This file was auto-generated by qmltyperegistrar.
+
+Module {}

build/qml/KomplexHubContent/KomplexHubContent_qml_module_dir_map.qrc

@@ -0,0 +1,6 @@
+<RCC>
+  <qresource prefix="/">
+    <file alias="/qt/qml/KomplexHubContent">/home/parametheus/Projects/QtDesigner/KomplexHub/build/qml/KomplexHubContent</file>
+
+  </qresource>
+</RCC>

build/qml/KomplexHubContent/MainScreen.qml

@@ -0,0 +1,285 @@
+/*
+This is a UI file (.ui.qml) that is intended to be edited in Qt Design Studio only.
+It is supposed to be strictly declarative and only uses a subset of QML. If you edit
+this file manually, you might introduce QML code that is not supported by Qt Design Studio.
+Check out https://doc.qt.io/qtcreator/creator-quick-ui-forms.html for details on .ui.qml files.
+*/
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import KomplexHub
+import KomplexHub.Controls
+import KomplexHub.Kero
+
+Rectangle {
+    property MenuButton currentMenuButton
+
+    id: windowRoot
+
+    color: palette.window
+    RowLayout {
+        id: windowRootLayout
+        anchors.fill: parent
+
+        Rectangle {
+            id: windowMenu
+
+            Layout.fillWidth: false
+            Layout.fillHeight: true
+            Layout.preferredWidth: 100
+            Layout.minimumWidth: 100
+            Layout.maximumWidth: 100
+
+            color: palette.base
+
+            ColumnLayout {
+                id: windowMenuLayout
+                anchors.fill: parent
+
+                MenuButton {
+                    id: homeMenubutton
+                    Layout.alignment: Qt.AlignTop
+
+                    height: 64
+                    width: 100
+                    text: "Home"
+
+                    icon.height: 32
+                    icon.width: 32
+                    icon.url: Qt.resolvedUrl("images/icons/icons8-famous.svg")
+
+                    onTriggered: () => {
+                        pageLoader.page = "pages/HomePage.qml"
+
+                        currentMenuButton.selected = false
+                        currentMenuButton = this
+
+                        searchContainer.preferredHeight = 0
+                    }
+                }
+
+                MenuButton {
+                    Layout.alignment: Qt.AlignTop
+
+                    height: 64
+                    width: 100
+                    text: "Images"
+
+                    icon.height: 32
+                    icon.width: 32
+                    icon.url: Qt.resolvedUrl("images/icons/icons8-image.svg")
+
+                    onTriggered: () => {
+                        pageLoader.page = "pages/ImageSearchPage.qml"
+
+                        currentMenuButton.selected = false
+                        currentMenuButton = this
+
+                        searchContainer.preferredHeight = 36
+                    }
+                }
+
+                MenuButton {
+                    Layout.alignment: Qt.AlignTop
+
+                    height: 64
+                    width: 100
+                    text: "Live"
+
+                    icon.height: 32
+                    icon.width: 32
+                    icon.url: Qt.resolvedUrl("images/icons/icons8-biotech.svg")
+
+                    onTriggered: () => {
+                        pageLoader.page = "pages/LiveSearchPage.qml"
+
+                        currentMenuButton.selected = false
+                        currentMenuButton = this
+
+                        searchContainer.preferredHeight = 36
+                    }
+                }
+
+                MenuButton {
+                    Layout.alignment: Qt.AlignTop
+
+                    height: 64
+                    width: 100
+                    text: "Installed"
+
+                    icon.height: 32
+                    icon.width: 32
+                    icon.url: Qt.resolvedUrl("images/icons/icons8-hdd.svg")
+
+                    onTriggered: () => {
+                        pageLoader.page = "pages/InstalledWallpaperPage.qml"
+
+                        currentMenuButton.selected = false
+                        currentMenuButton = this
+
+                        searchContainer.preferredHeight = 0
+                    }
+                }
+
+                Item {
+                    Layout.fillHeight: true
+                }
+
+                MenuButton {
+                    Layout.alignment: Qt.AlignBottom
+
+                    height: 64
+                    width: 100
+                    text: "Settings"
+
+                    icon.height: 32
+                    icon.width: 32
+                    icon.url: Qt.resolvedUrl("images/icons/icons8-settings.svg")
+
+                    onTriggered: () => {
+                        pageLoader.page = "pages/SettingsPage.qml"
+
+                        currentMenuButton.selected = false
+                        currentMenuButton = this
+
+                        searchContainer.preferredHeight = 0
+                    }
+                }
+            }
+        }
+
+        Rectangle {
+            id: windowContainer
+
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            Layout.topMargin: 3
+
+            color: palette.window
+
+            ColumnLayout {
+                id: windowContainerLayout
+                anchors.fill: parent
+
+                SearchBar {
+                    property int preferredHeight: 36
+
+                    id: searchContainer
+
+                    Layout.fillHeight: false
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: preferredHeight
+                    Layout.minimumHeight: preferredHeight
+                    Layout.maximumHeight: preferredHeight
+
+                    icon: Qt.resolvedUrl("images/icons/icons8-search.svg")
+
+                    Behavior on preferredHeight {
+                        NumberAnimation { duration: Constants.normalAnimationDuration }
+                    }
+                }
+
+                Loader {
+                    property bool loading: false
+                    property string page
+
+                    onPageChanged: () => {
+                        loading = true
+                        fadeOutPage()
+                    }
+
+                    id: pageLoader
+
+                    Layout.fillHeight: true
+                    Layout.fillWidth: true
+
+                    OpacityAnimator on opacity {
+                        id: pageLoaderAnimation
+
+                        target: pageLoader
+                        duration: 150
+
+                        onFinished: () => {
+                            if(pageLoader.loading && pageLoader.opacity === 0)
+                                pageLoader.loadPage()
+                            else if(pageLoader.loading && pageLoader.opacity === 1)
+                                pageLoader.loading = false
+                        }
+                    }
+
+                    function fadeOutPage() {
+                        pageLoaderAnimation.from = 1
+                        pageLoaderAnimation.to = 0
+                        pageLoaderAnimation.start()
+                    }
+
+                    function fadeInPage() {
+                        if(pageLoader.sourceComponent.status != Component.Ready)
+                            return
+
+                        pageLoaderAnimation.from = 0
+                        pageLoaderAnimation.to = 1
+                        pageLoaderAnimation.start()
+                    }
+
+                    function loadPage() {
+                        sourceComponent = Qt.createComponent(page)
+
+                        if(pageLoader.sourceComponent.status == Component.Ready)
+                            fadeInPage()
+                        else
+                            statusChanged.connect(fadeInPage)
+                    }
+                }
+            }
+        }
+    }
+
+    KeroBuildingAnimation {
+        id: buildingOverlay
+
+        anchors.fill: parent
+        visible: false
+    }
+
+    KeroLoadingAnimation {
+        id: loadingAnimation
+        anchors.fill: parent
+
+        // OpacityAnimator on opacity {
+        //     duration: 150
+        // }
+
+        visible: opacity > 0
+        opacity: 0
+    }
+
+    Component.onCompleted: () => {
+        homeMenubutton.selected = true
+        currentMenuButton = homeMenubutton
+        pageLoader.page = "pages/HomePage.qml"
+        searchContainer.preferredHeight = 0
+        loadingAnimation.opacity = 0
+    }
+
+    states: [
+        State {
+            name: "build_error"
+            PropertyChanges {
+                target: windowOverlay
+                visible: true
+            }
+        },
+        State {
+            name: "building"
+            PropertyChanges {
+                target: buildingOverlay
+                visible: true
+            }
+        },
+        State {
+            name: "build_complete"
+        }
+
+    ]
+}

build/qml/KomplexHubContent/images/icons/icons8-back.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 72 72" width="64px" height="64px"><path d="M46.023,59.542c-1.008,0-2.016-0.378-2.794-1.137L23.183,38.844c-0.771-0.752-1.206-1.785-1.206-2.863	s0.435-2.11,1.206-2.863L43.19,13.596c1.582-1.542,4.113-1.512,5.657,0.069c1.542,1.581,1.512,4.114-0.069,5.656l-17.074,16.66	l17.113,16.698c1.581,1.542,1.611,4.075,0.069,5.656C48.103,59.138,47.063,59.542,46.023,59.542z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-bill.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">    <path d="M6,2v46h38V2H6z M27,39H13v-2h14V39z M27,33H13v-2h14V33z M27,27H13v-2h14V27z M37,39h-5v-2h5V39z M37,33h-5v-2h5V33z M37,27h-5v-2h5V27z M37,13H13v-2h24V13z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-biotech.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 8.9375 1.96875 C 8.863281 1.976563 8.792969 1.984375 8.71875 2 C 7.714844 2.15625 6.988281 3.046875 7.03125 4.0625 C 7.230469 11.042969 9.492188 15.933594 12.78125 19.375 C 15.101563 21.800781 17.84375 23.511719 20.625 25 C 13.867188 28.640625 7.34375 33.683594 7 45.96875 C 6.96875 47.074219 7.863281 47.96875 8.96875 48 C 8.988281 48 8.980469 48.03125 9 48.03125 C 10.078125 48.03125 10.96875 47.148438 11 46.0625 C 11.328125 34.269531 17.871094 30.816406 25.5 27 C 25.835938 26.925781 26.148438 26.761719 26.40625 26.53125 C 34.101563 22.675781 42.605469 18.125 43 4.03125 C 43.03125 2.925781 42.136719 2.03125 41.03125 2 C 39.953125 1.988281 39.03125 2.832031 39 3.9375 C 39 3.960938 39 3.976563 39 4 L 13 4 C 12.96875 4 12.9375 4 12.90625 4 C 12.875 4 12.84375 4 12.8125 4 C 12.261719 4.050781 11.855469 4.542969 11.90625 5.09375 C 11.957031 5.644531 12.449219 6.050781 13 6 L 38.84375 6 C 38.773438 6.695313 38.679688 7.367188 38.5625 8 L 13.59375 8 C 13.5625 8 13.53125 8 13.5 8 C 13.46875 8 13.4375 8 13.40625 8 C 12.855469 8.050781 12.449219 8.542969 12.5 9.09375 C 12.550781 9.644531 13.042969 10.050781 13.59375 10 L 38.09375 10 C 37.886719 10.714844 37.648438 11.367188 37.375 12 L 16 12 C 15.96875 12 15.9375 12 15.90625 12 C 15.875 12 15.84375 12 15.8125 12 C 15.261719 12.050781 14.855469 12.542969 14.90625 13.09375 C 14.957031 13.644531 15.449219 14.050781 16 14 L 36.34375 14 C 35.902344 14.71875 35.40625 15.382813 34.875 16 L 19.40625 16 C 19.375 16 19.34375 16 19.3125 16 C 19.28125 16 19.25 16 19.21875 16 C 18.667969 16.050781 18.261719 16.542969 18.3125 17.09375 C 18.363281 17.644531 18.855469 18.050781 19.40625 18 L 32.84375 18 C 31.976563 18.722656 31.046875 19.382813 30.0625 20 L 25 20 C 24.96875 20 24.9375 20 24.90625 20 C 24.875 20 24.84375 20 24.8125 20 C 24.261719 20.050781 23.855469 20.542969 23.90625 21.09375 C 23.957031 21.644531 24.449219 22.050781 25 22 L 26.46875 22 C 25.988281 22.25 25.492188 22.503906 25 22.75 C 21.441406 20.957031 18.105469 19.15625 15.65625 16.59375 C 12.996094 13.8125 11.179688 10.171875 11 3.96875 C 11 3.425781 10.78125 2.910156 10.390625 2.53125 C 10.003906 2.15625 9.480469 1.953125 8.9375 1.96875 Z M 31.4375 26.15625 C 30.261719 26.824219 29.089844 27.417969 27.9375 28 L 24.3125 28 C 24.269531 27.996094 24.230469 27.996094 24.1875 28 C 24.15625 28 24.125 28 24.09375 28 C 23.542969 28.058594 23.140625 28.558594 23.203125 29.109375 C 23.261719 29.660156 23.761719 30.0625 24.3125 30 L 30.03125 30 C 31.015625 30.628906 31.960938 31.289063 32.8125 32 L 18.8125 32 C 18.769531 31.996094 18.730469 31.996094 18.6875 32 C 18.65625 32 18.625 32 18.59375 32 C 18.042969 32.058594 17.640625 32.558594 17.703125 33.109375 C 17.761719 33.660156 18.261719 34.0625 18.8125 34 L 34.875 34 C 35.414063 34.621094 35.898438 35.28125 36.34375 36 L 15.59375 36 C 15.5625 36 15.53125 36 15.5 36 C 15.46875 36 15.4375 36 15.40625 36 C 14.855469 36.050781 14.449219 36.542969 14.5 37.09375 C 14.550781 37.644531 15.042969 38.050781 15.59375 38 L 37.40625 38 C 37.675781 38.625 37.917969 39.296875 38.125 40 L 13.59375 40 C 13.5625 40 13.53125 40 13.5 40 C 13.46875 40 13.4375 40 13.40625 40 C 12.855469 40.050781 12.449219 40.542969 12.5 41.09375 C 12.550781 41.644531 13.042969 42.050781 13.59375 42 L 38.5625 42 C 38.679688 42.632813 38.773438 43.304688 38.84375 44 L 13 44 C 12.96875 44 12.9375 44 12.90625 44 C 12.875 44 12.84375 44 12.8125 44 C 12.261719 44.050781 11.855469 44.542969 11.90625 45.09375 C 11.957031 45.644531 12.449219 46.050781 13 46 L 39 46 C 39 46.011719 39 46.019531 39 46.03125 C 39.03125 47.117188 39.890625 48 40.96875 48 C 40.988281 48 41.011719 47.96875 41.03125 47.96875 C 42.136719 47.9375 43 47.042969 42.96875 45.9375 C 42.640625 34.542969 36.996094 29.527344 31.4375 26.15625 Z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-cancel.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M25,2C12.319,2,2,12.319,2,25s10.319,23,23,23s23-10.319,23-23S37.681,2,25,2z M33.71,32.29c0.39,0.39,0.39,1.03,0,1.42	C33.51,33.9,33.26,34,33,34s-0.51-0.1-0.71-0.29L25,26.42l-7.29,7.29C17.51,33.9,17.26,34,17,34s-0.51-0.1-0.71-0.29	c-0.39-0.39-0.39-1.03,0-1.42L23.58,25l-7.29-7.29c-0.39-0.39-0.39-1.03,0-1.42c0.39-0.39,1.03-0.39,1.42,0L25,23.58l7.29-7.29	c0.39-0.39,1.03-0.39,1.42,0c0.39,0.39,0.39,1.03,0,1.42L26.42,25L33.71,32.29z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-check-mark.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M25,2C12.318,2,2,12.318,2,25c0,12.683,10.318,23,23,23c12.683,0,23-10.317,23-23C48,12.318,37.683,2,25,2z M35.827,16.562	L24.316,33.525l-8.997-8.349c-0.405-0.375-0.429-1.008-0.053-1.413c0.375-0.406,1.009-0.428,1.413-0.053l7.29,6.764l10.203-15.036	c0.311-0.457,0.933-0.575,1.389-0.266C36.019,15.482,36.138,16.104,35.827,16.562z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-close-window.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">    <path d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M34.71,33.29l-1.42,1.42 L25,26.42l-8.29,8.29l-1.42-1.42L23.58,25l-8.29-8.29l1.42-1.42L25,23.58l8.29-8.29l1.42,1.42L26.42,25L34.71,33.29z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-famous.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 32 32" width="64px" height="64px"><path d="M29.895,12.52c-0.235-0.704-0.829-1.209-1.549-1.319l-7.309-1.095l-3.29-6.984C17.42,2.43,16.751,2,16,2	s-1.42,0.43-1.747,1.122l-3.242,6.959l-7.357,1.12c-0.72,0.11-1.313,0.615-1.549,1.319c-0.241,0.723-0.063,1.507,0.465,2.046	l5.321,5.446l-1.257,7.676c-0.125,0.767,0.185,1.518,0.811,1.959c0.602,0.427,1.376,0.469,2.02,0.114l6.489-3.624l6.581,3.624	c0.646,0.355,1.418,0.311,2.02-0.114c0.626-0.441,0.937-1.192,0.811-1.959l-1.259-7.686l5.323-5.436	C29.958,14.027,30.136,13.243,29.895,12.52z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-filter.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 4 2 C 3.398438 2 3 2.398438 3 3 L 3 6 C 3 6.300781 3.113281 6.488281 3.3125 6.6875 L 19.3125 23.6875 C 19.511719 23.886719 19.800781 24 20 24 L 30 24 C 30.300781 24 30.488281 23.886719 30.6875 23.6875 L 46.6875 6.6875 C 46.886719 6.488281 47 6.300781 47 6 L 47 3 C 47 2.398438 46.601563 2 46 2 Z M 19 26 L 19 41 C 19 41.398438 19.199219 41.707031 19.5 41.90625 L 29.5 47.90625 C 29.601563 48.007813 29.800781 48 30 48 C 30.199219 48 30.300781 48.007813 30.5 47.90625 C 30.800781 47.707031 31 47.398438 31 47 L 31 26 Z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-forward.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 5 44.996094 C 4.984375 44.996094 4.972656 44.996094 4.957031 44.996094 C 4.417969 44.972656 3.992188 44.527344 4 43.988281 C 4.003906 43.742188 4.578125 19.679688 28 19.015625 L 28 12 C 28 11.613281 28.222656 11.261719 28.570313 11.097656 C 28.914063 10.929688 29.332031 10.980469 29.628906 11.222656 L 45.628906 24.222656 C 45.863281 24.414063 46 24.699219 46 25 C 46 25.300781 45.863281 25.585938 45.632813 25.777344 L 29.632813 38.777344 C 29.332031 39.019531 28.917969 39.066406 28.570313 38.902344 C 28.222656 38.738281 28 38.386719 28 38 L 28 31.007813 C 7.160156 31.386719 6.035156 43.542969 5.996094 44.066406 C 5.960938 44.59375 5.523438 44.996094 5 44.996094 Z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-hdd.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 7.6875 0 C 6.777344 0 5.964844 0.6875 5.8125 1.59375 L 0.625 32.25 C 1.050781 32.09375 1.519531 32 2 32 L 48 32 C 48.46875 32 48.894531 32.101563 49.3125 32.25 L 44.1875 1.59375 C 44.035156 0.683594 43.226563 0 42.3125 0 Z M 25 8 C 32.726563 8 39 12.476563 39 18 C 39 23.519531 32.726563 28 25 28 C 17.273438 28 11 23.519531 11 18 C 11 12.476563 17.273438 8 25 8 Z M 25 15 C 23.34375 15 22 15.894531 22 17 C 22 18.105469 23.34375 19 25 19 C 26.65625 19 28 18.105469 28 17 C 28 15.894531 26.65625 15 25 15 Z M 2 34 C 0.898438 34 0 34.898438 0 36 L 0 48 C 0 49.101563 0.898438 50 2 50 L 48 50 C 49.101563 50 50 49.101563 50 48 L 50 36 C 50 34.898438 49.101563 34 48 34 Z M 40 40 C 41.105469 40 42 40.894531 42 42 C 42 43.105469 41.105469 44 40 44 C 38.894531 44 38 43.105469 38 42 C 38 40.894531 38.894531 40 40 40 Z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-image.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 0 4 L 0 46 L 50 46 L 50 4 Z M 2 6 L 48 6 L 48 44 L 2 44 Z M 4 8 L 4 30.6875 L 17.3125 18.28125 C 17.507813 18.097656 17.769531 17.972656 18.03125 18 C 18.296875 18.011719 18.570313 18.117188 18.75 18.3125 L 29.03125 29.5625 L 33.28125 25.28125 C 33.671875 24.890625 34.328125 24.890625 34.71875 25.28125 L 46 36.59375 L 46 8 Z M 35 15 C 36.65625 15 38 16.34375 38 18 C 38 19.65625 36.65625 21 35 21 C 33.34375 21 32 19.65625 32 18 C 32 16.34375 33.34375 15 35 15 Z M 17.9375 20.40625 L 4 33.4375 L 4 42 L 46 42 L 46 39.40625 L 34 27.40625 L 26.40625 35 L 23.59375 35 L 27.625 30.96875 Z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-login.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25.017578 1.9824219 C 15.436898 1.9824219 7.2123268 7.8663695 3.7636719 16.220703 A 2.0002 2.0002 0 1 0 7.4609375 17.746094 C 10.308283 10.848427 17.072259 5.9824219 25.017578 5.9824219 C 35.534702 5.9824219 44.017578 14.465298 44.017578 24.982422 C 44.017578 35.499546 35.534702 43.982422 25.017578 43.982422 C 17.073352 43.982422 10.308226 39.118231 7.4609375 32.220703 A 2.0002 2.0002 0 1 0 3.7636719 33.746094 C 7.2123838 42.100566 15.437804 47.982422 25.017578 47.982422 C 37.696454 47.982422 48.017578 37.661298 48.017578 24.982422 C 48.017578 12.303546 37.696454 1.9824219 25.017578 1.9824219 z M 26.962891 15.962891 A 2.0002 2.0002 0 0 0 25.568359 19.396484 L 29.154297 22.982422 L 3.9824219 22.982422 A 2.0002 2.0002 0 1 0 3.9824219 26.982422 L 29.154297 26.982422 L 25.568359 30.568359 A 2.0002 2.0002 0 1 0 28.396484 33.396484 L 35.396484 26.396484 A 2.0002 2.0002 0 0 0 35.396484 23.568359 L 28.396484 16.568359 A 2.0002 2.0002 0 0 0 26.962891 15.962891 z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-logout-rounded-left.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 24.96875 1.96875 C 18.17279 1.96875 12.052876 4.9382251 7.8476562 9.6347656 A 2.0002 2.0002 0 1 0 10.826172 12.302734 C 14.306952 8.4152753 19.33471 5.96875 24.96875 5.96875 C 35.485874 5.96875 43.96875 14.451626 43.96875 24.96875 C 43.96875 35.485874 35.485874 43.96875 24.96875 43.96875 C 19.335804 43.96875 14.308056 41.522447 10.826172 37.634766 A 2.0002 2.0002 0 1 0 7.8476562 40.302734 C 12.053772 44.999053 18.173696 47.96875 24.96875 47.96875 C 37.647626 47.96875 47.96875 37.647626 47.96875 24.96875 C 47.96875 12.289874 37.647626 1.96875 24.96875 1.96875 z M 10.992188 15.949219 A 2.0002 2.0002 0 0 0 9.6171875 16.554688 L 2.7949219 23.376953 A 2.0002 2.0002 0 0 0 2.8027344 26.568359 L 9.6171875 33.382812 A 2.0002 2.0002 0 1 0 12.445312 30.554688 L 8.859375 26.96875 L 27.03125 26.96875 A 2.0002 2.0002 0 1 0 27.03125 22.96875 L 8.859375 22.96875 L 12.445312 19.382812 A 2.0002 2.0002 0 0 0 10.992188 15.949219 z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-next.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 72 72" width="64px" height="64px"><path d="M25.977,59.542c-1.04,0-2.079-0.403-2.863-1.207c-1.542-1.581-1.512-4.114,0.069-5.656l17.113-16.698l-17.074-16.66	c-1.581-1.542-1.611-4.075-0.069-5.656c1.544-1.582,4.076-1.612,5.657-0.069l20.008,19.522c0.771,0.752,1.206,1.785,1.206,2.863	s-0.435,2.11-1.206,2.863L28.771,58.404C27.992,59.164,26.984,59.542,25.977,59.542z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-reply-arrow.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 45 45 C 44.476563 45 44.035156 44.59375 44.003906 44.066406 C 43.960938 43.519531 42.820313 31.386719 22 31.007813 L 22 38 C 22 38.386719 21.777344 38.738281 21.429688 38.902344 C 21.082031 39.066406 20.667969 39.019531 20.371094 38.777344 L 4.371094 25.777344 C 4.136719 25.585938 4 25.300781 4 25 C 4 24.699219 4.136719 24.414063 4.371094 24.222656 L 20.371094 11.222656 C 20.671875 10.980469 21.082031 10.929688 21.429688 11.097656 C 21.777344 11.261719 22 11.613281 22 12 L 22 19.015625 C 44.203125 19.644531 45.875 41.304688 45.992188 43.761719 C 46.011719 43.839844 46.019531 43.917969 46.019531 44 C 46.019531 44.554688 45.574219 45 45.019531 45 C 45.015625 45 45.007813 45 45 45 Z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-search.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-settings.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">    <path d="M47.16,21.221l-5.91-0.966c-0.346-1.186-0.819-2.326-1.411-3.405l3.45-4.917c0.279-0.397,0.231-0.938-0.112-1.282 l-3.889-3.887c-0.347-0.346-0.893-0.391-1.291-0.104l-4.843,3.481c-1.089-0.602-2.239-1.08-3.432-1.427l-1.031-5.886 C28.607,2.35,28.192,2,27.706,2h-5.5c-0.49,0-0.908,0.355-0.987,0.839l-0.956,5.854c-1.2,0.345-2.352,0.818-3.437,1.412l-4.83-3.45 c-0.399-0.285-0.942-0.239-1.289,0.106L6.82,10.648c-0.343,0.343-0.391,0.883-0.112,1.28l3.399,4.863 c-0.605,1.095-1.087,2.254-1.438,3.46l-5.831,0.971c-0.482,0.08-0.836,0.498-0.836,0.986v5.5c0,0.485,0.348,0.9,0.825,0.985 l5.831,1.034c0.349,1.203,0.831,2.362,1.438,3.46l-3.441,4.813c-0.284,0.397-0.239,0.942,0.106,1.289l3.888,3.891 c0.343,0.343,0.884,0.391,1.281,0.112l4.87-3.411c1.093,0.601,2.248,1.078,3.445,1.424l0.976,5.861C21.3,47.647,21.717,48,22.206,48 h5.5c0.485,0,0.9-0.348,0.984-0.825l1.045-5.89c1.199-0.353,2.348-0.833,3.43-1.435l4.905,3.441 c0.398,0.281,0.938,0.232,1.282-0.111l3.888-3.891c0.346-0.347,0.391-0.894,0.104-1.292l-3.498-4.857 c0.593-1.08,1.064-2.222,1.407-3.408l5.918-1.039c0.479-0.084,0.827-0.5,0.827-0.985v-5.5C47.999,21.718,47.644,21.3,47.16,21.221z M25,32c-3.866,0-7-3.134-7-7c0-3.866,3.134-7,7-7s7,3.134,7,7C32,28.866,28.866,32,25,32z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-shopping-cart.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 2 2 C 0.894531 2 0 2.894531 0 4 C 0 5.105469 0.894531 6 2 6 C 3.105469 6 4 5.105469 4 4 L 8.65625 4 C 10.742188 4 11.542969 4.667969 12.21875 6.9375 L 20.21875 39.21875 C 20.644531 40.828125 21.125 42.609375 22.9375 43.46875 C 22.367188 44.160156 22 45.035156 22 46 C 22 48.207031 23.792969 50 26 50 C 28.207031 50 30 48.207031 30 46 C 30 45.269531 29.78125 44.589844 29.4375 44 L 35.5625 44 C 35.21875 44.589844 35 45.269531 35 46 C 35 48.207031 36.792969 50 39 50 C 41.207031 50 43 48.207031 43 46 C 43 44.960938 42.589844 44.023438 41.9375 43.3125 C 41.972656 43.210938 42 43.113281 42 43 C 42 42.449219 41.550781 42 41 42 L 25.71875 42 C 23.023438 42 22.730469 40.921875 22.15625 38.75 L 21.46875 36 L 39.8125 36 C 40.226563 36 40.605469 35.730469 40.75 35.34375 L 47.9375 16.34375 C 48.054688 16.039063 47.996094 15.707031 47.8125 15.4375 C 47.628906 15.167969 47.324219 15 47 15 L 16.28125 15 L 14.15625 6.40625 C 13.476563 4.117188 12.320313 2 8.65625 2 Z M 26 44 C 27.101563 44 28 44.898438 28 46 C 28 47.101563 27.101563 48 26 48 C 24.898438 48 24 47.101563 24 46 C 24 44.898438 24.898438 44 26 44 Z M 39 44 C 40.101563 44 41 44.898438 41 46 C 41 47.101563 40.101563 48 39 48 C 37.898438 48 37 47.101563 37 46 C 37 44.898438 37.898438 44 39 44 Z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-star-filled.svg

@@ -0,0 +1 @@
+<?xml version="1.0"?><svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px">    <path d="M10.2,48.6c-0.2,0-0.4-0.1-0.6-0.2c-0.3-0.2-0.5-0.7-0.4-1.1l4.4-16.4L0.4,20.2C0,20-0.1,19.5,0,19.1 c0.1-0.4,0.5-0.7,0.9-0.7l17-0.9l6.1-15.9C24.2,1.3,24.6,1,25,1c0.4,0,0.8,0.3,0.9,0.6l6.1,15.9l17,0.9c0.4,0,0.8,0.3,0.9,0.7 c0.1,0.4,0,0.8-0.3,1.1L36.4,30.9l4.4,16.4c0.1,0.4,0,0.8-0.4,1.1c-0.3,0.2-0.8,0.3-1.1,0L25,39.2l-14.3,9.2 C10.5,48.6,10.4,48.6,10.2,48.6z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-store.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 7 4 C 5.346 4 4 5.346 4 7 L 4 10.912109 C 3.9625533 11.094611 3 15.799274 3 18.5 C 3 19.87865 3.2660604 21.198539 3.9960938 22.251953 C 3.9974251 22.253874 3.9986651 22.255894 4 22.257812 L 4 43 C 4 44.657 5.343 46 7 46 L 43 46 C 44.657 46 46 44.657 46 43 L 46 22.257812 C 46.001335 22.255894 46.002575 22.253874 46.003906 22.251953 C 46.73394 21.198539 47 19.87865 47 18.5 C 47 15.799274 46.037447 11.09461 46 10.912109 L 46 7 C 46 5.346 44.654 4 43 4 L 7 4 z M 8 7 C 8.552 7 9 7.448 9 8 C 9 8.552 8.552 9 8 9 C 7.448 9 7 8.552 7 8 C 7 7.448 7.448 7 8 7 z M 11 7 C 11.552 7 12 7.448 12 8 C 12 8.552 11.552 9 11 9 C 10.448 9 10 8.552 10 8 C 10 7.448 10.448 7 11 7 z M 14 7 C 14.552 7 15 7.448 15 8 C 15 8.552 14.552 9 14 9 C 13.448 9 13 8.552 13 8 C 13 7.448 13.448 7 14 7 z M 5.8730469 12 L 10 12 L 10 20.886719 C 9.3615118 21.563076 8.4966284 22 7.5 22 C 6.5277884 22 6.0393417 21.686664 5.640625 21.111328 C 5.2419083 20.535993 5 19.60635 5 18.5 C 5 16.527448 5.7019741 12.911439 5.8730469 12 z M 12 12 L 17 12 L 17 20.886719 C 16.361512 21.563076 15.496628 22 14.5 22 C 13.504858 22 12.639028 21.566344 12 20.892578 L 12 12 z M 19 12 L 24 12 L 24 20.886719 C 23.361512 21.563076 22.496628 22 21.5 22 C 20.504858 22 19.639028 21.566344 19 20.892578 L 19 12 z M 26 12 L 31 12 L 31 20.886719 C 30.362395 21.562365 29.49642 22 28.5 22 C 27.504858 22 26.639028 21.566344 26 20.892578 L 26 12 z M 33 12 L 38 12 L 38 20.892578 C 37.361904 21.565869 36.495044 22 35.5 22 C 34.504858 22 33.638213 21.56588 33 20.892578 L 33 12 z M 40 12 L 44.126953 12 C 44.298026 12.911439 45 16.527448 45 18.5 C 45 19.60635 44.758092 20.535993 44.359375 21.111328 C 43.960658 21.686664 43.472212 22 42.5 22 C 41.504858 22 40.638213 21.56588 40 20.892578 L 40 12 z M 10 28 L 19 28 L 19 44 L 10 44 L 10 28 z M 24 28 L 40 28 L 40 40 L 24 40 L 24 28 z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-user-account.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 19.875 4.40625 C 16.195313 4.472656 13.507813 5.570313 11.875 7.71875 C 9.941406 10.265625 9.589844 14.144531 10.8125 19.21875 C 10.363281 19.769531 10.023438 20.605469 10.15625 21.71875 C 10.421875 23.921875 11.277344 24.828125 12 25.1875 C 12.34375 26.917969 13.296875 28.863281 14.21875 29.78125 L 14.21875 30.25 C 14.226563 31.265625 14.222656 32.144531 14.125 33.28125 C 13.511719 34.6875 11.476563 35.511719 9.125 36.4375 C 5.21875 37.976563 0.363281 39.871094 0 45.9375 L -0.0625 47 L 40.0625 47 L 40 45.9375 C 39.976563 45.515625 39.910156 45.132813 39.84375 44.75 C 39.824219 44.652344 39.800781 44.5625 39.78125 44.46875 C 39.71875 44.179688 39.675781 43.894531 39.59375 43.625 C 39.570313 43.546875 39.523438 43.484375 39.5 43.40625 C 39.402344 43.121094 39.308594 42.824219 39.1875 42.5625 C 39.167969 42.519531 39.144531 42.480469 39.125 42.4375 C 38.980469 42.136719 38.828125 41.863281 38.65625 41.59375 C 36.871094 38.796875 33.660156 37.527344 30.90625 36.4375 C 28.566406 35.511719 26.519531 34.6875 25.90625 33.28125 C 25.808594 32.148438 25.835938 31.292969 25.84375 30.28125 L 25.84375 29.78125 C 26.742188 28.863281 27.664063 26.925781 28 25.1875 C 28.703125 24.824219 29.582031 23.914063 29.84375 21.71875 C 29.976563 20.628906 29.65625 19.800781 29.21875 19.25 C 29.800781 17.269531 30.988281 12.113281 28.9375 8.8125 C 28.488281 8.089844 27.90625 7.535156 27.21875 7.09375 C 26.90625 6.894531 26.578125 6.707031 26.21875 6.5625 C 25.855469 6.421875 25.472656 6.300781 25.0625 6.21875 C 24.117188 5.027344 22.304688 4.40625 19.875 4.40625 Z M 32.90625 5.40625 C 31.488281 5.433594 30.257813 5.664063 29.1875 6.0625 C 29.75 6.550781 30.25 7.128906 30.65625 7.78125 C 32.8125 11.253906 32.140625 15.988281 31.375 18.96875 C 31.800781 19.867188 31.941406 20.890625 31.8125 21.96875 C 31.535156 24.292969 30.679688 25.613281 29.78125 26.375 C 29.371094 27.890625 28.648438 29.449219 27.84375 30.53125 C 27.835938 31.289063 27.828125 31.929688 27.875 32.6875 C 28.417969 33.300781 30.242188 34.015625 31.625 34.5625 C 34.6875 35.773438 38.964844 37.480469 40.9375 41.59375 L 50.0625 41.59375 L 50 40.53125 C 49.6875 35.320313 45.539063 33.683594 42.21875 32.375 C 40.375 31.648438 38.632813 30.953125 38.125 29.84375 C 38.050781 28.910156 38.054688 28.183594 38.0625 27.34375 L 38.0625 27 C 38.859375 26.167969 39.59375 24.527344 39.875 23.15625 C 40.492188 22.808594 41.214844 22.003906 41.4375 20.15625 C 41.546875 19.234375 41.304688 18.523438 40.9375 18.03125 C 41.441406 16.292969 42.390625 11.972656 40.65625 9.1875 C 39.917969 8 38.804688 7.269531 37.34375 6.96875 C 36.507813 5.953125 34.972656 5.40625 32.90625 5.40625 Z"/></svg>

build/qml/KomplexHubContent/images/icons/icons8-view-more.svg

@@ -0,0 +1 @@
+<svg fill="#EBEBEB" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 25 2 C 12.316406 2 2 12.316406 2 25 C 2 37.683594 12.316406 48 25 48 C 37.683594 48 48 37.683594 48 25 C 48 12.316406 37.683594 2 25 2 Z M 13 28 C 11.34375 28 10 26.65625 10 25 C 10 23.34375 11.34375 22 13 22 C 14.65625 22 16 23.34375 16 25 C 16 26.65625 14.65625 28 13 28 Z M 25 28 C 23.34375 28 22 26.65625 22 25 C 22 23.34375 23.34375 22 25 22 C 26.65625 22 28 23.34375 28 25 C 28 26.65625 26.65625 28 25 28 Z M 37 28 C 35.34375 28 34 26.65625 34 25 C 34 23.34375 35.34375 22 37 22 C 38.65625 22 40 23.34375 40 25 C 40 26.65625 38.65625 28 37 28 Z"/></svg>