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("Stopwatch"), "icon": "timer"} ] property int lapsListItemPadding: 8 property int lapsListItemSpacing: 5 // These are keybinds for stopwatch and pomodoro Keys.onPressed: (event) => { if ((event.key === Qt.Key_PageDown || event.key === Qt.Key_PageUp) && event.modifiers === Qt.NoModifier) { if (event.key === Qt.Key_PageDown) { currentTab = Math.min(currentTab + 1, root.tabButtonList.length - 1) } else if (event.key === Qt.Key_PageUp) { currentTab = Math.max(currentTab - 1, 0) } event.accepted = true } else if (event.key === Qt.Key_Space || event.key === Qt.Key_S) { // Toggle start/stop with Space or S key if (currentTab === 0) { Pomodoro.togglePomodoro() } else { Pomodoro.toggleStopwatch() } event.accepted = true } else if (event.key === Qt.Key_R) { // Reset with R key if (currentTab === 0) { Pomodoro.pomodoroReset() } else { Pomodoro.stopwatchReset() } event.accepted = true } else if (event.key === Qt.Key_L) { // record Stopwatch lap with L key, regardless of current Tab Pomodoro.recordLaps() } } Timer { id: pomodoroTimer interval: 200 running: Pomodoro.isPomodoroRunning repeat: true onTriggered: Pomodoro.refreshPomodoro() } Timer { id: stopwatchTimer interval: 10 running: Pomodoro.isStopwatchRunning repeat: true onTriggered: Pomodoro.refreshStopwatch() } ColumnLayout { anchors.fill: parent spacing: 0 TabBar { id: tabBar Layout.fillWidth: true currentIndex: currentTab onCurrentIndexChanged: currentTab = currentIndex background: Item { WheelHandler { onWheel: (event) => { if (event.angleDelta.y < 0) tabBar.currentIndex = Math.min(tabBar.currentIndex + 1, root.tabButtonList.length - 1) else if (event.angleDelta.y > 0) tabBar.currentIndex = Math.max(tabBar.currentIndex - 1, 0) } acceptedDevices: PointerDevice.Mouse | PointerDevice.TouchPad } } Repeater { model: root.tabButtonList delegate: SecondaryTabButton { selected: (index == currentTab) buttonText: modelData.name buttonIcon: modelData.icon } } } Item { // Tab indicator id: tabIndicator Layout.fillWidth: true height: 3 property bool enableIndicatorAnimation: false Connections { target: root function onCurrentTabChanged() { tabIndicator.enableIndicatorAnimation = true } } Rectangle { id: indicator property int tabCount: root.tabButtonList.length property real fullTabSize: root.width / tabCount; property real targetWidth: tabBar.contentItem.children[0].children[tabBar.currentIndex].tabContentWidth implicitWidth: targetWidth anchors { top: parent.top bottom: parent.bottom } x: tabBar.currentIndex * fullTabSize + (fullTabSize - targetWidth) / 2 color: Appearance.colors.colPrimary radius: Appearance.rounding.full Behavior on x { enabled: tabIndicator.enableIndicatorAnimation animation: Appearance.animation.elementMove.numberAnimation.createObject(this) } Behavior on implicitWidth { enabled: tabIndicator.enableIndicatorAnimation animation: Appearance.animation.elementMove.numberAnimation.createObject(this) } } } Rectangle { // Tabbar bottom border id: tabBarBottomBorder Layout.fillWidth: true height: 1 color: Appearance.colors.colOutlineVariant } SwipeView { id: swipeView Layout.topMargin: 10 Layout.fillWidth: true Layout.fillHeight: true spacing: 10 clip: true currentIndex: currentTab onCurrentIndexChanged: { tabIndicator.enableIndicatorAnimation = true 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("Stop") : 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.horizontalCenter: parent.horizontalCenter spacing: 20 Layout.fillWidth: true RowLayout { spacing: 40 // The Stopwatch circle CircularProgress { id: stopwatchClock Layout.alignment: Qt.AlignHCenter lineWidth: 7 gapAngle: Math.PI / 18 value: { return Pomodoro.stopwatchTime % 6000 / 6000 // The seconds in percent } size: 125 primaryColor: Math.floor(Pomodoro.stopwatchTime / 6000) % 2 ? Appearance.colors.colSecondaryContainer : Appearance.m3colors.m3onSecondaryContainer secondaryColor: Math.floor(Pomodoro.stopwatchTime / 6000) % 2 ? Appearance.m3colors.m3onSecondaryContainer : Appearance.colors.colSecondaryContainer enableAnimation: false // The animation seems weird after each cycle 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 text: { return (Math.floor(Pomodoro.stopwatchTime) % 100).toString().padStart(2, '0') } 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.isStopwatchRunning ? Translation.tr("Stop") : Translation.tr("Start") 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 } } } StyledListView { id: lapsList Layout.fillWidth: true Layout.preferredHeight: stopwatchTab.height - stopwatchClock.height - 20 spacing: lapsListItemSpacing clip: true popin: true model: Pomodoro.stopwatchLaps delegate: Rectangle { width: lapsList.width implicitHeight: lapsContentText.implicitHeight + lapsListItemPadding color: Appearance.colors.colLayer2 radius: Appearance.rounding.small StyledText { id: lapsContentText anchors.left: parent.left anchors.top: parent.top anchors.bottom: parent.bottom leftPadding: lapsListItemPadding rightPadding: lapsListItemPadding topPadding: lapsListItemPadding / 2 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 { id: lapsDiffText anchors.right: parent.right anchors.top: parent.top 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: { if (index != Pomodoro.stopwatchLaps.length - 1) { // except first lap let lapTime = modelData - Pomodoro.stopwatchLaps[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}:${seconds}.${_10ms}` } else { return `` // Nothing for first lap } } } } } } } } } }