124 lines
4.0 KiB
QML
124 lines
4.0 KiB
QML
import QtQuick
|
|
import QtQuick.Layouts
|
|
import Quickshell
|
|
import Quickshell.Wayland
|
|
|
|
PopupWindow {
|
|
id: calendarPopup
|
|
|
|
required property Item anchorItem
|
|
required property date today
|
|
|
|
property color bgColor: "#150d16"
|
|
property color fgColor: "#f5dbc4"
|
|
property color mutedColor: "#444b6a"
|
|
property color accentColor: "#FF2400"
|
|
property string fontFamily: "Inter"
|
|
property int fontSize: 16
|
|
|
|
property int calYear: today.getFullYear()
|
|
property int calMonth: today.getMonth()
|
|
|
|
function daysInMonth(year, month) {
|
|
return new Date(year, month + 1, 0).getDate();
|
|
}
|
|
|
|
function firstWeekday(year, month) {
|
|
return new Date(year, month, 1).getDay();
|
|
}
|
|
|
|
color: "transparent"
|
|
implicitWidth: calContent.implicitWidth + 20
|
|
implicitHeight: calContent.implicitHeight + 20
|
|
|
|
anchor.item: anchorItem
|
|
anchor.edges: Edges.Top
|
|
anchor.gravity: Edges.Top
|
|
anchor.adjustment: PopupAdjustment.SlideX | PopupAdjustment.FlipY
|
|
anchor.margins.bottom: 8
|
|
|
|
BackgroundEffect.blurRegion: Region {
|
|
item: calendarPopup.contentItem
|
|
}
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
color: calendarPopup.bgColor
|
|
radius: 6
|
|
border.color: calendarPopup.mutedColor
|
|
border.width: 1
|
|
|
|
ColumnLayout {
|
|
id: calContent
|
|
anchors.centerIn: parent
|
|
spacing: 6
|
|
|
|
Text {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
text: Qt.formatDate(new Date(calendarPopup.calYear, calendarPopup.calMonth, 1), "MMMM yyyy")
|
|
color: calendarPopup.fgColor
|
|
font {
|
|
family: calendarPopup.fontFamily
|
|
pixelSize: calendarPopup.fontSize
|
|
bold: true
|
|
}
|
|
}
|
|
|
|
GridLayout {
|
|
columns: 7
|
|
rowSpacing: 4
|
|
columnSpacing: 6
|
|
|
|
Repeater {
|
|
model: ["S", "M", "T", "W", "T", "F", "S"]
|
|
delegate: Text {
|
|
Layout.preferredWidth: 22
|
|
Layout.preferredHeight: 20
|
|
horizontalAlignment: Text.AlignHCenter
|
|
text: modelData
|
|
color: calendarPopup.mutedColor
|
|
font {
|
|
family: calendarPopup.fontFamily
|
|
pixelSize: calendarPopup.fontSize - 3
|
|
bold: true
|
|
}
|
|
}
|
|
}
|
|
|
|
Repeater {
|
|
model: calendarPopup.firstWeekday(calendarPopup.calYear, calendarPopup.calMonth)
|
|
delegate: Item {
|
|
Layout.preferredWidth: 22
|
|
Layout.preferredHeight: 22
|
|
}
|
|
}
|
|
|
|
Repeater {
|
|
model: calendarPopup.daysInMonth(calendarPopup.calYear, calendarPopup.calMonth)
|
|
delegate: Rectangle {
|
|
id: dayCell
|
|
Layout.preferredWidth: 22
|
|
Layout.preferredHeight: 22
|
|
radius: 4
|
|
|
|
property int dayNum: index + 1
|
|
property bool isToday: dayNum === calendarPopup.today.getDate() && calendarPopup.calMonth === calendarPopup.today.getMonth() && calendarPopup.calYear === calendarPopup.today.getFullYear()
|
|
|
|
color: isToday ? calendarPopup.accentColor : "transparent"
|
|
|
|
Text {
|
|
anchors.centerIn: parent
|
|
text: dayCell.dayNum
|
|
color: calendarPopup.fgColor
|
|
font {
|
|
family: calendarPopup.fontFamily
|
|
pixelSize: calendarPopup.fontSize
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|