lock: better scaling for weather & fetch
This commit is contained in:
2 * r + 2 * t
parent
0771aad11e
commit
efa806b8d6
3 changed files with 124 additions and 69 deletions
|
|
@ -30,6 +30,8 @@ RowLayout {
|
|||
|
||||
WeatherInfo {
|
||||
id: weather
|
||||
|
||||
rootHeight: root.height
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
pragma ComponentBehavior: Bound
|
||||
|
||||
import qs.components
|
||||
import qs.services
|
||||
import qs.config
|
||||
|
|
@ -13,9 +15,11 @@ ColumnLayout {
|
|||
anchors.fill: parent
|
||||
anchors.margins: Appearance.padding.large * 2
|
||||
|
||||
spacing: Appearance.spacing.large * 2
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: false
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
StyledRect {
|
||||
|
|
@ -30,29 +34,56 @@ ColumnLayout {
|
|||
|
||||
anchors.centerIn: parent
|
||||
text: ">"
|
||||
font.pointSize: root.width > 400 ? Appearance.font.size.larger : Appearance.font.size.normal
|
||||
color: Colours.palette.m3onPrimary
|
||||
}
|
||||
}
|
||||
|
||||
MonoText {
|
||||
Layout.fillWidth: true
|
||||
text: "caelestiafetch.sh"
|
||||
font.pointSize: root.width > 400 ? Appearance.font.size.larger : Appearance.font.size.normal
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
Loader {
|
||||
Layout.fillHeight: true
|
||||
asynchronous: true
|
||||
active: !iconLoader.active
|
||||
visible: active
|
||||
|
||||
sourceComponent: IconImage {
|
||||
source: Quickshell.iconPath(SysInfo.logo)
|
||||
implicitSize: height
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
spacing: Appearance.spacing.large * 2
|
||||
Layout.fillHeight: false
|
||||
spacing: height * 0.15
|
||||
|
||||
Loader {
|
||||
id: iconLoader
|
||||
|
||||
IconImage {
|
||||
Layout.fillHeight: true
|
||||
source: Quickshell.iconPath(SysInfo.logo)
|
||||
implicitSize: height
|
||||
|
||||
asynchronous: true
|
||||
active: root.width > 320
|
||||
visible: active
|
||||
|
||||
sourceComponent: IconImage {
|
||||
source: Quickshell.iconPath(SysInfo.logo)
|
||||
implicitSize: height
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.topMargin: Appearance.padding.normal
|
||||
Layout.bottomMargin: Appearance.padding.normal
|
||||
Layout.leftMargin: iconLoader.active ? 0 : width * 0.1
|
||||
spacing: Appearance.spacing.normal
|
||||
|
||||
FetchText {
|
||||
|
|
@ -73,26 +104,34 @@ ColumnLayout {
|
|||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Loader {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
spacing: Appearance.spacing.large
|
||||
|
||||
Repeater {
|
||||
model: 8
|
||||
asynchronous: true
|
||||
active: root.height > 250
|
||||
visible: active
|
||||
|
||||
StyledRect {
|
||||
required property int index
|
||||
sourceComponent: RowLayout {
|
||||
spacing: Appearance.spacing.large
|
||||
|
||||
implicitWidth: implicitHeight
|
||||
implicitHeight: Appearance.font.size.larger * 2
|
||||
color: Colours.palette[`term${index}`]
|
||||
radius: Appearance.rounding.small
|
||||
Repeater {
|
||||
model: Math.min(8, root.width / (Appearance.font.size.larger * 2 + Appearance.spacing.large))
|
||||
|
||||
StyledRect {
|
||||
required property int index
|
||||
|
||||
implicitWidth: implicitHeight
|
||||
implicitHeight: Appearance.font.size.larger * 2
|
||||
color: Colours.palette[`term${index}`]
|
||||
radius: Appearance.rounding.small
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component FetchText: MonoText {
|
||||
font.pointSize: Appearance.font.size.larger
|
||||
Layout.fillWidth: true
|
||||
font.pointSize: root.width > 400 ? Appearance.font.size.larger : Appearance.font.size.normal
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
pragma ComponentBehavior: Bound
|
||||
|
||||
import qs.components
|
||||
import qs.services
|
||||
import qs.config
|
||||
|
|
@ -8,6 +10,8 @@ import QtQuick.Layouts
|
|||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
required property int rootHeight
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.margins: Appearance.padding.large * 2
|
||||
|
|
@ -24,6 +28,7 @@ ColumnLayout {
|
|||
}
|
||||
|
||||
RowLayout {
|
||||
Layout.bottomMargin: forecastLoader.active ? 0 : Appearance.padding.large
|
||||
Layout.fillWidth: true
|
||||
spacing: Appearance.spacing.large
|
||||
|
||||
|
|
@ -94,74 +99,83 @@ ColumnLayout {
|
|||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
Loader {
|
||||
id: forecastLoader
|
||||
|
||||
Layout.topMargin: Appearance.spacing.smaller
|
||||
Layout.bottomMargin: Appearance.padding.large * 2
|
||||
Layout.fillWidth: true
|
||||
spacing: Appearance.spacing.large
|
||||
|
||||
Repeater {
|
||||
model: {
|
||||
const forecast = Weather.forecast;
|
||||
let count = root.width < 320 ? 3 : root.width < 400 ? 4 : 5;
|
||||
if (!forecast)
|
||||
return Array.from({
|
||||
length: count
|
||||
}, () => null);
|
||||
asynchronous: true
|
||||
active: root.rootHeight > 820
|
||||
visible: active
|
||||
|
||||
const hours = [];
|
||||
const hour = new Date().getHours();
|
||||
sourceComponent: RowLayout {
|
||||
spacing: Appearance.spacing.large
|
||||
|
||||
const today = forecast[0].hourly;
|
||||
const arr = [...today, ...forecast[1].hourly];
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
const time = parseInt(arr[i].time, 10) / 100;
|
||||
Repeater {
|
||||
model: {
|
||||
const forecast = Weather.forecast;
|
||||
let count = root.width < 320 ? 3 : root.width < 400 ? 4 : 5;
|
||||
if (!forecast)
|
||||
return Array.from({
|
||||
length: count
|
||||
}, () => null);
|
||||
|
||||
if (i > today.length ? time < hour : time > hour) {
|
||||
hours.push(arr[i]);
|
||||
count--;
|
||||
const hours = [];
|
||||
const hour = new Date().getHours();
|
||||
|
||||
const today = forecast[0].hourly;
|
||||
const arr = [...today, ...forecast[1].hourly];
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
const time = parseInt(arr[i].time, 10) / 100;
|
||||
|
||||
if (i > today.length ? time < hour : time > hour) {
|
||||
hours.push(arr[i]);
|
||||
count--;
|
||||
}
|
||||
|
||||
if (count === 0)
|
||||
break;
|
||||
}
|
||||
|
||||
if (count === 0)
|
||||
break;
|
||||
return hours;
|
||||
}
|
||||
|
||||
return hours;
|
||||
}
|
||||
ColumnLayout {
|
||||
id: forecastHour
|
||||
|
||||
ColumnLayout {
|
||||
id: forecastHour
|
||||
required property var modelData
|
||||
|
||||
required property var modelData
|
||||
|
||||
Layout.fillWidth: true
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
StyledText {
|
||||
Layout.fillWidth: true
|
||||
text: {
|
||||
if (!forecastHour.modelData)
|
||||
return "00 AM";
|
||||
const hour = parseInt(forecastHour.modelData.time, 10) / 100;
|
||||
return hour > 12 ? `${(hour - 12).toString().padStart(2, "0")} PM` : `${hour.toString().padStart(2, "0")} AM`;
|
||||
spacing: Appearance.spacing.small
|
||||
|
||||
StyledText {
|
||||
Layout.fillWidth: true
|
||||
text: {
|
||||
if (!forecastHour.modelData)
|
||||
return "00 AM";
|
||||
const hour = parseInt(forecastHour.modelData.time, 10) / 100;
|
||||
return hour > 12 ? `${(hour - 12).toString().padStart(2, "0")} PM` : `${hour.toString().padStart(2, "0")} AM`;
|
||||
}
|
||||
color: Colours.palette.m3outline
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
font.pointSize: Appearance.font.size.larger
|
||||
}
|
||||
color: Colours.palette.m3outline
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
font.pointSize: Appearance.font.size.larger
|
||||
}
|
||||
|
||||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: forecastHour.modelData ? Icons.getWeatherIcon(forecastHour.modelData.weatherCode) : "cloud_alert"
|
||||
font.pointSize: Appearance.font.size.extraLarge * 1.5
|
||||
font.weight: 500
|
||||
}
|
||||
MaterialIcon {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: forecastHour.modelData ? Icons.getWeatherIcon(forecastHour.modelData.weatherCode) : "cloud_alert"
|
||||
font.pointSize: Appearance.font.size.extraLarge * 1.5
|
||||
font.weight: 500
|
||||
}
|
||||
|
||||
StyledText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: Config.services.useFahrenheit ? `${forecastHour.modelData?.tempF ?? 0}°F` : `${forecastHour.modelData?.tempC ?? 0}°C`
|
||||
color: Colours.palette.m3secondary
|
||||
font.pointSize: Appearance.font.size.larger
|
||||
StyledText {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
text: Config.services.useFahrenheit ? `${forecastHour.modelData?.tempF ?? 0}°F` : `${forecastHour.modelData?.tempC ?? 0}°C`
|
||||
color: Colours.palette.m3secondary
|
||||
font.pointSize: Appearance.font.size.larger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue