waffles: more continuous infinite scrolling calendar

2025-11-26 22:57:40 +01:00
parent a786f0353e
commit d27fbede2a
10 changed files with 354 additions and 129 deletions
@@ -0,0 +1,132 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.common.widgets
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+
+BodyRectangle {
+    id: root
+
+    // State
+    property bool collapsed
+
+    implicitHeight: collapsed ? 0 : contentColumn.implicitHeight
+    implicitWidth: contentColumn.implicitWidth
+
+    Behavior on implicitHeight {
+        animation: Looks.transition.enter.createObject(this)
+    }
+
+    clip: true
+    ColumnLayout {
+        id: contentColumn
+        spacing: 12
+        CalendarHeader {
+            Layout.topMargin: 10
+            Layout.fillWidth: true
+        }
+        ColumnLayout {
+            Layout.fillWidth: true
+            Layout.leftMargin: 5
+            Layout.rightMargin: 5
+            spacing: 1
+            DayOfWeekRow {
+                Layout.fillWidth: true
+                locale: Qt.locale("en-GB")
+                spacing: calendarView.buttonSpacing
+                implicitHeight: calendarView.buttonSize
+                delegate: Item {
+                    id: dayOfWeekItem
+                    required property var model
+                    implicitHeight: calendarView.buttonSize
+                    implicitWidth: calendarView.buttonSize
+                    WText {
+                        anchors.centerIn: parent
+                        text: dayOfWeekItem.model.shortName.substring(0,2)
+                        color: Looks.colors.fg
+                        font.pixelSize: Looks.font.pixelSize.large
+                    }
+                }
+            }
+            CalendarView {
+                id: calendarView
+                verticalPadding: 2
+                buttonSize: 41 // ???
+                buttonSpacing: 1
+                Layout.fillWidth: true
+                delegate: DayButton {}
+            }
+        }
+    }
+
+    component DayButton: WButton {
+        id: dayButton
+        required property var model
+        checked: model.today
+        enabled: hovered || calendarView.scrolling || checked || model.month === calendarView.focusedMonth
+        implicitWidth: calendarView.buttonSize
+        implicitHeight: calendarView.buttonSize
+        radius: height / 2
+
+        required property int index
+
+        contentItem: Item {
+            WText {
+                anchors.centerIn: parent
+                text: dayButton.model.day
+                color: dayButton.fgColor
+                font.pixelSize: Looks.font.pixelSize.large
+            }
+        }
+    }
+
+    component CalendarHeader: RowLayout {
+        Layout.leftMargin: 8
+        Layout.rightMargin: 8
+        spacing: 8
+
+        WBorderlessButton {
+            Layout.fillWidth: true
+            implicitHeight: 34
+            contentItem: Item {
+                WText {
+                    anchors.fill: parent
+                    horizontalAlignment: Text.AlignLeft
+                    text: Qt.locale().toString(calendarView.dateInFirstWeek, "MMMM yyyy")
+                    font.pixelSize: Looks.font.pixelSize.large
+                    font.weight: Looks.font.weight.strong
+                }
+            }
+        }
+        ScrollMonthButton {
+            scrollDown: false
+        }
+        ScrollMonthButton {
+            scrollDown: true
+        }
+    }
+
+    component ScrollMonthButton: WBorderlessButton {
+        id: scrollMonthButton
+        required property bool scrollDown
+        Layout.alignment: Qt.AlignVCenter
+
+        onClicked: {
+            calendarView.scrollMonthsAndSnap(scrollDown ? 1 : -1);
+        }
+        implicitWidth: 32
+        implicitHeight: 34
+
+        contentItem: FluentIcon {
+            filled: true
+            implicitSize: 12
+            icon: scrollMonthButton.scrollDown ? "caret-down" : "caret-up"
+        }
+    }
+}