diff --git a/resources/qml/Account/AccountWidget.qml b/resources/qml/Account/AccountWidget.qml
index cf681477d4..84a0caede1 100644
--- a/resources/qml/Account/AccountWidget.qml
+++ b/resources/qml/Account/AccountWidget.qml
@@ -81,6 +81,7 @@ Item
source: (loggedIn && profile["profile_image_url"]) ? profile["profile_image_url"] : ""
outlineColor: loggedIn ? UM.Theme.getColor("account_widget_outline_active") : UM.Theme.getColor("lining")
+ maskColor: UM.Theme.getColor("main_window_header_background")
}
contentItem: Item
diff --git a/resources/qml/Account/AvatarImage.qml b/resources/qml/Account/AvatarImage.qml
index 7afd1b8180..6a60e993d8 100644
--- a/resources/qml/Account/AvatarImage.qml
+++ b/resources/qml/Account/AvatarImage.qml
@@ -15,43 +15,44 @@ 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"
+ source: UM.Theme.getIcon("CircleMask")
}
- /*
- TODO: Reimplement this without OpacityMask.
- OpacityMask
- {
- anchors.fill: parent
- source: profileImage
- maskSource: profileImageMask
- visible: hasAvatar
- cached: true
- }*/
-
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")
color: UM.Theme.getColor("account_widget_outline_active")
diff --git a/resources/qml/Account/UserOperations.qml b/resources/qml/Account/UserOperations.qml
index be858df993..d7677264fb 100644
--- a/resources/qml/Account/UserOperations.qml
+++ b/resources/qml/Account/UserOperations.qml
@@ -30,6 +30,7 @@ Column
height: UM.Theme.getSize("main_window_header").height
source: profile["profile_image_url"] ? profile["profile_image_url"] : ""
+ maskColor: UM.Theme.getColor("main_background")
outlineColor: UM.Theme.getColor("main_background")
}
Rectangle
diff --git a/resources/themes/cura-light/icons/default/CircleMask.svg b/resources/themes/cura-light/icons/default/CircleMask.svg
new file mode 100644
index 0000000000..d3a2e9a81c
--- /dev/null
+++ b/resources/themes/cura-light/icons/default/CircleMask.svg
@@ -0,0 +1,4 @@
+
+
diff --git a/resources/themes/cura-light/icons/default/CircleOutline.svg b/resources/themes/cura-light/icons/default/CircleOutline.svg
index 5c4584e49f..6f7cd6aca0 100644
--- a/resources/themes/cura-light/icons/default/CircleOutline.svg
+++ b/resources/themes/cura-light/icons/default/CircleOutline.svg
@@ -1,4 +1,4 @@
\ No newline at end of file