Calendar is no longer a Widget, moved to Modules/Calendar/Calendar.qml
- Using a NLoader - Got a display bug with DayOfWeekRow!
This commit is contained in:
quadbyte
parent
c1452e3c11
commit
93fca936d8
5 changed files with 153 additions and 139 deletions
|
|
@ -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
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
141
Modules/Calendar/Calendar.qml
Normal file
141
Modules/Calendar/Calendar.qml
Normal file
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -17,6 +17,10 @@ Loader {
|
|||
asynchronous: true
|
||||
sourceComponent: content
|
||||
|
||||
// onLoaded: {
|
||||
// console.log("NLoader onLoaded: " + item.toString());
|
||||
// }
|
||||
|
||||
onActiveChanged: {
|
||||
if (active && item && item.show) {
|
||||
item.show()
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue