Initial commit

2018-07-10 20:57:11 +02:00
commit f2f55a2830
9 changed files with 298 additions and 0 deletions
--- a/MenuBackButton.qml
+++ b/MenuBackButton.qml
@@ -0,0 +1,69 @@
+import QtQuick 2.0
+
+Item {
+    id: root
+    signal clicked()
+    signal back()
+
+    MouseArea {
+        id: ma
+
+        anchors.fill: parent
+        anchors.margins: -8
+    }
+
+    Rectangle {
+        id: bar1
+        x: 0
+        y: root.height / 6
+        width: root.height
+        height: root.height / 9
+        antialiasing: true
+    }
+
+    Rectangle {
+        id: bar2
+        x: 0
+        y: root.height / 2 - height / 2
+        width: root.height
+        height: root.height / 9
+        antialiasing: true
+    }
+
+    Rectangle {
+        id: bar3
+        x: 0
+        y: root.height / 2 + height * 2
+        width: root.height
+        height: root.height / 9
+        antialiasing: true
+    }
+
+    property int animationDuration: 450
+
+    state: "menu"
+    states: [
+        State {
+            name: "menu"
+            PropertyChanges { target: ma; onClicked: root.clicked() }
+        },
+
+        State {
+            name: "back"
+            PropertyChanges { target: root; rotation: 180 }
+            PropertyChanges { target: bar1; rotation: 45; width: root.height / 3 * 2; x: root.height / 2; y: root.height / 4 }
+            PropertyChanges { target: bar2; width: root.height / 6 * 5 + 1; x: root.height / 9 }
+            PropertyChanges { target: bar3; rotation: -45; width: root.height / 3 * 2; x: root.height / 2; y: root.height / 3 * 2 }
+            PropertyChanges { target: ma; onClicked: root.back() }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            RotationAnimation { target: root; direction: RotationAnimation.Clockwise; duration: animationDuration; easing.type: Easing.InOutQuad }
+            PropertyAnimation { target: bar1; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
+            PropertyAnimation { target: bar2; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
+            PropertyAnimation { target: bar3; properties: "rotation, width, x, y"; duration: animationDuration; easing.type: Easing.InOutQuad }
+        }
+    ]
+}