From 14d4d05acc235ab7033316d16530783c90e95faa Mon Sep 17 00:00:00 2001 From: Gregor Kleen Date: Fri, 5 Sep 2025 23:31:35 +0200 Subject: ... --- accounts/gkleen@sif/shell/quickshell/Clock.qml | 309 +++++++++++++------------ 1 file changed, 163 insertions(+), 146 deletions(-) (limited to 'accounts/gkleen@sif/shell/quickshell/Clock.qml') diff --git a/accounts/gkleen@sif/shell/quickshell/Clock.qml b/accounts/gkleen@sif/shell/quickshell/Clock.qml index d0c9178b..382af168 100644 --- a/accounts/gkleen@sif/shell/quickshell/Clock.qml +++ b/accounts/gkleen@sif/shell/quickshell/Clock.qml @@ -22,18 +22,6 @@ Item { hoverEnabled: true enabled: clockItem.calendarPopup - property real angleRem: 0 - property real sensitivity: 1 / 120 - - function scrollYear(event) { - angleRem += event.angleDelta.y; - const d = Math.round(angleRem * sensitivity); - yearCalendar.year += d; - angleRem -= d / sensitivity; - } - - onWheel: event => scrollYear(event) - Item { anchors.fill: parent @@ -56,204 +44,233 @@ Item { } } - PopupWindow { - id: tooltip + Loader { + id: tooltipLoader - property bool nextVisible: clockMouseArea.containsMouse || tooltipMouseArea.containsMouse + active: false - anchor { - item: clockMouseArea - edges: Edges.Bottom | Edges.Left + Connections { + target: clockMouseArea + function onContainsMouseChanged() { + if (clockMouseArea.containsMouse) + tooltipLoader.active = true; + } } - visible: false - onNextVisibleChanged: hangTimer.restart() + sourceComponent: PopupWindow { + id: tooltip - Timer { - id: hangTimer - interval: 100 - onTriggered: tooltip.visible = tooltip.nextVisible - } + property bool nextVisible: clockMouseArea.containsMouse || tooltipMouseArea.containsMouse - implicitWidth: clockTooltipContent.width - implicitHeight: clockTooltipContent.height - color: "black" + anchor { + item: clockMouseArea + edges: Edges.Bottom | Edges.Left + } + visible: false - onVisibleChanged: { - yearCalendar.year = chrono.date.getFullYear(); - clockMouseArea.angleRem = 0; - } + onNextVisibleChanged: hangTimer.restart() - WrapperMouseArea { - id: tooltipMouseArea + Timer { + id: hangTimer + interval: 100 + onTriggered: tooltip.visible = tooltip.nextVisible + } - hoverEnabled: true - enabled: true + implicitWidth: clockTooltipContent.width + implicitHeight: clockTooltipContent.height + color: "black" - onWheel: event => clockMouseArea.scrollYear(event) + onVisibleChanged: { + yearCalendar.year = chrono.date.getFullYear(); + yearCalendar.angleRem = 0; + } - anchors.fill: parent + WrapperMouseArea { + id: tooltipMouseArea - WrapperItem { - id: clockTooltipContent + hoverEnabled: true + enabled: true - margin: 8 - leftMargin: 0 + onWheel: event => yearCalendar.scrollYear(event) - ColumnLayout { - Text { - id: yearLabel + anchors.fill: parent - horizontalAlignment: Text.AlignHCenter + WrapperItem { + id: clockTooltipContent - font.pointSize: 14 - font.family: "Fira Sans" - font.features: { "tnum": 1 } - color: "white" + margin: 8 + leftMargin: 0 - text: yearCalendar.year + ColumnLayout { + Text { + id: yearLabel - Layout.fillWidth: true - Layout.bottomMargin: 8 - } + horizontalAlignment: Text.AlignHCenter - GridLayout { - property int year: chrono.date.getFullYear() + font.pointSize: 14 + font.family: "Fira Sans" + font.features: { "tnum": 1 } + color: "white" - id: yearCalendar + text: yearCalendar.year - columns: 3 - columnSpacing: 16 - rowSpacing: 16 + Layout.fillWidth: true + Layout.bottomMargin: 8 + } - Layout.alignment: Qt.AlignHCenter - Layout.fillWidth: false + GridLayout { + property int year: chrono.date.getFullYear() - Repeater { - model: 12 + id: yearCalendar - GridLayout { - columns: 2 + columns: 3 + columnSpacing: 16 + rowSpacing: 16 - required property int index - property int month: index + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: false - id: monthCalendar + property real angleRem: 0 + property real sensitivity: 1 / 120 - Layout.alignment: Qt.AlignTop | Qt.AlignRight - Layout.fillWidth: false + function scrollYear(event) { + angleRem += event.angleDelta.y; + const d = Math.round(angleRem * sensitivity); + yearCalendar.year += d; + angleRem -= d / sensitivity; + } - Text { - Layout.column: 1 - Layout.fillWidth: true + Connections { + target: clockMouseArea + function onWheel(event) { yearCalendar.scrollYear(event); } + } - horizontalAlignment: Text.AlignHCenter + Repeater { + model: 12 - font.pointSize: 10 - font.family: "Fira Sans" + GridLayout { + columns: 2 - text: new Date(yearCalendar.year, monthCalendar.month, 1).toLocaleString(Qt.locale("en_DK"), "MMMM") + required property int index + property int month: index - color: "#ffead3" - } + id: monthCalendar - DayOfWeekRow { - locale: grid.locale + Layout.alignment: Qt.AlignTop | Qt.AlignRight + Layout.fillWidth: false - Layout.row: 1 - Layout.column: 1 - Layout.fillWidth: true + Text { + Layout.column: 1 + Layout.fillWidth: true - delegate: WrapperItem { - required property string shortName + horizontalAlignment: Text.AlignHCenter - width: dowLabel.contentWidth + 6 + font.pointSize: 10 + font.family: "Fira Sans" - Text { - id: dowLabel + text: new Date(yearCalendar.year, monthCalendar.month, 1).toLocaleString(Qt.locale("en_DK"), "MMMM") - anchors.fill: parent + color: "#ffead3" + } - font.pointSize: 10 - font.family: "Fira Sans" + DayOfWeekRow { + locale: grid.locale - text: parent.shortName - color: "#ffcc66" + Layout.row: 1 + Layout.column: 1 + Layout.fillWidth: true - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - } - } - } + delegate: WrapperItem { + required property string shortName - WeekNumberColumn { - month: grid.month - year: grid.year - locale: grid.locale + width: dowLabel.contentWidth + 6 - Layout.fillHeight: true + Text { + id: dowLabel - delegate: Text { - required property int weekNumber + anchors.fill: parent - opacity: { - const simple = new Date(weekNumber == 1 && monthCalendar.month == 12 ? yearCalendar.year + 1 : yearCalendar.year, 0, 1 + (weekNumber - 1) * 7); - const dayOfWeek = simple.getDay(); - const isoWeekStart = simple; + font.pointSize: 10 + font.family: "Fira Sans" - isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1); - if (dayOfWeek > 4) { - isoWeekStart.setDate(isoWeekStart.getDate() + 7); - } + text: parent.shortName + color: "#ffcc66" - for (let i = 0; i < 7; i++) { - const dayInWeek = new Date(isoWeekStart); - dayInWeek.setDate(dayInWeek.getDate() + i); - if (dayInWeek.getMonth() == monthCalendar.month) - return 1; + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter } - - return 0; } + } - font.pointSize: 10 - font.family: "Fira Sans" - font.features: { "tnum": 1 } - - text: weekNumber - color: "#99ffdd" + WeekNumberColumn { + month: grid.month + year: grid.year + locale: grid.locale - horizontalAlignment: Text.AlignRight - verticalAlignment: Text.AlignVCenter - } - } + Layout.fillHeight: true - MonthGrid { - id: grid + delegate: Text { + required property int weekNumber - year: yearCalendar.year - month: monthCalendar.month - locale: Qt.locale("en_DK") + opacity: { + const simple = new Date(weekNumber == 1 && monthCalendar.month == 12 ? yearCalendar.year + 1 : yearCalendar.year, 0, 1 + (weekNumber - 1) * 7); + const dayOfWeek = simple.getDay(); + const isoWeekStart = simple; - Layout.fillWidth: true - Layout.fillHeight: true + isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1); + if (dayOfWeek > 4) { + isoWeekStart.setDate(isoWeekStart.getDate() + 7); + } - delegate: Text { - required property var model + for (let i = 0; i < 7; i++) { + const dayInWeek = new Date(isoWeekStart); + dayInWeek.setDate(dayInWeek.getDate() + i); + if (dayInWeek.getMonth() == monthCalendar.month) + return 1; + } - opacity: model.month === monthCalendar.month ? 1 : 0 + return 0; + } font.pointSize: 10 font.family: "Fira Sans" font.features: { "tnum": 1 } - property bool today: chrono.date.getFullYear() == model.year && chrono.date.getMonth() == model.month && chrono.date.getDate() == model.day - - text: model.day - color: today ? "#ff6699" : "white" + text: weekNumber + color: "#99ffdd" horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter + } + } + + MonthGrid { + id: grid + + year: yearCalendar.year + month: monthCalendar.month + locale: Qt.locale("en_DK") + + Layout.fillWidth: true + Layout.fillHeight: true + + delegate: Text { + required property var model + + opacity: model.month === monthCalendar.month ? 1 : 0 + + font.pointSize: 10 + font.family: "Fira Sans" + font.features: { "tnum": 1 } + + property bool today: chrono.date.getFullYear() == model.year && chrono.date.getMonth() == model.month && chrono.date.getDate() == model.day + + text: model.day + color: today ? "#ff6699" : "white" + + horizontalAlignment: Text.AlignRight + verticalAlignment: Text.AlignVCenter + } } } } -- cgit v1.2.3