implement MessageOut.ui.qml in ChatGroup.ui.qml && remove MessageOut.ui.qml

2 files changed, 27 insertions, 85 deletions

diff --git a/ChatGroup.ui.qml b/ChatGroup.ui.qml
index 4ebf46b..5d8052c 100644
--- a/ChatGroup.ui.qml
+++ b/ChatGroup.ui.qml
@@ -2,7 +2,6 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtGraphicalEffects 1.15
-import Bootstrap 5.3
 
 Page {
 	property string titleText: qsTr("Bootstrap Community")
@@ -10,7 +9,6 @@ Page {
 	header: ToolBar {
 		Label {
 			text: titleText
-			Bootstrap.heading: 5
 			anchors.centerIn: parent
 		}
 	}
@@ -22,41 +20,51 @@ Page {
 			leftMargin: 20
 			rightMargin: 20
 		}
-		model: [ 11, 1, 6, 1, 11, 1, 7, 1, 11, 1]
-		delegate: Item {
-			implicitWidth: listView.width
-			implicitHeight: column.height
+		model: [11, 1, 6, 1, 11, 1, 7, 1, 11, 1]
+		delegate:
+		Item {
+			width: listView.width
+			height: message.height + 16
+
 
 			ColumnLayout {
-				id: column
+				id: message
 				width: parent.width
-				layoutDirection: modelData === 1
-					? Qt.RightToLeft : Qt.LeftToRight
+				layoutDirection: modelData === 1 ? Qt.RightToLeft : Qt.LeftToRight
 				anchors {
-					left: modelData === 1
-						? parent.left : undefined
-					right: modelData !== 1
-						? parent.right : undefined
+					left: modelData !== 1 ? messageAvatar.right : undefined
+					right: modelData === 1 ? messageAvatar.left : undefined
 					bottom: parent.bottom
 				}
+				spacing: 8
+
 
 				Label {
+					id: messageText
 					text: qsTr("Hey, Marshall! How are you? Can you please change the color theme of the website to pink and purple? 😂")
-					wrapMode: Label.Wrap
-					Layout.fillWidth: true
+					wrapMode: Text.Wrap
+					rightPadding: 20
+					leftPadding: 20
+					bottomPadding: 16
+					topPadding: 16
+					Layout.maximumWidth: parent.width - (messageAvatar.width + 16)
+					background: Rectangle {
+						radius: 16
+						color: modelData ==1 ? "#2787f5" : "#95aac9"
+					}
 				}
 
 				Label {
+					id: messageTimestamp
 					text: qsTr("08:45 PM")
 				}
 			}
 
 			Image {
+				id: messageAvatar
 				anchors {
-					left: modelData !== 1
-						? parent.left : undefined
-					right: modelData === 1
-						? parent.right : undefined
+					left: modelData !== 1 ? parent.left : undefined
+					right: modelData === 1 ? parent.right : undefined
 					bottom: parent.bottom
 				}
 				source: "https://offsetcode.com/themes/messenger/2.2.0/assets/img/avatars/"
diff --git a/MessageOut.ui.qml b/MessageOut.ui.qml
deleted file mode 100644
index d4d3747..0000000
--- a/MessageOut.ui.qml
+++ /dev/null
@@ -1,66 +0,0 @@
-import QtQuick 2.15
-import QtQuick.Controls 2.15
-import QtQuick.Layouts 1.15
-import QtGraphicalEffects 1.15
-import Bootstrap 5.3
-
-Item {
-	width: 360
-
-	RowLayout {
-		id: rowLayout
-		anchors.fill: parent
-
-		ColumnLayout {
-			id: messageOut
-			Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
-			Layout.fillWidth: true
-			Layout.fillHeight: true
-			Rectangle {
-				id: rectangle
-				width: messageOutText.width
-				height: messageOutText.height
-				color: "#2787f5"
-				radius: 16
-				Layout.maximumHeight: messageOutText.height
-				Layout.maximumWidth: memessageOutText.width
-				Layout.minimumHeight: messageOutText.height
-				Layout.minimumWidth: memessageOutText.width
-				Layout.fillWidth: true
-
-				Label {
-					id: messageOutText
-					text: qsTr("Hey, Marshall! How are you? Can you please change the color theme of the website to pink and purple? 😂")
-					wrapMode: Text.Wrap
-					rightPadding: 20
-					leftPadding: 20
-					bottomPadding: 16
-					topPadding: 16
-					Layout.fillWidth: true
-					width: messageOut.width
-				}
-			}
-
-			Label {
-				id: messageTimestamp
-				text: qsTr("08:45 PM")
-				Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-			}
-		}
-
-		Rectangle {
-			id: messageOutAvatar
-			width: 64
-			height: 64
-			color: "#ffffff"
-			radius: 100
-			Layout.maximumHeight: 64
-			Layout.maximumWidth: 64
-			Layout.minimumHeight: 24
-			Layout.minimumWidth: 24
-			Layout.preferredHeight: 64
-			Layout.preferredWidth: 64
-			Layout.alignment: Qt.AlignRight | Qt.AlignBottom
-		}
-	}
-}