ui/qml/widgets/MessageList.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

ColumnLayout {
	Layout.fillWidth: true


	Flickable {
		id: sv
		clip: true
		Layout.alignment: Qt.AlignLeft | Qt.AlignTop
		Layout.fillHeight: true
		Layout.minimumWidth: parent.width
		Layout.maximumWidth: parent.width
		Layout.fillWidth: true
		contentWidth: colMessages.width
		contentHeight: colMessages.height
		boundsBehavior: Flickable.StopAtBounds


		Connections {
			target: gcd

			onClearMessages: function() {
				messagesModel.clear()
			}

			onAppendMessage: function(from, message) {
				messagesModel.append({
					"f": from,
					"m": message
				})

				if (sv.contentY + sv.height >= sv.contentHeight - colMessages.height && sv.contentHeight > sv.height) {
					sv.contentY = sv.contentHeight - sv.height
				}
			}
		}


		ColumnLayout {
			id: colMessages
			width: sv.width


			ListModel { // MESSAGE OBJECTS ARE STORED HERE ...
				id: messagesModel
			}

			Item { height: 6 }

			Repeater { // ... AND DISPLAYED HERE
				model: messagesModel
				delegate: Message {
					from: f
					message: m
				}
			}
		}
	}

	RowLayout { // THE BOTTOM DRAWER
		Rectangle { // MESSAGE ENTRY TEXTFIELD
			id: rectMessage
			Layout.fillWidth: true
			height: 40
			color: "#EDEDED"
			border.color: "#AAAAAA"
			radius: 10

			Flickable {
				id: flkMessage
				anchors.fill: parent
				Layout.minimumWidth: parent.width
				Layout.maximumWidth: parent.width
				Layout.minimumHeight: rectMessage.height
				Layout.maximumHeight: rectMessage.height
				contentWidth: txtMessage.width
				contentHeight: txtMessage.height
				boundsBehavior: Flickable.StopAtBounds
				clip:true

				TextEdit {
					id: txtMessage
					font.pixelSize: 10
					text: ""
					padding: 6
					wrapMode: TextEdit.Wrap
					width: rectMessage.width
					//height: parent.height

					Keys.onReturnPressed: { // CTRL+ENTER = LINEBREAK
						if (event.modifiers & Qt.ControlModifier) {
							txtMessage.insert(txtMessage.cursorPosition, "\n")
						} else if (event.modifiers == Qt.NoModifier) {
							btnSend.clicked()
						}
					}

					onTextChanged: {
						if (flkMessage.contentY + flkMessage.height >= flkMessage.contentHeight - txtMessage.height && flkMessage.contentHeight > flkMessage.height) {
							flkMessage.contentY = flkMessage.contentHeight - flkMessage.height
						}
					}
				}
			}
		}

		ColumnLayout {
			spacing: 0


			SimpleButton { // SEND MESSAGE BUTTON
				id: btnSend
				text: "send"
				width: btnEmoji.width + btnAttach.width

				onClicked: {
					if (txtMessage.text != "") {
						gcd.sendMessage(txtMessage.text)
					}
					txtMessage.text = ""
				}
			}

			RowLayout {
				spacing: 0


				SimpleButton {
					id: btnEmoji
					text: ":)"

					onClicked: gcd.popup("emoji not yet implemented, sorry")
				}

				SimpleButton {
					id: btnAttach
					text: "@"

					onClicked: gcd.popup("attachments not yet implemented, sorry")
				}
			}
		}
	}
}