Card draft

3 files changed, 73 insertions, 2 deletions

diff --git a/Card.ui.qml b/Card.ui.qml
new file mode 100644
index 0000000..e232f5a
--- /dev/null
+++ b/Card.ui.qml
@@ -0,0 +1,58 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+import Bootstrap 5.3
+
+Rectangle {
+	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
+		anchors {
+			left: parent.left
+			leftMargin: 8
+			verticalCenter: parent.verticalCenter
+		}
+		source: imageSource
+		sourceSize {
+			width: 44
+			height: 44
+		}
+		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
+		}
+
+		Label {
+			text: nameText
+			wrapMode: Label.Wrap
+			Bootstrap.heading: 5
+		}
+
+		Label {
+			text: statusText
+			wrapMode: Label.Wrap
+		}
+	}
+}
diff --git a/Friends.ui.qml b/Friends.ui.qml
index d3dc2ab..ff4b723 100644
--- a/Friends.ui.qml
+++ b/Friends.ui.qml
@@ -26,18 +26,30 @@ Flickable {
 		ListView {
 			id: list
 			interactive: false
+			implicitHeight: count * 88.5
 			model: ListModel {
 				ListElement {
 					image: "https://offsetcode.com/themes/messenger/2.2.0/assets/img/avatars/6.jpg"
 					name: "Bill Marrow"
 					status: qsTr("last seen 3 days ago")
 				}
+				ListElement {
+					image: "https://offsetcode.com/themes/messenger/2.2.0/assets/img/avatars/5.jpg"
+					name: "Damien Binder"
+					status: qsTr("last seen within a week")
+				}
+				ListElement {
+					image: ""
+					name: "Don Knight"
+					status: qsTr("online")
+				}
 			}
-/*
 			delegate: Card {
 				width: list.width
+				imageSource: image
+				nameText: name
+				statusText: status
 			}
-*/
 		}
 	}
 }
diff --git a/Messenger.qrc b/Messenger.qrc
index 3a537f8..60a79ce 100644
--- a/Messenger.qrc
+++ b/Messenger.qrc
@@ -1,5 +1,6 @@
 <!DOCTYPE RCC><RCC version="1.0">
 	<qresource prefix="qessenger">
+		<file>Card.ui.qml</file>
 		<file>Friends.ui.qml</file>
 	</qresource>
 </RCC>