looks better

This commit is contained in:
Benjamin Palko 2025-08-29 13:28:19 -04:00
parent 4c5dc4df41
commit d78b9b275f
2 changed files with 53 additions and 45 deletions

View file

@ -1,5 +1,6 @@
pragma ComponentBehavior: Bound pragma ComponentBehavior: Bound
import qs.components
import qs.config import qs.config
import qs.constants import qs.constants
import qs.services import qs.services
@ -49,58 +50,60 @@ StyledWindow {
font.pixelSize: 22 font.pixelSize: 22
} }
Circle { Item {
id: circle implicitWidth: circle.width
radius: 150 implicitHeight: circle.height
color: Pomodoro.state == "timer" ? Theme.palette.primary : Theme.palette.warning
percentage: (Pomodoro.state == "timer" ? (Pomodoro.initialTime - Pomodoro.remainingTime) : Pomodoro.remainingTime) / Pomodoro.initialTime % 1
WrapperRectangle { Circle {
color: "transparent" id: circle
anchors.verticalCenter: parent.verticalCenter radius: 150
anchors.horizontalCenter: parent.horizontalCenter borderColor: Theme.palette.base100
ColumnLayout { strokeColor: Pomodoro.state == "timer" ? Theme.palette.primary : Theme.palette.warning
spacing: 18 strokeWidth: 12
StyledButton { fillColor: button.hovered ? Theme.palette.primary : "transparent"
percentage: (Pomodoro.state == "timer" ? (Pomodoro.initialTime - Pomodoro.remainingTime) : Pomodoro.remainingTime) / Pomodoro.initialTime % 1
}
Layout.alignment: Qt.AlignHCenter StyledIconButton {
id: button
focus: root.visible anchors.centerIn: circle
content: LucideIcon { radius: 9999
text: Pomodoro.running ? Icons.square : Icons.play
font.pixelSize: 20
}
onClicked: { focus: root.visible
Pomodoro.toggle(); text: Pomodoro.running ? Icons.square : Icons.play
} font.pixelSize: 48
Keys.onSpacePressed: event => { background: undefined
event.accepted = true; onClicked: {
Pomodoro.toggle(); Pomodoro.toggle();
} }
Keys.onEscapePressed: event => {
event.accepted = true; Keys.onSpacePressed: event => {
Visibility.pomodoro = false; event.accepted = true;
} Pomodoro.toggle();
Keys.onTabPressed: event => { }
event.accepted = true; Keys.onEscapePressed: event => {
Pomodoro.reset(); event.accepted = true;
} Visibility.pomodoro = false;
} }
StyledText { Keys.onTabPressed: event => {
Layout.alignment: Qt.AlignHCenter event.accepted = true;
text: { Pomodoro.reset();
const date = new Date(Pomodoro.remainingTime);
return `${date.getMinutes().toString().padStart(2, "0")}:${(date.getSeconds() % 3600).toString().padStart(2, "0")}`;
}
font.pixelSize: 16
}
} }
} }
} }
StyledText {
Layout.alignment: Qt.AlignHCenter
text: {
const date = new Date(Pomodoro.remainingTime);
return `${date.getMinutes().toString().padStart(2, "0")}:${(date.getSeconds() % 3600).toString().padStart(2, "0")}`;
}
font.pixelSize: 16
}
StyledButton { StyledButton {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter

View file

@ -7,7 +7,10 @@ Item {
property int radius: 0 property int radius: 0
property double percentage: 0 property double percentage: 0
property alias color: path.strokeColor property alias borderColor: fill.strokeColor
property alias strokeColor: path.strokeColor
property alias strokeWidth: path.strokeWidth
property alias fillColor: fill.fillColor
implicitWidth: radius * 2 implicitWidth: radius * 2
implicitHeight: radius * 2 implicitHeight: radius * 2
@ -17,6 +20,8 @@ Item {
preferredRendererType: Shape.CurveRenderer preferredRendererType: Shape.CurveRenderer
ShapePath { ShapePath {
id: fill
fillColor: Theme.palette.base100 fillColor: Theme.palette.base100
strokeColor: Theme.palette.base200 strokeColor: Theme.palette.base200
strokeWidth: 8 strokeWidth: 8
@ -34,8 +39,8 @@ Item {
id: path id: path
fillColor: "transparent" fillColor: "transparent"
strokeWidth: 8 strokeWidth: 0
strokeColor: "white" strokeColor: "transparent"
capStyle: ShapePath.RoundCap capStyle: ShapePath.RoundCap
PathAngleArc { PathAngleArc {