Skip to content

RemorseTimer: Limit content to a square so the gauge stays square #114

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
moWerk wants to merge 1 commit into
base: master
Choose a base branch
from
+52 −42
Open

RemorseTimer: Limit content to a square so the gauge stays square #114

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 52 additions & 42 deletions src/controls/qml/RemorseTimer.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,55 +147,65 @@ Rectangle {
onTriggered: remorseTimer.countdownSeconds--
}

SegmentedArc {
id: countdownArc
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
// Content is sized against a centered square (the shorter screen edge)
// instead of Dims, so it stays correct on non-square screens and when the
// parent is not full-screen.
Item {
id: gaugeArea
anchors.centerIn: parent

@FlorentRevest FlorentRevest Jul 6, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually now that I think about it some more, if we have a 400x300 screen (flat tire of 100px) this would create a 400x400 square and then center it onto a 400x300 screen so the square would be offset by 50 pixels out of screen.

When it comes to the flat tire we should use a different method. Iirc we typically use the anchors offsets for this.

Anyway, this is hairy and complex enough that I feel qml-asteroid should provide abstractions for all these layout cases. This needs extra thinking (and documentation) but there are UI patterns that keep popping up to account for round/boxy, flattire/none, rectangular/square. Maybe we would need a clever Layout item that has a few attributes like "ignoreFlatTire" or "fitAsSquareInCircles" or "fitAsSquareInRectangle" and what not (those proposed attribute names are bad but you get the idea...) then we should be able to rationalize all of those weird edge cases and avoid having to think about those extra offsets ever again. I feel that we keep getting them wrong over and over again.

@moWerk moWerk Jul 6, 2026

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good discovery. Happy now my confusion served as a pointer, ha.
Shall we move this into an issue and involve @dodoradio since he worked on that a lot already?
I am eager to act on this swiftly tbh.

@FlorentRevest FlorentRevest Jul 6, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure :)

height: Math.min(parent.width, parent.height + flatTireHeight)
width: height

SegmentedArc {
id: countdownArc
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
width: parent.width * 0.22
height: width
segmentAmount: remorseTimer.gaugeSegmentAmount
inputValue: remorseTimer.arcValue
fgColor: "#ffffff"
bgColor: Qt.rgba(1, 1, 1, 0.2)
start: remorseTimer.gaugeStartDegree
endFromStart: remorseTimer.gaugeEndFromStartDegree
}
width: Dims.l(22)
height: width
segmentAmount: remorseTimer.gaugeSegmentAmount
inputValue: remorseTimer.arcValue
fgColor: "#ffffff"
bgColor: Qt.rgba(1, 1, 1, 0.2)
start: remorseTimer.gaugeStartDegree
endFromStart: remorseTimer.gaugeEndFromStartDegree
}

Label {
id: countdownLabel
anchors.centerIn: countdownArc
font {
pixelSize: Dims.l(18)
styleName: "SemiBoldCondensed"
Label {
id: countdownLabel
anchors.centerIn: countdownArc
font {
pixelSize: parent.width * 0.18
styleName: "SemiBoldCondensed"
}
color: "#ffffff"
text: remorseTimer.countdownSeconds
z: countdownArc.z + 1
}
color: "#ffffff"
text: remorseTimer.countdownSeconds
z: countdownArc.z + 1
}

Label {
id: actionLabel
anchors {
horizontalCenter: parent.horizontalCenter
bottom: countdownArc.top
bottomMargin: Dims.l(1)
Label {
id: actionLabel
anchors {
horizontalCenter: parent.horizontalCenter
bottom: countdownArc.top
bottomMargin: parent.width * 0.01
}
font.pixelSize: parent.width * 0.06
color: "#ffffff"
text: action
}
font.pixelSize: Dims.l(6)
color: "#ffffff"
text: action
}

Label {
id: cancelLabel
anchors {
horizontalCenter: parent.horizontalCenter
top: countdownArc.bottom
topMargin: Dims.l(1)
Label {
id: cancelLabel
anchors {
horizontalCenter: parent.horizontalCenter
top: countdownArc.bottom
topMargin: parent.width * 0.01
}
font.pixelSize: parent.width * 0.06
color: "#ffffff"
}
font.pixelSize: Dims.l(6)
color: "#ffffff"
}

MouseArea {
Expand Down