Calendar: minor UI tweaks

This commit is contained in:
ItsLemmy
2025-10-07 20:10:28 -04:00
parent e7c666236d
commit 062f76dce7
+28 -29
View File
@@ -10,7 +10,7 @@ import qs.Widgets
NPanel { NPanel {
id: root id: root
preferredWidth: Settings.data.location.showWeekNumberInCalendar ? 420 : 420 preferredWidth: Settings.data.location.showWeekNumberInCalendar ? 400 : 380
preferredHeight: 520 preferredHeight: 520
panelContent: ColumnLayout { panelContent: ColumnLayout {
@@ -37,19 +37,21 @@ NPanel {
// Combined blue banner with date/time and weather summary // Combined blue banner with date/time and weather summary
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 80 * scaling Layout.preferredHeight: blueColumn.implicitHeight + Style.marginM * scaling * 2
radius: Style.radiusL * scaling radius: Style.radiusL * scaling
color: Color.mPrimary color: Color.mPrimary
ColumnLayout { ColumnLayout {
id: blueColumn
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginL * scaling anchors.margins: Style.marginM * scaling
spacing: 0 spacing: 0
// Combined layout for weather icon, date, and weather text // Combined layout for weather icon, date, and weather text
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginXXS * scaling Layout.preferredHeight: 60 * scaling
spacing: Style.marginS * scaling
// Weather icon and temperature // Weather icon and temperature
ColumnLayout { ColumnLayout {
@@ -83,22 +85,20 @@ NPanel {
} }
} }
// Small spacer between weather and day number // Today day number
Item {
Layout.preferredWidth: Style.marginXS * scaling
}
// Day number
NText { NText {
visible: content.isCurrentMonth visible: content.isCurrentMonth
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
text: `${Time.date.getDate()}` text: Time.date.getDate()
pointSize: Style.fontSizeXXXL * 1.4 * scaling pointSize: Style.fontSizeXXXL * 1.5 * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnPrimary color: Color.mOnPrimary
} }
Item {
visible: !content.isCurrentMonth
}
// Date and weather text column // Month, year, location
ColumnLayout { ColumnLayout {
Layout.fillWidth: false Layout.fillWidth: false
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
@@ -152,11 +152,6 @@ NPanel {
} }
} }
// Spacer between text and clock
Item {
Layout.fillWidth: true
}
// Spacer between date and clock // Spacer between date and clock
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
@@ -164,8 +159,8 @@ NPanel {
// Digital clock with circular progress // Digital clock with circular progress
Item { Item {
width: Style.fontSizeXXXL * 1.6 * scaling width: Style.fontSizeXXXL * 1.9 * scaling
height: Style.fontSizeXXXL * 1.6 * scaling height: Style.fontSizeXXXL * 1.9 * scaling
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
// Seconds circular progress // Seconds circular progress
@@ -218,7 +213,7 @@ NPanel {
var t = Settings.data.location.use12hourFormat ? Qt.locale().toString(new Date(), "hh AP") : Qt.locale().toString(new Date(), "HH") var t = Settings.data.location.use12hourFormat ? Qt.locale().toString(new Date(), "hh AP") : Qt.locale().toString(new Date(), "HH")
return t.split(" ")[0] return t.split(" ")[0]
} }
pointSize: Style.fontSizeXXS * scaling pointSize: Style.fontSizeXS * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnPrimary color: Color.mOnPrimary
family: Settings.data.ui.fontFixed family: Settings.data.ui.fontFixed
@@ -239,28 +234,28 @@ NPanel {
} }
} }
// 5-day forecast (outside blue banner) // 6-day forecast (outside blue banner)
RowLayout { RowLayout {
visible: weatherReady visible: weatherReady
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
spacing: Style.marginS * scaling spacing: Style.marginL * scaling
Repeater { Repeater {
model: weatherReady ? Math.min(7, LocationService.data.weather.daily.time.length) : 0 model: weatherReady ? Math.min(6, LocationService.data.weather.daily.time.length) : 0
delegate: ColumnLayout { delegate: ColumnLayout {
Layout.preferredWidth: 0 Layout.preferredWidth: 0
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
spacing: Style.marginXS * scaling spacing: Style.marginS * scaling
NText { NText {
text: { text: {
var weatherDate = new Date(LocationService.data.weather.daily.time[index].replace(/-/g, "/")) var weatherDate = new Date(LocationService.data.weather.daily.time[index].replace(/-/g, "/"))
return Qt.locale().toString(weatherDate, "ddd") return Qt.locale().toString(weatherDate, "ddd")
} }
color: Qt.alpha(Color.mOnSurface, 0.8) color: Color.mOnSurfaceVariant
pointSize: Style.fontSizeS * scaling pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
@@ -268,7 +263,7 @@ NPanel {
NIcon { NIcon {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
icon: LocationService.weatherSymbolFromCode(LocationService.data.weather.daily.weathercode[index]) icon: LocationService.weatherSymbolFromCode(LocationService.data.weather.daily.weathercode[index])
pointSize: Style.fontSizeM * scaling pointSize: Style.fontSizeXXL * 1.5 * scaling
color: Color.mPrimary color: Color.mPrimary
} }
@@ -286,7 +281,7 @@ NPanel {
return `${max}°/${min}°` return `${max}°/${min}°`
} }
pointSize: Style.fontSizeXS * scaling pointSize: Style.fontSizeXS * scaling
color: Qt.alpha(Color.mOnSurface, 0.8) color: Color.mOnSurfaceVariant
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
} }
} }
@@ -301,6 +296,10 @@ NPanel {
NBusyIndicator {} NBusyIndicator {}
} }
// Spacer
Item {
}
// Navigation and divider // Navigation and divider
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true