1 files changed, 160 insertions, 124 deletions

diff --git a/accounts/gkleen@sif/shell/quickshell/Clock.qml b/accounts/gkleen@sif/shell/quickshell/Clock.qml
index 68efb558..edce57e3 100644
--- a/accounts/gkleen@sif/shell/quickshell/Clock.qml
+++ b/accounts/gkleen@sif/shell/quickshell/Clock.qml
@@ -7,11 +7,13 @@ import QtQuick.Layouts
 import Quickshell.Widgets
 
 Item {
+  id: clockItem
+
   width: clock.contentWidth
   height: parent.height
   anchors.verticalCenter: parent.verticalCenter
 
-  MouseArea {
+  WrapperMouseArea {
     id: clockMouseArea
 
     anchors.fill: parent
@@ -21,202 +23,236 @@ 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;
     }
-  }
 
-  Text {
-    id: clock
-    color: "white"
+    onWheel: event => scrollYear(event)
 
-    anchors.verticalCenter: parent.verticalCenter
+    Item {
+      anchors.fill: parent
 
-    Custom.Chrono {
-      id: chrono
-      format: "W{0:%V-%u} {0:%F} {0:%H:%M:%S%Ez}"
-    }
+      Text {
+        id: clock
+        color: "white"
 
-    text: chrono.date
+        anchors.verticalCenter: parent.verticalCenter
+
+        Custom.Chrono {
+          id: chrono
+
+          onDateChanged: clock.text = format("W{0:%V-%u} {0:%F} {0:%H:%M:%S%Ez}")
+        }
 
-    font.pointSize: 10
-    font.family: "Fira Sans"
-    font.features: { "tnum": 1 }
+        font.pointSize: 10
+        font.family: "Fira Sans"
+        font.features: { "tnum": 1 }
+      }
+    }
   }
 
   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
     color: "black"
 
     onVisibleChanged: {
-      const d = new Date();
-      yearCalendar.year = d.getFullYear();
+      yearCalendar.year = chrono.date.getFullYear();
       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
+            Layout.fillWidth: true
+            Layout.bottomMargin: 8
+          }
 
-            GridLayout {
-              columns: 2
+          GridLayout {
+            property int year: chrono.date.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.fillWidth: false
+            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
-
-                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: new Date(yearCalendar.year, monthCalendar.month, 1).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: WrapperItem {
+                    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;
+                    width: dowLabel.contentWidth + 6
 
-                    isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);
-                    if (dayOfWeek > 4) {
-                        isoWeekStart.setDate(isoWeekStart.getDate() + 7);
-                    }
+                    Text {
+                      id: dowLabel
 
-                    for (let i = 0; i < 7; i++) {
-                      const dayInWeek = new Date(isoWeekStart);
-                      dayInWeek.setDate(dayInWeek.getDate() + i);
-                      if (dayInWeek.getMonth() == monthCalendar.month)
-                        return 1;
-                    }
+                      anchors.fill: parent
 
-                    return 0;
-                  }
-
-                  font.pointSize: 10
-                  font.family: "Fira Sans"
-                  font.features: { "tnum": 1 }
+                      font.pointSize: 10
+                      font.family: "Fira Sans"
 
-                  text: weekNumber
-                  color: "#99ffdd"
+                      text: parent.shortName
+                      color: "#ffcc66"
 
-                  horizontalAlignment: Text.AlignRight
-                  verticalAlignment: Text.AlignVCenter
+                      horizontalAlignment: Text.AlignHCenter
+                      verticalAlignment: Text.AlignVCenter
+                    }
+                  }
                 }
-              }
 
-              MonthGrid {
-                id: grid
+                WeekNumberColumn {
+                  month: grid.month
+                  year: grid.year
+                  locale: grid.locale
+
+                  Layout.fillHeight: true
 
-                year: yearCalendar.year
-                month: monthCalendar.month
-                locale: Qt.locale("en_DK")
+                  delegate: Text {
+                    required property int weekNumber
 
-                Layout.fillWidth: true
-                Layout.fillHeight: true
+                    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;
 
-                delegate: Text {
-                    required property var model
+                      isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);
+                      if (dayOfWeek > 4) {
+                          isoWeekStart.setDate(isoWeekStart.getDate() + 7);
+                      }
 
-                    opacity: model.month === monthCalendar.month ? 1 : 0
+                      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;
+                    }
 
                     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 }
+
+                      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
+                  }
                 }
               }
             }
@@ -225,4 +261,4 @@ Item {
       }
     }
   }
-}
\ No newline at end of file
+}