dashboard/calendar: add scroll

1 files changed, 165 insertions, 152 deletions

diff --git a/modules/dashboard/dash/Calendar.qml b/modules/dashboard/dash/Calendar.qml
index f8cf04a..56c0493 100644
--- a/modules/dashboard/dash/Calendar.qml
+++ b/modules/dashboard/dash/Calendar.qml
@@ -2,13 +2,14 @@ pragma ComponentBehavior: Bound
 
 import qs.components
 import qs.components.effects
+import qs.components.controls
 import qs.services
 import qs.config
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
-Column {
+CustomMouseArea {
     id: root
 
     required property var state
@@ -18,221 +19,233 @@ Column {
 
     anchors.left: parent.left
     anchors.right: parent.right
-    padding: Appearance.padding.large
-    spacing: Appearance.spacing.small
+    implicitHeight: inner.implicitHeight + inner.anchors.margins * 2
 
-    RowLayout {
-        id: monthNavigationRow
+    acceptedButtons: Qt.MiddleButton
+    onClicked: root.state.currentDate = new Date()
 
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.margins: parent.padding
+    function onWheel(event: WheelEvent): void {
+        if (event.angleDelta.y > 0)
+            root.state.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
+        else if (event.angleDelta.y < 0)
+            root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
+    }
+
+    ColumnLayout {
+        id: inner
+
+        anchors.fill: parent
+        anchors.margins: Appearance.padding.large
         spacing: Appearance.spacing.small
 
-        Item {
-            implicitWidth: implicitHeight
-            implicitHeight: prevMonthText.implicitHeight + Appearance.padding.small * 2
+        RowLayout {
+            id: monthNavigationRow
 
-            StateLayer {
-                id: prevMonthStateLayer
+            Layout.fillWidth: true
+            spacing: Appearance.spacing.small
 
-                radius: Appearance.rounding.full
+            Item {
+                implicitWidth: implicitHeight
+                implicitHeight: prevMonthText.implicitHeight + Appearance.padding.small * 2
+
+                StateLayer {
+                    id: prevMonthStateLayer
+
+                    radius: Appearance.rounding.full
 
-                function onClicked(): void {
-                    root.state.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
+                    function onClicked(): void {
+                        root.state.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
+                    }
                 }
-            }
 
-            MaterialIcon {
-                id: prevMonthText
+                MaterialIcon {
+                    id: prevMonthText
 
-                anchors.centerIn: parent
-                text: "chevron_left"
-                color: Colours.palette.m3tertiary
-                font.pointSize: Appearance.font.size.normal
-                font.weight: 700
+                    anchors.centerIn: parent
+                    text: "chevron_left"
+                    color: Colours.palette.m3tertiary
+                    font.pointSize: Appearance.font.size.normal
+                    font.weight: 700
+                }
             }
-        }
 
-        Item {
-            Layout.fillWidth: true
+            Item {
+                Layout.fillWidth: true
 
-            implicitWidth: monthYearDisplay.implicitWidth + Appearance.padding.small * 2
-            implicitHeight: monthYearDisplay.implicitHeight + Appearance.padding.small * 2
+                implicitWidth: monthYearDisplay.implicitWidth + Appearance.padding.small * 2
+                implicitHeight: monthYearDisplay.implicitHeight + Appearance.padding.small * 2
 
-            StateLayer {
-                anchors.fill: monthYearDisplay
-                anchors.margins: -Appearance.padding.small
-                anchors.leftMargin: -Appearance.padding.normal
-                anchors.rightMargin: -Appearance.padding.normal
+                StateLayer {
+                    anchors.fill: monthYearDisplay
+                    anchors.margins: -Appearance.padding.small
+                    anchors.leftMargin: -Appearance.padding.normal
+                    anchors.rightMargin: -Appearance.padding.normal
 
-                radius: Appearance.rounding.full
-                disabled: root.state.currentDate.toDateString() == new Date().toDateString()
+                    radius: Appearance.rounding.full
+                    disabled: {
+                        const now = new Date();
+                        return root.currMonth === now.getMonth() && root.currYear === now.getFullYear();
+                    }
 
-                function onClicked(): void {
-                    root.state.currentDate = new Date();
+                    function onClicked(): void {
+                        root.state.currentDate = new Date();
+                    }
                 }
-            }
 
-            StyledText {
-                id: monthYearDisplay
+                StyledText {
+                    id: monthYearDisplay
 
-                anchors.centerIn: parent
-                text: grid.title
-                color: Colours.palette.m3primary
-                font.pointSize: Appearance.font.size.normal
-                font.weight: 500
-                font.capitalization: Font.Capitalize
+                    anchors.centerIn: parent
+                    text: grid.title
+                    color: Colours.palette.m3primary
+                    font.pointSize: Appearance.font.size.normal
+                    font.weight: 500
+                    font.capitalization: Font.Capitalize
+                }
             }
-        }
 
-        Item {
-            implicitWidth: implicitHeight
-            implicitHeight: nextMonthText.implicitHeight + Appearance.padding.small * 2
+            Item {
+                implicitWidth: implicitHeight
+                implicitHeight: nextMonthText.implicitHeight + Appearance.padding.small * 2
 
-            StateLayer {
-                id: nextMonthStateLayer
+                StateLayer {
+                    id: nextMonthStateLayer
 
-                radius: Appearance.rounding.full
+                    radius: Appearance.rounding.full
 
-                function onClicked(): void {
-                    root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
+                    function onClicked(): void {
+                        root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
+                    }
                 }
-            }
 
-            MaterialIcon {
-                id: nextMonthText
+                MaterialIcon {
+                    id: nextMonthText
 
-                anchors.centerIn: parent
-                text: "chevron_right"
-                color: Colours.palette.m3tertiary
-                font.pointSize: Appearance.font.size.normal
-                font.weight: 700
+                    anchors.centerIn: parent
+                    text: "chevron_right"
+                    color: Colours.palette.m3tertiary
+                    font.pointSize: Appearance.font.size.normal
+                    font.weight: 700
+                }
             }
         }
-    }
-
-    DayOfWeekRow {
-        id: daysRow
 
-        locale: grid.locale
+        DayOfWeekRow {
+            id: daysRow
 
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.margins: parent.padding
+            Layout.fillWidth: true
+            locale: grid.locale
 
-        delegate: StyledText {
-            required property var model
+            delegate: StyledText {
+                required property var model
 
-            horizontalAlignment: Text.AlignHCenter
-            text: model.shortName
-            font.weight: 500
-            color: (model.day === 0 || model.day === 6) ? Colours.palette.m3secondary : Colours.palette.m3onSurfaceVariant
+                horizontalAlignment: Text.AlignHCenter
+                text: model.shortName
+                font.weight: 500
+                color: (model.day === 0 || model.day === 6) ? Colours.palette.m3secondary : Colours.palette.m3onSurfaceVariant
+            }
         }
-    }
-
-    Item {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.margins: parent.padding
 
-        implicitHeight: grid.implicitHeight
+        Item {
+            Layout.fillWidth: true
+            implicitHeight: grid.implicitHeight
 
-        MonthGrid {
-            id: grid
+            MonthGrid {
+                id: grid
 
-            month: root.currMonth
-            year: root.currYear
+                month: root.currMonth
+                year: root.currYear
 
-            anchors.fill: parent
+                anchors.fill: parent
 
-            spacing: 3
-            locale: Qt.locale()
+                spacing: 3
+                locale: Qt.locale()
 
-            delegate: Item {
-                id: dayItem
+                delegate: Item {
+                    id: dayItem
 
-                required property var model
+                    required property var model
 
-                implicitWidth: implicitHeight
-                implicitHeight: text.implicitHeight + Appearance.padding.small * 2
+                    implicitWidth: implicitHeight
+                    implicitHeight: text.implicitHeight + Appearance.padding.small * 2
 
-                StyledText {
-                    id: text
+                    StyledText {
+                        id: text
 
-                    anchors.centerIn: parent
+                        anchors.centerIn: parent
 
-                    horizontalAlignment: Text.AlignHCenter
-                    text: grid.locale.toString(dayItem.model.day)
-                    color: {
-                        const dayOfWeek = dayItem.model.date.getUTCDay();
-                        if (dayOfWeek === 0 || dayOfWeek === 6)
-                            return Colours.palette.m3secondary;
+                        horizontalAlignment: Text.AlignHCenter
+                        text: grid.locale.toString(dayItem.model.day)
+                        color: {
+                            const dayOfWeek = dayItem.model.date.getUTCDay();
+                            if (dayOfWeek === 0 || dayOfWeek === 6)
+                                return Colours.palette.m3secondary;
 
-                        return Colours.palette.m3onSurfaceVariant;
+                            return Colours.palette.m3onSurfaceVariant;
+                        }
+                        opacity: dayItem.model.today || dayItem.model.month === grid.month ? 1 : 0.4
+                        font.pointSize: Appearance.font.size.normal
+                        font.weight: 500
                     }
-                    opacity: dayItem.model.today || dayItem.model.month === grid.month ? 1 : 0.4
-                    font.pointSize: Appearance.font.size.normal
-                    font.weight: 500
                 }
             }
-        }
 
-        StyledRect {
-            id: todayIndicator
+            StyledRect {
+                id: todayIndicator
 
-            readonly property Item todayItem: grid.contentItem.children.find(c => c.model.today) ?? null
-            property Item today
+                readonly property Item todayItem: grid.contentItem.children.find(c => c.model.today) ?? null
+                property Item today
 
-            onTodayItemChanged: {
-                if (todayItem)
-                    today = todayItem;
-            }
+                onTodayItemChanged: {
+                    if (todayItem)
+                        today = todayItem;
+                }
 
-            x: today ? today.x + (today.width - implicitWidth) / 2 : 0
-            y: today?.y ?? 0
+                x: today ? today.x + (today.width - implicitWidth) / 2 : 0
+                y: today?.y ?? 0
 
-            implicitWidth: today?.implicitWidth ?? 0
-            implicitHeight: today?.implicitHeight ?? 0
+                implicitWidth: today?.implicitWidth ?? 0
+                implicitHeight: today?.implicitHeight ?? 0
 
-            clip: true
-            radius: Appearance.rounding.full
-            color: Colours.palette.m3primary
+                clip: true
+                radius: Appearance.rounding.full
+                color: Colours.palette.m3primary
 
-            opacity: todayItem ? 1 : 0
-            scale: todayItem ? 1 : 0.7
+                opacity: todayItem ? 1 : 0
+                scale: todayItem ? 1 : 0.7
 
-            Colouriser {
-                x: -todayIndicator.x
-                y: -todayIndicator.y
+                Colouriser {
+                    x: -todayIndicator.x
+                    y: -todayIndicator.y
 
-                implicitWidth: grid.width
-                implicitHeight: grid.height
+                    implicitWidth: grid.width
+                    implicitHeight: grid.height
 
-                source: grid
-                sourceColor: Colours.palette.m3onSurface
-                colorizationColor: Colours.palette.m3onPrimary
-            }
+                    source: grid
+                    sourceColor: Colours.palette.m3onSurface
+                    colorizationColor: Colours.palette.m3onPrimary
+                }
 
-            Behavior on opacity {
-                Anim {}
-            }
+                Behavior on opacity {
+                    Anim {}
+                }
 
-            Behavior on scale {
-                Anim {}
-            }
+                Behavior on scale {
+                    Anim {}
+                }
 
-            Behavior on x {
-                Anim {
-                    duration: Appearance.anim.durations.expressiveDefaultSpatial
-                    easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+                Behavior on x {
+                    Anim {
+                        duration: Appearance.anim.durations.expressiveDefaultSpatial
+                        easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+                    }
                 }
-            }
 
-            Behavior on y {
-                Anim {
-                    duration: Appearance.anim.durations.expressiveDefaultSpatial
-                    easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+                Behavior on y {
+                    Anim {
+                        duration: Appearance.anim.durations.expressiveDefaultSpatial
+                        easing.bezierCurve: Appearance.anim.curves.expressiveDefaultSpatial
+                    }
                 }
             }
         }