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

Scaling: Replaced all Theme.uiScale by Theme.scale(Screen) so stuff scale accordingly to the Screen used by the Item/component

Browse source
This commit is contained in:
quadbyte 2025-08-07 14:09:18 -04:00
parent 3148dc62a0
commit cb74b6e5d5
50 changed files with 564 additions and 568 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.uiScale
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.uiScale
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.uiScale
property int textSize: 10 * Theme.scale(Screen)
property color textColor: Theme.textPrimary
// Notch properties

8
Components/CircularSpectrum.qml
View file

@ -4,11 +4,11 @@ import qs.Settings
Item {
id: root
property int innerRadius: 34 * Theme.uiScale
property int outerRadius: 48 * Theme.uiScale
property int innerRadius: 34 * Theme.scale(Screen)
property int outerRadius: 48 * Theme.scale(Screen)
property color fillColor: "#fff"
property color strokeColor: "#fff"
property int strokeWidth: 0 * Theme.uiScale
property int strokeWidth: 0 * Theme.scale(Screen)
property var values: []
property int usableOuter: 48
@ -24,7 +24,7 @@ Item {
Rectangle {
property real value: root.values[index]
property real angle: (index / root.values.length) * 360
width: Math.max(2 * Theme.uiScale, (root.innerRadius * 2 * Math.PI) / root.values.length - 4 * Theme.uiScale)
width: Math.max(2 * Theme.scale(Screen), (root.innerRadius * 2 * Math.PI) / root.values.length - 4 * Theme.scale(Screen))
height: Settings.settings.visualizerType === "diamond" ? value * 2 * (usableOuter - root.innerRadius) : value * (usableOuter - root.innerRadius)
radius: width / 2
color: root.fillColor

6
Components/Corners.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.uiScale // 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.uiScale
property int offsetY: -20 * Theme.uiScale
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.uiScale
radius: 8 * Theme.scale(Screen)
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.uiScale
font.pixelSize: 24 * Theme.scale(Screen)
color: root.hovering ? Theme.onAccent : Theme.textPrimary
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter

8
Components/PillIndicator.qml
View file

@ -13,8 +13,8 @@ Item {
property color iconCircleColor: Theme.accentPrimary
property color iconTextColor: Theme.backgroundPrimary
property color collapsedIconColor: Theme.textPrimary
property int pillHeight: 22 * Theme.uiScale
property int iconSize: 22 * Theme.uiScale
property int pillHeight: 22 * Theme.scale(Screen)
property int iconSize: 22 * Theme.scale(Screen)
property int pillPaddingHorizontal: 14
property bool autoHide: false
@ -47,7 +47,7 @@ Item {
id: textItem
anchors.centerIn: parent
text: revealPill.text
font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen)
font.family: Theme.fontFamily
font.weight: Font.Bold
color: textColor
@ -89,7 +89,7 @@ Item {
Text {
anchors.centerIn: parent
font.family: showPill ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeSmall * Theme.uiScale
font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen)
text: revealPill.icon
color: showPill ? iconTextColor : collapsedIconColor
}

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.uiScale
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.uiScale, tooltipText.implicitWidth + 24 * Theme.uiScale)
height = Math.max(50 * Theme.uiScale, tooltipText.implicitHeight + 16 * Theme.uiScale)
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.uiScale
radius: 20 * Theme.scale(Screen)
color: Theme.backgroundTertiary || "#222"
border.color: Theme.outline || "#444"
border.width: 1 * Theme.uiScale
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.uiScale
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.uiScale, tooltipText.implicitWidth + 24 * Theme.uiScale);
height = Math.max(minimumHeight * Theme.uiScale, tooltipText.implicitHeight + 16 * Theme.uiScale);
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.uiScale
implicitWidth: 56 * Theme.uiScale
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.uiScale
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.uiScale
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.uiScale
height: 2 * Theme.uiScale
radius: 1 * Theme.uiScale
width: 24 * Theme.scale(Screen)
height: 2 * Theme.scale(Screen)
radius: 1 * Theme.scale(Screen)
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.uiScale
spacing: 4 * Theme.scale(Screen)
Layout.fillWidth: true
Text {
text: label
font.pixelSize: 13 * Theme.uiScale
font.pixelSize: 13 * Theme.scale(Screen)
font.bold: true
color: Theme.textPrimary
}
Text {
text: description
font.pixelSize: 12 * Theme.uiScale
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.uiScale
height: 32 * Theme.uiScale
radius: 16 * Theme.uiScale
width: 52 * Theme.scale(Screen)
height: 32 * Theme.scale(Screen)
radius: 16 * Theme.scale(Screen)
color: value ? Theme.accentPrimary : Theme.surfaceVariant
border.color: value ? Theme.accentPrimary : Theme.outline
border.width: 2 * Theme.uiScale
border.width: 2 * Theme.scale(Screen)
Rectangle {
width: 28 * Theme.uiScale
height: 28 * Theme.uiScale
radius: 14 * Theme.uiScale
width: 28 * Theme.scale(Screen)
height: 28 * Theme.scale(Screen)
radius: 14 * Theme.scale(Screen)
color: Theme.surface
border.color: Theme.outline
border.width: 1 * Theme.uiScale
border.width: 1 * Theme.scale(Screen)
y: 2
x: value ? switcher.width - width - 2 : 2
@ -82,7 +82,7 @@ ColumnLayout {
}
Rectangle {
height: 8 * Theme.uiScale
height: 8 * Theme.scale(Screen)
}
}