extract ChatMessages into its own files

ui/app/AppLayouts/Chat/ChatColumn.qml

@@ -32,103 +32,7 @@ StackLayout {
             Layout.fillHeight: true
             Layout.alignment: Qt.AlignLeft | Qt.AlignTop
 
-            Component {
+            ChatMessages {}
-                id: chatLogViewDelegate
-                Rectangle {
-                    id: chatBox
-                    height: 60 + chatText.height
-                    color: "#00000000"
-                    border.color: "#00000000"
-                    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-                    Layout.fillWidth: true
-                    width: chatLogView.width
-
-                    Image {
-                        id: chatImage
-                        width: 30
-                        height: 30
-                        anchors.left: !isCurrentUser ? parent.left : undefined
-                        anchors.leftMargin: !isCurrentUser ? Theme.padding : 0
-                        anchors.right: !isCurrentUser ? undefined : parent.right
-                        anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding
-                        anchors.top: parent.top
-                        anchors.topMargin: Theme.padding
-                        fillMode: Image.PreserveAspectFit
-                        source: identicon
-                    }
-
-                    TextEdit {
-                        id: chatName
-                        text: userName
-                        anchors.top: parent.top
-                        anchors.topMargin: 22
-                        anchors.left: !isCurrentUser ? chatImage.right : undefined
-                        anchors.leftMargin: Theme.padding
-                        anchors.right: !isCurrentUser ? undefined : chatImage.left
-                        anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding
-                        font.bold: true
-                        font.pixelSize: 14
-                        readOnly: true
-                        wrapMode: Text.WordWrap
-                        selectByMouse: true
-                    }
-
-                    TextEdit {
-                        id: chatText
-                        text: message
-                        horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight
-                        font.family: "Inter"
-                        wrapMode: Text.WordWrap
-                        anchors.right: !isCurrentUser ? parent.right : chatName.right
-                        anchors.rightMargin: !isCurrentUser ? 60 : 0
-                        anchors.left: !isCurrentUser ? chatName.left : parent.left
-                        anchors.leftMargin: !isCurrentUser ? 0 : 60
-                        anchors.top: chatName.bottom
-                        anchors.topMargin: Theme.padding
-                        font.pixelSize: 14
-                        readOnly: true
-                        selectByMouse: true
-                        Layout.fillWidth: true
-                    }
-
-                    TextEdit {
-                        id: chatTime
-                        color: Theme.darkGrey
-                        font.family: "Inter"
-                        text: timestamp
-                        anchors.top: chatText.bottom
-                        anchors.bottomMargin: Theme.padding
-                        anchors.right: !isCurrentUser ? parent.right : undefined
-                        anchors.rightMargin: !isCurrentUser ? Theme.padding : 0
-                        anchors.left: !isCurrentUser ? undefined : parent.left
-                        anchors.leftMargin: !isCurrentUser ? 0 : Theme.padding
-                        font.pixelSize: 10
-                        readOnly: true
-                        selectByMouse: true
-                    }
-                }
-            }
-
-            ListView {
-                id: chatLogView
-                model: chatsModel.messageList
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-                delegate: chatLogViewDelegate
-                highlightFollowsCurrentItem: true
-                onCountChanged: {
-                    if (!this.atYEnd) {
-                        // User has scrolled up, we don't want to scroll back
-                        return
-                    }
-
-                    // positionViewAtEnd doesn't work well. Instead, we use highlightFollowsCurrentItem
-                    // and set the current Item/Index to the latest item
-                    while (this.currentIndex < this.count - 1) {
-                        this.incrementCurrentIndex()
-                    }
-                }
-            }
        }
 
         RowLayout {

ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml

@@ -0,0 +1,29 @@
+import QtQuick 2.3
+import QtQuick.Controls 2.3
+import QtQuick.Controls 2.12 as QQC2
+import QtQuick.Layouts 1.3
+import Qt.labs.platform 1.1
+import "../../../../shared"
+import "../../../../imports"
+
+ListView {
+    id: chatLogView
+    model: chatsModel.messageList
+    Layout.fillWidth: true
+    Layout.fillHeight: true
+    delegate: Message {}
+    highlightFollowsCurrentItem: true
+
+    onCountChanged: {
+        if (!this.atYEnd) {
+            // User has scrolled up, we don't want to scroll back
+            return
+        }
+
+        // positionViewAtEnd doesn't work well. Instead, we use highlightFollowsCurrentItem
+        // and set the current Item/Index to the latest item
+        while (this.currentIndex < this.count - 1) {
+            this.incrementCurrentIndex()
+        }
+    }
+}

ui/app/AppLayouts/Chat/ChatColumn/Message.qml

@@ -0,0 +1,81 @@
+import QtQuick 2.3
+import QtQuick.Controls 2.3
+import QtQuick.Controls 2.12 as QQC2
+import QtQuick.Layouts 1.3
+import Qt.labs.platform 1.1
+import "../../../../shared"
+import "../../../../imports"
+
+Rectangle {
+    id: chatBox
+    height: 60 + chatText.height
+    color: "#00000000"
+    border.color: "#00000000"
+    Layout.alignment: Qt.AlignLeft | Qt.AlignTop
+    Layout.fillWidth: true
+    width: chatLogView.width
+
+    Image {
+        id: chatImage
+        width: 30
+        height: 30
+        anchors.left: !isCurrentUser ? parent.left : undefined
+        anchors.leftMargin: !isCurrentUser ? Theme.padding : 0
+        anchors.right: !isCurrentUser ? undefined : parent.right
+        anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding
+        anchors.top: parent.top
+        anchors.topMargin: Theme.padding
+        fillMode: Image.PreserveAspectFit
+        source: identicon
+    }
+
+    TextEdit {
+        id: chatName
+        text: userName
+        anchors.top: parent.top
+        anchors.topMargin: 22
+        anchors.left: !isCurrentUser ? chatImage.right : undefined
+        anchors.leftMargin: Theme.padding
+        anchors.right: !isCurrentUser ? undefined : chatImage.left
+        anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding
+        font.bold: true
+        font.pixelSize: 14
+        readOnly: true
+        wrapMode: Text.WordWrap
+        selectByMouse: true
+    }
+
+    TextEdit {
+        id: chatText
+        text: message
+        horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight
+        font.family: "Inter"
+        wrapMode: Text.WordWrap
+        anchors.right: !isCurrentUser ? parent.right : chatName.right
+        anchors.rightMargin: !isCurrentUser ? 60 : 0
+        anchors.left: !isCurrentUser ? chatName.left : parent.left
+        anchors.leftMargin: !isCurrentUser ? 0 : 60
+        anchors.top: chatName.bottom
+        anchors.topMargin: Theme.padding
+        font.pixelSize: 14
+        readOnly: true
+        selectByMouse: true
+        Layout.fillWidth: true
+    }
+
+    TextEdit {
+        id: chatTime
+        color: Theme.darkGrey
+        font.family: "Inter"
+        text: timestamp
+        anchors.top: chatText.bottom
+        anchors.bottomMargin: Theme.padding
+        anchors.right: !isCurrentUser ? parent.right : undefined
+        anchors.rightMargin: !isCurrentUser ? Theme.padding : 0
+        anchors.left: !isCurrentUser ? undefined : parent.left
+        anchors.leftMargin: !isCurrentUser ? 0 : Theme.padding
+        font.pixelSize: 10
+        readOnly: true
+        selectByMouse: true
+    }
+}

ui/app/AppLayouts/Chat/ChatColumn/qmldir

@@ -1 +1,2 @@
 TopBar 1.0 TopBar.qml
+ChatMessages 1.0 ChatMessages.qml