search

Zren / plasma-applet-tiledmenu

https://store.kde.org/p/2142716/
145 stars 34 forks source link

[Enhancement] Cut User Picture to Circle #133

Open snoweuph opened 2 years ago

snoweuph commented 2 years ago

It would be Nice if the User Picture would be shown as a circle and not as it's full Squarnes

Zren commented 2 years ago

I'm pretty sure it's already possible to clip it using a circle mask, but it's already a very tiny icon and clipping like 30% of the picture makes it pretty unrecognizable.

Zren commented 2 years ago

No idea why adding this code to FlatButton.qml properly crops the icon as a circle when I add iconSize: config.flatButtonSize to FlatButton.qml. If I remove the iconSize override to make the icon larger, so that it's the normal small icon size, then it stops cropping displays a square.

// FlatButton.qml
                PlasmaCore.IconItem {
                    id: icon
                    source: control.iconName || control.iconSource || control.icon
                    implicitWidth: control._iconSize
                    implicitHeight: control._iconSize
                    anchors.centerIn: parent
                    colorGroup: PlasmaCore.Theme.ButtonColorGroup

                    // Crop the avatar to fit in a circle, like the lock and login screens
                    // but don't on software rendering where this won't render
                    // layer.enabled: faceIcon.GraphicsInfo.api !== GraphicsInfo.Software
                    layer.enabled: true
                    layer.effect: QtGraphicalEffects.OpacityMask {
                        // this Rectangle is a circle due to radius size
                        maskSource: Rectangle {
                            width: icon.width
                            height: icon.height
                            radius: height / 2
                            visible: false
                        }
                    }
                }
// SidebarView.qml
            SidebarItem {
                iconName: kuser.hasFaceIcon ? kuser.faceIconUrl : 'user-identity'
                text: kuser.fullName
                submenu: userMenu
                iconSize: config.flatButtonSize

                SidebarContextMenu {
                    id: userMenu