diff options
| -rw-r--r-- | modules/dashboard/Dash.qml | 2 | ||||
| -rw-r--r-- | modules/dashboard/Wrapper.qml | 1 | ||||
| -rw-r--r-- | modules/dashboard/dash/Calendar.qml | 204 | ||||
| -rw-r--r-- | modules/dashboard/dash/DateTime.qml | 15 |
4 files changed, 189 insertions, 33 deletions
diff --git a/modules/dashboard/Dash.qml b/modules/dashboard/Dash.qml index 388130c..43ee538 100644 --- a/modules/dashboard/Dash.qml +++ b/modules/dashboard/Dash.qml @@ -56,6 +56,8 @@ GridLayout { Calendar { id: calendar + + state: root.state } } diff --git a/modules/dashboard/Wrapper.qml b/modules/dashboard/Wrapper.qml index ba5dad6..eaa3fce 100644 --- a/modules/dashboard/Wrapper.qml +++ b/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") diff --git a/modules/dashboard/dash/Calendar.qml b/modules/dashboard/dash/Calendar.qml index fa027c4..ff27669 100644 --- a/modules/dashboard/dash/Calendar.qml +++ b/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 { - id: grid - + Item { anchors.left: parent.left anchors.right: parent.right anchors.margins: parent.padding - spacing: 3 + implicitHeight: grid.implicitHeight - delegate: Item { - id: day + MonthGrid { + id: grid - required property var model + month: root.currMonth + year: root.currYear - implicitWidth: implicitHeight - implicitHeight: text.implicitHeight + Appearance.padding.small * 2 + anchors.left: parent.left + anchors.right: parent.right - StyledRect { - anchors.centerIn: parent + spacing: 3 + locale: Qt.locale() - implicitWidth: parent.implicitHeight - implicitHeight: parent.implicitHeight + delegate: Item { + id: dayItem - radius: Appearance.rounding.full - color: Qt.alpha(Colours.palette.m3primary, day.model.today ? 1 : 0) + required property var model + + 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") - color: day.model.today ? Colours.palette.m3onPrimary : day.model.month === grid.month ? Colours.palette.m3onSurfaceVariant : Colours.palette.m3outline + 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; + } + 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 } } } diff --git a/modules/dashboard/dash/DateTime.qml b/modules/dashboard/dash/DateTime.qml index b9383f6..bbef067 100644 --- a/modules/dashboard/dash/DateTime.qml +++ b/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 - } } } |