proper image scaling with screen scaling (#3036, #3037)

dots/.config/quickshell/ii/modules/common/widgets/CliphistImage.qml

@@ -88,8 +88,6 @@ Rectangle {
 
         width: root.imageWidth * root.scale
         height: root.imageHeight * root.scale
-        sourceSize.width: width
-        sourceSize.height: height
     }
 
     Loader {

dots/.config/quickshell/ii/modules/common/widgets/DirectoryIcon.qml

@@ -7,7 +7,7 @@ import qs.modules.common.functions
 // From https://github.com/caelestia-dots/shell with modifications.
 // License: GPLv3
 
-Image {
+StyledImage {
     id: root
     required property var fileModelData
     asynchronous: true

dots/.config/quickshell/ii/modules/common/widgets/NotificationAppIcon.qml

@@ -30,7 +30,7 @@ MaterialShape { // App icon
     color: isUrgent ? Appearance.colors.colPrimaryContainer : Appearance.colors.colSecondaryContainer
     Loader {
         id: materialSymbolLoader
-        active: root.appIcon == ""
+        active: root.appIcon == "" && root.image == ""
         anchors.fill: parent
         sourceComponent: MaterialSymbol {
             text: {
@@ -63,7 +63,7 @@ MaterialShape { // App icon
         anchors.fill: parent
         sourceComponent: Item {
             anchors.fill: parent
-            Image {
+            StyledImage {
                 id: notifImage
                 anchors.fill: parent
                 readonly property int size: parent.width
@@ -74,11 +74,6 @@ MaterialShape { // App icon
                 antialiasing: true
                 asynchronous: true
 
-                width: size
-                height: size
-                sourceSize.width: size
-                sourceSize.height: size
-
                 layer.enabled: true
                 layer.effect: OpacityMask {
                     maskSource: Rectangle {

dots/.config/quickshell/ii/modules/common/widgets/StyledImage.qml

@@ -1,4 +1,5 @@
 import QtQuick
+import Quickshell
 import qs.services
 import qs.modules.common
 import qs.modules.common.widgets
@@ -22,4 +23,9 @@ Image {
             currentFallbackIndex += 1;
         }
     }
+
+    sourceSize: {
+        const dpr = (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1;
+        return Qt.size(width * dpr, height * dpr);
+    }
 }

dots/.config/quickshell/ii/modules/ii/background/Background.qml

@@ -194,10 +194,6 @@ Variants {
                         easing.type: Easing.OutCubic
                     }
                 }
-                sourceSize {
-                    width: bgRoot.scaledWallpaperWidth
-                    height: bgRoot.scaledWallpaperHeight
-                }
                 width: bgRoot.scaledWallpaperWidth
                 height: bgRoot.scaledWallpaperHeight
             }

dots/.config/quickshell/ii/modules/ii/mediaControls/PlayerControl.qml

@@ -113,12 +113,10 @@ Item { // Player instance
             }
         }
 
-        Image {
+        StyledImage {
             id: blurredArt
             anchors.fill: parent
             source: root.displayedArtFilePath
-            sourceSize.width: background.width
-            sourceSize.height: background.height
             fillMode: Image.PreserveAspectCrop
             cache: false
             antialiasing: true
@@ -179,8 +177,6 @@ Item { // Player instance
 
                     width: size
                     height: size
-                    sourceSize.width: size
-                    sourceSize.height: size
                 }
             }
 

dots/.config/quickshell/ii/modules/ii/overlay/floatingImage/FloatingImage.qml

@@ -1,5 +1,6 @@
 pragma ComponentBehavior: Bound
 import QtQuick
+import Quickshell
 import Qt5Compat.GraphicalEffects
 import qs.modules.common
 import qs.modules.common.functions
@@ -71,8 +72,10 @@ StyledOverlayWidget {
             anchors.centerIn: parent
             width: root.imageWidth * root.scaleFactor
             height: root.imageHeight * root.scaleFactor
-            sourceSize.width: width
-            sourceSize.height: height
+            sourceSize: {
+                const dpr = (QsWindow.window as QsWindow)?.devicePixelRatio ?? 1;
+                return Qt.size(width * dpr, height * dpr);
+            }
 
             playing: visible
             asynchronous: true

dots/.config/quickshell/ii/modules/ii/overview/OverviewWindow.qml

@@ -3,6 +3,7 @@ import qs
 import qs.services
 import qs.modules.common
 import qs.modules.common.functions
+import qs.modules.common.widgets
 import Qt5Compat.GraphicalEffects
 import QtQuick
 import QtQuick.Layouts
@@ -109,7 +110,7 @@ Item { // Window
             border.width : 1
         }
 
-        Image {
+        StyledImage {
             id: windowIcon
             property real baseSize: Math.min(root.targetWindowWidth, root.targetWindowHeight)
             anchors {
@@ -126,12 +127,11 @@ Item { // Window
                 // console.log("Final:", Math.min(targetWindowWidth, targetWindowHeight) * (root.compactMode ? root.iconToWindowRatioCompact : root.iconToWindowRatio) / root.monitorData.scale)
                 return baseSize * (root.compactMode ? root.iconToWindowRatioCompact : root.iconToWindowRatio);
             }
-            // mipmap: true
+            mipmap: true
             Layout.alignment: Qt.AlignHCenter
             source: root.iconPath
             width: iconSize
             height: iconSize
-            sourceSize: Qt.size(iconSize, iconSize)
 
             Behavior on width {
                 animation: Appearance.animation.elementMoveEnter.numberAnimation.createObject(this)

dots/.config/quickshell/ii/modules/ii/screenTranslator/ScreenTextOverlay.qml

@@ -186,7 +186,6 @@ Item {
         asynchronous: false
         width: root.windowWidth
         height: root.windowHeight
-        sourceSize: Qt.size(root.windowWidth, root.windowHeight)
         source: Qt.resolvedUrl(root.screenshotPath)
         visible: false
     }

dots/.config/quickshell/ii/modules/ii/sidebarLeft/anime/BooruImage.qml

@@ -67,8 +67,6 @@ Button {
             height: root.rowHeight
             fillMode: Image.PreserveAspectFit
             source: modelData.preview_url
-            sourceSize.width: root.rowHeight * modelData.aspect_ratio
-            sourceSize.height: root.rowHeight
 
             layer.enabled: true
             layer.effect: OpacityMask {

dots/.config/quickshell/ii/modules/ii/sidebarRight/volumeMixer/VolumeMixerEntry.qml

@@ -36,12 +36,10 @@ Item {
                 text: root.node?.audio.muted ? Translation.tr("Click to unmute") : Translation.tr("Click to mute")
             }
 
-            Image {
+            StyledImage {
                 id: iconImg
                 anchors.fill: parent
                 visible: false
-                sourceSize.width: parent.size
-                sourceSize.height: parent.size
                 source: {
                     let icon;
                     icon = AppSearch.guessIcon(root.node?.properties["application.icon-name"] ?? "");

dots/.config/quickshell/ii/modules/ii/wallpaperSelector/WallpaperDirectoryItem.qml

@@ -66,8 +66,6 @@ MouseArea {
                         cache: false
                         fillMode: Image.PreserveAspectCrop
                         clip: true
-                        sourceSize.width: wallpaperItemColumnLayout.width
-                        sourceSize.height: wallpaperItemColumnLayout.height - wallpaperItemColumnLayout.spacing - wallpaperItemName.height
 
                         Connections {
                             target: Wallpapers
@@ -102,8 +100,6 @@ MouseArea {
                     anchors.fill: parent
                     sourceComponent: DirectoryIcon {
                         fileModelData: root.fileModelData
-                        sourceSize.width: wallpaperItemColumnLayout.width
-                        sourceSize.height: wallpaperItemColumnLayout.height - wallpaperItemColumnLayout.spacing - wallpaperItemName.height
                     }
                 }
             }

dots/.config/quickshell/ii/modules/settings/QuickConfig.qml

@@ -71,8 +71,6 @@ ContentPage {
                 StyledImage {
                     id: wallpaperPreview
                     anchors.fill: parent
-                    sourceSize.width: parent.implicitWidth
-                    sourceSize.height: parent.implicitHeight
                     fillMode: Image.PreserveAspectCrop
                     source: Config.options.background.wallpaperPath
                     cache: false

dots/.config/quickshell/ii/modules/waffle/lock/WaffleLock.qml

@@ -33,7 +33,7 @@ LockScreen {
             interactables.switchToFocusedView();
         }
 
-        Image {
+        StyledImage {
             id: bg
             z: 0
             width: parent.width
@@ -46,7 +46,6 @@ LockScreen {
                     openAnim.restart();
                 }
             }
-            sourceSize: Qt.size(lockSurfaceItem.width, lockSurfaceItem.height)
             source: Config.options.background.wallpaperPath
             fillMode: Image.PreserveAspectCrop
 

dots/.config/quickshell/ii/modules/waffle/notificationCenter/WSingleNotification.qml

@@ -102,8 +102,6 @@ MouseArea {
                         readonly property int size: 48
                         width: size
                         height: size
-                        sourceSize.width: size
-                        sourceSize.height: size
                         source: root.notification.image
                         fillMode: Image.PreserveAspectFit
                     }

dots/.config/quickshell/ii/modules/waffle/taskView/TaskViewWorkspace.qml

@@ -85,7 +85,6 @@ WMouseAreaButton {
                 active: !root.newWorkspace
                 sourceComponent: StyledImage {
                     cache: true
-                    sourceSize: Qt.size(root.screenAspectRatio * root.wallpaperHeight, root.wallpaperHeight)
                     source: Config.options.background.wallpaperPath
                     fillMode: Image.PreserveAspectCrop