...

1 files changed, 134 insertions, 91 deletions

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
+                }
+              }
             }
           }
         }