Files
nooLight/MenuBackButton.qml
2018-07-11 22:16:52 +02:00

80 lines
2.2 KiB
QML

import QtQuick 2.0
Item {
id: root
signal clicked()
signal back()
SystemPalette {
id: palette
}
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
color: palette.button
}
Rectangle {
id: bar2
x: 0
y: root.height / 2 - height / 2
width: root.height
height: root.height / 9
antialiasing: true
color: palette.button
}
Rectangle {
id: bar3
x: 0
y: root.height / 2 + height * 2
width: root.height
height: root.height / 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.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 }
}
]
}