130 lines
3.6 KiB
QML
130 lines
3.6 KiB
QML
import QtQuick 2.0
|
|
import QtQuick.Controls 2.9
|
|
import QtGraphicalEffects 1.0
|
|
|
|
import de.itsblue.ScStw 2.0
|
|
import de.itsblue.ScStw.Styling 2.0
|
|
import de.itsblue.ScStw.Styling.Components 1.0
|
|
|
|
DelayButton {
|
|
id : control
|
|
|
|
text: "start"
|
|
property color backgroundColor: appTheme.theme.colors.button
|
|
property bool progressControlActivated: false
|
|
property double startProgress
|
|
property double oldStartProgress: -1
|
|
|
|
delay: progressControlActivated ? 2000:0
|
|
|
|
onStartProgressChanged: {
|
|
if(startProgress > oldStartProgress)
|
|
oldStartProgress = startProgress
|
|
else {
|
|
startProgressAnimation.from = oldStartProgress
|
|
startProgressAnimation.to = startProgress
|
|
startProgressAnimation.start()
|
|
}
|
|
}
|
|
|
|
Text {
|
|
id: labelText
|
|
text: control.text
|
|
anchors.centerIn: parent
|
|
font.pixelSize: parent.height * 0.16
|
|
font.family: "Helvetica"
|
|
color: enabled ? appTheme.theme.colors.text:appTheme.theme.colors.disabledText
|
|
}
|
|
|
|
NumberAnimation {
|
|
id: startProgressAnimation
|
|
|
|
to: 0
|
|
target: control
|
|
properties: "oldStartProgress"
|
|
duration: 200
|
|
}
|
|
|
|
Behavior on text {
|
|
//animate a text change
|
|
enabled: true
|
|
FadeAnimation {
|
|
target: labelText
|
|
}
|
|
}
|
|
|
|
contentItem: Text {
|
|
}
|
|
|
|
background: Item {
|
|
RectangularGlow {
|
|
glowRadius: 0.001
|
|
spread: 0.2
|
|
color: "black"
|
|
|
|
visible: true
|
|
|
|
cornerRadius: background.radius
|
|
anchors.fill: background
|
|
scale: 0.75
|
|
opacity: Math.pow( control.opacity, 100 )
|
|
}
|
|
|
|
Rectangle {
|
|
id: background
|
|
implicitWidth: 100
|
|
implicitHeight: 100
|
|
color: control.down ? Qt.darker(control.backgroundColor, 1.2) : control.backgroundColor
|
|
radius: size / 2
|
|
|
|
readonly property real size: Math.min(control.width, control.height)
|
|
width: size
|
|
height: size
|
|
anchors.fill: parent
|
|
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 200
|
|
}
|
|
}
|
|
|
|
Canvas {
|
|
id: canvas
|
|
anchors.fill: parent
|
|
|
|
Connections {
|
|
target: control
|
|
function onProgressChanged() {
|
|
canvas.requestPaint()
|
|
}
|
|
|
|
function onOldStartProgressChanged() {
|
|
canvas.requestPaint()
|
|
}
|
|
}
|
|
|
|
onPaint: {
|
|
var progress
|
|
var showHoldProgress = ((control.oldStartProgress <= 0 || control.oldStartProgress === 1) && control.progressControlActivated)
|
|
|
|
if(showHoldProgress)
|
|
progress = control.progress
|
|
else
|
|
progress = control.oldStartProgress < 0 ? 0:1-control.oldStartProgress
|
|
|
|
|
|
var ctx = getContext("2d")
|
|
ctx.clearRect(0, 0, width, height)
|
|
ctx.strokeStyle = showHoldProgress ? appTheme.theme.colors.error:"grey"
|
|
ctx.lineWidth = parent.width * 0.02
|
|
ctx.beginPath()
|
|
var startAngle = Math.PI * 1.5
|
|
var endAngle = startAngle + progress * Math.PI * 2
|
|
ctx.arc(width / 2, height / 2, width / 2 - ctx.lineWidth / 2 - 2, startAngle, endAngle)
|
|
ctx.stroke()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|