search

Zren / plasma-applet-presentwindows

https://store.kde.org/p/1181039/
16 stars 6 forks source link

AutoScale default presentwindows.svg #18

Open Zren opened 2 years ago

Zren commented 2 years ago

Right now, we workaround the blurry icons by providing presentwindows-16.svg, presentwindows-22.svg, and presentwindows-24.svg. However we should not be scaling these icons unless they are larger than, say, 32px. This is how KIconTheme handles normal icons.

The PlasmaCore::IconItem and PlasmaCore::Svg support loading multiple icon sizes from different elements in an svg. Most svg icons in the Breeze desktoptheme contain #amarok and #22-22-amarok. There's probably magic somewhere in PlasmaCore::Svg to select #22-22-amarok.

I'm trying out this code in AppletIcon.svg. I still need to consider HiDPI (2x) screens.

        width: isScaling ? appletIcon.minSize * widthRatio : naturalSize.width
        height: isScaling ? appletIcon.minSize * heightRatio : naturalSize.height

        smooth: appletIcon.smooth

        property bool isScaling: false
        elementId: {
            var name = appletIcon.source
            if (64 <= appletIcon.minSize && appletIcon.minSize < 72 && svg.hasElement('64-64-' + name)) {
                svgItem.isScaling = false
                return '64-64-' + name
            } else if (48 <= appletIcon.minSize && appletIcon.minSize < 64 && svg.hasElement('48-48-' + name)) {
                svgItem.isScaling = false
                return '48-48-' + name
            } else if (32 <= appletIcon.minSize && appletIcon.minSize < 48  && svg.hasElement('32-32-' + name)) {
                svgItem.isScaling = false
                return '32-32-' + name
            } else if (24 <= appletIcon.minSize && appletIcon.minSize < 32 && svg.hasElement('24-24-' + name)) {
                svgItem.isScaling = false
                return '24-24-' + name
            } else if (22 <= appletIcon.minSize && appletIcon.minSize < 24 && svg.hasElement('22-22-' + name)) {
                svgItem.isScaling = false
                return '22-22-' + name
            } else if (16 <= appletIcon.minSize && appletIcon.minSize < 22 && svg.hasElement('16-16-' + name)) {
                svgItem.isScaling = false
                return '16-16-' + name
            } else if (appletIcon.minSize < 16 && svg.hasElement('16-16-' + name)) {
                svgItem.isScaling = true
                return '16-16-' + name
            } else if (svg.hasElement(name)) {
                svgItem.isScaling = true
                return name
            } else {
                svgItem.isScaling = true
                return ""
            }
        }

Screenshot_20220309_142931

doncsugar commented 2 years ago

I've somewhat stepped down from my previous position and am instead betting on an "assemble-once" desktop model. That being said, this is undoubtedly cool and hopefully will mean more projects can support more precise customization. Here's the current use case for the button: https://www.pling.com/p/1735447/. Scaling may be more on a case-by-case basis since in this example, I'm trying to match it with the other icons. Not sure.