kenji/illogical-impulse
1
0
Fork 0
forked from Shinonome/dots-hyprland
Code Pull Requests Activity

redesign stopwatch

Browse Source
This commit is contained in:
end-4
2025-08-09 12:54:53 +07:00
parent 9bc4ff16a7
commit de759b5120
1 changed files with 83 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.config/quickshell/ii/modules/sidebarRight/pomodoro/PomodoroWidget.qml
+83 -85
View File
@@ -15,9 +15,6 @@ Item {
{"name": Translation.tr("Pomodoro"), "icon": "timer_play"}, {"name": Translation.tr("Pomodoro"), "icon": "timer_play"},
{"name": Translation.tr("Stopwatch"), "icon": "timer"} {"name": Translation.tr("Stopwatch"), "icon": "timer"}
] ]
property int lapsListItemPadding: 8
property int lapsListItemSpacing: 5
// These are keybinds for stopwatch and pomodoro // These are keybinds for stopwatch and pomodoro
Keys.onPressed: (event) => { Keys.onPressed: (event) => {
@@ -214,7 +211,7 @@ Item {
contentItem: StyledText { contentItem: StyledText {
anchors.centerIn: parent anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text: Pomodoro.isPomodoroRunning ? Translation.tr("Stop") : Translation.tr("Start") text: Pomodoro.isPomodoroRunning ? Translation.tr("Pause") : Translation.tr("Start")
color: Appearance.colors.colSecondary color: Appearance.colors.colSecondary
} }
Layout.preferredHeight: 35 Layout.preferredHeight: 35
@@ -330,62 +327,53 @@ Item {
Layout.fillHeight: true Layout.fillHeight: true
ColumnLayout { ColumnLayout {
anchors.horizontalCenter: parent.horizontalCenter anchors {
fill: parent
leftMargin: 20
rightMargin: 20
}
spacing: 20 spacing: 20
Layout.fillWidth: true
RowLayout { ColumnLayout {
spacing: 40 spacing: 8
// The Stopwatch circle Layout.alignment: Qt.AlignHCenter
CircularProgress { Layout.fillWidth: false
id: stopwatchClock
RowLayout { // Elapsed
id: elapsedIndicator
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
lineWidth: 7 spacing: 0
gapAngle: Math.PI / 18 StyledText {
value: { Layout.preferredWidth: elapsedIndicator.width * 0.6 // Prevent shakiness
return Pomodoro.stopwatchTime % 6000 / 6000 // The seconds in percent font.pixelSize: 40
} color: Appearance.m3colors.m3onSurface
size: 125 text: {
primaryColor: Math.floor(Pomodoro.stopwatchTime / 6000) % 2 ? Appearance.colors.colSecondaryContainer : Appearance.m3colors.m3onSecondaryContainer let totalSeconds = Math.floor(Pomodoro.stopwatchTime) / 100
secondaryColor: Math.floor(Pomodoro.stopwatchTime / 6000) % 2 ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colSecondaryContainer let minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0')
enableAnimation: false // The animation seems weird after each cycle let seconds = Math.floor(totalSeconds % 60).toString().padStart(2, '0')
return `${minutes}:${seconds}`
ColumnLayout {
anchors.centerIn: parent
spacing: 0
StyledText {
Layout.alignment: Qt.AlignHCenter
text: {
let totalSeconds = Math.floor(Pomodoro.stopwatchTime) / 100
let minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0')
let seconds = Math.floor(totalSeconds % 60).toString().padStart(2, '0')
return `${minutes}:${seconds}`
}
font.pixelSize: Appearance.font.pixelSize.hugeass + 4
color: Appearance.m3colors.m3onSurface
} }
StyledText { }
Layout.alignment: Qt.AlignHCenter StyledText {
text: { Layout.fillWidth: true
return (Math.floor(Pomodoro.stopwatchTime) % 100).toString().padStart(2, '0') font.pixelSize: 40
} color: Appearance.colors.colSubtext
font.pixelSize: Appearance.font.pixelSize.normal text: {
color: Appearance.m3colors.m3onSurface return `:<sub>${(Math.floor(Pomodoro.stopwatchTime) % 100).toString().padStart(2, '0')}</sub>`
} }
} }
} }
// The Start/Stop and Reset buttons // The Start/Stop and Reset buttons
ColumnLayout { RowLayout {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
spacing: 10 spacing: 4
RippleButton { RippleButton {
contentItem: StyledText { contentItem: StyledText {
anchors.centerIn: parent anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text: Pomodoro.isStopwatchRunning ? Translation.tr("Stop") : Translation.tr("Start") text: Pomodoro.isStopwatchRunning ? Translation.tr("Pause") : Pomodoro.stopwatchTime === 0 ? Translation.tr("Start") : Translation.tr("Resume")
color: Appearance.colors.colSecondary color: Appearance.colors.colSecondary
} }
Layout.preferredHeight: 35 Layout.preferredHeight: 35
@@ -413,65 +401,75 @@ Item {
} }
} }
// Laps
StyledListView { StyledListView {
id: lapsList id: lapsList
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: stopwatchTab.height - stopwatchClock.height - 20 Layout.fillHeight: true
spacing: lapsListItemSpacing spacing: lapsListItemSpacing
clip: true clip: true
popin: true popin: true
model: Pomodoro.stopwatchLaps
model: ScriptModel {
values: Pomodoro.stopwatchLaps
}
delegate: Rectangle { delegate: Rectangle {
id: lapItem
required property int index
required property var modelData
property var horizontalPadding: 10
property var verticalPadding: 6
width: lapsList.width width: lapsList.width
implicitHeight: lapsContentText.implicitHeight + lapsListItemPadding implicitHeight: lapRow.implicitHeight + verticalPadding * 2
implicitWidth: lapRow.implicitWidth + horizontalPadding * 2
color: Appearance.colors.colLayer2 color: Appearance.colors.colLayer2
radius: Appearance.rounding.small radius: Appearance.rounding.small
StyledText { RowLayout {
id: lapsContentText id: lapRow
anchors.left: parent.left anchors {
anchors.top: parent.top fill: parent
anchors.bottom: parent.bottom leftMargin: lapItem.horizontalPadding
leftPadding: lapsListItemPadding rightMargin: lapItem.horizontalPadding
rightPadding: lapsListItemPadding topMargin: lapItem.verticalPadding
topPadding: lapsListItemPadding / 2 bottomMargin: lapItem.verticalPadding
bottomPadding: lapsListItemPadding / 2
font.pixelSize: Appearance.font.pixelSize.normal
text: {
let lapTime = modelData
let _10ms = (Math.floor(lapTime) % 100).toString().padStart(2, '0')
let totalSeconds = Math.floor(lapTime) / 100
let minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0')
let seconds = Math.floor(totalSeconds % 60).toString().padStart(2, '0')
return `${minutes}:${seconds}.${_10ms}`
} }
}
StyledText { StyledText {
id: lapsDiffText font.pixelSize: Appearance.font.pixelSize.small
anchors.right: parent.right color: Appearance.colors.colSubtext
anchors.top: parent.top text: `${Pomodoro.stopwatchLaps.length - lapItem.index}.`
anchors.bottom: parent.bottom }
leftPadding: lapsListItemPadding
rightPadding: lapsListItemPadding * 2
topPadding: lapsListItemPadding / 2
bottomPadding: lapsListItemPadding / 2
font.pixelSize: Appearance.font.pixelSize.normal
color: Appearance.colors.colPrimary
text: { StyledText {
if (index != Pomodoro.stopwatchLaps.length - 1) { // except first lap font.pixelSize: Appearance.font.pixelSize.small
let lapTime = modelData - Pomodoro.stopwatchLaps[index + 1] text: {
let lapTime = lapItem.modelData
let _10ms = (Math.floor(lapTime) % 100).toString().padStart(2, '0') let _10ms = (Math.floor(lapTime) % 100).toString().padStart(2, '0')
let totalSeconds = Math.floor(lapTime) / 100 let totalSeconds = Math.floor(lapTime) / 100
let minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0') let minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0')
let seconds = Math.floor(totalSeconds % 60).toString().padStart(2, '0') let seconds = Math.floor(totalSeconds % 60).toString().padStart(2, '0')
return `+${minutes}:${seconds}.${_10ms}` return `${minutes}:${seconds}.${_10ms}`
} else { }
return `` // Nothing for first lap }
Item { Layout.fillWidth: true }
StyledText {
font.pixelSize: Appearance.font.pixelSize.smaller
color: Appearance.colors.colPrimary
text: {
if (lapItem.index != Pomodoro.stopwatchLaps.length - 1) { // except first lap
let lapTime = lapItem.modelData - Pomodoro.stopwatchLaps[lapItem.index + 1]
let _10ms = (Math.floor(lapTime) % 100).toString().padStart(2, '0')
let totalSeconds = Math.floor(lapTime) / 100
let minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0')
let seconds = Math.floor(totalSeconds % 60).toString().padStart(2, '0')
return `+${minutes == "00" ? "" : minutes + ":"}${seconds}.${_10ms}`
} else {
return `` // Nothing for first lap
}
} }
} }
} }