From 828893e930886872fcf612bc8958d33fee73b5df Mon Sep 17 00:00:00 2001 From: Gregor Kleen Date: Sun, 31 Aug 2025 15:54:26 +0200 Subject: ... --- accounts/gkleen@sif/shell/quickshell/Clock.qml | 225 +++++++++++++++---------- 1 file changed, 134 insertions(+), 91 deletions(-) (limited to 'accounts/gkleen@sif') diff --git a/accounts/gkleen@sif/shell/quickshell/Clock.qml b/accounts/gkleen@sif/shell/quickshell/Clock.qml index 65b842b3..68efb558 100644 --- a/accounts/gkleen@sif/shell/quickshell/Clock.qml +++ b/accounts/gkleen@sif/shell/quickshell/Clock.qml @@ -4,6 +4,7 @@ import Quickshell import Custom as Custom import QtQuick.Controls import QtQuick.Layouts +import Quickshell.Widgets Item { width: clock.contentWidth @@ -16,6 +17,16 @@ Item { anchors.fill: parent hoverEnabled: true enabled: true + + property real angleRem: 0 + property real sensitivity: 1 / 120 + + onWheel: event => { + angleRem += event.angleDelta.y; + const d = Math.round(angleRem * sensitivity); + yearCalendar.year += d; + angleRem -= d / sensitivity; + } } Text { @@ -43,139 +54,171 @@ Item { } visible: clockMouseArea.containsMouse - implicitWidth: yearCalendar.implicitWidth + 16 - implicitHeight: yearCalendar.implicitHeight + 16 + implicitWidth: clockTooltipContent.width + implicitHeight: clockTooltipContent.height color: "black" - GridLayout { - property int year: { const d = new Date(); return d.getFullYear(); } + onVisibleChanged: { + const d = new Date(); + yearCalendar.year = d.getFullYear(); + clockMouseArea.angleRem = 0; + } + + WrapperItem { + id: clockTooltipContent + + margin: 8 + leftMargin: 0 - id: yearCalendar + ColumnLayout { + Text { + id: yearLabel - columns: 3 - columnSpacing: 16 - rowSpacing: 16 + horizontalAlignment: Text.AlignHCenter - anchors.centerIn: parent + font.pointSize: 14 + font.family: "Fira Sans" + font.features: { "tnum": 1 } + color: "white" - Repeater { - model: 12 + text: yearCalendar.year + + Layout.fillWidth: true + Layout.bottomMargin: 8 + } GridLayout { - columns: 2 + property int year: { const d = new Date(); return d.getFullYear(); } - required property int index - property int month: index + id: yearCalendar - id: monthCalendar + columns: 3 + columnSpacing: 16 + rowSpacing: 16 - Layout.alignment: Qt.AlignTop | Qt.AlignRight + Layout.alignment: Qt.AlignHCenter Layout.fillWidth: false - Text { - Layout.column: 1 - Layout.fillWidth: true + Repeater { + model: 12 - horizontalAlignment: Text.AlignHCenter + GridLayout { + columns: 2 - font.pointSize: 10 - font.family: "Fira Sans" + required property int index + property int month: index - text: { - const date = Date.fromLocaleDateString(Qt.locale(), `${yearCalendar.year}-${monthCalendar.month + 1}-01`, "yyyy-M-dd"); - return date.toLocaleString(Qt.locale("en_DK"), "MMMM") - } + id: monthCalendar - color: "#ffead3" - } + Layout.alignment: Qt.AlignTop | Qt.AlignRight + Layout.fillWidth: false - DayOfWeekRow { - locale: grid.locale + Text { + Layout.column: 1 + Layout.fillWidth: true - Layout.row: 1 - Layout.column: 1 - Layout.fillWidth: true + horizontalAlignment: Text.AlignHCenter - delegate: Text { - required property string shortName + font.pointSize: 10 + font.family: "Fira Sans" - font.pointSize: 10 - font.family: "Fira Mono" + text: { + const date = Date.fromLocaleDateString(Qt.locale(), `${yearCalendar.year}-${monthCalendar.month + 1}-01`, "yyyy-M-dd"); + return date.toLocaleString(Qt.locale("en_DK"), "MMMM") + } - text: shortName - color: "#ffcc66" + color: "#ffead3" + } - horizontalAlignment: Text.AlignRight - verticalAlignment: Text.AlignVCenter - } - } + DayOfWeekRow { + locale: grid.locale - WeekNumberColumn { - month: grid.month - year: grid.year - locale: grid.locale + Layout.row: 1 + Layout.column: 1 + Layout.fillWidth: true - Layout.fillHeight: true + delegate: Text { + required property string shortName - delegate: Text { - required property int weekNumber + font.pointSize: 10 + font.family: "Fira Mono" - 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; + text: shortName + color: "#ffcc66" - isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1); - if (dayOfWeek > 4) { - isoWeekStart.setDate(isoWeekStart.getDate() + 7); + horizontalAlignment: Text.AlignRight + verticalAlignment: Text.AlignVCenter } + } - for (let i = 0; i < 7; i++) { - const dayInWeek = new Date(isoWeekStart); - dayInWeek.setDate(dayInWeek.getDate() + i); - if (dayInWeek.getMonth() == monthCalendar.month) - return 1; - } + WeekNumberColumn { + month: grid.month + year: grid.year + locale: grid.locale - return 0; - } + Layout.fillHeight: true - font.pointSize: 10 - font.family: "Fira Sans" - font.features: { "tnum": 1 } + delegate: Text { + required property int weekNumber - text: weekNumber - color: "#99ffdd" + 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; - horizontalAlignment: Text.AlignRight - verticalAlignment: Text.AlignVCenter - } - } + isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1); + if (dayOfWeek > 4) { + isoWeekStart.setDate(isoWeekStart.getDate() + 7); + } - MonthGrid { - id: grid + for (let i = 0; i < 7; i++) { + const dayInWeek = new Date(isoWeekStart); + dayInWeek.setDate(dayInWeek.getDate() + i); + if (dayInWeek.getMonth() == monthCalendar.month) + return 1; + } - year: yearCalendar.year - month: monthCalendar.month - locale: Qt.locale("en_DK") + return 0; + } - Layout.fillWidth: true - Layout.fillHeight: true + font.pointSize: 10 + font.family: "Fira Sans" + font.features: { "tnum": 1 } - delegate: Text { - required property var model + text: weekNumber + color: "#99ffdd" - opacity: model.month === monthCalendar.month ? 1 : 0 + horizontalAlignment: Text.AlignRight + verticalAlignment: Text.AlignVCenter + } + } - font.pointSize: 10 - font.family: "Fira Sans" - font.features: { "tnum": 1 } + 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 - text: model.day - color: model.today ? "#ff6699" : "white" + opacity: model.month === monthCalendar.month ? 1 : 0 - horizontalAlignment: Text.AlignRight - verticalAlignment: Text.AlignVCenter + font.pointSize: 10 + font.family: "Fira Sans" + font.features: { "tnum": 1 } + + text: model.day + color: model.today ? "#ff6699" : "white" + + horizontalAlignment: Text.AlignRight + verticalAlignment: Text.AlignVCenter + } + } } } } -- cgit v1.2.3