527 lines
19 KiB
QML
527 lines
19 KiB
QML
import Qt5Compat.GraphicalEffects
|
|
import QtQuick
|
|
import QtQuick.Controls
|
|
import QtQuick.Layouts
|
|
import Quickshell
|
|
import Quickshell.Wayland
|
|
import qs.Constants
|
|
import qs.Noctalia
|
|
import qs.Services
|
|
import qs.Utils
|
|
|
|
NPanel {
|
|
id: root
|
|
|
|
preferredWidth: 400
|
|
preferredHeight: 520
|
|
|
|
panelContent: ColumnLayout {
|
|
id: content
|
|
|
|
readonly property int firstDayOfWeek: Qt.locale().firstDayOfWeek
|
|
property bool isCurrentMonth: checkIsCurrentMonth()
|
|
readonly property bool weatherReady: (LocationService.data.weather !== null)
|
|
|
|
function checkIsCurrentMonth() {
|
|
return (Time.date.getMonth() === grid.month) && (Time.date.getFullYear() === grid.year);
|
|
}
|
|
|
|
function getISOWeekNumber(date) {
|
|
const target = new Date(date.getTime());
|
|
target.setHours(0, 0, 0, 0);
|
|
const dayOfWeek = target.getDay() || 7;
|
|
target.setDate(target.getDate() + 4 - dayOfWeek);
|
|
const yearStart = new Date(target.getFullYear(), 0, 1);
|
|
const weekNumber = Math.ceil(((target - yearStart) / 8.64e+07 + 1) / 7);
|
|
return weekNumber;
|
|
}
|
|
|
|
anchors.fill: parent
|
|
anchors.margins: Style.marginL
|
|
spacing: Style.marginM
|
|
|
|
Connections {
|
|
function onDateChanged() {
|
|
isCurrentMonth = checkIsCurrentMonth();
|
|
}
|
|
|
|
target: Time
|
|
}
|
|
|
|
// Combined blue banner with date/time and weather summary
|
|
NBox {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: blueColumn.implicitHeight + Style.marginM * 2
|
|
|
|
ColumnLayout {
|
|
id: blueColumn
|
|
|
|
anchors.fill: parent
|
|
anchors.margins: Style.marginM
|
|
spacing: 0
|
|
|
|
// Combined layout for weather icon, date, and weather text
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: 60
|
|
spacing: Style.marginS
|
|
|
|
// Weather icon and temperature
|
|
ColumnLayout {
|
|
Layout.alignment: Qt.AlignVCenter
|
|
spacing: Style.marginXXS
|
|
|
|
NIcon {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
icon: weatherReady ? LocationService.weatherSymbolFromCode(LocationService.data.weather.current_weather.weathercode) : "cloud"
|
|
pointSize: Style.fontSizeXXL
|
|
color: Colors.text
|
|
}
|
|
|
|
NText {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
text: {
|
|
if (!weatherReady)
|
|
return "";
|
|
|
|
var temp = LocationService.data.weather.current_weather.temperature;
|
|
var suffix = "C";
|
|
temp = Math.round(temp);
|
|
return `${temp}°${suffix}`;
|
|
}
|
|
pointSize: Style.fontSizeM
|
|
font.weight: Style.fontWeightBold
|
|
color: Colors.text
|
|
}
|
|
|
|
}
|
|
|
|
// Today day number
|
|
NText {
|
|
visible: content.isCurrentMonth
|
|
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
|
text: Time.date.getDate()
|
|
pointSize: Style.fontSizeXXXL * 1.5
|
|
font.weight: Style.fontWeightBold
|
|
color: Colors.text
|
|
}
|
|
|
|
Item {
|
|
visible: !content.isCurrentMonth
|
|
}
|
|
|
|
// Month, year, location
|
|
ColumnLayout {
|
|
Layout.fillWidth: false
|
|
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
|
spacing: -Style.marginXS
|
|
|
|
RowLayout {
|
|
spacing: 0
|
|
|
|
NText {
|
|
text: Qt.locale().monthName(grid.month, Locale.LongFormat).toUpperCase()
|
|
pointSize: Style.fontSizeXL * 1.2
|
|
font.weight: Style.fontWeightBold
|
|
color: Colors.text
|
|
Layout.alignment: Qt.AlignBaseline
|
|
Layout.maximumWidth: 150
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
NText {
|
|
text: ` ${grid.year}`
|
|
pointSize: Style.fontSizeL
|
|
font.weight: Style.fontWeightBold
|
|
color: Qt.alpha(Colors.text, 0.7)
|
|
Layout.alignment: Qt.AlignBaseline
|
|
}
|
|
|
|
}
|
|
|
|
RowLayout {
|
|
spacing: 0
|
|
|
|
NText {
|
|
text: {
|
|
if (!weatherReady)
|
|
return "Weather unavailable";
|
|
|
|
const chunks = LocationService.data.name.split(",");
|
|
return chunks[0];
|
|
}
|
|
pointSize: Style.fontSizeM
|
|
font.weight: Style.fontWeightMedium
|
|
color: Colors.text
|
|
Layout.maximumWidth: 150
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
NText {
|
|
text: weatherReady ? ` (${LocationService.data.weather.timezone_abbreviation})` : ""
|
|
pointSize: Style.fontSizeXS
|
|
font.weight: Style.fontWeightMedium
|
|
color: Qt.alpha(Colors.text, 0.7)
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Spacer between date and clock
|
|
Item {
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
// Digital clock with circular progress
|
|
Item {
|
|
width: Style.fontSizeXXXL * 1.9
|
|
height: Style.fontSizeXXXL * 1.9
|
|
Layout.alignment: Qt.AlignVCenter
|
|
|
|
// Seconds circular progress
|
|
Canvas {
|
|
id: secondsProgress
|
|
|
|
property real progress: Time.date.getSeconds() / 60
|
|
|
|
anchors.fill: parent
|
|
onProgressChanged: requestPaint()
|
|
onPaint: {
|
|
var ctx = getContext("2d");
|
|
var centerX = width / 2;
|
|
var centerY = height / 2;
|
|
var radius = Math.min(width, height) / 2 - 3;
|
|
ctx.reset();
|
|
// Background circle
|
|
ctx.beginPath();
|
|
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
|
|
ctx.lineWidth = 2.5;
|
|
ctx.strokeStyle = Qt.alpha(Colors.text, 0.15);
|
|
ctx.stroke();
|
|
// Progress arc
|
|
ctx.beginPath();
|
|
ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + progress * 2 * Math.PI);
|
|
ctx.lineWidth = 2.5;
|
|
ctx.strokeStyle = Colors.text;
|
|
ctx.lineCap = "round";
|
|
ctx.stroke();
|
|
}
|
|
|
|
Connections {
|
|
function onDateChanged() {
|
|
secondsProgress.progress = Time.date.getSeconds() / 60;
|
|
}
|
|
|
|
target: Time
|
|
}
|
|
|
|
}
|
|
|
|
// Digital clock
|
|
ColumnLayout {
|
|
anchors.centerIn: parent
|
|
spacing: -Style.marginXXS
|
|
|
|
NText {
|
|
text: {
|
|
var t = Qt.locale().toString(new Date(), "HH");
|
|
return t.split(" ")[0];
|
|
}
|
|
pointSize: Style.fontSizeXS
|
|
font.weight: Style.fontWeightBold
|
|
color: Colors.text
|
|
family: Fonts.sans
|
|
Layout.alignment: Qt.AlignHCenter
|
|
}
|
|
|
|
NText {
|
|
text: Qt.formatTime(Time.date, "mm")
|
|
pointSize: Style.fontSizeXXS
|
|
font.weight: Style.fontWeightBold
|
|
color: Colors.text
|
|
family: Fonts.sans
|
|
Layout.alignment: Qt.AlignHCenter
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// 6-day forecast (outside blue banner)
|
|
RowLayout {
|
|
visible: weatherReady
|
|
Layout.fillWidth: true
|
|
Layout.alignment: Qt.AlignHCenter
|
|
spacing: Style.marginL
|
|
|
|
Repeater {
|
|
model: weatherReady ? Math.min(6, LocationService.data.weather.daily.time.length) : 0
|
|
|
|
delegate: ColumnLayout {
|
|
Layout.preferredWidth: 0
|
|
Layout.fillWidth: true
|
|
Layout.alignment: Qt.AlignHCenter
|
|
spacing: Style.marginS
|
|
|
|
NText {
|
|
text: {
|
|
var weatherDate = new Date(LocationService.data.weather.daily.time[index].replace(/-/g, "/"));
|
|
return Qt.locale().toString(weatherDate, "ddd");
|
|
}
|
|
color: Color.mOnSurfaceVariant
|
|
pointSize: Style.fontSizeM
|
|
font.weight: Style.fontWeightMedium
|
|
Layout.alignment: Qt.AlignHCenter
|
|
}
|
|
|
|
NIcon {
|
|
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
|
|
icon: LocationService.weatherSymbolFromCode(LocationService.data.weather.daily.weathercode[index])
|
|
pointSize: Style.fontSizeXXL * 1.5
|
|
color: LocationService.weatherColorFromCode(LocationService.data.weather.daily.weathercode[index])
|
|
}
|
|
|
|
NText {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
text: {
|
|
var max = LocationService.data.weather.daily.temperature_2m_max[index];
|
|
var min = LocationService.data.weather.daily.temperature_2m_min[index];
|
|
max = Math.round(max);
|
|
min = Math.round(min);
|
|
return `${max}°/${min}°`;
|
|
}
|
|
pointSize: Style.fontSizeXS
|
|
color: Colors.text
|
|
font.weight: Style.fontWeightMedium
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Loading indicator for weather
|
|
RowLayout {
|
|
visible: !weatherReady
|
|
Layout.fillWidth: true
|
|
Layout.alignment: Qt.AlignHCenter
|
|
|
|
NBusyIndicator {
|
|
}
|
|
|
|
}
|
|
|
|
// Spacer
|
|
Item {
|
|
}
|
|
|
|
// Navigation and divider
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Style.marginS
|
|
|
|
NDivider {
|
|
Layout.fillWidth: true
|
|
}
|
|
|
|
NIconButton {
|
|
icon: "chevron-left"
|
|
colorBg: Color.transparent
|
|
colorBorder: Color.transparent
|
|
colorBorderHover: Color.transparent
|
|
onClicked: {
|
|
let newDate = new Date(grid.year, grid.month - 1, 1);
|
|
grid.year = newDate.getFullYear();
|
|
grid.month = newDate.getMonth();
|
|
content.isCurrentMonth = content.checkIsCurrentMonth();
|
|
}
|
|
}
|
|
|
|
NIconButton {
|
|
icon: "calendar"
|
|
colorBg: Color.transparent
|
|
colorBorder: Color.transparent
|
|
colorBorderHover: Color.transparent
|
|
onClicked: {
|
|
grid.month = Time.date.getMonth();
|
|
grid.year = Time.date.getFullYear();
|
|
content.isCurrentMonth = true;
|
|
}
|
|
}
|
|
|
|
NIconButton {
|
|
icon: "chevron-right"
|
|
colorBg: Color.transparent
|
|
colorBorder: Color.transparent
|
|
colorBorderHover: Color.transparent
|
|
onClicked: {
|
|
let newDate = new Date(grid.year, grid.month + 1, 1);
|
|
grid.year = newDate.getFullYear();
|
|
grid.month = newDate.getMonth();
|
|
content.isCurrentMonth = content.checkIsCurrentMonth();
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// Names of days of the week
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: 0
|
|
|
|
Item {
|
|
Layout.preferredWidth: visible ? Style.baseWidgetSize * 0.7 : 0
|
|
}
|
|
|
|
GridLayout {
|
|
Layout.fillWidth: true
|
|
columns: 7
|
|
rows: 1
|
|
columnSpacing: 0
|
|
rowSpacing: 0
|
|
|
|
Repeater {
|
|
model: 7
|
|
|
|
Item {
|
|
Layout.fillWidth: true
|
|
Layout.preferredHeight: Style.baseWidgetSize * 0.6
|
|
|
|
NText {
|
|
anchors.centerIn: parent
|
|
text: {
|
|
let dayIndex = (content.firstDayOfWeek + index) % 7;
|
|
const dayNames = ["S", "M", "T", "W", "T", "F", "S"];
|
|
return dayNames[dayIndex];
|
|
}
|
|
color: Color.mPrimary
|
|
pointSize: Style.fontSizeS
|
|
font.weight: Style.fontWeightBold
|
|
horizontalAlignment: Text.AlignHCenter
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Grid with weeks and days
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
spacing: 0
|
|
|
|
// Column of week numbers
|
|
ColumnLayout {
|
|
Layout.preferredWidth: visible ? Style.baseWidgetSize * 0.7 : 0
|
|
Layout.fillHeight: true
|
|
spacing: 0
|
|
|
|
Repeater {
|
|
model: 6
|
|
|
|
Item {
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
|
|
NText {
|
|
anchors.centerIn: parent
|
|
color: Color.mOutline
|
|
pointSize: Style.fontSizeXXS
|
|
font.weight: Style.fontWeightMedium
|
|
text: {
|
|
let firstOfMonth = new Date(grid.year, grid.month, 1);
|
|
let firstDayOfWeek = content.firstDayOfWeek;
|
|
let firstOfMonthDayOfWeek = firstOfMonth.getDay();
|
|
let daysBeforeFirst = (firstOfMonthDayOfWeek - firstDayOfWeek + 7) % 7;
|
|
if (daysBeforeFirst === 0)
|
|
daysBeforeFirst = 7;
|
|
|
|
let gridStartDate = new Date(grid.year, grid.month, 1 - daysBeforeFirst);
|
|
let rowStartDate = new Date(gridStartDate);
|
|
rowStartDate.setDate(gridStartDate.getDate() + (index * 7));
|
|
let thursday = new Date(rowStartDate);
|
|
if (firstDayOfWeek === 0) {
|
|
thursday.setDate(rowStartDate.getDate() + 4);
|
|
} else if (firstDayOfWeek === 1) {
|
|
thursday.setDate(rowStartDate.getDate() + 3);
|
|
} else {
|
|
let daysToThursday = (4 - firstDayOfWeek + 7) % 7;
|
|
thursday.setDate(rowStartDate.getDate() + daysToThursday);
|
|
}
|
|
return `${getISOWeekNumber(thursday)}`;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// Days Grid
|
|
MonthGrid {
|
|
id: grid
|
|
|
|
Layout.fillWidth: true
|
|
Layout.fillHeight: true
|
|
spacing: Style.marginXXS
|
|
month: Time.date.getMonth()
|
|
year: Time.date.getFullYear()
|
|
locale: Qt.locale()
|
|
|
|
delegate: Item {
|
|
Rectangle {
|
|
width: Style.baseWidgetSize * 0.9
|
|
height: Style.baseWidgetSize * 0.9
|
|
anchors.centerIn: parent
|
|
radius: Style.radiusM
|
|
color: model.today ? Color.mSecondary : Color.transparent
|
|
|
|
NText {
|
|
anchors.centerIn: parent
|
|
text: model.day
|
|
color: {
|
|
if (model.today)
|
|
return Color.mOnSecondary;
|
|
|
|
if (model.month === grid.month)
|
|
return Color.mOnSurface;
|
|
|
|
return Color.mOnSurfaceVariant;
|
|
}
|
|
opacity: model.month === grid.month ? 1 : 0.4
|
|
pointSize: Style.fontSizeM
|
|
font.weight: model.today ? Style.fontWeightBold : Style.fontWeightMedium
|
|
}
|
|
|
|
Behavior on color {
|
|
ColorAnimation {
|
|
duration: Style.animationFast
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|