From 94e5a4e1dbc88b78e0960c9c140e0a40574c2d9b Mon Sep 17 00:00:00 2001
From: "j.delarago" <joeydelarago@gmail.com>
Date: Mon, 11 Apr 2022 14:10:27 +0200
Subject: [PATCH] Masking is not avaliable after the QT6 upgrade, this does a
 kind of primitive masking by placing a rectangle with a circular hole in it
 over the image.

CURA-9104
---
 resources/qml/Account/AccountWidget.qml       |  1 +
 resources/qml/Account/AvatarImage.qml         | 39 ++++++++++---------
 resources/qml/Account/UserOperations.qml      |  1 +
 .../cura-light/icons/default/CircleMask.svg   |  4 ++
 .../icons/default/CircleOutline.svg           |  2 +-
 5 files changed, 27 insertions(+), 20 deletions(-)
 create mode 100644 resources/themes/cura-light/icons/default/CircleMask.svg

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 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg">
+<path d="M 0 0. L 0 16 L 16 16 L 16.101562 0 L 8 0 A 8 8 0 0 1 16 8 A 8 8 0 0 1 8 16 A 8 8 0 0 1 0 8 A 8 8 0 0 1 8 0 L 0 0 z " />
+</svg>
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 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <svg width="50" height="50">
-    <circle cx="25" cy="25" r="23.74" stroke-width="2.5" />
+    <circle cx="25" cy="25" r="23.74" fill="none" stroke="black" stroke-width="2.5" />
 </svg>
\ No newline at end of file