1 files changed, 264 insertions, 0 deletions

diff --git a/accounts/gkleen@sif/shell/quickshell/Clock.qml b/accounts/gkleen@sif/shell/quickshell/Clock.qml
new file mode 100644
index 00000000..edce57e3
--- /dev/null
+++ b/accounts/gkleen@sif/shell/quickshell/Clock.qml
@@ -0,0 +1,264 @@
+import QtQml
+import QtQuick
+import Quickshell
+import Custom as Custom
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell.Widgets
+
+Item {
+  id: clockItem
+
+  width: clock.contentWidth
+  height: parent.height
+  anchors.verticalCenter: parent.verticalCenter
+
+  WrapperMouseArea {
+    id: clockMouseArea
+
+    anchors.fill: parent
+    hoverEnabled: true
+    enabled: true
+
+    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
+
+      Text {
+        id: clock
+        color: "white"
+
+        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 }
+      }
+    }
+  }
+
+  PopupWindow {
+    id: tooltip
+
+    property bool nextVisible: clockMouseArea.containsMouse || tooltipMouseArea.containsMouse
+
+    anchor {
+      item: clockMouseArea
+      edges: Edges.Bottom | Edges.Left
+    }
+    visible: false
+
+    onNextVisibleChanged: hangTimer.restart()
+
+    Timer {
+      id: hangTimer
+      interval: 100
+      onTriggered: tooltip.visible = tooltip.nextVisible
+    }
+
+    implicitWidth: clockTooltipContent.width
+    implicitHeight: clockTooltipContent.height
+    color: "black"
+
+    onVisibleChanged: {
+      yearCalendar.year = chrono.date.getFullYear();
+      clockMouseArea.angleRem = 0;
+    }
+
+    WrapperMouseArea {
+      id: tooltipMouseArea
+
+      hoverEnabled: true
+      enabled: true
+
+      onWheel: event => clockMouseArea.scrollYear(event)
+
+      anchors.fill: parent
+
+      WrapperItem {
+        id: clockTooltipContent
+
+        margin: 8
+        leftMargin: 0
+
+        ColumnLayout {
+          Text {
+            id: yearLabel
+
+            horizontalAlignment: Text.AlignHCenter
+
+            font.pointSize: 14
+            font.family: "Fira Sans"
+            font.features: { "tnum": 1 }
+            color: "white"
+
+            text: yearCalendar.year
+
+            Layout.fillWidth: true
+            Layout.bottomMargin: 8
+          }
+
+          GridLayout {
+            property int year: chrono.date.getFullYear()
+
+            id: yearCalendar
+
+            columns: 3
+            columnSpacing: 16
+            rowSpacing: 16
+
+            Layout.alignment: Qt.AlignHCenter
+            Layout.fillWidth: false
+
+            Repeater {
+              model: 12
+
+              GridLayout {
+                columns: 2
+
+                required property int index
+                property int month: index
+
+                id: monthCalendar
+
+                Layout.alignment: Qt.AlignTop | Qt.AlignRight
+                Layout.fillWidth: false
+
+                Text {
+                  Layout.column: 1
+                  Layout.fillWidth: true
+
+                  horizontalAlignment: Text.AlignHCenter
+
+                  font.pointSize: 10
+                  font.family: "Fira Sans"
+
+                  text: new Date(yearCalendar.year, monthCalendar.month, 1).toLocaleString(Qt.locale("en_DK"), "MMMM")
+
+                  color: "#ffead3"
+                }
+
+                DayOfWeekRow {
+                  locale: grid.locale
+
+                  Layout.row: 1
+                  Layout.column: 1
+                  Layout.fillWidth: true
+
+                  delegate: WrapperItem {
+                    required property string shortName
+
+                    width: dowLabel.contentWidth + 6
+
+                    Text {
+                      id: dowLabel
+
+                      anchors.fill: parent
+
+                      font.pointSize: 10
+                      font.family: "Fira Sans"
+
+                      text: parent.shortName
+                      color: "#ffcc66"
+
+                      horizontalAlignment: Text.AlignHCenter
+                      verticalAlignment: Text.AlignVCenter
+                    }
+                  }
+                }
+
+                WeekNumberColumn {
+                  month: grid.month
+                  year: grid.year
+                  locale: grid.locale
+
+                  Layout.fillHeight: true
+
+                  delegate: Text {
+                    required property int weekNumber
+
+                    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;
+
+                      isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);
+                      if (dayOfWeek > 4) {
+                          isoWeekStart.setDate(isoWeekStart.getDate() + 7);
+                      }
+
+                      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: 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
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}