ui/qml/widgets/Message.qml

import QtGraphicalEffects 1.0
import QtQuick 2.7
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.3

import "controls" as Awesome

RowLayout {
	id: root
	//Layout.alignment: from == "me" ? Qt.AlignRight : Qt.AlignLeft
	anchors.left: from == "me" ? undefined : parent.left
	anchors.right: from == "me" ? parent.right : undefined
	height: Math.max(imgProfile.height, rectMessageBubble.height)

	property alias message: lbl.text
	property string from
	property string displayname
	property int messageID
	property alias timestamp: ts.text
	property alias source: imgProfile.source
	property alias status: imgProfile.status


	Connections {
		target: gcd

		onAcknowledged: function(mid) {
			if (mid == messageID) {
				ack.text = awesome.icons.fa_check
			}
		}
	}


	ContactPicture {
		id: imgProfile
		anchors.left: parent.left
		visible: from != "me"
	}

	Rectangle { // THIS IS JUST A PRETTY MESSAGE-HOLDING RECTANGLE
		id: rectMessageBubble
		height: lbl.height + ts.height + 4
		width: colMessageBubble.width + 6
		color: from == "me" ? "#B09CBC" : "#4B3557"
		radius: 5

		// the console will complain constantly about me setting these anchors, but qt only allows margins if they've been set to something
		// a kludge to fix this would be to have spacers before/after and set the widths according to the side they're on ^ea
		anchors.left: from == "me" ? undefined : imgProfile.right //parent.left
		anchors.right: from == "me" ? parent.right : undefined
		anchors.leftMargin: 5
		anchors.rightMargin: 9
		anchors.topMargin: 5


		ColumnLayout {
			id: colMessageBubble


			Column { // combine these into one element or else childrenRect won't play nicely
				TextEdit { // this is used as a helper to calculate the message box width
					id: dummy
					visible: false
					padding: 6
					leftPadding: 10
					font.pixelSize: 12
					wrapMode: TextEdit.NoWrap
					text: message
					textFormat: Text.RichText
				}

				TextEdit { // this is the actual text display
					id: lbl
					color: "#FFFFFF"
					padding: 6
					leftPadding: 10
					font.pixelSize: 12
					selectByMouse: true
					readOnly: true
					width: Math.min(dummy.width, root.parent.width - (imgProfile.visible ? imgProfile.width : 0) - 40)
					wrapMode: TextEdit.Wrap
					textFormat: Text.RichText
				}
			}

			RowLayout {
				id: rowBottom
				anchors.left: parent.left
				anchors.right: parent.right


				Label { // TIMESTAMP
					id: ts
					color: "#FFFFFF"
					font.pixelSize: 10
					anchors.left: parent.left
					leftPadding: 10
				}

				Label { text: dummy.width+", "+root.width }

				Label { // MESSAGE ACKNOWLEDGMENT
					id: ack
					color: "#FFFFFF"
					font.pixelSize: 10
					anchors.right: parent.right
					font.family: "FontAwesome"
					text: from == "me" ? awesome.icons.fa_ellipsis_h : displayname
				}
			}
		}
	}
}