Improve Calendar

This commit is contained in:
Vyn 2024-04-20 09:02:25 +02:00
parent eb284afecd
commit fb0f21f119
4 changed files with 97 additions and 58 deletions

View file

@ -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

View file

@ -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()

View file

@ -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)
}
@ -65,69 +76,90 @@ 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
color: colorPalette.selected.calendarLines
height: parent.height
width: 1
anchors.left: parent.left
}
Repeater {
model: 23 // Skip 00:00
Rectangle {
color: colorPalette.selected.calendarLines
height: 1
width: daysSurface.width
y: daysSurface.hourHeight * (index + 1)
}
ColumnLayout {
anchors.fill: parent
spacing: 0
AppText {
Layout.fillWidth: true
text: capitalize(day.toLocaleDateString(Qt.locale(), "dddd dd"))
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
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 {
color: "transparent"
Layout.fillWidth: true
Layout.fillHeight: true
id: daysSurface
property real hourHeight: daysSurface.height / 24
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 }
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))
}
}
}
}
}
}
}
}

View file

@ -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
}