Add transition from importstatus to steam and back

qml/Components/Create/Create.qml

@@ -5,7 +5,6 @@ import QtQuick.Controls 2.2
 //Enums
 import LocalWorkshopCreationStatus 1.0
 
-
 Rectangle {
     id: create
     anchors.fill: parent
@@ -21,6 +20,7 @@ Rectangle {
         target: createWallpaper
         onFileSelected: {
             create.state = "import"
+            loader.active = true
             loader.setSource("CreateImport.qml", {
                                  file: file
                              })
@@ -30,9 +30,21 @@ Rectangle {
     Connections {
         target: steamWorkshop
         onLocalWorkshopCreationStatusChanged: {
-           if(status === LocalWorkshopCreationStatus.Started){
-               loader.setSource("CreateImportStatus.qml")
-           }
+            if (status === LocalWorkshopCreationStatus.Started) {
+                loader.setSource("CreateImportStatus.qml")
+            }
+        }
+    }
+
+    Connections {
+        target: loader.item
+        ignoreUnknownSignals: true
+        onBackToCreate: {
+            create.state = "create"
+            loader.active = false
+        }
+        onUploadToSteamWorkshop: {
+            loader.source = "CreateUpload.qml"
         }
     }
 
@@ -84,7 +96,7 @@ Rectangle {
     Loader {
         id: loader
         anchors.fill: parent
-        z:11
+        z: 11
     }
 
     Image {
@@ -148,7 +160,7 @@ Rectangle {
     Rectangle {
         id: footer
         height: 80
-        z:100
+        z: 100
         anchors {
             right: parent.right
             bottom: parent.bottom

qml/Components/Create/CreateImport.qml

@@ -9,13 +9,12 @@ Item {
     anchors.fill: parent
     state: "out"
     Component.onCompleted: state = "in"
+    property bool isVideoPlaying: true
     property url file
     onFileChanged: {
         timerSource.start()
     }
 
-    property bool isVideoPlaying: true
-
     Timer {
         id: timerSource
         interval: 1000
@@ -67,18 +66,7 @@ Item {
             source: player
             opengl: true
             fillMode: VideoOutput.Stretch
-//            MouseArea {
-//                id:maPlayer
-//                anchors.fill: parent
-//                hoverEnabled: true
-//                onPositionChanged: {
-//                    if (isVideoPlaying) {
-//                        player.seek((mouseX / videoOut.width) * player.duration)
-//                        busyIndicator.visible = true
-//                        sliVideoPosition.value = mouseX / videoOut.width
-//                    }
-//                }
-//            }
+
             Image {
                 id: imgPreview
                 anchors.fill: parent

qml/Components/Create/CreateImportStatus.qml

@@ -8,36 +8,51 @@ import LocalWorkshopCreationStatus 1.0
 Item {
     id: createImportStatus
     anchors.fill: parent
+    state: "out"
+
+    signal backToCreate
+    signal uploadToSteamWorkshop
+
+    Timer {
+        repeat: false
+        running: true
+        interval: 300
+        onTriggered: {
+            createImportStatus.state = "in"
+        }
+    }
+
     FontLoader {
         id: font_Roboto_Regular
         source: "qrc:/assets/fonts/Roboto-Regular.ttf"
     }
+
     Connections {
         target: steamWorkshop
         onLocalWorkshopCreationStatusChanged: {
-           switch(status){
-           case LocalWorkshopCreationStatus.Started:
-               txtStatus.text = "Copy video started"
-               break;
-           case LocalWorkshopCreationStatus.CopyVideoFinished:
-               txtStatus.text = "Copy Video Finished"
-               break;
-           case LocalWorkshopCreationStatus.CopyImageFinished:
-               txtStatus.text = "Copy Image Finished"
-               break;
-           case LocalWorkshopCreationStatus.CopyConfigFinished:
-               txtStatus.text = "Copy Config Finished"
-               break;
-           case LocalWorkshopCreationStatus.ErrorCopyConfig:
-               txtStatus.text = "Error Copy Config!"
-               break;
-           case LocalWorkshopCreationStatus.Finished:
-               txtStatus.text = "Finished"
-               busyIndicator.running = false
-               break;
-           default:
-               break;
-           }
+            switch (status) {
+            case LocalWorkshopCreationStatus.Started:
+                txtStatus.text = "Copy video started"
+                break
+            case LocalWorkshopCreationStatus.CopyVideoFinished:
+                txtStatus.text = "Copy Video Finished"
+                break
+            case LocalWorkshopCreationStatus.CopyImageFinished:
+                txtStatus.text = "Copy Image Finished"
+                break
+            case LocalWorkshopCreationStatus.CopyConfigFinished:
+                txtStatus.text = "Copy Config Finished"
+                break
+            case LocalWorkshopCreationStatus.ErrorCopyConfig:
+                txtStatus.text = "Error Copy Config!"
+                break
+            case LocalWorkshopCreationStatus.Finished:
+                txtStatus.text = "Success!"
+                busyIndicator.running = false
+                break
+            default:
+                break
+            }
         }
     }
 
@@ -60,9 +75,9 @@ Item {
         cornerRadius: 15
     }
     Rectangle {
-        id:wrapper
+        id: wrapper
         width: 800
-        height:400
+        height: 400
         radius: 4
         anchors {
             top: parent.top
@@ -72,12 +87,15 @@ Item {
 
         Text {
             id: txtStatus
+            height: 80
             font.family: font_Roboto_Regular.name
             renderType: Text.NativeRendering
-            font.pixelSize: 18
+            font.pixelSize: 24
             color: "gray"
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
             anchors {
-                top:busyIndicator.bottom
+                top: busyIndicator.bottom
                 topMargin: 10
                 horizontalCenter: parent.horizontalCenter
             }
@@ -87,9 +105,86 @@ Item {
             id: busyIndicator
             running: true
             anchors {
-                centerIn: parent
+                top: parent.top
+                topMargin: 100
+                horizontalCenter: parent.horizontalCenter
             }
         }
 
+        Row {
+            id: item1
+            width: 450
+            height: 49
+            spacing: 10
+            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: 20
+
+            Button {
+                id: button
+                text: qsTr("Create another Wallpaper")
+                onClicked: {
+                    backToCreate()
+                    createImportStatus.state = "out"
+                }
+            }
+            Button {
+                id: button2
+                text: qsTr("Upload Wallpaper to Steam")
+                onClicked: {
+                    uploadToSteamWorkshop()
+                    createImportStatus.state = "in"
+                }
+            }
+        }
     }
+    states: [
+        State {
+            name: "out"
+            PropertyChanges {
+                target: wrapper
+                anchors.topMargin: 500
+                opacity: 0
+            }
+            PropertyChanges {
+                target: effect
+                color: "transparent"
+                opacity: 0
+            }
+        },
+        State {
+            name: "in"
+            PropertyChanges {
+                target: wrapper
+                anchors.topMargin: 100
+                opacity: 1
+            }
+            PropertyChanges {
+                target: effect
+                color: "black"
+                opacity: 0.4
+            }
+        }
+    ]
+    transitions: [
+        Transition {
+            from: "out"
+            to: "in"
+            reversible: true
+            SequentialAnimation {
+                NumberAnimation {
+                    target: wrapper
+                    properties: "opacity, anchors.topMargin"
+                    duration: 200
+                    easing.type: Easing.InOutQuad
+                }
+                NumberAnimation {
+                    target: effect
+                    properties: "opacity, color"
+                    duration: 200
+                    easing.type: Easing.InOutQuad
+                }
+            }
+        }
+    ]
 }

qml/Components/Create/CreateUpload.qml

@@ -1,5 +1,14 @@
-import QtQuick 2.0
+import QtQuick 2.7
 
 Item {
+    anchors.fill: parent
+
+    Rectangle {
+        width: 100
+        height:100
+        anchors {
+            centerIn: parent
+        }
+    }
 
 }