This repository has been archived on 2024-06-03. You can view files and clone it, but cannot push or open issues or pull requests.
app/resources/qml/components/StateIndicator.qml

317 lines
8 KiB
QML
Raw Normal View History

import QtQuick 2.0
Rectangle {
id: control
property color successColor: "green"
property color warningColor: "orange"
property color errorColor: "red"
property color unknownColor: "grey"
property color backgroundColor: "white"
2020-10-06 14:01:11 +02:00
property color workingColor: "grey"
property double indicatorSize: 1
height: app.height * 0.9
width: height * 0.8
color: backgroundColor
2020-10-06 14:01:11 +02:00
border.width: Math.min(width * 0.1, height * 0.1) * control.indicatorSize
border.color: "green"
radius: border.width * 0.5
state: "success"
2020-10-06 14:01:11 +02:00
clip: true
Rectangle {
id: higherRect
property int totalWidth: Math.abs(Math.sin(rotation * Math.PI / 180) * (height))
property int totalHeight: Math.abs(Math.cos(rotation * Math.PI / 180) * (height))
radius: width * 0.5
2020-10-06 14:01:11 +02:00
border.width: 0
border.color: control.workingColor
color: "green"
}
Rectangle {
id: lowerRect
property int totalWidth: Math.abs(Math.sin(rotation * Math.PI / 180) * (height))
property int totalHeight: Math.abs(Math.cos(rotation * Math.PI / 180) * (height))
radius: width * 0.5
2020-10-06 14:01:11 +02:00
border.width: 0
border.color: control.workingColor
color: "green"
}
2020-10-06 14:01:11 +02:00
ParallelAnimation {
id: workingAnimation
2020-10-06 16:29:34 +02:00
property int from: lowerRect.height
property int to: Math.max(control.width * 1.1, control.height * 1.1)
2020-10-06 14:01:11 +02:00
property bool shouldBeRunning: false
running: false
loops: Animation.Infinite
onShouldBeRunningChanged: {
pauseAnimation.start()
}
NumberAnimation {
target: higherRect
properties: "height"
from: workingAnimation.from
to: workingAnimation.to
duration: 1000
easing.type: Easing.InQuad
}
NumberAnimation {
target: higherRect
properties: "opacity"
from: 1
2020-10-06 16:29:34 +02:00
to: 0.3
2020-10-06 14:01:11 +02:00
duration: 1000
easing.type: Easing.InQuad
}
}
PauseAnimation {
id: pauseAnimation
duration: 400
onStopped: {
workingAnimation.running = workingAnimation.shouldBeRunning
2020-10-06 16:29:34 +02:00
higherRect.opacity = 1
2020-10-06 14:01:11 +02:00
}
}
states: [
2020-10-06 14:01:11 +02:00
State {
name: "working"
PropertyChanges {
target: control
border.color: control.workingColor
}
PropertyChanges {
target: higherRect
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: height
height: Math.min(parent.width * 0.1, parent.height * 0.1) * control.indicatorSize
color: "transparent"
border.color: control.workingColor
border.width: control.border.width
}
PropertyChanges {
target: lowerRect
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: height
height: Math.min(parent.width * 0.2, parent.height * 0.2) * control.indicatorSize
color: control.workingColor
}
PropertyChanges {
target: workingAnimation
shouldBeRunning: true
}
},
State {
name: "unknown"
PropertyChanges {
target: control
border.color: control.unknownColor
}
PropertyChanges {
target: higherRect
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: control.border.width
2020-10-06 14:01:11 +02:00
height: Math.min(parent.width * 0.7, parent.height * 0.7) * control.indicatorSize
color: control.unknownColor
rotation: 90
}
PropertyChanges {
target: lowerRect
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: control.border.width
2020-10-06 14:01:11 +02:00
height: Math.min(parent.width * 0.7, parent.height * 0.7) * control.indicatorSize
color: control.unknownColor
rotation: -90
}
},
State {
2020-10-06 14:01:11 +02:00
id: errorState
name: "error"
2020-10-06 14:01:11 +02:00
property int distance: control.height * 0.1
PropertyChanges {
target: control
border.color: control.errorColor
}
PropertyChanges {
target: higherRect
x: (parent.width - width) / 2
2020-10-06 14:01:11 +02:00
y: control.border.width + parent.height * 0.15
width: control.border.width
2020-10-06 14:01:11 +02:00
height: parent.height * 0.4 * control.indicatorSize
color: control.errorColor
}
PropertyChanges {
target: lowerRect
x: (parent.width - width) / 2
2020-10-06 14:01:11 +02:00
y: higherRect.y + higherRect.height + errorState.distance
width: control.border.width * 1.3
height: width
color: control.errorColor
}
},
State {
name: "warn"
PropertyChanges {
target: control
border.color: control.warningColor
}
PropertyChanges {
target: higherRect
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: control.border.width
2020-10-06 14:01:11 +02:00
height: Math.min(parent.width * 0.7, parent.height * 0.7) * control.indicatorSize
color: control.warningColor
rotation: 45
}
PropertyChanges {
target: lowerRect
x: (parent.width - width) / 2
y: (parent.height - height) / 2
width: control.border.width
2020-10-06 14:01:11 +02:00
height: Math.min(parent.width * 0.7, parent.height * 0.7) * control.indicatorSize
color: control.warningColor
rotation: -45
}
},
State {
id: tickState
2020-10-06 16:29:34 +02:00
property int bottomX: ((control.width) / 2 - (higherRect.totalWidth - (lowerRect.totalWidth + higherRect.totalWidth) / 2 )) * 1.055
property int bottomY: ((control.height + higherRect.totalHeight) / 2 - lowerRect.radius) * 1.05
name: "success"
PropertyChanges {
2020-10-06 14:01:11 +02:00
target: control
border.color: control.successColor
}
PropertyChanges {
target: higherRect
x: tickState.bottomX - width / 2 + (Math.sin(rotation * Math.PI / 180) * (height / 2 - radius))
y: tickState.bottomY - height / 2 - (Math.cos(rotation * Math.PI / 180) * (height / 2 - radius))
width: control.border.width
2020-10-06 14:01:11 +02:00
height: Math.min(parent.width * 0.6, parent.height * 0.6) * control.indicatorSize
rotation: 40
color: control.successColor
}
PropertyChanges {
target: lowerRect
x: tickState.bottomX - width / 2 + (Math.sin(rotation * Math.PI / 180) * (height / 2 - radius))
y: tickState.bottomY - height / 2 - (Math.cos(rotation * Math.PI / 180) *(height / 2 - radius))
width: control.border.width
2020-10-06 14:01:11 +02:00
height: Math.min(parent.width * 0.3, parent.height * 0.3) * control.indicatorSize
rotation: -40
color: control.successColor
}
}
]
transitions: [
Transition {
NumberAnimation {
properties: "height,width,rotation,x,y"
duration: 400
easing.type: Easing.InOutQuad
}
ColorAnimation {
properties: "color,border.color"
duration: 400
easing.type: Easing.InOutQuad
}
}
]
}