132 lines
3.6 KiB
QML
132 lines
3.6 KiB
QML
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import Quickshell
|
|
import Quickshell.Wayland
|
|
import qs.Services
|
|
|
|
NPanel {
|
|
id: root
|
|
|
|
readonly property real scaling: Scaling.scale(screen)
|
|
|
|
Rectangle {
|
|
color: Colors.backgroundSecondary
|
|
radius: Style.radiusMedium * scaling
|
|
border.color: Colors.backgroundTertiary
|
|
border.width: Math.min(1, Style.borderMedium * scaling)
|
|
width: 340 * scaling
|
|
height: 320 // TBC
|
|
anchors.top: parent.top
|
|
anchors.right: parent.right
|
|
anchors.topMargin: Style.marginTiny * scaling
|
|
anchors.rightMargin: Style.marginTiny * scaling
|
|
|
|
// Prevent closing when clicking in the panel bg
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
}
|
|
|
|
ColumnLayout {
|
|
anchors.fill: parent
|
|
anchors.margins: Style.marginMedium * scaling
|
|
spacing: Style.marginMedium * scaling
|
|
|
|
// Month/Year header with navigation
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Style.marginSmall * scaling
|
|
|
|
NIconButton {
|
|
icon: "chevron_left"
|
|
onClicked: function () {
|
|
let newDate = new Date(calendar.year, calendar.month - 1, 1)
|
|
calendar.year = newDate.getFullYear()
|
|
calendar.month = newDate.getMonth()
|
|
}
|
|
}
|
|
|
|
NText {
|
|
text: calendar.title
|
|
Layout.fillWidth: true
|
|
horizontalAlignment: Text.AlignHCenter
|
|
font.pointSize: Style.fontSizeMedium * scaling
|
|
color: Colors.accentPrimary
|
|
}
|
|
|
|
NIconButton {
|
|
icon: "chevron_right"
|
|
onClicked: function () {
|
|
let newDate = new Date(calendar.year, calendar.month + 1, 1)
|
|
calendar.year = newDate.getFullYear()
|
|
calendar.month = newDate.getMonth()
|
|
}
|
|
}
|
|
}
|
|
|
|
NDivider {
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
DayOfWeekRow {
|
|
Layout.fillWidth: true
|
|
spacing: 0
|
|
Layout.leftMargin: Style.marginSmall * scaling // Align with grid
|
|
Layout.rightMargin: Style.marginSmall * scaling
|
|
|
|
delegate: NText {
|
|
text: shortName
|
|
color: Colors.accentSecondary
|
|
font.pointSize: Style.fontSizeMedium * scaling
|
|
horizontalAlignment: Text.AlignHCenter
|
|
width: Style.baseWidgetSize * scaling
|
|
}
|
|
}
|
|
|
|
MonthGrid {
|
|
id: calendar
|
|
|
|
Layout.fillWidth: true
|
|
Layout.leftMargin: Style.marginSmall * scaling
|
|
Layout.rightMargin: Style.marginSmall * scaling
|
|
spacing: 0
|
|
month: Time.date.getMonth()
|
|
year: Time.date.getFullYear()
|
|
|
|
// Optionally, update when the panel becomes visible
|
|
Connections {
|
|
function onVisibleChanged() {
|
|
if (root.visible) {
|
|
calendar.month = Time.date.getMonth()
|
|
calendar.year = Time.date.getFullYear()
|
|
}
|
|
}
|
|
|
|
target: root
|
|
}
|
|
|
|
delegate: Rectangle {
|
|
width: Style.baseWidgetSize * scaling
|
|
height: Style.baseWidgetSize * scaling
|
|
radius: Style.radiusSmall * scaling
|
|
color: model.today ? Colors.accentPrimary : "transparent"
|
|
|
|
NText {
|
|
anchors.centerIn: parent
|
|
text: model.day
|
|
color: model.today ? Colors.onAccent : Colors.textPrimary
|
|
opacity: model.month === calendar.month ? Style.opacityHeavy : Style.opacityLight
|
|
font.pointSize: Style.fontSizeMedium * scaling
|
|
font.bold: model.today ? true : false
|
|
}
|
|
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: 150
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|