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

11
Bar/Bar.qml
View file

@ -47,19 +47,20 @@ Scope {
id: barBackground
width: parent.width
height: 36 * Theme.scale(Screen)
height: 36 * Theme.scale(panel.screen)
color: Theme.backgroundPrimary
anchors.top: parent.top
anchors.left: parent.left
}
Row {
id: leftWidgetsRow
anchors.verticalCenter: barBackground.verticalCenter
anchors.left: barBackground.left
anchors.leftMargin: 18 * Theme.scale(Screen)
spacing: 12 * Theme.scale(Screen)
anchors.leftMargin: 18 * Theme.scale(panel.screen)
spacing: 12 * Theme.scale(panel.screen)
SystemInfo {
anchors.verticalCenter: parent.verticalCenter
@ -92,8 +93,8 @@ Scope {
anchors.verticalCenter: barBackground.verticalCenter
anchors.right: barBackground.right
anchors.rightMargin: 18 * Theme.scale(Screen)
spacing: 12 * Theme.scale(Screen)
anchors.rightMargin: 18 * Theme.scale(panel.screen)
spacing: 12 * Theme.scale(panel.screen)
SystemTray {
id: systemTrayModule

2
Bar/Modules/ActiveWindow.qml
View file

@ -128,7 +128,7 @@ PanelWindow {
Text {
id: activeWindowTitle
text: ToplevelManager?.activeToplevel?.title && ToplevelManager?.activeToplevel?.title.length > 60 ? ToplevelManager?.activeToplevel?.title.substring(0, 60) + "..." : ToplevelManager?.activeToplevel?.title || ""
font.pixelSize: 12 * Theme.scale(Screen)
font.pixelSize: 12 * Theme.scale(screen)
color: Theme.textSecondary
anchors.left: icon.right
anchors.leftMargin: Settings.settings.showActiveWindowIcon ? 4 : 6

14
Bar/Modules/Applauncher.qml
View file

@ -532,7 +532,7 @@ PanelWithOverlay {
Text {
text: "search"
font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeHeader * Theme.scale(Screen)
font.pixelSize: Theme.fontSizeHeader * Theme.scale(screen)
color: searchField.activeFocus ? Theme.accentPrimary : Theme.textSecondary
verticalAlignment: Text.AlignVCenter
Layout.alignment: Qt.AlignVCenter
@ -545,7 +545,7 @@ PanelWithOverlay {
placeholderTextColor: Theme.textSecondary
background: null
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeBody * Theme.scale(Screen)
font.pixelSize: Theme.fontSizeBody * Theme.scale(screen)
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
onTextChanged: root.updateFilter()
@ -689,7 +689,7 @@ PanelWithOverlay {
visible: !modelData.isCalculator && !modelData.isClipboard && !modelData.isCommand && !parent.iconLoaded && modelData.type !== 'image'
text: "broken_image"
font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeHeader * Theme.scale(Screen)
font.pixelSize: Theme.fontSizeHeader * Theme.scale(screen)
color: Theme.accentPrimary
}
}
@ -702,7 +702,7 @@ PanelWithOverlay {
text: modelData.name
color: (hovered || isSelected) ? Theme.onAccent : (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textPrimary)
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen)
font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen)
font.bold: hovered || isSelected
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
@ -716,7 +716,7 @@ PanelWithOverlay {
(modelData.comment || modelData.genericName || "No description available")
color: (hovered || isSelected) ? Theme.onAccent : (appLauncherPanel.isPinned(modelData) ? Theme.textSecondary : Theme.textSecondary)
font.family: Theme.fontFamily
font.pixelSize: Theme.fontSizeCaption * Theme.scale(Screen)
font.pixelSize: Theme.fontSizeCaption * Theme.scale(screen)
font.italic: !(modelData.comment || modelData.genericName)
opacity: modelData.isClipboard ? 0.8 : modelData.isCommand ? 0.9 : ((modelData.comment || modelData.genericName) ? 1.0 : 0.6)
elide: Text.ElideRight
@ -734,7 +734,7 @@ PanelWithOverlay {
Text {
text: modelData.isCalculator ? "content_copy" : "chevron_right"
font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeBody * Theme.scale(Screen)
font.pixelSize: Theme.fontSizeBody * Theme.scale(screen)
color: (hovered || isSelected)
? Theme.onAccent
: (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textSecondary)
@ -818,7 +818,7 @@ PanelWithOverlay {
anchors.centerIn: parent
text: "star"
font.family: "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen)
font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen)
color: (parent.MouseArea.containsMouse || hovered || isSelected)
? Theme.onAccent
: (appLauncherPanel.isPinned(modelData) ? Theme.textPrimary : Theme.textDisabled)

20
Bar/Modules/AudioDeviceSelector.qml
View file

@ -155,7 +155,7 @@ PanelWithOverlay {
Text {
text: "volume_up"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.scale(Screen)
font.pixelSize: 16 * Theme.scale(screen)
color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
Layout.alignment: Qt.AlignVCenter
}
@ -168,7 +168,7 @@ PanelWithOverlay {
Text {
text: modelData.nickname || modelData.description || modelData.name
font.bold: true
font.pixelSize: 12 * Theme.scale(Screen)
font.pixelSize: 12 * Theme.scale(screen)
color: (Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
elide: Text.ElideRight
maximumLineCount: 1
@ -177,7 +177,7 @@ PanelWithOverlay {
Text {
text: modelData.description !== modelData.nickname ? modelData.description : ""
font.pixelSize: 10 * Theme.scale(Screen)
font.pixelSize: 10 * Theme.scale(screen)
color: Theme.textSecondary
elide: Text.ElideRight
maximumLineCount: 1
@ -200,7 +200,7 @@ PanelWithOverlay {
anchors.centerIn: parent
text: "Set"
color: Theme.onAccent
font.pixelSize: 10 * Theme.scale(Screen)
font.pixelSize: 10 * Theme.scale(screen)
font.bold: true
}
@ -216,7 +216,7 @@ PanelWithOverlay {
text: "(Current)"
visible: Pipewire.defaultAudioSink && Pipewire.defaultAudioSink.id === modelData.id
color: Theme.accentPrimary
font.pixelSize: 10 * Theme.scale(Screen)
font.pixelSize: 10 * Theme.scale(screen)
Layout.alignment: Qt.AlignVCenter
}
@ -267,7 +267,7 @@ PanelWithOverlay {
Text {
text: "mic"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.scale(Screen)
font.pixelSize: 16 * Theme.scale(screen)
color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
Layout.alignment: Qt.AlignVCenter
}
@ -280,7 +280,7 @@ PanelWithOverlay {
Text {
text: modelData.nickname || modelData.description || modelData.name
font.bold: true
font.pixelSize: 12 * Theme.scale(Screen)
font.pixelSize: 12 * Theme.scale(screen)
color: (Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id) ? Theme.accentPrimary : Theme.textPrimary
elide: Text.ElideRight
maximumLineCount: 1
@ -289,7 +289,7 @@ PanelWithOverlay {
Text {
text: modelData.description !== modelData.nickname ? modelData.description : ""
font.pixelSize: 10 * Theme.scale(Screen)
font.pixelSize: 10 * Theme.scale(screen)
color: Theme.textSecondary
elide: Text.ElideRight
maximumLineCount: 1
@ -312,7 +312,7 @@ PanelWithOverlay {
anchors.centerIn: parent
text: "Set"
color: Theme.onAccent
font.pixelSize: 10 * Theme.scale(Screen)
font.pixelSize: 10 * Theme.scale(screen)
font.bold: true
}
@ -328,7 +328,7 @@ PanelWithOverlay {
text: "(Current)"
visible: Pipewire.defaultAudioSource && Pipewire.defaultAudioSource.id === modelData.id
color: Theme.accentPrimary
font.pixelSize: 10 * Theme.scale(Screen)
font.pixelSize: 10 * Theme.scale(screen)
Layout.alignment: Qt.AlignVCenter
}

6
Bar/Modules/Calendar.qml
View file

@ -52,7 +52,7 @@ PanelWithOverlay {
text: calendar.title
color: Theme.textPrimary
opacity: 0.7
font.pixelSize: 13 * Theme.scale(Screen)
font.pixelSize: 13 * Theme.scale(screen)
font.family: Theme.fontFamily
font.bold: true
}
@ -78,7 +78,7 @@ PanelWithOverlay {
text: shortName
color: Theme.textPrimary
opacity: 0.8
font.pixelSize: 13 * Theme.scale(Screen)
font.pixelSize: 13 * Theme.scale(screen)
font.family: Theme.fontFamily
font.bold: true
horizontalAlignment: Text.AlignHCenter
@ -161,7 +161,7 @@ PanelWithOverlay {
text: model.day
color: model.today ? Theme.onAccent : Theme.textPrimary
opacity: model.month === calendar.month ? (mouseArea2.containsMouse ? 1 : 0.7) : 0.3
font.pixelSize: 13 * Theme.scale(Screen)
font.pixelSize: 13 * Theme.scale(screen)
font.family: Theme.fontFamily
font.bold: model.today ? true : false
}

2
Bar/Modules/ClockWidget.qml
View file

@ -15,7 +15,7 @@ Rectangle {
text: Time.time
font.family: Theme.fontFamily
font.weight: Font.Bold
font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen)
font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen)
color: Theme.textPrimary
anchors.centerIn: parent
}

8
Bar/Modules/CustomTrayMenu.qml
View file

@ -128,7 +128,7 @@ PopupWindow {
color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Theme.textDisabled;
text: modelData?.text ?? "";
font.family: Theme.fontFamily;
font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen);
font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen);
verticalAlignment: Text.AlignVCenter;
elide: Text.ElideRight;
}
@ -145,7 +145,7 @@ PopupWindow {
// Material Symbols Outlined chevron right for submenu
text: modelData?.hasChildren ? "menu" : "";
font.family: "Material Symbols Outlined";
font.pixelSize: 18 * Theme.scale(Screen);
font.pixelSize: 18 * Theme.scale(screen);
verticalAlignment: Text.AlignVCenter;
visible: modelData?.hasChildren ?? false;
color: Theme.textPrimary;
@ -362,7 +362,7 @@ PopupWindow {
color: (modelData?.enabled ?? true) ? bg.hoverTextColor : Theme.textDisabled;
text: modelData?.text ?? "";
font.family: Theme.fontFamily;
font.pixelSize: Theme.fontSizeSmall * Theme.scale(Screen);
font.pixelSize: Theme.fontSizeSmall * Theme.scale(screen);
verticalAlignment: Text.AlignVCenter;
elide: Text.ElideRight;
}
@ -378,7 +378,7 @@ PopupWindow {
Text {
text: modelData?.hasChildren ? "\uE5CC" : "";
font.family: "Material Symbols Outlined";
font.pixelSize: 18 * Theme.scale(Screen);
font.pixelSize: 18 * Theme.scale(screen);
verticalAlignment: Text.AlignVCenter;
visible: modelData?.hasChildren ?? false;
color: Theme.textPrimary;

2
Bar/Modules/Media.qml
View file

@ -43,7 +43,7 @@ Item {
width: 20 * Theme.scale(Screen)
height: 20 * Theme.scale(Screen)
anchors.centerIn: parent
radius: 12 * Theme.scale(Screen) // circle
radius: 12 // circle
color: Qt.darker(Theme.surface, 1.1)
border.color: Qt.rgba(Theme.accentPrimary.r, Theme.accentPrimary.g, Theme.accentPrimary.b, 0.3)
border.width: 1

2
Bar/Modules/SettingsButton.qml
View file

@ -21,7 +21,7 @@ Item {
anchors.centerIn: parent
text: "settings"
font.family: "Material Symbols Outlined"
font.pixelSize: 16 * Theme.scale(Screen)
font.pixelSize: 16 * Theme.scale(screen)
color: mouseArea.containsMouse ? Theme.accentPrimary : Theme.textPrimary
}

2
Bar/Modules/SystemTray.qml
View file

@ -33,7 +33,7 @@ Row {
anchors.centerIn: parent
width: 16 * Theme.scale(Screen)
height: 16 * Theme.scale(Screen)
radius: 6 * Theme.scale(Screen)
radius: 6
color: "transparent"
clip: true

18
Bar/Modules/Workspace.qml
View file

@ -40,7 +40,7 @@ Item {
return total;
}
height: 36 * Theme.scale(Screen)
height: 36 * Theme.scale(screen)
Component.onCompleted: {
localWorkspaces.clear();
@ -115,14 +115,14 @@ Item {
Rectangle {
id: workspaceBackground
width: parent.width - 15 * Theme.scale(Screen)
height: 26 * Theme.scale(Screen)
width: parent.width - 15 * Theme.scale(screen)
height: 26 * Theme.scale(screen)
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
radius: 12 * Theme.scale(Screen)
radius: 12
color: Theme.surfaceVariant
border.color: Qt.rgba(Theme.textPrimary.r, Theme.textPrimary.g, Theme.textPrimary.b, 0.1)
border.width: 1 * Theme.scale(Screen)
border.width: 1 * Theme.scale(screen)
layer.enabled: true
layer.effect: MultiEffect {
shadowColor: "black"
@ -145,7 +145,7 @@ Item {
model: localWorkspaces
Item {
id: workspacePillContainer
height: 12 * Theme.scale(Screen)
height: 12 * Theme.scale(screen)
width: {
if (model.isFocused)
return 44;
@ -245,12 +245,12 @@ Item {
Rectangle {
id: pillBurst
anchors.centerIn: workspacePillContainer
width: workspacePillContainer.width + 18 * root.masterProgress * Theme.scale(Screen)
height: workspacePillContainer.height + 18 * root.masterProgress * Theme.scale(Screen)
width: workspacePillContainer.width + 18 * root.masterProgress * Theme.scale(screen)
height: workspacePillContainer.height + 18 * root.masterProgress * Theme.scale(screen)
radius: width / 2
color: "transparent"
border.color: root.effectColor
border.width: (2 + 6 * (1.0 - root.masterProgress)) * Theme.scale(Screen)
border.width: (2 + 6 * (1.0 - root.masterProgress)) * Theme.scale(screen)
opacity: root.effectsActive && model.isFocused ? (1.0 - root.masterProgress) * 0.7 : 0
visible: root.effectsActive && model.isFocused
z: 1