From 466ce70f96f8bdde32260f6951c5cbb62cfc02a7 Mon Sep 17 00:00:00 2001 From: Gregor Kleen Date: Sun, 31 Aug 2025 21:57:00 +0200 Subject: ... --- accounts/gkleen@sif/shell/quickshell/Clock.qml | 241 ++++++++++++++----------- 1 file changed, 133 insertions(+), 108 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 68efb558..58600adb 100644 --- a/accounts/gkleen@sif/shell/quickshell/Clock.qml +++ b/accounts/gkleen@sif/shell/quickshell/Clock.qml @@ -21,12 +21,14 @@ Item { property real angleRem: 0 property real sensitivity: 1 / 120 - onWheel: event => { + function scrollYear(event) { angleRem += event.angleDelta.y; const d = Math.round(angleRem * sensitivity); yearCalendar.year += d; angleRem -= d / sensitivity; } + + onWheel: event => scrollYear(event) } Text { @@ -48,11 +50,23 @@ Item { } PopupWindow { + id: tooltip + + property bool nextVisible: clockMouseArea.containsMouse || tooltipMouseArea.containsMouse + anchor { item: clockMouseArea - edges: Edges.Bottom + edges: Edges.Bottom | Edges.Left + } + visible: false + + onNextVisibleChanged: hangTimer.restart() + + Timer { + id: hangTimer + interval: 100 + onTriggered: tooltip.visible = tooltip.nextVisible } - visible: clockMouseArea.containsMouse implicitWidth: clockTooltipContent.width implicitHeight: clockTooltipContent.height @@ -64,159 +78,170 @@ Item { clockMouseArea.angleRem = 0; } - WrapperItem { - id: clockTooltipContent - - margin: 8 - leftMargin: 0 + WrapperMouseArea { + id: tooltipMouseArea - ColumnLayout { - Text { - id: yearLabel + hoverEnabled: true + enabled: true - horizontalAlignment: Text.AlignHCenter + onWheel: event => clockMouseArea.scrollYear(event) - font.pointSize: 14 - font.family: "Fira Sans" - font.features: { "tnum": 1 } - color: "white" + anchors.fill: parent - text: yearCalendar.year + WrapperItem { + id: clockTooltipContent - Layout.fillWidth: true - Layout.bottomMargin: 8 - } + margin: 8 + leftMargin: 0 - GridLayout { - property int year: { const d = new Date(); return d.getFullYear(); } + ColumnLayout { + Text { + id: yearLabel - id: yearCalendar + horizontalAlignment: Text.AlignHCenter - columns: 3 - columnSpacing: 16 - rowSpacing: 16 + font.pointSize: 14 + font.family: "Fira Sans" + font.features: { "tnum": 1 } + color: "white" - Layout.alignment: Qt.AlignHCenter - Layout.fillWidth: false + text: yearCalendar.year - Repeater { - model: 12 - - GridLayout { - columns: 2 + Layout.fillWidth: true + Layout.bottomMargin: 8 + } - required property int index - property int month: index + GridLayout { + property int year: { const d = new Date(); return d.getFullYear(); } - id: monthCalendar + id: yearCalendar - Layout.alignment: Qt.AlignTop | Qt.AlignRight - Layout.fillWidth: false + columns: 3 + columnSpacing: 16 + rowSpacing: 16 - Text { - Layout.column: 1 - Layout.fillWidth: true + Layout.alignment: Qt.AlignHCenter + Layout.fillWidth: false - horizontalAlignment: Text.AlignHCenter + Repeater { + model: 12 - font.pointSize: 10 - font.family: "Fira Sans" + GridLayout { + columns: 2 - text: { - const date = Date.fromLocaleDateString(Qt.locale(), `${yearCalendar.year}-${monthCalendar.month + 1}-01`, "yyyy-M-dd"); - return date.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: Text { - required property string shortName + horizontalAlignment: Text.AlignHCenter font.pointSize: 10 - font.family: "Fira Mono" + font.family: "Fira Sans" - text: shortName - color: "#ffcc66" + text: { + const date = Date.fromLocaleDateString(Qt.locale(), `${yearCalendar.year}-${monthCalendar.month + 1}-01`, "yyyy-M-dd"); + return date.toLocaleString(Qt.locale("en_DK"), "MMMM") + } - horizontalAlignment: Text.AlignRight - verticalAlignment: Text.AlignVCenter + color: "#ffead3" } - } - WeekNumberColumn { - month: grid.month - year: grid.year - locale: grid.locale + DayOfWeekRow { + locale: grid.locale - Layout.fillHeight: true + Layout.row: 1 + Layout.column: 1 + Layout.fillWidth: true - delegate: Text { - required property int weekNumber + delegate: Text { + required property string shortName - 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 Mono" - isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1); - if (dayOfWeek > 4) { - isoWeekStart.setDate(isoWeekStart.getDate() + 7); - } + text: 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; - } - - return 0; + horizontalAlignment: Text.AlignRight + verticalAlignment: Text.AlignVCenter } + } - 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 } - text: model.day - color: model.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 } + + text: model.day + color: model.today ? "#ff6699" : "white" + + horizontalAlignment: Text.AlignRight + verticalAlignment: Text.AlignVCenter + } } } } -- cgit v1.2.3