wnotificationcenter: somewhat working calendar

2026-06-05 23:09:26 -05:00 · 2025-11-24 22:45:54 +01:00
parent 616c1dfe3a
commit 9053927480
6 changed files with 108 additions and 7 deletions
@@ -25,8 +25,10 @@ Button {
            return root.colBackground
        }
    }
+    property alias radius: background.radius

    background: Rectangle {
+        id: background
        radius: Looks.radius.medium
        color: root.color
    }
@@ -23,7 +23,7 @@ Button {
        if (root.checked) {
            if (root.down) {
                return root.colBackgroundToggledActive;
-            } else if (root.hovered && !root.down) {
+            } else if (root.hovered) {
                return root.colBackgroundToggledHover;
            } else {
                return root.colBackgroundToggled;
@@ -31,7 +31,7 @@ Button {
        }
        if (root.down) {
            return root.colBackgroundActive;
-        } else if (root.hovered && !root.down) {
+        } else if (root.hovered) {
            return root.colBackgroundHover;
        } else {
            return root.colBackground;
@@ -13,7 +13,7 @@ FooterRectangle {
    id: root

    property bool collapsed
-    implicitWidth: 334
+    implicitWidth: 0

    RowLayout {
        anchors {
@@ -12,12 +12,111 @@ import qs.modules.waffle.looks
 BodyRectangle {
    id: root

+    // State
    property bool collapsed
-    implicitHeight: collapsed ? 0 : 400 // For now
-    implicitWidth: 334
+
+    // Sizes
+    property int _rowsPerMonth: 6
+    property real viewHeight: (_rowsPerMonth * buttonSize) + ((_rowsPerMonth - 1) * buttonSpacing)
+    property real buttonSize: 40
+    property real buttonSpacing: 2
+    property real spacePerExtraRow: buttonSize + buttonSpacing
+
+    implicitWidth: currentMonthGrid.implicitWidth
+    implicitHeight: collapsed ? 0 : viewHeight
+    opacity: implicitHeight > 0 ? 1 : 0

    Behavior on implicitHeight {
        animation: Looks.transition.enter.createObject(this)
    }

+    // Month stuff
+    property real targetMonthDiff: 0
+    property real monthDiff: targetMonthDiff
+    property int focusedMonthDiff: monthDiff // whole part of monthDiff
+    property int currentMonth: DateTime.clock.date.getMonth() + 1 // 0-indexed -> 1-indexed
+    property int currentYear: DateTime.clock.date.getFullYear()
+
+    clip: true
+    property list<DiffMonthGrid> monthGrids: [previousPreviousMonthGrid, previousMonthGrid, currentMonthGrid, nextMonthGrid, nextNextMonthGrid]
+    ColumnLayout {
+        spacing: 0
+        y: {
+            const origin = - currentMonthGrid.y;
+            const diff = root.monthDiff * root.viewHeight;
+            return origin + (-diff % root.viewHeight);
+        }
+        DiffMonthGrid {
+            id: previousPreviousMonthGrid
+            monthDiff: root.focusedMonthDiff - 2
+        }
+        DiffMonthGrid {
+            id: previousMonthGrid
+            monthDiff: root.focusedMonthDiff - 1
+        }
+        DiffMonthGrid {
+            id: currentMonthGrid
+            monthDiff: root.focusedMonthDiff
+        }
+        DiffMonthGrid {
+            id: nextMonthGrid
+            monthDiff: root.focusedMonthDiff + 1
+        }
+        DiffMonthGrid {
+            id: nextNextMonthGrid
+            monthDiff: root.focusedMonthDiff + 2
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        onWheel: wheel => {
+            root.targetMonthDiff += wheel.angleDelta.y / 120 * -0.333333; // Reverse cuz scrolling down should advance
+        }
+    }
+
+    Behavior on monthDiff {
+        animation: Looks.transition.enter.createObject(this)
+    }
+
+    component DiffMonthGrid: MonthGrid {
+        id: monthGrid
+        required property int monthDiff
+        property int index: root.monthGrids.indexOf(this)
+        month: ((root.currentMonth - 1) + monthDiff) % 12 // 1-indexed -> 0-indexed
+        year: root.currentYear + Math.floor((root.currentMonth - 1 + monthDiff) / 12)
+
+        spacing: root.buttonSpacing
+        // background: Rectangle {
+        //     color: Qt.rgba(Math.abs(Math.sin(month * 12.9898)) % 1, Math.abs(Math.sin(month * 78.233)) % 1, Math.abs(Math.sin(month * 45.164)) % 1, 1)
+        // }
+        delegate: MonthDayButton {}
+    }
+
+    component MonthDayButton: WButton {
+        id: monthDayButton
+        required property var model
+        opacity: model.month == parent.parent.month || model.today ? 1 : 0
+        checked: model.today
+        implicitWidth: root.buttonSize
+        implicitHeight: root.buttonSize
+        radius: height / 2
+
+        required property int index
+
+        contentItem: Item {
+            WText {
+                anchors.centerIn: parent
+                text: monthDayButton.model.day
+                color: {
+                    if (monthDayButton.model.today)
+                        return Looks.colors.accentFg;
+                    if (monthDayButton.model.month == root.currentMonth - 1)
+                        return Looks.colors.fg;
+                    return Looks.colors.subfg;
+                }
+                font.pixelSize: Looks.font.pixelSize.large
+            }
+        }
+    }
 }
@@ -11,7 +11,7 @@ import qs.modules.waffle.looks

 FooterRectangle {
    Layout.fillWidth: true
-    implicitWidth: 334
+    implicitWidth: 0

    RowLayout {
        anchors {
@@ -40,7 +40,7 @@ WBarAttachedPanelContent {
                WPanelSeparator { visible: !root.collapsed }

                CalendarView {
-                    Layout.fillWidth: true
+                    // Layout.fillWidth: true
                    Synchronizer on collapsed {
                        property alias source: root.collapsed
                    }