Reimplement Qt5 OpacityMask using Qt6 MultiEffect

Remaining ones.
See 93b25dfa97494184493e02b75766e57bc6fe79bb
https://darapsa.org/qeduport.git/commit/?id=93b25dfa97494184493e02b75766e57bc6fe79bb

1 files changed, 21 insertions, 17 deletions

diff --git a/Shop/Cart/Table/CourseItem.ui.qml b/Shop/Cart/Table/CourseItem.ui.qml
index a2f5d70..ea88a43 100644
--- a/Shop/Cart/Table/CourseItem.ui.qml
+++ b/Shop/Cart/Table/CourseItem.ui.qml
@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Bootstrap
 import Eduport
 import "../../../TextField"
@@ -12,29 +12,33 @@ GridLayout {
 	columns: width < 990 ? 1 : 2
 	rowSpacing: 8
 	columnSpacing: 8
-	Rectangle {
+
+	Image {
 		id: courseItemImage
-		width: 100
-		height: 75
-		Layout.maximumWidth: width
-		Layout.maximumHeight: height
-		radius: 8
 		Layout.rightMargin: 8
 		Layout.bottomMargin: 16
 		Layout.topMargin: 16
 		Layout.leftMargin: 8
 		Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-		Image {
-			id: courseItemImageSource
-			anchors.fill: parent
-			visible: false
-			source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+		source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
+		sourceSize {
+			width: 100
+			height: 75
 		}
-		OpacityMask {
-			id: coursetemImageMask
-			anchors.fill: courseItemImage
-			source: courseItemImageSource
-			maskSource: courseItemImage
+		layer {
+			enabled: true
+			effect: MultiEffect {
+				maskEnabled: true
+				maskSource: maskRectangle
+			}
+		}
+		Rectangle {
+			id: maskRectangle
+			width: courseItemImage.sourceSize.width
+			height: courseItemImage.sourceSize.height
+			radius: 8
+			layer.enabled: true
+			visible: false
 		}
 	}