From 0ee9afba4f3f3efa4d93bc57570ac6eba8108741 Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Sat, 9 Aug 2025 16:28:17 +0700
Subject: [PATCH] pomodoro: move tabs to their own files, adjust colors
---
.../ii/modules/common/Appearance.qml | 8 +
.../modules/common/widgets/RippleButton.qml | 1 +
.../sidebarRight/pomodoro/PomodoroTimer.qml | 176 ++++++++++
.../sidebarRight/pomodoro/PomodoroWidget.qml | 327 +-----------------
.../sidebarRight/pomodoro/Stopwatch.qml | 170 +++++++++
5 files changed, 359 insertions(+), 323 deletions(-)
create mode 100644 .config/quickshell/ii/modules/sidebarRight/pomodoro/PomodoroTimer.qml
create mode 100644 .config/quickshell/ii/modules/sidebarRight/pomodoro/Stopwatch.qml
diff --git a/.config/quickshell/ii/modules/common/Appearance.qml b/.config/quickshell/ii/modules/common/Appearance.qml
index 9c937486..c16574e0 100644
--- a/.config/quickshell/ii/modules/common/Appearance.qml
+++ b/.config/quickshell/ii/modules/common/Appearance.qml
@@ -146,6 +146,14 @@ Singleton {
property color colScrim: ColorUtils.transparentize(m3colors.m3scrim, 0.5)
property color colShadow: ColorUtils.transparentize(m3colors.m3shadow, 0.7)
property color colOutlineVariant: m3colors.m3outlineVariant
+ property color colError: m3colors.m3error
+ property color colErrorHover: ColorUtils.mix(m3colors.m3error, colLayer1Hover, 0.85)
+ property color colErrorActive: ColorUtils.mix(m3colors.m3error, colLayer1Active, 0.7)
+ property color colOnError: m3colors.m3onError
+ property color colErrorContainer: m3colors.m3errorContainer
+ property color colErrorContainerHover: ColorUtils.mix(m3colors.m3errorContainer, m3colors.m3onErrorContainer, 0.90)
+ property color colErrorContainerActive: ColorUtils.mix(m3colors.m3errorContainer, m3colors.m3onErrorContainer, 0.70)
+ property color colOnErrorContainer: m3colors.m3onErrorContainer
}
rounding: QtObject {
diff --git a/.config/quickshell/ii/modules/common/widgets/RippleButton.qml b/.config/quickshell/ii/modules/common/widgets/RippleButton.qml
index 7487203a..750e9a31 100644
--- a/.config/quickshell/ii/modules/common/widgets/RippleButton.qml
+++ b/.config/quickshell/ii/modules/common/widgets/RippleButton.qml
@@ -29,6 +29,7 @@ Button {
property color colRipple: Appearance?.colors.colLayer1Active ?? "#D6CEE2"
property color colRippleToggled: Appearance?.colors.colPrimaryActive ?? "#D6CEE2"
+ opacity: root.enabled ? 1 : 0.4
property color buttonColor: root.enabled ? (root.toggled ?
(root.hovered ? colBackgroundToggledHover :
colBackgroundToggled) :
diff --git a/.config/quickshell/ii/modules/sidebarRight/pomodoro/PomodoroTimer.qml b/.config/quickshell/ii/modules/sidebarRight/pomodoro/PomodoroTimer.qml
new file mode 100644
index 00000000..57bb4a9d
--- /dev/null
+++ b/.config/quickshell/ii/modules/sidebarRight/pomodoro/PomodoroTimer.qml
@@ -0,0 +1,176 @@
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+
+Item {
+ ColumnLayout {
+ anchors.horizontalCenter: parent.horizontalCenter
+ spacing: 20
+
+ RowLayout {
+ spacing: 40
+ // The Pomodoro timer circle
+ CircularProgress {
+ Layout.alignment: Qt.AlignHCenter
+ lineWidth: 7
+ gapAngle: Math.PI / 14
+ value: {
+ let pomodoroTotalTime = Pomodoro.isBreak ? Pomodoro.breakTime : Pomodoro.focusTime
+ return Pomodoro.getPomodoroSecondsLeft / pomodoroTotalTime
+ }
+ size: 125
+ primaryColor: Appearance.m3colors.m3onSecondaryContainer
+ secondaryColor: Appearance.colors.colSecondaryContainer
+ enableAnimation: true
+
+ ColumnLayout {
+ anchors.centerIn: parent
+ spacing: 0
+
+ StyledText {
+ Layout.alignment: Qt.AlignHCenter
+ text: {
+ let minutes = Math.floor(Pomodoro.getPomodoroSecondsLeft / 60).toString().padStart(2, '0')
+ let seconds = Math.floor(Pomodoro.getPomodoroSecondsLeft % 60).toString().padStart(2, '0')
+ return `${minutes}:${seconds}`
+ }
+ font.pixelSize: Appearance.font.pixelSize.hugeass + 4
+ color: Appearance.m3colors.m3onSurface
+ }
+ StyledText {
+ Layout.alignment: Qt.AlignHCenter
+ text: Pomodoro.isBreak ? Translation.tr("Break") : Translation.tr("Focus")
+ font.pixelSize: Appearance.font.pixelSize.normal
+ color: Appearance.m3colors.m3onSurface
+ }
+ }
+ }
+
+ // The Start/Stop and Reset buttons
+ ColumnLayout {
+ Layout.alignment: Qt.AlignHCenter
+ spacing: 10
+
+ RippleButton {
+ contentItem: StyledText {
+ anchors.centerIn: parent
+ horizontalAlignment: Text.AlignHCenter
+ text: Pomodoro.isPomodoroRunning ? Translation.tr("Pause") : (Pomodoro.getPomodoroSecondsLeft === Pomodoro.focusTime) ? Translation.tr("Start") : Translation.tr("Resume")
+ color: Pomodoro.isPomodoroRunning ? Appearance.colors.colOnSecondaryContainer : Appearance.colors.colOnPrimary
+ }
+ implicitHeight: 35
+ implicitWidth: 90
+ font.pixelSize: Appearance.font.pixelSize.larger
+ onClicked: Pomodoro.togglePomodoro()
+ colBackground: Pomodoro.isPomodoroRunning ? Appearance.colors.colSecondaryContainer : Appearance.colors.colPrimary
+ colBackgroundHover: Pomodoro.isPomodoroRunning ? Appearance.colors.colSecondaryContainer : Appearance.colors.colPrimary
+ }
+
+ RippleButton {
+ implicitHeight: 35
+ implicitWidth: 90
+
+ onClicked: Pomodoro.pomodoroReset()
+ enabled: (Pomodoro.getPomodoroSecondsLeft < Pomodoro.focusTime)
+
+ font.pixelSize: Appearance.font.pixelSize.larger
+ colBackground: Appearance.colors.colErrorContainer
+ colBackgroundHover: Appearance.colors.colErrorContainerHover
+ colRipple: Appearance.colors.colErrorContainerActive
+
+ contentItem: StyledText {
+ anchors.centerIn: parent
+ horizontalAlignment: Text.AlignHCenter
+ text: Translation.tr("Reset")
+ color: Appearance.colors.colOnErrorContainer
+ }
+ }
+ }
+ }
+
+ // The SpinBoxes for adjusting duration
+ GridLayout {
+ Layout.alignment: Qt.AlignHCenter
+ columns: 2
+ uniformCellWidths: true
+ columnSpacing: 20
+ rowSpacing: 4
+
+ StyledText {
+ Layout.alignment: Qt.AlignHCenter
+ text: Translation.tr("Focus")
+ }
+
+ StyledText {
+ Layout.alignment: Qt.AlignHCenter
+ text: Translation.tr("Break")
+ }
+
+ ConfigSpinBox {
+ id: focusSpinBox
+ spacing: 0
+ Layout.leftMargin: 0
+ Layout.rightMargin: 0
+ value: Config.options.time.pomodoro.focus / 60
+ onValueChanged: {
+ Config.options.time.pomodoro.focus = value * 60
+ if (Pomodoro.isPomodoroReset) { // Special case for Pomodoro in Reset state
+ Pomodoro.getPomodoroSecondsLeft = Pomodoro.focusTime
+ Pomodoro.timeLeft = Pomodoro.focusTime
+ }
+ }
+ }
+
+ ConfigSpinBox {
+ id: breakSpinBox
+ spacing: 0
+ Layout.leftMargin: 0
+ Layout.rightMargin: 0
+ value: Config.options.time.pomodoro.breakTime / 60
+ onValueChanged: {
+ Config.options.time.pomodoro.breakTime = value * 60
+ }
+ }
+
+ StyledText {
+ Layout.topMargin: 6
+ Layout.alignment: Qt.AlignHCenter
+ text: Translation.tr("Cycle")
+ }
+ StyledText {
+ Layout.topMargin: 6
+ Layout.alignment: Qt.AlignHCenter
+ text: Translation.tr("Long break")
+ }
+
+ ConfigSpinBox {
+ id: cycleSpinBox
+ spacing: 0
+ from: 1
+ Layout.leftMargin: 0
+ Layout.rightMargin: 0
+ value: Config.options.time.pomodoro.cycle
+ onValueChanged: {
+ Config.options.time.pomodoro.cycle = value
+ }
+ }
+
+ ConfigSpinBox {
+ id: longBreakSpinBox
+ spacing: 0
+ Layout.leftMargin: 0
+ Layout.rightMargin: 0
+ value: Config.options.time.pomodoro.longBreak / 60
+ onValueChanged: {
+ Config.options.time.pomodoro.longBreak = value * 60
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/.config/quickshell/ii/modules/sidebarRight/pomodoro/PomodoroWidget.qml b/.config/quickshell/ii/modules/sidebarRight/pomodoro/PomodoroWidget.qml
index 8e0d65f7..594533f7 100644
--- a/.config/quickshell/ii/modules/sidebarRight/pomodoro/PomodoroWidget.qml
+++ b/.config/quickshell/ii/modules/sidebarRight/pomodoro/PomodoroWidget.qml
@@ -2,17 +2,15 @@ import qs
import qs.services
import qs.modules.common
import qs.modules.common.widgets
-import Qt5Compat.GraphicalEffects
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
-import Quickshell
Item {
id: root
property int currentTab: 0
property var tabButtonList: [
- {"name": Translation.tr("Pomodoro"), "icon": "timer_play"},
+ {"name": Translation.tr("Pomodoro"), "icon": "search_activity"},
{"name": Translation.tr("Stopwatch"), "icon": "timer"}
]
@@ -157,326 +155,9 @@ Item {
currentTab = currentIndex
}
- // Pomodoro Timer Tab
- Item {
- ColumnLayout {
- anchors.horizontalCenter: parent.horizontalCenter
- spacing: 20
-
- RowLayout {
- spacing: 40
- // The Pomodoro timer circle
- CircularProgress {
- Layout.alignment: Qt.AlignHCenter
- lineWidth: 7
- gapAngle: Math.PI / 14
- value: {
- let pomodoroTotalTime = Pomodoro.isBreak ? Pomodoro.breakTime : Pomodoro.focusTime
- return Pomodoro.getPomodoroSecondsLeft / pomodoroTotalTime
- }
- size: 125
- primaryColor: Appearance.m3colors.m3onSecondaryContainer
- secondaryColor: Appearance.colors.colSecondaryContainer
- enableAnimation: true
-
- ColumnLayout {
- anchors.centerIn: parent
- spacing: 0
-
- StyledText {
- Layout.alignment: Qt.AlignHCenter
- text: {
- let minutes = Math.floor(Pomodoro.getPomodoroSecondsLeft / 60).toString().padStart(2, '0')
- let seconds = Math.floor(Pomodoro.getPomodoroSecondsLeft % 60).toString().padStart(2, '0')
- return `${minutes}:${seconds}`
- }
- font.pixelSize: Appearance.font.pixelSize.hugeass + 4
- color: Appearance.m3colors.m3onSurface
- }
- StyledText {
- Layout.alignment: Qt.AlignHCenter
- text: Pomodoro.isBreak ? Translation.tr("Break") : Translation.tr("Focus")
- font.pixelSize: Appearance.font.pixelSize.normal
- color: Appearance.m3colors.m3onSurface
- }
- }
- }
-
- // The Start/Stop and Reset buttons
- ColumnLayout {
- Layout.alignment: Qt.AlignHCenter
- spacing: 10
-
- RippleButton {
- contentItem: StyledText {
- anchors.centerIn: parent
- horizontalAlignment: Text.AlignHCenter
- text: Pomodoro.isPomodoroRunning ? Translation.tr("Pause") : Translation.tr("Start")
- color: Appearance.colors.colSecondary
- }
- Layout.preferredHeight: 35
- Layout.preferredWidth: 90
- font.pixelSize: Appearance.font.pixelSize.larger
- onClicked: Pomodoro.togglePomodoro()
- colBackground: Appearance.colors.colSecondaryContainer
- colBackgroundHover: Appearance.colors.colSecondaryContainer
- }
-
- RippleButton {
- contentItem: StyledText {
- anchors.centerIn: parent
- horizontalAlignment: Text.AlignHCenter
- text: Translation.tr("Reset")
- color: Appearance.colors.colSecondary
- }
- Layout.preferredHeight: 35
- Layout.preferredWidth: 90
- font.pixelSize: Appearance.font.pixelSize.larger
- onClicked: Pomodoro.pomodoroReset()
- colBackground: Appearance.m3colors.m3onError
- colBackgroundHover: Appearance.m3colors.m3onError
- }
- }
- }
-
- // The SpinBoxes for adjusting duration
- GridLayout {
- Layout.alignment: Qt.AlignHCenter
- columns: 2
- uniformCellWidths: true
- columnSpacing: 20
- rowSpacing: 6
-
- StyledText {
- Layout.alignment: Qt.AlignHCenter
- text: Translation.tr("Focus")
- }
-
- StyledText {
- Layout.alignment: Qt.AlignHCenter
- text: Translation.tr("Break")
- }
-
- ConfigSpinBox {
- id: focusSpinBox
- spacing: 0
- Layout.leftMargin: 0
- Layout.rightMargin: 0
- value: Config.options.time.pomodoro.focus / 60
- onValueChanged: {
- Config.options.time.pomodoro.focus = value * 60
- if (Pomodoro.isPomodoroReset) { // Special case for Pomodoro in Reset state
- Pomodoro.getPomodoroSecondsLeft = Pomodoro.focusTime
- Pomodoro.timeLeft = Pomodoro.focusTime
- }
- }
- }
-
- ConfigSpinBox {
- id: breakSpinBox
- spacing: 0
- Layout.leftMargin: 0
- Layout.rightMargin: 0
- value: Config.options.time.pomodoro.breakTime / 60
- onValueChanged: {
- Config.options.time.pomodoro.breakTime = value * 60
- }
- }
-
- StyledText {
- Layout.topMargin: 6
- Layout.alignment: Qt.AlignHCenter
- text: Translation.tr("Cycle")
- }
- StyledText {
- Layout.topMargin: 6
- Layout.alignment: Qt.AlignHCenter
- text: Translation.tr("Long break")
- }
-
- ConfigSpinBox {
- id: cycleSpinBox
- spacing: 0
- from: 1
- Layout.leftMargin: 0
- Layout.rightMargin: 0
- value: Config.options.time.pomodoro.cycle
- onValueChanged: {
- Config.options.time.pomodoro.cycle = value
- }
- }
-
- ConfigSpinBox {
- id: longBreakSpinBox
- spacing: 0
- Layout.leftMargin: 0
- Layout.rightMargin: 0
- value: Config.options.time.pomodoro.longBreak / 60
- onValueChanged: {
- Config.options.time.pomodoro.longBreak = value * 60
- }
- }
- }
- }
- }
-
- // Stopwatch Tab
- Item {
- id: stopwatchTab
- Layout.fillWidth: true
- Layout.fillHeight: true
-
- ColumnLayout {
- anchors {
- fill: parent
- leftMargin: 20
- rightMargin: 20
- }
- spacing: 20
-
- ColumnLayout {
- spacing: 8
- Layout.alignment: Qt.AlignHCenter
- Layout.fillWidth: false
-
- RowLayout { // Elapsed
- id: elapsedIndicator
- Layout.alignment: Qt.AlignHCenter
- spacing: 0
- StyledText {
- Layout.preferredWidth: elapsedIndicator.width * 0.6 // Prevent shakiness
- font.pixelSize: 40
- color: Appearance.m3colors.m3onSurface
- 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}`
- }
- }
- StyledText {
- Layout.fillWidth: true
- font.pixelSize: 40
- color: Appearance.colors.colSubtext
- text: {
- return `:${(Math.floor(Pomodoro.stopwatchTime) % 100).toString().padStart(2, '0')}`
- }
- }
- }
-
- // The Start/Stop and Reset buttons
- RowLayout {
- Layout.alignment: Qt.AlignHCenter
- spacing: 4
-
- RippleButton {
- contentItem: StyledText {
- anchors.centerIn: parent
- horizontalAlignment: Text.AlignHCenter
- text: Pomodoro.isStopwatchRunning ? Translation.tr("Pause") : Pomodoro.stopwatchTime === 0 ? Translation.tr("Start") : Translation.tr("Resume")
- color: Appearance.colors.colSecondary
- }
- Layout.preferredHeight: 35
- Layout.preferredWidth: 90
- font.pixelSize: Appearance.font.pixelSize.larger
- onClicked: Pomodoro.toggleStopwatch()
- colBackground: Appearance.colors.colSecondaryContainer
- colBackgroundHover: Appearance.colors.colSecondaryContainer
- }
-
- RippleButton {
- contentItem: StyledText {
- anchors.centerIn: parent
- horizontalAlignment: Text.AlignHCenter
- text: Pomodoro.isStopwatchRunning ? Translation.tr("Lap") : Translation.tr("Reset")
- color: Appearance.colors.colSecondary
- }
- Layout.preferredHeight: 35
- Layout.preferredWidth: 90
- font.pixelSize: Appearance.font.pixelSize.larger
- onClicked: Pomodoro.stopwatchResetOrLaps()
- colBackground: Appearance.m3colors.m3onError
- colBackgroundHover: Appearance.m3colors.m3onError
- }
- }
- }
-
- // Laps
- StyledListView {
- id: lapsList
- Layout.fillWidth: true
- Layout.fillHeight: true
- spacing: lapsListItemSpacing
- clip: true
- popin: true
-
- model: ScriptModel {
- values: Pomodoro.stopwatchLaps
- }
-
- delegate: Rectangle {
- id: lapItem
- required property int index
- required property var modelData
- property var horizontalPadding: 10
- property var verticalPadding: 6
- width: lapsList.width
- implicitHeight: lapRow.implicitHeight + verticalPadding * 2
- implicitWidth: lapRow.implicitWidth + horizontalPadding * 2
- color: Appearance.colors.colLayer2
- radius: Appearance.rounding.small
-
- RowLayout {
- id: lapRow
- anchors {
- fill: parent
- leftMargin: lapItem.horizontalPadding
- rightMargin: lapItem.horizontalPadding
- topMargin: lapItem.verticalPadding
- bottomMargin: lapItem.verticalPadding
- }
-
- StyledText {
- font.pixelSize: Appearance.font.pixelSize.small
- color: Appearance.colors.colSubtext
- text: `${Pomodoro.stopwatchLaps.length - lapItem.index}.`
- }
-
- StyledText {
- font.pixelSize: Appearance.font.pixelSize.small
- text: {
- let lapTime = lapItem.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}`
- }
- }
-
- 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
- }
- }
- }
- }
- }
- }
- }
- }
+ // Tabs
+ PomodoroTimer {}
+ Stopwatch {}
}
}
}
diff --git a/.config/quickshell/ii/modules/sidebarRight/pomodoro/Stopwatch.qml b/.config/quickshell/ii/modules/sidebarRight/pomodoro/Stopwatch.qml
new file mode 100644
index 00000000..90ea1ef7
--- /dev/null
+++ b/.config/quickshell/ii/modules/sidebarRight/pomodoro/Stopwatch.qml
@@ -0,0 +1,170 @@
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import Qt5Compat.GraphicalEffects
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+
+Item {
+ id: stopwatchTab
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+
+ ColumnLayout {
+ anchors {
+ fill: parent
+ leftMargin: 20
+ rightMargin: 20
+ }
+ spacing: 20
+
+ ColumnLayout {
+ spacing: 8
+ Layout.alignment: Qt.AlignHCenter
+ Layout.fillWidth: false
+
+ RowLayout { // Elapsed
+ id: elapsedIndicator
+ Layout.alignment: Qt.AlignHCenter
+ spacing: 0
+ StyledText {
+ Layout.preferredWidth: elapsedIndicator.width * 0.6 // Prevent shakiness
+ font.pixelSize: 40
+ color: Appearance.m3colors.m3onSurface
+ 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}`
+ }
+ }
+ StyledText {
+ Layout.fillWidth: true
+ font.pixelSize: 40
+ color: Appearance.colors.colSubtext
+ text: {
+ return `:${(Math.floor(Pomodoro.stopwatchTime) % 100).toString().padStart(2, '0')}`
+ }
+ }
+ }
+
+ // The Start/Stop and Reset buttons
+ RowLayout {
+ Layout.alignment: Qt.AlignHCenter
+ spacing: 4
+
+ RippleButton {
+ Layout.preferredHeight: 35
+ Layout.preferredWidth: 90
+ font.pixelSize: Appearance.font.pixelSize.larger
+
+ onClicked: Pomodoro.toggleStopwatch()
+
+ colBackground: Pomodoro.isStopwatchRunning ? Appearance.colors.colSecondaryContainer : Appearance.colors.colPrimary
+ colBackgroundHover: Pomodoro.isStopwatchRunning ? Appearance.colors.colSecondaryContainerHover : Appearance.colors.colPrimaryHover
+ colRipple: Pomodoro.isStopwatchRunning ? Appearance.colors.colSecondaryContainerActive : Appearance.colors.colPrimaryActive
+
+ contentItem: StyledText {
+ horizontalAlignment: Text.AlignHCenter
+ color: Pomodoro.isStopwatchRunning ? Appearance.colors.colOnSecondaryContainer : Appearance.colors.colOnPrimary
+ text: Pomodoro.isStopwatchRunning ? Translation.tr("Pause") : Pomodoro.stopwatchTime === 0 ? Translation.tr("Start") : Translation.tr("Resume")
+ }
+ }
+
+ RippleButton {
+ implicitHeight: 35
+ implicitWidth: 90
+ font.pixelSize: Appearance.font.pixelSize.larger
+
+ onClicked: Pomodoro.stopwatchResetOrLaps()
+ enabled: Pomodoro.stopwatchTime !== 0
+
+ colBackground: Pomodoro.isStopwatchRunning ? Appearance.colors.colLayer2 : Appearance.colors.colErrorContainer
+ colBackgroundHover: Pomodoro.isStopwatchRunning ? Appearance.colors.colLayer2Hover : Appearance.colors.colErrorContainerHover
+ colRipple: Pomodoro.isStopwatchRunning ? Appearance.colors.colLayer2Active : Appearance.colors.colErrorContainerActive
+
+ contentItem: StyledText {
+ horizontalAlignment: Text.AlignHCenter
+ text: Pomodoro.isStopwatchRunning ? Translation.tr("Lap") : Translation.tr("Reset")
+ color: Pomodoro.isStopwatchRunning ? Appearance.colors.colOnLayer2 : Appearance.colors.colOnErrorContainer
+ }
+ }
+ }
+ }
+
+ // Laps
+ StyledListView {
+ id: lapsList
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+ spacing: lapsListItemSpacing
+ clip: true
+ popin: true
+
+ model: ScriptModel {
+ values: Pomodoro.stopwatchLaps
+ }
+
+ delegate: Rectangle {
+ id: lapItem
+ required property int index
+ required property var modelData
+ property var horizontalPadding: 10
+ property var verticalPadding: 6
+ width: lapsList.width
+ implicitHeight: lapRow.implicitHeight + verticalPadding * 2
+ implicitWidth: lapRow.implicitWidth + horizontalPadding * 2
+ color: Appearance.colors.colLayer2
+ radius: Appearance.rounding.small
+
+ RowLayout {
+ id: lapRow
+ anchors {
+ fill: parent
+ leftMargin: lapItem.horizontalPadding
+ rightMargin: lapItem.horizontalPadding
+ topMargin: lapItem.verticalPadding
+ bottomMargin: lapItem.verticalPadding
+ }
+
+ StyledText {
+ font.pixelSize: Appearance.font.pixelSize.small
+ color: Appearance.colors.colSubtext
+ text: `${Pomodoro.stopwatchLaps.length - lapItem.index}.`
+ }
+
+ StyledText {
+ font.pixelSize: Appearance.font.pixelSize.small
+ text: {
+ let lapTime = lapItem.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}`
+ }
+ }
+
+ Item { Layout.fillWidth: true }
+
+ StyledText {
+ font.pixelSize: Appearance.font.pixelSize.smaller
+ color: Appearance.colors.colPrimary
+ text: {
+ let lastTime = (lapItem.index != Pomodoro.stopwatchLaps.length - 1) ? Pomodoro.stopwatchLaps[lapItem.index + 1] : 0
+ let lapTime = lapItem.modelData - lastTime
+ 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}`
+ }
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file