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:
quadbyte
parent
eda65a9948
commit
d3be5b760b
43 changed files with 532 additions and 538 deletions
|
|
@ -58,7 +58,7 @@ Item {
|
|||
Text {
|
||||
text: batteryIcon()
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 28 * Theme.scale(Screen)
|
||||
font.pixelSize: 28 * Theme.scale(screen)
|
||||
color: charging ? Theme.accentPrimary : Theme.textSecondary
|
||||
verticalAlignment: Text.AlignVBottom
|
||||
}
|
||||
|
|
@ -66,7 +66,7 @@ Item {
|
|||
Text {
|
||||
text: Math.round(percent) + "%"
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 18 * Theme.scale(Screen)
|
||||
font.pixelSize: 18 * Theme.scale(screen)
|
||||
color: Theme.textSecondary
|
||||
verticalAlignment: Text.AlignVBottom
|
||||
}
|
||||
|
|
|
|||
|
|
@ -152,21 +152,21 @@ WlSessionLock {
|
|||
ColumnLayout {
|
||||
anchors.centerIn: parent
|
||||
spacing: 30
|
||||
width: Math.min(parent.width * 0.8, 400 * Theme.scale(Screen))
|
||||
width: Math.min(parent.width * 0.8, 400 * Theme.scale(screen))
|
||||
|
||||
Rectangle {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
width: 80 * Theme.scale(Screen)
|
||||
height: 80 * Theme.scale(Screen)
|
||||
radius: 40 * Theme.scale(Screen)
|
||||
width: 80 * Theme.scale(screen)
|
||||
height: 80 * Theme.scale(screen)
|
||||
radius: 40
|
||||
color: Theme.accentPrimary
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: "transparent"
|
||||
radius: 40 * Theme.scale(Screen)
|
||||
radius: 40
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 3 * Theme.scale(Screen)
|
||||
border.width: 3 * Theme.scale(screen)
|
||||
z: 2
|
||||
}
|
||||
|
||||
|
|
@ -183,28 +183,28 @@ WlSessionLock {
|
|||
Layout.alignment: Qt.AlignHCenter
|
||||
text: Quickshell.env("USER")
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 24 * Theme.scale(Screen)
|
||||
font.pixelSize: 24 * Theme.scale(screen)
|
||||
font.weight: Font.Medium
|
||||
color: Theme.textPrimary
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillWidth: true
|
||||
height: 50 * Theme.scale(Screen)
|
||||
radius: 25 * Theme.scale(Screen)
|
||||
height: 50 * Theme.scale(screen)
|
||||
radius: 25
|
||||
color: Theme.surface
|
||||
opacity: passwordInput.activeFocus ? 0.8 : 0.3
|
||||
border.color: passwordInput.activeFocus ? Theme.accentPrimary : Theme.outline
|
||||
border.width: 2 * Theme.scale(Screen)
|
||||
border.width: 2 * Theme.scale(screen)
|
||||
|
||||
TextInput {
|
||||
id: passwordInput
|
||||
anchors.fill: parent
|
||||
anchors.margins: 15 * Theme.scale(Screen)
|
||||
anchors.margins: 15 * Theme.scale(screen)
|
||||
verticalAlignment: TextInput.AlignVCenter
|
||||
horizontalAlignment: TextInput.AlignHCenter
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 16 * Theme.scale(Screen)
|
||||
font.pixelSize: 16 * Theme.scale(screen)
|
||||
color: Theme.textPrimary
|
||||
echoMode: TextInput.Password
|
||||
passwordCharacter: "●"
|
||||
|
|
@ -218,7 +218,7 @@ WlSessionLock {
|
|||
text: "Enter password..."
|
||||
color: Theme.textSecondary
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 16 * Theme.scale(Screen)
|
||||
font.pixelSize: 16 * Theme.scale(screen)
|
||||
visible: !passwordInput.text && !passwordInput.activeFocus
|
||||
}
|
||||
|
||||
|
|
@ -238,9 +238,9 @@ WlSessionLock {
|
|||
id: errorMessageRect
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
width: parent.width * 0.8
|
||||
height: 44 * Theme.scale(Screen)
|
||||
height: 44 * Theme.scale(screen)
|
||||
color: Theme.overlay
|
||||
radius: 20 * Theme.scale(Screen)
|
||||
radius: 18
|
||||
visible: lock.errorMessage !== ""
|
||||
|
||||
Text {
|
||||
|
|
@ -248,7 +248,7 @@ WlSessionLock {
|
|||
text: lock.errorMessage
|
||||
color: Theme.error
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 14 * Theme.scale(Screen)
|
||||
font.pixelSize: 14 * Theme.scale(screen)
|
||||
opacity: 1
|
||||
visible: lock.errorMessage !== ""
|
||||
}
|
||||
|
|
@ -256,13 +256,13 @@ WlSessionLock {
|
|||
|
||||
Rectangle {
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
width: 120 * Theme.scale(Screen)
|
||||
height: 44 * Theme.scale(Screen)
|
||||
radius: 20 * Theme.scale(Screen)
|
||||
width: 120 * Theme.scale(screen)
|
||||
height: 44 * Theme.scale(screen)
|
||||
radius: 18
|
||||
opacity: unlockButtonArea.containsMouse ? 0.8 : 0.5
|
||||
color: unlockButtonArea.containsMouse ? Theme.accentPrimary : Theme.surface
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 2 * Theme.scale(Screen)
|
||||
border.width: 2 * Theme.scale(screen)
|
||||
enabled: !lock.authenticating
|
||||
|
||||
Text {
|
||||
|
|
@ -270,7 +270,7 @@ WlSessionLock {
|
|||
anchors.centerIn: parent
|
||||
text: lock.authenticating ? "..." : "Unlock"
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 16 * Theme.scale(Screen)
|
||||
font.pixelSize: 16 * Theme.scale(screen)
|
||||
font.bold: true
|
||||
color: unlockButtonArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
|
||||
}
|
||||
|
|
@ -295,12 +295,12 @@ WlSessionLock {
|
|||
}
|
||||
|
||||
Rectangle {
|
||||
width: infoColumn.width + 32 * Theme.scale(Screen)
|
||||
height: infoColumn.height + 8 * Theme.scale(Screen)
|
||||
width: infoColumn.width + 32 * Theme.scale(screen)
|
||||
height: infoColumn.height + 8 * Theme.scale(screen)
|
||||
color: (Theme.backgroundPrimary !== undefined && Theme.backgroundPrimary !== null) ? Theme.backgroundPrimary : "#222"
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
bottomLeftRadius: 20 * Theme.scale(Screen)
|
||||
bottomRightRadius: 20 * Theme.scale(Screen)
|
||||
bottomLeftRadius: 20 * Theme.scale(screen)
|
||||
bottomRightRadius: 20 * Theme.scale(screen)
|
||||
|
||||
ColumnLayout {
|
||||
id: infoColumn
|
||||
|
|
@ -314,7 +314,7 @@ WlSessionLock {
|
|||
id: timeText
|
||||
text: Qt.formatDateTime(new Date(), "HH:mm")
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 48 * Theme.scale(Screen)
|
||||
font.pixelSize: 48 * Theme.scale(screen)
|
||||
font.bold: true
|
||||
color: Theme.textPrimary
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
|
|
@ -324,7 +324,7 @@ WlSessionLock {
|
|||
id: dateText
|
||||
text: Qt.formatDateTime(new Date(), "dddd, MMMM d")
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 16 * Theme.scale(Screen)
|
||||
font.pixelSize: 16 * Theme.scale(screen)
|
||||
color: Theme.textSecondary
|
||||
opacity: 0.8
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
|
|
@ -340,7 +340,7 @@ WlSessionLock {
|
|||
Text {
|
||||
text: 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)
|
||||
color: Theme.accentPrimary
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
|
@ -348,7 +348,7 @@ WlSessionLock {
|
|||
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: 18 * Theme.scale(Screen)
|
||||
font.pixelSize: 18 * Theme.scale(screen)
|
||||
color: Theme.textSecondary
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
}
|
||||
|
|
@ -359,7 +359,7 @@ WlSessionLock {
|
|||
color: Theme.error
|
||||
visible: weatherError !== ""
|
||||
font.family: Theme.fontFamily
|
||||
font.pixelSize: 10 * Theme.scale(Screen)
|
||||
font.pixelSize: 10 * Theme.scale(screen)
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
}
|
||||
|
|
@ -401,12 +401,12 @@ WlSessionLock {
|
|||
spacing: 12
|
||||
|
||||
Rectangle {
|
||||
width: 48 * Theme.scale(Screen)
|
||||
height: 48 * Theme.scale(Screen)
|
||||
radius: 24 * Theme.scale(Screen)
|
||||
width: 48 * Theme.scale(screen)
|
||||
height: 48 * Theme.scale(screen)
|
||||
radius: 24
|
||||
color: shutdownArea.containsMouse ? Theme.error : "transparent"
|
||||
border.color: Theme.error
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
|
||||
MouseArea {
|
||||
id: shutdownArea
|
||||
|
|
@ -421,18 +421,18 @@ WlSessionLock {
|
|||
anchors.centerIn: parent
|
||||
text: "power_settings_new"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 24 * Theme.scale(Screen)
|
||||
font.pixelSize: 24 * Theme.scale(screen)
|
||||
color: shutdownArea.containsMouse ? Theme.onAccent : Theme.error
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 48 * Theme.scale(Screen)
|
||||
height: 48 * Theme.scale(Screen)
|
||||
radius: 24 * Theme.scale(Screen)
|
||||
width: 48 * Theme.scale(screen)
|
||||
height: 48 * Theme.scale(screen)
|
||||
radius: 24
|
||||
color: rebootArea.containsMouse ? Theme.accentPrimary : "transparent"
|
||||
border.color: Theme.accentPrimary
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
|
||||
MouseArea {
|
||||
id: rebootArea
|
||||
|
|
@ -447,18 +447,18 @@ WlSessionLock {
|
|||
anchors.centerIn: parent
|
||||
text: "refresh"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 24 * Theme.scale(Screen)
|
||||
font.pixelSize: 24 * Theme.scale(screen)
|
||||
color: rebootArea.containsMouse ? Theme.onAccent : Theme.accentPrimary
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 48 * Theme.scale(Screen)
|
||||
height: 48 * Theme.scale(Screen)
|
||||
radius: 24 * Theme.scale(Screen)
|
||||
width: 48 * Theme.scale(screen)
|
||||
height: 48 * Theme.scale(screen)
|
||||
radius: 24
|
||||
color: logoutArea.containsMouse ? Theme.accentSecondary : "transparent"
|
||||
border.color: Theme.accentSecondary
|
||||
border.width: 1 * Theme.scale(Screen)
|
||||
border.width: 1 * Theme.scale(screen)
|
||||
|
||||
MouseArea {
|
||||
id: logoutArea
|
||||
|
|
@ -473,7 +473,7 @@ WlSessionLock {
|
|||
anchors.centerIn: parent
|
||||
text: "exit_to_app"
|
||||
font.family: "Material Symbols Outlined"
|
||||
font.pixelSize: 24 * Theme.scale(Screen)
|
||||
font.pixelSize: 24 * Theme.scale(screen)
|
||||
color: logoutArea.containsMouse ? Theme.onAccent : Theme.accentSecondary
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue