85 lines
2.5 KiB
QML
85 lines
2.5 KiB
QML
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 }
|
|
}
|
|
]
|
|
}
|