dashboard: add month/year and paging to calendar (#499)

* add month/year and paging to calendar

also, removed day/month from time panel, and  highlighting weekends
(need to figure out why the weekday enum is incorrect. locale issue?)

* removing dayOfWeek offset hack

this is clearly a me problem. my locale appears to be set to dz, but
only for caelestia shell. not sure why.

* aesthetic and localization improvements

* ensure all localized dates use UTC

issues i was having wrt localized date and day-of-week being off by one
appear to have been due to my timezone. forcing UTC seems to fix this.

* fixes

* anim today indicator

* keep state across open/close

* fix

---------

Co-authored-by: 2 * r + 2 * t <61896496+soramanew@users.noreply.github.com>

modules/dashboard/Dash.qml

@@ -56,6 +56,8 @@ GridLayout {
 
         Calendar {
             id: calendar
+
+            state: root.state
         }
     }
 

modules/dashboard/Wrapper.qml

@@ -15,6 +15,7 @@ Item {
     required property PersistentProperties visibilities
     readonly property PersistentProperties state: PersistentProperties {
         property int currentTab
+        property date currentDate: new Date()
 
         readonly property FileDialog facePicker: FileDialog {
             title: qsTr("Select a profile picture")

modules/dashboard/dash/Calendar.qml

@@ -1,21 +1,121 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
+import qs.components.effects
 import qs.services
 import qs.config
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 
 Column {
     id: root
 
+    required property var state
+
+    readonly property int currMonth: state.currentDate.getMonth()
+    readonly property int currYear: state.currentDate.getFullYear()
+
     anchors.left: parent.left
     anchors.right: parent.right
     padding: Appearance.padding.large
     spacing: Appearance.spacing.small
 
+    RowLayout {
+        id: monthNavigationRow
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: parent.padding
+        spacing: Appearance.spacing.small
+
+        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);
+                }
+            }
+
+            MaterialIcon {
+                id: prevMonthText
+
+                anchors.centerIn: parent
+                text: "chevron_left"
+                color: Colours.palette.m3tertiary
+                font.pointSize: Appearance.font.size.normal
+                font.weight: 700
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
+
+            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
+
+                radius: Appearance.rounding.full
+                disabled: root.state.currentDate.toDateString() == new Date().toDateString()
+
+                function onClicked(): void {
+                    root.state.currentDate = new Date();
+                }
+            }
+
+            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
+            }
+        }
+
+        Item {
+            implicitWidth: implicitHeight
+            implicitHeight: nextMonthText.implicitHeight + Appearance.padding.small * 2
+
+            StateLayer {
+                id: nextMonthStateLayer
+
+                radius: Appearance.rounding.full
+
+                function onClicked(): void {
+                    root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
+                }
+            }
+
+            MaterialIcon {
+                id: nextMonthText
+
+                anchors.centerIn: parent
+                text: "chevron_right"
+                color: Colours.palette.m3tertiary
+                font.pointSize: Appearance.font.size.normal
+                font.weight: 700
+            }
+        }
+    }
+
     DayOfWeekRow {
-        id: days
+        id: daysRow
+
+        locale: grid.locale
 
         anchors.left: parent.left
         anchors.right: parent.right
@@ -26,36 +126,37 @@ Column {
 
             horizontalAlignment: Text.AlignHCenter
             text: model.shortName
-            font.family: Appearance.font.family.sans
             font.weight: 500
+            color: (model.day === 0 || model.day === 6) ? Colours.palette.m3secondary : Colours.palette.m3onSurfaceVariant
         }
     }
 
-    MonthGrid {
+    Item {
-        id: grid
-
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.margins: parent.padding
 
-        spacing: 3
+        implicitHeight: grid.implicitHeight
 
-        delegate: Item {
+        MonthGrid {
-            id: day
+            id: grid
 
-            required property var model
+            month: root.currMonth
+            year: root.currYear
 
-            implicitWidth: implicitHeight
+            anchors.left: parent.left
-            implicitHeight: text.implicitHeight + Appearance.padding.small * 2
+            anchors.right: parent.right
 
-            StyledRect {
+            spacing: 3
-                anchors.centerIn: parent
+            locale: Qt.locale()
 
-                implicitWidth: parent.implicitHeight
+            delegate: Item {
-                implicitHeight: parent.implicitHeight
+                id: dayItem
 
-                radius: Appearance.rounding.full
+                required property var model
-                color: Qt.alpha(Colours.palette.m3primary, day.model.today ? 1 : 0)
+
+                implicitWidth: implicitHeight
+                implicitHeight: text.implicitHeight + Appearance.padding.small * 2
 
                 StyledText {
                     id: text
@@ -63,8 +164,73 @@ Column {
                     anchors.centerIn: parent
 
                     horizontalAlignment: Text.AlignHCenter
-                    text: Qt.formatDate(day.model.date, "d")
+                    text: grid.locale.toString(dayItem.model.day)
-                    color: day.model.today ? Colours.palette.m3onPrimary : day.model.month === grid.month ? Colours.palette.m3onSurfaceVariant : Colours.palette.m3outline
+                    color: {
+                        const dayOfWeek = dayItem.model.date.getUTCDay();
+                        if (dayOfWeek === 0 || dayOfWeek === 6)
+                            return Colours.palette.m3secondary;
+
+                        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
+                }
+            }
+        }
+
+        StyledClippingRect {
+            id: todayIndicator
+
+            readonly property Item todayItem: grid.contentItem.children.find(c => c.model.today) ?? null
+            property Item today
+
+            onTodayItemChanged: {
+                if (todayItem)
+                    today = todayItem;
+            }
+
+            x: today ? today.x + (today.width - implicitWidth) / 2 : 0
+            y: today?.y ?? 0
+
+            implicitWidth: today?.implicitWidth ?? 0
+            implicitHeight: today?.implicitHeight ?? 0
+
+            radius: Appearance.rounding.full
+            color: Colours.palette.m3primary
+
+            opacity: todayItem ? 1 : 0
+            scale: todayItem ? 1 : 0.7
+
+            Colouriser {
+                x: -todayIndicator.x
+                y: -todayIndicator.y
+
+                implicitWidth: grid.width
+                implicitHeight: grid.height
+
+                source: grid
+                sourceColor: Colours.palette.m3onSurface
+                colorizationColor: Colours.palette.m3onPrimary
+            }
+
+            Behavior on opacity {
+                Anim {}
+            }
+
+            Behavior on scale {
+                Anim {}
+            }
+
+            Behavior on x {
+                Anim {
+                    easing.bezierCurve: Appearance.anim.curves.emphasized
+                }
+            }
+
+            Behavior on y {
+                Anim {
+                    easing.bezierCurve: Appearance.anim.curves.emphasized
                 }
             }
         }

modules/dashboard/dash/DateTime.qml

@@ -32,7 +32,6 @@ Item {
         }
 
         StyledText {
-            Layout.topMargin: -(font.pointSize * 0.1)
             Layout.alignment: Qt.AlignHCenter
             text: "•••"
             color: Colours.palette.m3primary
@@ -59,23 +58,11 @@ Item {
 
             sourceComponent: StyledText {
                 text: root.timeComponents[2] ?? ""
-                color: Colours.palette.m3secondary
+                color: Colours.palette.m3primary
                 font.pointSize: Appearance.font.size.large
                 font.family: Appearance.font.family.clock
                 font.weight: 600
             }
         }
-
-        StyledText {
-            Layout.topMargin: Appearance.spacing.normal
-            Layout.fillWidth: true
-            horizontalAlignment: Text.AlignHCenter
-            text: Time.format("ddd, d")
-            color: Colours.palette.m3tertiary
-            font.pointSize: Appearance.font.size.normal
-            font.family: Appearance.font.family.clock
-            font.weight: 500
-            elide: Text.ElideRight
-        }
     }
 }