From edf1c1db1a5655ebbbfc4e29d16ea4c1eb99d0ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=A6=8C=EA=A6=AB=EA=A6=B6=EA=A6=8F=EA=A7=80=EA=A6=A6?=
 =?UTF-8?q?=EA=A6=BF=EA=A6=A7=EA=A6=AE=EA=A6=91=EA=A6=A9=EA=A6=AD=EA=A7=80?=
 <erik@darapsa.co.id>
Date: Mon, 8 May 2023 11:27:01 +0800
Subject: Wrap card rectangle for margin/spacing

---
 Card.ui.qml | 74 +++++++++++++++++++++++++++++++++----------------------------
 1 file changed, 40 insertions(+), 34 deletions(-)

diff --git a/Card.ui.qml b/Card.ui.qml
index e232f5a..e793111 100644
--- a/Card.ui.qml
+++ b/Card.ui.qml
@@ -4,55 +4,61 @@ import QtQuick.Layouts 1.15
 import QtGraphicalEffects 1.15
 import Bootstrap 5.3
 
-Rectangle {
+Item {
 	property string imageSource:
 	"https://offsetcode.com/themes/messenger/2.2.0/assets/img/avatars/6.jpg"
 	property string nameText: "Bill Marrow"
 	property string statusText: qsTr("last seen 3 days ago")
-
-	radius: 9.6
-	color: ApplicationWindow.window.Bootstrap.cardBg
 	implicitHeight: 88.5
 
-	Image {
-		id: image
+	Rectangle {
 		anchors {
-			left: parent.left
-			leftMargin: 8
-			verticalCenter: parent.verticalCenter
-		}
-		source: imageSource
-		sourceSize {
-			width: 44
-			height: 44
+			fill: parent
+			bottomMargin: 16
 		}
-		layer.enabled: true
-		layer.effect: OpacityMask {
-			maskSource: Rectangle {
+		radius: 9.6
+		color: ApplicationWindow.window.Bootstrap.cardBg
+
+		Image {
+			id: image
+			anchors {
+				left: parent.left
+				leftMargin: 8
+				verticalCenter: parent.verticalCenter
+			}
+			source: imageSource
+			sourceSize {
 				width: 44
 				height: 44
-				radius: 22
+			}
+			layer.enabled: true
+			layer.effect: OpacityMask {
+				maskSource: Rectangle {
+					width: 44
+					height: 44
+					radius: 22
+				}
 			}
 		}
-	}
 
-	ColumnLayout {
-		spacing: 0
-		anchors {
-			left: image.right
-			leftMargin: 8
-			verticalCenter: parent.verticalCenter
-		}
+		ColumnLayout {
+			spacing: 0
+			anchors {
+				left: image.right
+				leftMargin: 8
+				verticalCenter: parent.verticalCenter
+			}
 
-		Label {
-			text: nameText
-			wrapMode: Label.Wrap
-			Bootstrap.heading: 5
-		}
+			Label {
+				text: nameText
+				wrapMode: Label.Wrap
+				Bootstrap.heading: 5
+			}
 
-		Label {
-			text: statusText
-			wrapMode: Label.Wrap
+			Label {
+				text: statusText
+				wrapMode: Label.Wrap
+			}
 		}
 	}
 }
-- 
cgit v1.2.3