ETM-Schurig/powersync-app
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix mouse area size of the progressbutton

Browse Source 
Fixes: #523
This commit is contained in:
Michael Zanetti 2021-01-31 15:10:00 +01:00
parent 1a5d9ec2b9
commit 69993b6bab
1 changed files with 73 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
nymea-app/ui/components/ProgressButton.qml
View File

@ -50,6 +50,7 @@ Item {
MouseArea { MouseArea {
id: buttonDelegate id: buttonDelegate
anchors.fill: parent anchors.fill: parent
anchors.margins: -app.margins / 2
hoverEnabled: true hoverEnabled: true
property bool longpressed: false property bool longpressed: false
@ -75,84 +76,85 @@ Item {
buttonDelegate.longpressed = false buttonDelegate.longpressed = false
} }
NumberAnimation { }
target: canvas
properties: "progress" NumberAnimation {
from: 0.0 target: canvas
to: 1.0 properties: "progress"
running: root.longpressEnabled && buttonDelegate.pressed from: 0.0
duration: 750 to: 1.0
onRunningChanged: { running: root.longpressEnabled && buttonDelegate.pressed
if (!running && canvas.progress == 1) { duration: 750
buttonDelegate.longpressed = true; onRunningChanged: {
if (root.repeat) { if (!running && canvas.progress == 1) {
root.longpressed(); buttonDelegate.longpressed = true;
start(); if (root.repeat) {
canvas.inverted = !canvas.inverted root.longpressed();
} start();
canvas.inverted = !canvas.inverted
}
}
}
}
Rectangle {
anchors.fill: parent
anchors.margins: -app.margins / 2
radius: width / 2
color: Style.foregroundColor
opacity: buttonDelegate.pressed || buttonDelegate.containsMouse ? .08 : 0
Behavior on opacity {
NumberAnimation { duration: 200 }
}
}
Canvas {
id: canvas
anchors.fill: parent
anchors.margins: -app.margins / 2
property real progress: 0
property bool inverted: false
readonly property int penWidth: 2
onProgressChanged: {
requestPaint()
}
Connections {
target: buttonDelegate
onPressedChanged: {
if (!buttonDelegate.pressed) {
canvas.progress = 0;
canvas.requestPaint()
} }
} }
} }
Rectangle { onPaint: {
anchors.fill: parent var ctx = getContext("2d");
anchors.margins: -app.margins / 2 ctx.clearRect(0, 0, canvas.width, canvas.height);
radius: width / 2 ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
color: Style.foregroundColor ctx.lineWidth = canvas.penWidth
opacity: buttonDelegate.pressed || buttonDelegate.containsMouse ? .08 : 0 ctx.strokeStyle = Style.accentColor
Behavior on opacity {
NumberAnimation { duration: 200 } var start = -Math.PI / 2;
var stop = -Math.PI / 2;
if (inverted) {
start += canvas.progress * 2 * Math.PI
} else {
stop += canvas.progress * 2 * Math.PI
} }
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, ((canvas.width - canvas.penWidth) / 2), start, stop);
ctx.stroke();
} }
}
Canvas { ColorIcon {
id: canvas id: icon
anchors.fill: parent anchors.fill: parent
anchors.margins: -app.margins / 2 name: buttonDelegate.longpressed ? root.longpressImageSource : root.imageSource
property real progress: 0
property bool inverted: false
readonly property int penWidth: 2
onProgressChanged: {
requestPaint()
}
Connections {
target: buttonDelegate
onPressedChanged: {
if (!buttonDelegate.pressed) {
canvas.progress = 0;
canvas.requestPaint()
}
}
}
onPaint: {
var ctx = getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
ctx.lineWidth = canvas.penWidth
ctx.strokeStyle = Style.accentColor
var start = -Math.PI / 2;
var stop = -Math.PI / 2;
if (inverted) {
start += canvas.progress * 2 * Math.PI
} else {
stop += canvas.progress * 2 * Math.PI
}
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, ((canvas.width - canvas.penWidth) / 2), start, stop);
ctx.stroke();
}
}
ColorIcon {
id: icon
anchors.fill: parent
name: buttonDelegate.longpressed ? root.longpressImageSource : root.imageSource
}
} }
} }