From 93fca936d8b7179e3b4e2b88257686c86b6ad22e Mon Sep 17 00:00:00 2001 From: quadbyte Date: Sun, 10 Aug 2025 21:31:09 -0400 Subject: [PATCH] Calendar is no longer a Widget, moved to Modules/Calendar/Calendar.qml - Using a NLoader - Got a display bug with DayOfWeekRow! --- Modules/Bar/Clock.qml | 10 +-- Modules/Calendar/Calendar.qml | 141 ++++++++++++++++++++++++++++++++++ Widgets/NCalendar.qml | 132 ------------------------------- Widgets/NLoader.qml | 4 + shell.qml | 5 ++ 5 files changed, 153 insertions(+), 139 deletions(-) create mode 100644 Modules/Calendar/Calendar.qml delete mode 100644 Widgets/NCalendar.qml diff --git a/Modules/Bar/Clock.qml b/Modules/Bar/Clock.qml index 79fda94..39f572b 100644 --- a/Modules/Bar/Clock.qml +++ b/Modules/Bar/Clock.qml @@ -12,13 +12,8 @@ NClock { target: root } - NCalendar { - id: calendar - visible: false - } - onEntered: function () { - if (!calendar.visible) { + if (!calendar.isLoaded) { tooltip.show() } } @@ -26,7 +21,8 @@ NClock { tooltip.hide() } onClicked: function () { - calendar.visible = !calendar.visible tooltip.hide() + calendar.isLoaded = !calendar.isLoaded + } } diff --git a/Modules/Calendar/Calendar.qml b/Modules/Calendar/Calendar.qml new file mode 100644 index 0000000..6f1b9e3 --- /dev/null +++ b/Modules/Calendar/Calendar.qml @@ -0,0 +1,141 @@ +import QtQuick +import QtQuick.Controls +import QtQuick.Layouts +import Quickshell +import Quickshell.Wayland +import qs.Services +import qs.Widgets + +NLoader { + id: root + + content: Component { + NPanel { + id: calendarPanel + + 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 + } + + // Main Column + ColumnLayout { + anchors.fill: parent + anchors.margins: Style.marginMedium * scaling + spacing: Style.marginMedium * scaling + + // Header: Month/Year with navigation + RowLayout { + Layout.fillWidth: true + spacing: Style.marginSmall * scaling + + NIconButton { + icon: "chevron_left" + onClicked: function () { + let newDate = new Date(grid.year, grid.month - 1, 1) + grid.year = newDate.getFullYear() + grid.month = newDate.getMonth() + } + } + + NText { + text: grid.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(grid.year, grid.month + 1, 1) + grid.year = newDate.getFullYear() + grid.month = newDate.getMonth() + } + } + } + + NDivider { + Layout.fillWidth: true + } + + // Columns label (Sunday to Saturday) + 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 + } + } + + // Grids: days + MonthGrid { + id: grid + + 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 { + target: calendarPanel + function onVisibleChanged() { + if (calendarPanel.visible) { + grid.month = Time.date.getMonth() + grid.year = Time.date.getFullYear() + } + } + } + + 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 === grid.month ? Style.opacityHeavy : Style.opacityLight + font.pointSize: Style.fontSizeMedium * scaling + font.bold: model.today ? true : false + } + + Behavior on color { + ColorAnimation { + duration: 150 + } + } + } + } + } + } + } + } +} diff --git a/Widgets/NCalendar.qml b/Widgets/NCalendar.qml deleted file mode 100644 index c3ffda8..0000000 --- a/Widgets/NCalendar.qml +++ /dev/null @@ -1,132 +0,0 @@ -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 - } - } - } - } - } - } -} diff --git a/Widgets/NLoader.qml b/Widgets/NLoader.qml index b3c5f52..c41e00f 100644 --- a/Widgets/NLoader.qml +++ b/Widgets/NLoader.qml @@ -17,6 +17,10 @@ Loader { asynchronous: true sourceComponent: content + // onLoaded: { + // console.log("NLoader onLoaded: " + item.toString()); + // } + onActiveChanged: { if (active && item && item.show) { item.show() diff --git a/shell.qml b/shell.qml index 05c3654..b3f16c9 100644 --- a/shell.qml +++ b/shell.qml @@ -8,6 +8,7 @@ import Quickshell.Services.Pipewire import qs.Widgets import qs.Modules.Audio import qs.Modules.Bar +import qs.Modules.Calendar import qs.Modules.DemoPanel import qs.Modules.Background import qs.Modules.SidePanel @@ -37,4 +38,8 @@ ShellRoot { AudioDeviceSelector { id: audioDeviceSelector } + + Calendar { + id: calendar + } }