[applets/kickoff]: Use Kirigami.Avatar instead of homegrown avatar

applets/kickoff/package/contents/ui/Header.qml

@@ -23,6 +23,10 @@ import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 3.0 as PlasmaComponents
 import org.kde.plasma.extras 2.0 as PlasmaExtras
 import org.kde.kcoreaddons 1.0 as KCoreAddons
+// While using Kirigami in applets is normally a no, we
+// use Avatar, which doesn't need to read the colour scheme
+// at all to function, so there won't be any oddities with colours.
+import org.kde.kirigami 2.13 as Kirigami
 import org.kde.kquickcontrolsaddons 2.0
 import QtGraphicalEffects 1.0
 
@@ -68,61 +72,25 @@ PlasmaExtras.PlasmoidHeading {
     RowLayout {
         anchors.fill: parent
 
-        Image {
-            id: faceIcon
-            source: kuser.faceIconUrl
-            cache: false
-            visible: source !== ""
+        PlasmaComponents.RoundButton {
+            visible: KCMShell.authorize("kcm_users.desktop").length > 0
+
+            flat: true
 
             Layout.preferredWidth: PlasmaCore.Units.gridUnit * 3
             Layout.preferredHeight: PlasmaCore.Units.gridUnit * 3
 
-            sourceSize.width: width
-            sourceSize.height: height
-
-            fillMode: Image.PreserveAspectFit
-            Layout.margins: PlasmaCore.Units.gridUnit
-
-            // 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.effect: OpacityMask {
-                // this Rectangle is a circle due to radius size
-                maskSource: Rectangle {
-                    width: faceIcon.width
-                    height: faceIcon.height
-                    radius: height / 2
-                    visible: false
+            Kirigami.Avatar {
+                source: kuser.faceIconUrl
+                name: nameLabel
+                anchors {
+                    fill: parent
+                    margins: PlasmaCore.Units.smallSpacing
                 }
             }
-            // Border for the circular avatar
-            Rectangle {
-                anchors.fill: faceIcon
-                // Don't show the circle if we're using software rendering, because
-                // the cropping effect won't be displayed under it
-                visible: GraphicsInfo.api !== GraphicsInfo.Software
-
-                radius: height / 2
-                border.width: 1
-                border.color: theme.textColor
-                opacity: 0.4
-                color: "transparent"
-            }
-            MouseArea {
-                anchors.fill: faceIcon
-                acceptedButtons: Qt.LeftButton
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    KCMShell.openSystemSettings("kcm_users")
-                }
-                visible: KCMShell.authorize("kcm_users.desktop").length > 0
-            }
-            PlasmaCore.IconItem {
-                source: "user-identity"
-                visible: faceIcon.status !== Image.Ready
-                anchors.fill: faceIcon
-                anchors.bottomMargin: PlasmaCore.Units.smallSpacing
-                usesPlasmaTheme: false
+
+            onClicked: {
+                KCMShell.openSystemSettings("kcm_users")
             }
         }