107 lines
3 KiB
QML
107 lines
3 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
|
||
|
|
delay: progressControlActivated ? 2000:0
|
||
|
|
|
||
|
|
onStartProgressChanged: {
|
||
|
|
console.log("start progress: " + startProgress)
|
||
|
|
}
|
||
|
|
|
||
|
|
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
|
||
|
|
}
|
||
|
|
|
||
|
|
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
|
||
|
|
onProgressChanged: canvas.requestPaint()
|
||
|
|
onStartProgressChanged: canvas.requestPaint()
|
||
|
|
}
|
||
|
|
|
||
|
|
onPaint: {
|
||
|
|
var progress
|
||
|
|
var showHoldProgress = (control.down && control.progressControlActivated)
|
||
|
|
if(showHoldProgress)
|
||
|
|
progress = control.progress
|
||
|
|
else
|
||
|
|
progress = control.startProgress <= 0 ? 0:1-control.startProgress
|
||
|
|
|
||
|
|
|
||
|
|
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()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|