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 onProgressChanged: canvas.requestPaint() 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() } } } } }