Styles was added

2023-03-29 12:49:20 +02:00
parent 7a929eb757
commit 44dd3cdb58
26 changed files with 433 additions and 193 deletions
--- a/qml/Components/MenuBackButton.qml
+++ b/qml/Components/MenuBackButton.qml
@@ -0,0 +1,84 @@
+import QtQuick 2.15
+
+Item {
+    id: root
+
+    width: 40
+    height: 40
+
+    property double iconMarigns: 8
+    property double iconHeight: width - iconMarigns * 2
+    signal clicked()
+    signal back()
+
+    SystemPalette {
+        id: palette
+    }
+
+    MouseArea {
+        id: ma
+
+        anchors.fill: parent
+    }
+
+    Rectangle {
+        id: bar1
+        x: root.iconMarigns
+        y: root.iconMarigns + root.iconHeight / 6
+        width: root.iconHeight
+        height: root.iconHeight / 9
+        antialiasing: true
+
+        color: palette.button
+    }
+
+    Rectangle {
+        id: bar2
+        x: root.iconMarigns
+        y: root.iconMarigns + root.iconHeight / 2 - height / 2
+        width: root.iconHeight
+        height: root.iconHeight / 9
+        antialiasing: true
+
+        color: palette.button
+    }
+
+    Rectangle {
+        id: bar3
+        x: root.iconMarigns
+        y: root.iconMarigns + root.iconHeight / 2 + height * 2
+        width: root.iconHeight
+        height: root.iconHeight / 9
+        antialiasing: true
+
+        color: palette.button
+    }
+
+    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.iconHeight / 3 * 2; x: root.iconMarigns + root.iconHeight / 2; y: root.iconMarigns + root.iconHeight / 4 }
+            PropertyChanges { target: bar2; width: root.iconHeight / 6 * 5 + 1; x: root.iconMarigns + root.iconHeight / 9 }
+            PropertyChanges { target: bar3; rotation: -45; width: root.iconHeight / 3 * 2; x: root.iconMarigns + root.iconHeight / 2; y: root.iconMarigns + root.iconHeight / 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 }
+        }
+    ]
+}