CartItem now is for the content of MenuItem

so it can be reused for adding Items (instead of Actions) to the cart menu

2 files changed, 67 insertions, 48 deletions

diff --git a/Header.ui.qml b/Header.ui.qml
index 2370c7b..daa2af1 100644
--- a/Header.ui.qml
+++ b/Header.ui.qml
@@ -134,7 +134,15 @@ ToolBar {
 				width: 256
 				sourceComponent: background
 			}
-			delegate: CartItem {}
+			delegate: MenuItem {
+				contentItem: CartItem {
+					imageSource: icon.source
+					titleText: text
+				}
+				background: Rectangle {
+					color: "transparent"
+				}
+			}
 
 			Lbl.H5 {
 				text: qsTr("Cart items")
diff --git a/Header/CartItem.ui.qml b/Header/CartItem.ui.qml
index 4f97c29..83600a5 100644
--- a/Header/CartItem.ui.qml
+++ b/Header/CartItem.ui.qml
@@ -5,68 +5,79 @@ import QtGraphicalEffects 1.15
 import Eduport 1.4
 import "../Label" as Lbl
 
-MenuItem {
-	id: menuItem
-	contentItem: ColumnLayout {
+ColumnLayout {
+	property string imageSource:
+		"https://eduport.webestica.com/assets/images/book/02.jpg"
+	property string titleText: "Angular 4 Tutorial in audio (Compact Disk)"
+	property alias button: button
+	property alias comboBox: comboBox
 
-		Loader {
-			Layout.fillWidth: true
-			Layout.topMargin: -24
-			Layout.leftMargin: -8
-			Layout.rightMargin: -8
-			sourceComponent: menuSeparator
+	MenuSeparator {
+		Layout.fillWidth: true
+		contentItem: Rectangle {
+			implicitHeight: 1
+			color: Eduport.mode
+				? Eduport.bsGray300 : Eduport.bsGray500
 		}
+	}
 
-		RowLayout {
-			Layout.margins: 16
+	RowLayout {
+		Layout.margins: 16
 
-			Loader {
-				property string imageSource: menuItem
-								.icon.source
-				property int imageWidth: 50
-				property int imageHeight: 50
-				property real maskRadius: 5.2
-				sourceComponent: image
-				Layout.alignment: Qt.AlignTop
+		Image {
+			Layout.alignment: Qt.AlignTop
+			source: imageSource
+			sourceSize {
+				width: 50
+				height: 50
+			}
+			layer {
+				enabled: true
+				effect: OpacityMask {
+					maskSource: Rectangle {
+						width: 50
+						height: 50
+						radius: 5.2
+					}
+				}
 			}
+		}
 
-			ColumnLayout {
+		ColumnLayout {
 
-				RowLayout {
+			RowLayout {
+				spacing: 0
 
-					Lbl.H6 {
-						text: menuItem.text
-						Layout.fillWidth: true
-					}
+				Lbl.H6 {
+					text: titleText
+					Layout.maximumWidth: 146
+				}
 
-					Button {
-						Layout.alignment: Qt.AlignTop
-						contentItem: Image {
-							source:
-							"../Bootstrap/icons/x.svg"
+				Button {
+					id: button
+					Layout.alignment: Qt.AlignTop
+								| Qt.AlignRight
+					contentItem: Image {
+						source:
+						"../Bootstrap/icons/x.svg"
 
-							ColorOverlay {
-								color: Eduport
-								.bsGray600
-								source: parent
-								anchors.fill:
-									parent
-							}
-						}
-						background: Rectangle {
-							color: "transparent"
-							implicitWidth: 13
+						ColorOverlay {
+							color: Eduport.bsGray600
+							source: parent
+							anchors.fill: parent
 						}
 					}
+					background: Rectangle {
+						color: "transparent"
+						implicitWidth: 13
+					}
 				}
+			}
 
-				ComboBox {
-					model: [1, 2, 3, 4, 5]
-				}
+			ComboBox {
+				id: comboBox
+				model: [1, 2, 3, 4, 5]
 			}
 		}
 	}
-	background: Rectangle {
-		color: "transparent"
-	}
 }