calendar month change animation

Modules/Dashboard/Content.qml

@@ -10,9 +10,9 @@ import qs.Components
 Item {
 	id: root
 
+	required property PersistentProperties dashState
 	readonly property real nonAnimHeight: view.implicitHeight + viewWrapper.anchors.margins * 2
 	readonly property real nonAnimWidth: view.implicitWidth + viewWrapper.anchors.margins * 2
-	required property PersistentProperties state
 	required property PersistentProperties visibilities
 
 	implicitHeight: nonAnimHeight
@@ -59,7 +59,7 @@ Item {
 					index: 0
 
 					sourceComponent: Dash {
-						state: root.state
+						dashState: root.dashState
 						visibilities: root.visibilities
 					}
 				}

Modules/Dashboard/Dash.qml

@@ -10,9 +10,9 @@ import qs.Modules.Dashboard.Dash
 GridLayout {
 	id: root
 
+	required property PersistentProperties dashState
 	readonly property bool dashboardVisible: visibilities.dashboard
 	property int radius: Appearance.rounding.smallest
-	required property PersistentProperties state
 	required property PersistentProperties visibilities
 
 	columnSpacing: Appearance.spacing.smaller
@@ -60,7 +60,7 @@ GridLayout {
 		User {
 			id: user
 
-			state: root.state
+			dashState: root.dashState
 		}
 	}
 
@@ -86,7 +86,7 @@ GridLayout {
 		Calendar {
 			id: calendar
 
-			state: root.state
+			dashState: root.dashState
 		}
 	}
 

Modules/Dashboard/Dash/Calendar.qml

@@ -1,25 +1,50 @@
 pragma ComponentBehavior: Bound
 
+import Quickshell
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 import qs.Components
-import qs.Helpers
 import qs.Config
-import qs.Modules
 
 CustomMouseArea {
 	id: root
 
-	readonly property int currMonth: state.currentDate.getMonth()
+	property int activeGrid: 1
-	readonly property int currYear: state.currentDate.getFullYear()
+	required property PersistentProperties dashState
-	required property var state
+	property bool initialized: false
+	property int month1
+	property int month2
+	readonly property int realCurrMonth: dashState.currentDate.getMonth()
+	readonly property int realCurrYear: dashState.currentDate.getFullYear()
+	property int year1
+	property int year2
+
+	function handleDateChange() {
+		const currM = activeGrid === 1 ? month1 : month2;
+		const currY = activeGrid === 1 ? year1 : year2;
+		if (realCurrMonth !== currM || realCurrYear !== currY) {
+			monthChangeAnim.direction = (realCurrYear > currY || (realCurrYear === currY && realCurrMonth > currM)) ? -1 : 1;
+
+			if (activeGrid === 1) {
+				month2 = realCurrMonth;
+				year2 = realCurrYear;
+				activeGrid = 2;
+			} else {
+				month1 = realCurrMonth;
+				year1 = realCurrYear;
+				activeGrid = 1;
+			}
+			if (initialized)
+				monthChangeAnim.restart();
+		}
+	}
 
 	function onWheel(event: WheelEvent): void {
 		if (event.angleDelta.y > 0)
-			root.state.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
+			root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth - 1, 1);
 		else if (event.angleDelta.y < 0)
-			root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
+			root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth + 1, 1);
 	}
 
 	acceptedButtons: Qt.MiddleButton
@@ -27,102 +52,160 @@ CustomMouseArea {
 	anchors.right: parent.right
 	implicitHeight: inner.implicitHeight + inner.anchors.margins * 2
 
-	onClicked: root.state.currentDate = new Date()
+	Component.onCompleted: {
+		month1 = realCurrMonth;
+		year1 = realCurrYear;
+		month2 = realCurrMonth;
+		year2 = realCurrYear;
+
+		initialized = true;
+	}
+	onClicked: root.dashState.currentDate = new Date()
+	onRealCurrMonthChanged: handleDateChange()
+	onRealCurrYearChanged: handleDateChange()
+
+	SequentialAnimation {
+		id: monthChangeAnim
+
+		property int direction: 0
+
+		ScriptAction {
+			script: {
+				if (activeGrid === 1) {
+					titleTranslate1.x = -monthChangeAnim.direction * titleClip.width;
+					grid1Translate.x = -monthChangeAnim.direction * gridClip.width;
+					titleTranslate2.x = 0;
+					grid2Translate.x = 0;
+				} else {
+					titleTranslate2.x = -monthChangeAnim.direction * titleClip.width;
+					grid2Translate.x = -monthChangeAnim.direction * gridClip.width;
+					titleTranslate1.x = 0;
+					grid1Translate.x = 0;
+				}
+			}
+		}
+
+		ParallelAnimation {
+			Anim {
+				property: "x"
+				target: titleTranslate1
+				to: root.activeGrid === 1 ? 0 : monthChangeAnim.direction * titleClip.width
+				type: Anim.DefaultSpatial
+			}
+
+			Anim {
+				property: "x"
+				target: grid1Translate
+				to: root.activeGrid === 1 ? 0 : monthChangeAnim.direction * gridClip.width
+				type: Anim.DefaultSpatial
+			}
+
+			Anim {
+				property: "x"
+				target: titleTranslate2
+				to: root.activeGrid === 2 ? 0 : monthChangeAnim.direction * titleClip.width
+				type: Anim.DefaultSpatial
+			}
+
+			Anim {
+				property: "x"
+				target: grid2Translate
+				to: root.activeGrid === 2 ? 0 : monthChangeAnim.direction * gridClip.width
+				type: Anim.DefaultSpatial
+			}
+		}
+	}
 
 	ColumnLayout {
 		id: inner
 
 		anchors.fill: parent
 		anchors.margins: Appearance.padding.large
-		spacing: Appearance.spacing.small
+		spacing: Appearance.spacing.extraSmall
 
 		RowLayout {
 			id: monthNavigationRow
 
 			Layout.fillWidth: true
-			spacing: Appearance.spacing.small
+			spacing: Appearance.spacing.extraSmall
 
-			Item {
+			IconButton {
-				implicitHeight: prevMonthText.implicitHeight + Appearance.padding.small * 2
+				icon: "chevron_left"
-				implicitWidth: implicitHeight
+				padding: Appearance.padding.small
+				type: IconButton.Text
 
-				StateLayer {
+				onClicked: root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth - 1, 1)
-					id: prevMonthStateLayer
-
-					radius: Appearance.rounding.full
-
-					onClicked: {
-						root.state.currentDate = new Date(root.currYear, root.currMonth - 1, 1);
-					}
-				}
-
-				MaterialIcon {
-					id: prevMonthText
-
-					anchors.centerIn: parent
-					color: DynamicColors.palette.m3tertiary
-					font.pointSize: Appearance.font.size.normal
-					font.weight: 700
-					text: "chevron_left"
-				}
 			}
 
 			Item {
+				Layout.fillHeight: true
 				Layout.fillWidth: true
-				implicitHeight: monthYearDisplay.implicitHeight + Appearance.padding.small * 2
+				implicitHeight: monthYearDisplay1.implicitHeight + Appearance.padding.extraSmall * 2
-				implicitWidth: monthYearDisplay.implicitWidth + Appearance.padding.small * 2
+				implicitWidth: monthYearDisplay1.implicitWidth + Appearance.padding.large * 2
 
 				StateLayer {
-					anchors.fill: monthYearDisplay
+					color: DynamicColors.palette.m3primary
-					anchors.leftMargin: -Appearance.padding.normal
-					anchors.margins: -Appearance.padding.small
-					anchors.rightMargin: -Appearance.padding.normal
 					enabled: {
 						const now = new Date();
-						return root.currMonth !== now.getMonth() || root.currYear !== now.getFullYear();
+						return root.realCurrMonth !== now.getMonth() || root.realCurrYear !== now.getFullYear();
 					}
-					radius: Appearance.rounding.full
+					radius: pressed ? Appearance.rounding.small : Appearance.rounding.large
 
-					onClicked: {
+					Behavior on radius {
-						root.state.currentDate = new Date();
+						Anim {
+							type: Anim.DefaultEffects
+						}
 					}
+
+					onClicked: root.dashState.currentDate = new Date()
 				}
 
-				CustomText {
+				Item {
-					id: monthYearDisplay
+					id: titleClip
 
-					anchors.centerIn: parent
+					anchors.fill: parent
-					color: DynamicColors.palette.m3primary
+					clip: true
-					font.capitalization: Font.Capitalize
+
-					font.pointSize: Appearance.font.size.normal
+					CustomText {
-					font.weight: 500
+						id: monthYearDisplay1
-					text: grid.title
+
+						anchors.centerIn: parent
+						// qmllint enable missing-property
+						color: DynamicColors.palette.m3primary
+
+						// qmllint disable missing-property
+						text: grid1.item ? grid1.item.title : ""
+						visible: root.activeGrid === 1 || monthChangeAnim.running
+
+						transform: Translate {
+							id: titleTranslate1
+						}
+					}
+
+					CustomText {
+						id: monthYearDisplay2
+
+						anchors.centerIn: parent
+						// qmllint enable missing-property
+						color: DynamicColors.palette.m3primary
+
+						// qmllint disable missing-property
+						text: grid2.item ? grid2.item.title : ""
+						visible: root.activeGrid === 2 || monthChangeAnim.running
+
+						transform: Translate {
+							id: titleTranslate2
+						}
+					}
 				}
 			}
 
-			Item {
+			IconButton {
-				implicitHeight: nextMonthText.implicitHeight + Appearance.padding.small * 2
+				icon: "chevron_right"
-				implicitWidth: implicitHeight
+				padding: Appearance.padding.small
+				type: IconButton.Text
 
-				StateLayer {
+				onClicked: root.dashState.currentDate = new Date(root.realCurrYear, root.realCurrMonth + 1, 1)
-					id: nextMonthStateLayer
-
-					radius: Appearance.rounding.full
-
-					onClicked: {
-						root.state.currentDate = new Date(root.currYear, root.currMonth + 1, 1);
-					}
-				}
-
-				MaterialIcon {
-					id: nextMonthText
-
-					anchors.centerIn: parent
-					color: DynamicColors.palette.m3tertiary
-					font.pointSize: Appearance.font.size.normal
-					font.weight: 700
-					text: "chevron_right"
-				}
 			}
 		}
 
@@ -130,109 +213,169 @@ CustomMouseArea {
 			id: daysRow
 
 			Layout.fillWidth: true
-			locale: grid.locale
+			locale: Qt.locale()
 
 			delegate: CustomText {
 				required property var model
 
-				color: (model.day === 0) ? DynamicColors.palette.m3secondary : DynamicColors.palette.m3onSurfaceVariant
+				color: (model.day === 0) ? DynamicColors.palette.m3tertiary : DynamicColors.palette.m3onSurface
-				font.weight: 500
 				horizontalAlignment: Text.AlignHCenter
 				text: model.shortName
 			}
 		}
 
 		Item {
+			id: gridClip
+
 			Layout.fillWidth: true
-			implicitHeight: grid.implicitHeight
+			clip: true
+			implicitHeight: grid1.implicitHeight
 
-			MonthGrid {
+			Component {
-				id: grid
+				id: gridComp
 
-				anchors.fill: parent
+				Item {
-				locale: Qt.locale("en_SE")
+					id: internalGridContainer
-				month: root.currMonth
-				spacing: 3
-				year: root.currYear
 
-				delegate: Item {
+					property int month
-					id: dayItem
+					property alias title: internalGrid.title
+					property int year
 
-					required property var model
+					implicitHeight: internalGrid.implicitHeight
 
-					implicitHeight: text.implicitHeight + Appearance.padding.small * 2
+					MonthGrid {
-					implicitWidth: implicitHeight
+						id: internalGrid
 
-					CustomText {
+						anchors.fill: parent
-						id: text
+						locale: Qt.locale()
+						month: internalGridContainer.month
+						spacing: 3
+						year: internalGridContainer.year
 
-						anchors.centerIn: parent
+						delegate: Item {
-						color: {
+							id: dayItem
-							const dayOfWeek = dayItem.model.date.getUTCDay();
-							if (dayOfWeek === 6)
-								return DynamicColors.palette.m3secondary;
 
-							return DynamicColors.palette.m3onSurfaceVariant;
+							required property var model
+
+							implicitHeight: text.implicitHeight + Appearance.padding.normal * 2
+							implicitWidth: implicitHeight
+
+							CustomText {
+								id: text
+
+								anchors.centerIn: parent
+								color: {
+									const dayOfWeek = dayItem.model.date.getDay();
+									if (dayOfWeek === 0)
+										return DynamicColors.palette.m3tertiary;
+
+									return DynamicColors.palette.m3onSurfaceVariant;
+								}
+								horizontalAlignment: Text.AlignHCenter
+								opacity: dayItem.model.today || dayItem.model.month === internalGrid.month ? 1 : 0.4
+								text: internalGrid.locale.toString(dayItem.model.day)
+							}
+						}
+					}
+
+					CustomRect {
+						id: todayIndicator
+
+						property Item today
+						readonly property Item todayItem: internalGrid.contentItem.children.find(c => c.model.today) ?? null
+
+						clip: true
+						color: DynamicColors.palette.m3primary
+						implicitHeight: width
+						implicitWidth: today ? (Math.max(today.implicitWidth, today.implicitHeight) - Appearance.padding.extraSmall) : 0
+						opacity: todayItem ? 1 : 0
+						radius: Appearance.rounding.full
+						scale: todayItem ? 1 : 0.7
+						x: today ? today.x + (today.width - implicitWidth) / 2 : 0
+						y: today ? today.y + Appearance.padding.extraSmall / 2 : 0
+
+						Behavior on opacity {
+							Anim {
+								type: Anim.DefaultEffects
+							}
+						}
+						Behavior on scale {
+							Anim {
+								type: Anim.FastSpatial
+							}
+						}
+						Behavior on x {
+							Anim {
+							}
+						}
+						Behavior on y {
+							Anim {
+							}
+						}
+
+						onTodayItemChanged: {
+							if (todayItem)
+								today = todayItem;
+						}
+
+						Coloriser {
+							colorizationColor: DynamicColors.palette.m3onPrimary
+							implicitHeight: internalGrid.height
+							implicitWidth: internalGrid.width
+							source: internalGrid
+							sourceColor: DynamicColors.palette.m3onSurface
+							x: -todayIndicator.x
+							y: -todayIndicator.y
 						}
-						font.pointSize: Appearance.font.size.normal
-						font.weight: 500
-						horizontalAlignment: Text.AlignHCenter
-						opacity: dayItem.model.today || dayItem.model.month === grid.month ? 1 : 0.4
-						text: grid.locale.toString(dayItem.model.day)
 					}
 				}
 			}
 
-			CustomRect {
+			Loader {
-				id: todayIndicator
+				id: grid1
 
-				property Item today
+				anchors.fill: parent
-				readonly property Item todayItem: grid.contentItem.children.find(c => c.model.today) ?? null
+				sourceComponent: gridComp
+				visible: root.activeGrid === 1 || monthChangeAnim.running
 
-				clip: true
+				transform: Translate {
-				color: DynamicColors.palette.m3primary
+					id: grid1Translate
-				implicitHeight: today?.implicitHeight ?? 0
-				implicitWidth: today?.implicitWidth ?? 0
-				opacity: todayItem ? 1 : 0
-				radius: Appearance.rounding.full
-				scale: todayItem ? 1 : 0.7
-				x: today ? today.x + (today.width - implicitWidth) / 2 : 0
-				y: today?.y ?? 0
-
-				Behavior on opacity {
-					Anim {
-					}
-				}
-				Behavior on scale {
-					Anim {
-					}
-				}
-				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
-					}
 				}
 
-				onTodayItemChanged: {
+				Binding {
-					if (todayItem)
+					property: "month"
-						today = todayItem;
+					target: grid1.item
+					value: root.month1
 				}
 
-				Coloriser {
+				Binding {
-					colorizationColor: DynamicColors.palette.m3onPrimary
+					property: "year"
-					implicitHeight: grid.height
+					target: grid1.item
-					implicitWidth: grid.width
+					value: root.year1
-					source: grid
+				}
-					sourceColor: DynamicColors.palette.m3onSurface
+			}
-					x: -todayIndicator.x
+
-					y: -todayIndicator.y
+			Loader {
+				id: grid2
+
+				anchors.fill: parent
+				sourceComponent: gridComp
+				visible: root.activeGrid === 2 || monthChangeAnim.running
+
+				transform: Translate {
+					id: grid2Translate
+				}
+
+				Binding {
+					property: "month"
+					target: grid2.item
+					value: root.month2
+				}
+
+				Binding {
+					property: "year"
+					target: grid2.item
+					value: root.year2
 				}
 			}
 		}

Modules/Dashboard/Dash/User.qml

@@ -9,7 +9,7 @@ import QtQuick
 Row {
 	id: root
 
-	required property PersistentProperties state
+	required property PersistentProperties dashState
 
 	padding: 20
 	spacing: 12

Modules/Dashboard/Wrapper.qml

@@ -32,7 +32,7 @@ Item {
 		anchors.horizontalCenter: parent.horizontalCenter
 
 		sourceComponent: Content {
-			state: root.dashState
+			dashState: root.dashState
 			visibilities: root.visibilities
 		}
 	}