1 files changed, 168 insertions, 146 deletions

diff --git a/accounts/gkleen@sif/shell/quickshell/Clock.qml b/accounts/gkleen@sif/shell/quickshell/Clock.qml
index d0c9178b..bb618f6a 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,238 @@ 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;
+          if (!tooltip.visible)
+            tooltipLoader.active = false;
+        }
+      }
 
-      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
 
-            text: yearCalendar.year
+          ColumnLayout {
+            anchors.centerIn: parent
 
-            Layout.fillWidth: true
-            Layout.bottomMargin: 8
-          }
+            Text {
+              id: yearLabel
 
-          GridLayout {
-            property int year: chrono.date.getFullYear()
+              horizontalAlignment: Text.AlignHCenter
 
-            id: yearCalendar
+              font.pointSize: 14
+              font.family: "Fira Sans"
+              font.features: { "tnum": 1 }
+              color: "white"
 
-            columns: 3
-            columnSpacing: 16
-            rowSpacing: 16
+              text: yearCalendar.year
 
-            Layout.alignment: Qt.AlignHCenter
-            Layout.fillWidth: false
+              Layout.fillWidth: true
+              Layout.bottomMargin: 8
+            }
 
-            Repeater {
-              model: 12
+            GridLayout {
+              property int year: chrono.date.getFullYear()
 
-              GridLayout {
-                columns: 2
+              id: yearCalendar
 
-                required property int index
-                property int month: index
+              columns: 3
+              columnSpacing: 16
+              rowSpacing: 16
 
-                id: monthCalendar
+              Layout.alignment: Qt.AlignHCenter
+              Layout.fillWidth: false
 
-                Layout.alignment: Qt.AlignTop | Qt.AlignRight
-                Layout.fillWidth: false
+              property real angleRem: 0
+              property real sensitivity: 1 / 120
 
-                Text {
-                  Layout.column: 1
-                  Layout.fillWidth: true
+              function scrollYear(event) {
+                angleRem += event.angleDelta.y;
+                const d = Math.round(angleRem * sensitivity);
+                yearCalendar.year += d;
+                angleRem -= d / sensitivity;
+              }
 
-                  horizontalAlignment: Text.AlignHCenter
+              Connections {
+                target: clockMouseArea
+                function onWheel(event) { yearCalendar.scrollYear(event); }
+              }
 
-                  font.pointSize: 10
-                  font.family: "Fira Sans"
+              Repeater {
+                model: 12
 
-                  text: new Date(yearCalendar.year, monthCalendar.month, 1).toLocaleString(Qt.locale("en_DK"), "MMMM")
+                GridLayout {
+                  columns: 2
 
-                  color: "#ffead3"
-                }
+                  required property int index
+                  property int month: index
 
-                DayOfWeekRow {
-                  locale: grid.locale
+                  id: monthCalendar
 
-                  Layout.row: 1
-                  Layout.column: 1
-                  Layout.fillWidth: true
+                  Layout.alignment: Qt.AlignTop | Qt.AlignRight
+                  Layout.fillWidth: false
 
-                  delegate: WrapperItem {
-                    required property string shortName
+                  Text {
+                    Layout.column: 1
+                    Layout.fillWidth: true
 
-                    width: dowLabel.contentWidth + 6
+                    horizontalAlignment: Text.AlignHCenter
 
-                    Text {
-                      id: dowLabel
+                    font.pointSize: 10
+                    font.family: "Fira Sans"
 
-                      anchors.fill: parent
+                    text: new Date(yearCalendar.year, monthCalendar.month, 1).toLocaleString(Qt.locale("en_DK"), "MMMM")
 
-                      font.pointSize: 10
-                      font.family: "Fira Sans"
+                    color: "#ffead3"
+                  }
 
-                      text: parent.shortName
-                      color: "#ffcc66"
+                  DayOfWeekRow {
+                    locale: grid.locale
 
-                      horizontalAlignment: Text.AlignHCenter
-                      verticalAlignment: Text.AlignVCenter
-                    }
-                  }
-                }
+                    Layout.row: 1
+                    Layout.column: 1
+                    Layout.fillWidth: true
 
-                WeekNumberColumn {
-                  month: grid.month
-                  year: grid.year
-                  locale: grid.locale
+                    delegate: WrapperItem {
+                      required property string shortName
 
-                  Layout.fillHeight: true
+                      width: dowLabel.contentWidth + 6
 
-                  delegate: Text {
-                    required property int weekNumber
+                      Text {
+                        id: dowLabel
 
-                    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;
+                        anchors.fill: parent
 
-                      isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);
-                      if (dayOfWeek > 4) {
-                          isoWeekStart.setDate(isoWeekStart.getDate() + 7);
-                      }
+                        font.pointSize: 10
+                        font.family: "Fira Sans"
 
-                      for (let i = 0; i < 7; i++) {
-                        const dayInWeek = new Date(isoWeekStart);
-                        dayInWeek.setDate(dayInWeek.getDate() + i);
-                        if (dayInWeek.getMonth() == monthCalendar.month)
-                          return 1;
-                      }
+                        text: parent.shortName
+                        color: "#ffcc66"
 
-                      return 0;
+                        horizontalAlignment: Text.AlignHCenter
+                        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 }
 
-                      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
+                    }
                   }
                 }
               }