1 files changed, 21 insertions, 20 deletions

diff --git a/resources/qml/Account/AvatarImage.qml b/resources/qml/Account/AvatarImage.qml
index 58c39e5065..6a60e993d8 100644
--- a/resources/qml/Account/AvatarImage.qml
+++ b/resources/qml/Account/AvatarImage.qml
@@ -3,7 +3,6 @@
 
 import QtQuick 2.10
 import QtQuick.Controls 2.3
-import QtGraphicalEffects 1.0
 
 import UM 1.4 as UM
 
@@ -16,44 +15,46 @@ Item
 
     property alias source: profileImage.source
     property alias outlineColor: profileImageOutline.color
+
+    // This should be set to the color behind the image
+    // It fills the space around a rectangular avatar to make the image under it look circular
+    property alias maskColor: profileImageMask.color
     property bool hasAvatar: source != ""
 
+    Rectangle
+    {
+        id: profileImageBackground
+        anchors.fill: parent
+        radius: width
+        color: "white"
+    }
+
     Image
     {
         id: profileImage
         anchors.fill: parent
         fillMode: Image.PreserveAspectCrop
-        visible: false
+        visible: hasAvatar
         mipmap: true
     }
 
-    Rectangle
+    UM.ColorImage
     {
+        // This image is a rectangle with a hole in the middle.
+        // Since we don't have access to proper masking in QT6 yet this is used as a primitive masking replacement
         id: profileImageMask
         anchors.fill: parent
-        radius: width
-        color: hasAvatar ? "white" : "transparent"
-    }
-
-    OpacityMask
-    {
-        anchors.fill: parent
-        source: profileImage
-        maskSource: profileImageMask
-        visible: hasAvatar
-        cached: true
+        source: UM.Theme.getIcon("CircleMask")
     }
 
-    UM.RecolorImage
+    UM.ColorImage
     {
+        // This creates the circle outline around the image
         id: profileImageOutline
-        anchors.centerIn: parent
-        // Make it a bit bigger than it has to, otherwise it sometimes shows a white border.
-        width: parent.width + 2
-        height: parent.height + 2
+        anchors.fill: parent
+        anchors.margins: .25
         visible: hasAvatar
         source: UM.Theme.getIcon("CircleOutline")
-        sourceSize: Qt.size(parent.width, parent.height)
         color: UM.Theme.getColor("account_widget_outline_active")
     }
 }