never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Scaling: many improvements and fixes

Browse source 
- 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 2025-08-07 23:18:05 -04:00
parent eda65a9948
commit d3be5b760b
43 changed files with 532 additions and 538 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Components/Avatar.qml
View file

@ -43,7 +43,7 @@ Item {
anchors.centerIn: parent
text: "person"
font.family: "Material Symbols Outlined"
font.pixelSize: 24 * Theme.scale(Screen)
font.pixelSize: 24 * Theme.scale(screen)
color: Theme.onAccent
visible: Settings.settings.profileImage === undefined || Settings.settings.profileImage === ""
z: 0

4
Components/CircularProgressBar.qml
View file

@ -9,11 +9,11 @@ Rectangle {
property int size: 80
property color backgroundColor: Theme.surfaceVariant
property color progressColor: Theme.accentPrimary
property int strokeWidth: 6 * Theme.scale(Screen)
property int strokeWidth: 6 * Theme.scale(screen)
property bool showText: true
property string units: "%"
property string text: Math.round(progress * 100) + units
property int textSize: 10 * Theme.scale(Screen)
property int textSize: 10 * Theme.scale(screen)
property color textColor: Theme.textPrimary
// Notch properties

6
Components/Corner.qml
View file

@ -6,11 +6,11 @@ Shape {
id: root
property string position: "topleft" // Corner position: topleft/topright/bottomleft/bottomright
property real size: 1.0 * Theme.scale(Screen) // Scale multiplier for entire corner
property real size: 1.0 * Theme.scale(screen) // Scale multiplier for entire corner
property int concaveWidth: 100 * size
property int concaveHeight: 60 * size
property int offsetX: -20 * Theme.scale(Screen)
property int offsetY: -20 * Theme.scale(Screen)
property int offsetX: -20 * Theme.scale(screen)
property int offsetY: -20 * Theme.scale(screen)
property color fillColor: Theme.accentPrimary
property int arcRadius: 20 * size

4
Components/IconButton.qml
View file

@ -19,7 +19,7 @@ MouseArea {
Rectangle {
anchors.fill: parent
radius: 8 * Theme.scale(Screen)
radius: 8
color: root.hovering ? Theme.accentPrimary : "transparent"
}
Text {
@ -27,7 +27,7 @@ MouseArea {
anchors.centerIn: parent
text: root.icon
font.family: "Material Symbols Outlined"
font.pixelSize: 24 * Theme.scale(Screen)
font.pixelSize: 24 * Theme.scale(screen)
color: root.hovering ? Theme.onAccent : Theme.textPrimary
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter

2
Components/Spinner.qml
View file

@ -7,7 +7,7 @@ Item {
property bool running: false
property color color: "white"
property int size: 16
property int strokeWidth: 2 * Theme.scale(Screen)
property int strokeWidth: 2 * Theme.scale(screen)
property int duration: 1000
implicitWidth: size

14
Components/StyledTooltip.qml
View file

@ -33,8 +33,8 @@ Window {
}
function _showNow() {
width = Math.max(50 * Theme.scale(Screen), tooltipText.implicitWidth + 24 * Theme.scale(Screen))
height = Math.max(50 * Theme.scale(Screen), tooltipText.implicitHeight + 16 * Theme.scale(Screen))
width = Math.max(50 * Theme.scale(screen), tooltipText.implicitWidth + 24 * Theme.scale(screen))
height = Math.max(50 * Theme.scale(screen), tooltipText.implicitHeight + 16 * Theme.scale(screen))
if (!targetItem) return;
@ -75,10 +75,10 @@ Window {
Rectangle {
anchors.fill: parent
radius: 20 * Theme.scale(Screen)
radius: 18
color: Theme.backgroundTertiary || "#222"
border.color: Theme.outline || "#444"
border.width: 1 * Theme.scale(Screen)
border.width: 1 * Theme.scale(screen)
opacity: 0.97
z: 1
}
@ -88,7 +88,7 @@ Window {
text: tooltipWindow.text
color: Theme.textPrimary
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen)
font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen)
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
@ -105,7 +105,7 @@ Window {
}
onTextChanged: {
width = Math.max(minimumWidth * Theme.scale(Screen), tooltipText.implicitWidth + 24 * Theme.scale(Screen));
height = Math.max(minimumHeight * Theme.scale(Screen), tooltipText.implicitHeight + 16 * Theme.scale(Screen));
width = Math.max(minimumWidth * Theme.scale(screen), tooltipText.implicitWidth + 24 * Theme.scale(screen));
height = Math.max(minimumHeight * Theme.scale(screen), tooltipText.implicitHeight + 16 * Theme.scale(screen));
}
}

14
Components/Tabs.qml
View file

@ -17,8 +17,8 @@ Item {
model: root.tabsModel
delegate: Rectangle {
id: tabWrapper
implicitHeight: tab.height * Theme.scale(Screen)
implicitWidth: 56 * Theme.scale(Screen)
implicitHeight: tab.height * Theme.scale(screen)
implicitWidth: 56 * Theme.scale(screen)
color: "transparent"
property bool hovered: false
@ -48,7 +48,7 @@ Item {
Text {
text: modelData.icon
font.family: "Material Symbols Outlined"
font.pixelSize: 22 * Theme.scale(Screen)
font.pixelSize: 22 * Theme.scale(screen)
color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : tabWrapper.hovered ? (Theme ? Theme.accentPrimary : "#7C3AED") : (Theme ? Theme.textSecondary : "#444")
Layout.alignment: Qt.AlignCenter
}
@ -56,7 +56,7 @@ Item {
// Label
Text {
text: modelData.label
font.pixelSize: 12 * Theme.scale(Screen)
font.pixelSize: 12 * Theme.scale(screen)
font.bold: index === root.currentIndex
color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : tabWrapper.hovered ? (Theme ? Theme.accentPrimary : "#7C3AED") : (Theme ? Theme.textSecondary : "#444")
Layout.alignment: Qt.AlignCenter
@ -64,9 +64,9 @@ Item {
// Underline for active tab
Rectangle {
width: 24 * Theme.scale(Screen)
height: 2 * Theme.scale(Screen)
radius: 1 * Theme.scale(Screen)
width: 24 * Theme.scale(screen)
height: 2 * Theme.scale(screen)
radius: 1
color: index === root.currentIndex ? (Theme ? Theme.accentPrimary : "#7C3AED") : "transparent"
Layout.alignment: Qt.AlignCenter
}

24
Components/ToggleOption.qml
View file

@ -19,19 +19,19 @@ ColumnLayout {
Layout.fillWidth: true
ColumnLayout {
spacing: 4 * Theme.scale(Screen)
spacing: 4 * Theme.scale(screen)
Layout.fillWidth: true
Text {
text: label
font.pixelSize: 13 * Theme.scale(Screen)
font.pixelSize: 13 * Theme.scale(screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: description
font.pixelSize: 12 * Theme.scale(Screen)
font.pixelSize: 12 * Theme.scale(screen)
color: Theme.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
@ -42,20 +42,20 @@ ColumnLayout {
Rectangle {
id: switcher
width: 52 * Theme.scale(Screen)
height: 32 * Theme.scale(Screen)
radius: 16 * Theme.scale(Screen)
width: 52 * Theme.scale(screen)
height: 32 * Theme.scale(screen)
radius: 16
color: value ? Theme.accentPrimary : Theme.surfaceVariant
border.color: value ? Theme.accentPrimary : Theme.outline
border.width: 2 * Theme.scale(Screen)
border.width: 2 * Theme.scale(screen)
Rectangle {
width: 28 * Theme.scale(Screen)
height: 28 * Theme.scale(Screen)
radius: 14 * Theme.scale(Screen)
width: 28 * Theme.scale(screen)
height: 28 * Theme.scale(screen)
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1 * Theme.scale(Screen)
border.width: 1 * Theme.scale(screen)
y: 2
x: value ? switcher.width - width - 2 : 2
@ -82,7 +82,7 @@ ColumnLayout {
}
Rectangle {
height: 8 * Theme.scale(Screen)
height: 8 * Theme.scale(screen)
}
}