Scaling: many improvements and fixes
- radius are not pixels, they should not be scaled - use "screen" instead of "Screen" which helps a lot in some places
This commit is contained in:
parent
eda65a9948
commit
d3be5b760b
43 changed files with 532 additions and 538 deletions
|
|
@ -6,10 +6,7 @@ import "../../Helpers/Weather.js" as WeatherHelper
|
|||
|
||||
Rectangle {
|
||||
id: weatherRoot
|
||||
width: 440 * Theme.scale(Screen)
|
||||
height: 180 * Theme.scale(Screen)
|
||||
color: "transparent"
|
||||
anchors.horizontalCenterOffset: -2
|
||||
|
||||
property string city: Settings.settings.weatherCity !== undefined ? Settings.settings.weatherCity : ""
|
||||
property var weatherData: null
|
||||
|
|
@ -83,29 +80,29 @@ Rectangle {
|
|||
id: card
|
||||
anchors.fill: parent
|
||||
color: Theme.surface
|
||||
radius: 18 * Theme.scale(Screen)
|
||||
radius: 18
|
||||
|
||||
ColumnLayout {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 18 * Theme.scale(Screen)
|
||||
spacing: 12 * Theme.scale(Screen)
|
||||
anchors.margins: 18 * Theme.scale(screen)
|
||||
spacing: 12 * Theme.scale(screen)
|
||||
|
||||
|
||||
RowLayout {
|
||||
spacing: 12 * Theme.scale(Screen)
|
||||
spacing: 12 * Theme.scale(screen)
|
||||
Layout.fillWidth: true
|
||||
|
||||
|
||||
RowLayout {
|
||||
spacing: 12 * Theme.scale(Screen)
|
||||
Layout.preferredWidth: 140 * Theme.scale(Screen)
|
||||
spacing: 12 * Theme.scale(screen)
|
||||
Layout.preferredWidth: 140 * Theme.scale(screen)
|
||||
|
||||
|
||||
Text {
|
||||
id: weatherIcon
|
||||
text: isLoading ? "sync" : (weatherData && weatherData.current_weather ? materialSymbolForCode(weatherData.current_weather.weathercode) : "cloud")
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 28 * Theme.scale(Screen)
|
||||
font.pixelSize: 28 * Theme.scale(screen)
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
color: isLoading ? Theme.accentPrimary : Theme.accentPrimary
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
|
|
@ -121,28 +118,28 @@ Rectangle {
|
|||
}
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 2 * Theme.scale(Screen)
|
||||
spacing: 2 * Theme.scale(screen)
|
||||
RowLayout {
|
||||
spacing: 4 * Theme.scale(Screen)
|
||||
spacing: 4 * Theme.scale(screen)
|
||||
Text {
|
||||
text: city
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 14 * Theme.scale(Screen)
|
||||
font.pixelSize: 14 * Theme.scale(screen)
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
Text {
|
||||
text: weatherData && weatherData.timezone_abbreviation ? `(${weatherData.timezone_abbreviation})` : ""
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 10 * Theme.scale(Screen)
|
||||
font.pixelSize: 10 * Theme.scale(screen)
|
||||
color: Theme.textSecondary
|
||||
leftPadding: 2 * Theme.scale(Screen)
|
||||
leftPadding: 2 * Theme.scale(screen)
|
||||
}
|
||||
}
|
||||
Text {
|
||||
text: weatherData && weatherData.current_weather ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.current_weather.temperature * 9/5 + 32)}°F` : `${Math.round(weatherData.current_weather.temperature)}°C`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--°F" : "--°C")
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 24 * Theme.scale(Screen)
|
||||
font.pixelSize: 24 * Theme.scale(screen)
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
|
|
@ -157,16 +154,16 @@ Rectangle {
|
|||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 1 * Theme.scale(Screen)
|
||||
height: 1 * Theme.scale(screen)
|
||||
color: Qt.rgba(Theme.textSecondary.g, Theme.textSecondary.g, Theme.textSecondary.b, 0.12)
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 2 * Theme.scale(Screen)
|
||||
Layout.bottomMargin: 2 * Theme.scale(Screen)
|
||||
Layout.topMargin: 2 * Theme.scale(screen)
|
||||
Layout.bottomMargin: 2 * Theme.scale(screen)
|
||||
}
|
||||
|
||||
|
||||
RowLayout {
|
||||
spacing: 12 * Theme.scale(Screen)
|
||||
spacing: 12 * Theme.scale(screen)
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
visible: weatherData && weatherData.daily && weatherData.daily.time
|
||||
|
|
@ -174,13 +171,13 @@ Rectangle {
|
|||
Repeater {
|
||||
model: weatherData && weatherData.daily && weatherData.daily.time ? 5 : 0
|
||||
delegate: ColumnLayout {
|
||||
spacing: 2 * Theme.scale(Screen)
|
||||
spacing: 2 * Theme.scale(screen)
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Text {
|
||||
|
||||
text: Qt.formatDateTime(new Date(weatherData.daily.time[index]), "ddd")
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 12 * Theme.scale(Screen)
|
||||
font.pixelSize: 12 * Theme.scale(screen)
|
||||
color: Theme.textSecondary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
|
@ -189,7 +186,7 @@ Rectangle {
|
|||
|
||||
text: materialSymbolForCode(weatherData.daily.weathercode[index])
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 22 * Theme.scale(Screen)
|
||||
font.pixelSize: 22 * Theme.scale(screen)
|
||||
color: Theme.accentPrimary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
|
@ -198,7 +195,7 @@ Rectangle {
|
|||
|
||||
text: weatherData && weatherData.daily ? ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? `${Math.round(weatherData.daily.temperature_2m_max[index] * 9/5 + 32)}° / ${Math.round(weatherData.daily.temperature_2m_min[index] * 9/5 + 32)}°` : `${Math.round(weatherData.daily.temperature_2m_max[index])}° / ${Math.round(weatherData.daily.temperature_2m_min[index])}°`) : ((Settings.settings.useFahrenheit !== undefined ? Settings.settings.useFahrenheit : false) ? "--° / --°" : "--° / --°")
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 12 * Theme.scale(Screen)
|
||||
font.pixelSize: 12 * Theme.scale(screen)
|
||||
color: Theme.textPrimary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
|
@ -213,7 +210,7 @@ Rectangle {
|
|||
color: Theme.error
|
||||
visible: errorString !== ""
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 10 * Theme.scale(Screen)
|
||||
font.pixelSize: 10 * Theme.scale(screen)
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue