From a0afbb6085f6e493179af5f3d48d8c86e0bab80b Mon Sep 17 00:00:00 2001
From: Elias <i@kelteseth.net>
Date: Sun, 16 Dec 2018 17:30:33 +0100
Subject: [PATCH] Add out animations

---
 ScreenPlay/qml/Create/Create.qml             | 37 +++++++++++--
 ScreenPlay/qml/Create/CreateWidget.qml       | 58 +++++++++++++++-----
 ScreenPlay/qml/Create/CreateWidgetButton.qml | 40 +++++++++++++-
 3 files changed, 114 insertions(+), 21 deletions(-)

diff --git a/ScreenPlay/qml/Create/Create.qml b/ScreenPlay/qml/Create/Create.qml
index 65d70e87..f26e19cd 100644
--- a/ScreenPlay/qml/Create/Create.qml
+++ b/ScreenPlay/qml/Create/Create.qml
@@ -10,8 +10,9 @@ Item {
     id: create
     anchors.fill: parent
     state: "out"
+
     Component.onCompleted: {
-        create.state = "create"
+        create.state = "in"
     }
     property url activeVideoFile: ""
     property url activeFolder: ""
@@ -41,7 +42,7 @@ Item {
         target: loader.item
         ignoreUnknownSignals: true
         onBackToCreate: {
-            create.state = "create"
+            create.state = "in"
             loader.active = false
             activeVideoFile = ""
         }
@@ -278,7 +279,7 @@ Item {
             }
         },
         State {
-            name: "create"
+            name: "in"
             PropertyChanges {
                 target: spaceBar
                 opacity: .4
@@ -307,10 +308,18 @@ Item {
                 target: txtDescriptionBottom
                 opacity: 0
             }
+            PropertyChanges {
+                target: footer
+                anchors.bottomMargin: -80
+            }
         },
         State {
             name: "new"
 
+            PropertyChanges {
+                target: footer
+                anchors.bottomMargin: -80
+            }
             PropertyChanges {
                 target: createWallpaper
                 state: "out"
@@ -332,11 +341,11 @@ Item {
     transitions: [
         Transition {
             from: "out"
-            to: "create"
+            to: "in"
             reversible: true
 
             NumberAnimation {
-                target: txtDescriptionBottom
+                targets: [txtDescriptionBottom, footer]
                 property: "opacity"
                 duration: 400
                 easing.type: Easing.InOutQuart
@@ -355,6 +364,18 @@ Item {
                 }
             }
 
+            NumberAnimation {
+                target: footer
+                property: "anchors.bottomMargin"
+                duration: 400
+                easing.type: Easing.InOutQuart
+            }
+        },
+        Transition {
+            from: "in"
+            to: "new"
+            reversible: true
+
             NumberAnimation {
                 target: footer
                 property: "anchors.bottomMargin"
@@ -364,3 +385,9 @@ Item {
         }
     ]
 }
+
+/*##^## Designer {
+    D{i:0;autoSize:true;height:768;width:1366}
+}
+ ##^##*/
+
diff --git a/ScreenPlay/qml/Create/CreateWidget.qml b/ScreenPlay/qml/Create/CreateWidget.qml
index 06d909c9..262b822b 100644
--- a/ScreenPlay/qml/Create/CreateWidget.qml
+++ b/ScreenPlay/qml/Create/CreateWidget.qml
@@ -3,7 +3,9 @@ import QtGraphicalEffects 1.0
 import Qt.labs.platform 1.0
 
 Item {
+    id:createWidget
     state: "out"
+
     Component.onCompleted: state = "in"
 
     signal buttonPressed(var type, var title, var iconSource)
@@ -29,6 +31,7 @@ Item {
         anchors.top: txtCreate.bottom
         anchors.topMargin: 10
         animOffset: 50
+        state: createWidget.state
         imgSource: "qrc:/assets/icons/icon_emptyWidget.svg"
         onClicked: {
 
@@ -72,6 +75,7 @@ Item {
             text: qsTr("Simple clock widget")
             buttonActive: true
             animOffset: 150
+            state: createWidget.state
             imgSource: "qrc:/assets/icons/icon_time.svg"
             onClicked: {
                 buttonPressed("clock", btnEmpty1.text, btnEmpty1.imgSource)
@@ -82,6 +86,7 @@ Item {
             text: qsTr("Musik scene wallpaper visualizer")
             buttonActive: true
             animOffset: 200
+            state: createWidget.state
             imgSource: "qrc:/assets/icons/icon_library_music.svg"
             onClicked: {
                 buttonPressed("music", btnEmpty2.text, btnEmpty2.imgSource)
@@ -93,6 +98,7 @@ Item {
             imgSource: "qrc:/assets/icons/icon_scene.svg"
             buttonActive: true
             animOffset: 250
+            state: createWidget.state
             onClicked: {
                 buttonPressed("slideshow", btnEmpty3.text, btnEmpty3.imgSource)
             }
@@ -113,6 +119,26 @@ Item {
                 opacity: 0
                 anchors.topMargin: -50
             }
+
+            PropertyChanges {
+                target: btnEmpty1
+                opacity: 0
+            }
+
+            PropertyChanges {
+                target: btnEmpty2
+                opacity: 0
+            }
+
+            PropertyChanges {
+                target: btnEmpty3
+                opacity: 0
+            }
+
+            PropertyChanges {
+                target: btnCreateEmptyWidget
+                opacity: 0
+            }
         },
         State {
             name: "in"
@@ -136,26 +162,24 @@ Item {
             to: "in"
             reversible: true
 
-            ParallelAnimation {
+            PropertyAnimation {
+                target: txtCreate
+                properties: "opacity,anchors.topMargin"
+                duration: 400
+                easing.type: Easing.InOutQuart
+            }
+
+            SequentialAnimation {
+
+                PauseAnimation {
+                    duration: 50
+                }
                 PropertyAnimation {
-                    target: txtCreate
+                    target: txtExamples
                     properties: "opacity,anchors.topMargin"
                     duration: 400
                     easing.type: Easing.InOutQuart
                 }
-
-                SequentialAnimation {
-
-                    PauseAnimation {
-                        duration: 50
-                    }
-                    PropertyAnimation {
-                        target: txtExamples
-                        properties: "opacity,anchors.topMargin"
-                        duration: 400
-                        easing.type: Easing.InOutQuart
-                    }
-                }
             }
         }
     ]
@@ -164,6 +188,10 @@ Item {
 
 
 
+
+
+
+
 /*##^## Designer {
     D{i:0;autoSize:true;height:480;width:640}
 }
diff --git a/ScreenPlay/qml/Create/CreateWidgetButton.qml b/ScreenPlay/qml/Create/CreateWidgetButton.qml
index 2627b644..30c065c6 100644
--- a/ScreenPlay/qml/Create/CreateWidgetButton.qml
+++ b/ScreenPlay/qml/Create/CreateWidgetButton.qml
@@ -135,7 +135,45 @@ Item {
         Transition {
             from: "out"
             to: "in"
-            reversible: true
+
+            SequentialAnimation {
+                PauseAnimation {
+                    duration: btnEmpty.animOffset
+                }
+                ParallelAnimation {
+                    ParallelAnimation {
+
+                        NumberAnimation {
+                            target: bg
+                            property: "opacity"
+                            duration: 400
+                            easing.type: Easing.InOutQuart
+                        }
+
+                        NumberAnimation {
+                            target: bg
+                            property: "anchors.topMargin"
+                            easing.type: Easing.InOutQuart
+                            duration: 400
+                        }
+                    }
+                    SequentialAnimation {
+                        PauseAnimation {
+                            duration: 200
+                        }
+                        NumberAnimation {
+                            target: effect
+                            property: "opacity"
+                            duration: 400
+                            easing.type: Easing.InOutQuart
+                        }
+                    }
+                }
+            }
+        },
+        Transition {
+            from: "in"
+            to: "out"
 
             SequentialAnimation {
                 PauseAnimation {