From fb0f21f11955270fcfb1fe23050466184a6eb3c3 Mon Sep 17 00:00:00 2001 From: Vyn Date: Sat, 20 Apr 2024 09:02:25 +0200 Subject: [PATCH] Improve Calendar --- build-run.sh | 2 +- src/qml/Main.qml | 6 ++ src/qml/components/Calendar.qml | 146 ++++++++++++++++----------- src/qml/styles/MiraiColorPalette.qml | 1 + 4 files changed, 97 insertions(+), 58 deletions(-) diff --git a/build-run.sh b/build-run.sh index c52f09f..d28241e 100644 --- a/build-run.sh +++ b/build-run.sh @@ -1 +1 @@ -cmake -S . -B ./build -G Ninja && cd build && ninja && ./mirai +cmake -DCMAKE_BUILD_TYPE=Debug -S . -B ./build -G Ninja && cd build && ninja && ./mirai diff --git a/src/qml/Main.qml b/src/qml/Main.qml index 26e9d3b..7ce93b3 100644 --- a/src/qml/Main.qml +++ b/src/qml/Main.qml @@ -17,6 +17,8 @@ Window { visible: true title: qsTr("Hello World") + + property string selectedView: "list" Backend { @@ -28,6 +30,10 @@ Window { property QtObject selected: MiraiColorPalette } + function capitalize(str) { + return str.charAt(0).toUpperCase() + str.slice(1) + } + function openSettings() { filesForm.reset() filesFormPopup.open() diff --git a/src/qml/components/Calendar.qml b/src/qml/components/Calendar.qml index d9504fd..0525377 100644 --- a/src/qml/components/Calendar.qml +++ b/src/qml/components/Calendar.qml @@ -11,7 +11,7 @@ import Mirai ColumnLayout { id: control - + spacing: 32 QtObject { id: internal property date weekStartDate: { @@ -22,14 +22,25 @@ ColumnLayout { } RowLayout { + spacing: 12 + Layout.fillWidth: true + Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter AppButton { - text: "<-" + text: "<" onClicked: { internal.weekStartDate.setDate(internal.weekStartDate.getDate() - 7) } } + + AppText { + text: capitalize(internal.weekStartDate.toLocaleDateString(Qt.locale(), "MMMM")) + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + font.pointSize: 24 + } + AppButton { - text: "->" + text: ">" onClicked: { internal.weekStartDate.setDate(internal.weekStartDate.getDate() + 7) } @@ -64,70 +75,91 @@ ColumnLayout { Repeater { model: 7 - - ColumnLayout { - - spacing: 0 - property date day: new Date(new Date(internal.weekStartDate).setDate(internal.weekStartDate.getDate() + index)) + + Rectangle { Layout.fillWidth: true Layout.fillHeight: true - - AppText { - Layout.fillWidth: true - text: parent.day.toLocaleDateString(Qt.locale(), "yyyy-MM-dd") - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - } + property date day: new Date(new Date(internal.weekStartDate).setDate(internal.weekStartDate.getDate() + index)) + color: "transparent" Rectangle { - color: "transparent" - Layout.fillWidth: true - Layout.fillHeight: true - id: daysSurface - property real hourHeight: daysSurface.height / 24 - - Repeater { - model: 23 // Skip 00:00 - Rectangle { - color: colorPalette.selected.calendarLines - height: 1 - width: daysSurface.width - y: daysSurface.hourHeight * (index + 1) - } - } + color: colorPalette.selected.calendarLines + height: parent.height + width: 1 + anchors.left: parent.left + } + + ColumnLayout { + anchors.fill: parent - Repeater { - model: backend.tasks.filter(task => { - const date = new Date(internal.weekStartDate) - date.setDate(internal.weekStartDate.getDate() + index) - return task.date === date.toLocaleDateString(Qt.locale(), "yyyy-MM-dd") - }) - - Rectangle { - property string name: modelData.text - property int startTime: parseInt(modelData.startTime) - property int endTime: parseInt(modelData.endTime) - color: colorPalette.selected.calendarEvent - anchors.right: parent.right - anchors.left: parent.left - anchors.rightMargin: 2 - anchors.leftMargin: 2 - radius: 4 - y: daysSurface.hourHeight * startTime - height: (endTime - startTime) * daysSurface.hourHeight + spacing: 0 + + + AppText { + Layout.fillWidth: true + text: capitalize(day.toLocaleDateString(Qt.locale(), "dddd dd")) + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } - ColumnLayout { - anchors.fill: parent - anchors.margins: 8 - AppText { - text: name - } - Item { Layout.fillHeight: true } + Rectangle { + color: "transparent" + Layout.fillWidth: true + Layout.fillHeight: true + id: daysSurface + property real hourHeight: daysSurface.height / 24 + + Repeater { + model: 23 // Skip 00:00 + Rectangle { + color: colorPalette.selected.calendarLines + height: 1 + width: daysSurface.width + y: daysSurface.hourHeight * (index + 1) } } + + Repeater { + model: backend.tasks.filter(task => { + const date = new Date(internal.weekStartDate) + date.setDate(internal.weekStartDate.getDate() + index) + return task.date === date.toLocaleDateString(Qt.locale(), "yyyy-MM-dd") + }) + + Rectangle { + property string name: modelData.text + property int startTime: parseInt(modelData.startTime) + property int endTime: parseInt(modelData.endTime) + color: colorPalette.selected.calendarEvent + anchors.right: parent.right + anchors.left: parent.left + anchors.rightMargin: 2 + anchors.leftMargin: 2 + radius: 4 + y: daysSurface.hourHeight * startTime + height: (endTime - startTime) * daysSurface.hourHeight + + ColumnLayout { + anchors.fill: parent + anchors.margins: 8 + AppText { + text: name + } + Item { Layout.fillHeight: true } + } + } + } + Rectangle { + color: day.getFullYear() === new Date().getFullYear() && + day.getMonth() === new Date().getMonth() && + day.getDate() === new Date().getDate() ? colorPalette.selected.calendarCurrentTime : "transparent" + height: 2 + width: parent.width + y: daysSurface.hourHeight * (new Date().getHours() + (new Date().getMinutes() / 60)) + } } } - } + } } } } diff --git a/src/qml/styles/MiraiColorPalette.qml b/src/qml/styles/MiraiColorPalette.qml index b4b521b..39e77a5 100644 --- a/src/qml/styles/MiraiColorPalette.qml +++ b/src/qml/styles/MiraiColorPalette.qml @@ -22,5 +22,6 @@ QtObject { property string filterSelected: CatppuccinFrappe.surface1 property string modalBorder: CatppuccinFrappe.lavender property string calendarLines: CatppuccinFrappe.surface0 + property string calendarCurrentTime: CatppuccinFrappe.red property string calendarEvent: CatppuccinFrappe.overlay0 }