Move chatlist item to a separate QML file

2 files changed, 119 insertions, 91 deletions

diff --git a/qml/ChatlistItem.qml b/qml/ChatlistItem.qml
new file mode 100644
index 0000000..284f9d2
--- /dev/null
+++ b/qml/ChatlistItem.qml
@@ -0,0 +1,109 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import QtQml.Models 2.1
+import org.kde.kirigami 2.13 as Kirigami
+
+import DeltaChat 1.0
+
+Kirigami.AbstractListItem {
+    id: root
+
+    property DcContext context
+    property int chatId
+    property string chatName
+    property string avatarSource
+    property string username
+    property int freshMsgCnt
+    property bool isContactRequest
+    property bool isPinned
+
+    RowLayout {
+        Kirigami.Avatar {
+            source: root.avatarSource
+            name: root.chatName
+            color: root.context.getChat(root.chatId).getColor()
+            MouseArea {
+                anchors.fill: parent
+                acceptedButtons: Qt.RightButton
+                onClicked: {
+                    if (mouse.button === Qt.RightButton)
+                        contextMenu.popup()
+                }
+
+                Menu {
+                    id: contextMenu
+
+                    Action {
+                        icon.name: "pin"
+                        text: "Pin chat"
+                        onTriggered: root.context.setChatVisibility(root.chatId, 2)
+                    }
+                    Action {
+                        text: "Unpin chat"
+                        onTriggered: root.context.setChatVisibility(root.chatId, 0)
+                    }
+                    Action {
+                        text: "Archive chat"
+                        onTriggered: root.context.setChatVisibility(root.chatId, 1)
+                    }
+                    Action {
+                        text: "Unarchive chat"
+                        onTriggered: root.context.setChatVisibility(root.chatId, 0)
+                    }
+                    Action {
+                        icon.name: "delete"
+                        text: "Delete chat"
+                        onTriggered: root.context.deleteChat(root.chatId)
+                    }
+                }
+            }
+        }
+
+        ColumnLayout {
+            Layout.fillWidth: true
+
+            Label {
+                text: root.context.getChat(root.chatId).getName()
+                font.weight: Font.Bold
+                Layout.fillWidth: true
+            }
+            Label {
+                text: root.username
+                font: Kirigami.Theme.smallFont
+                Layout.fillWidth: true
+            }
+        }
+
+        Label {
+            text: root.isContactRequest ? "NEW" : root.freshMsgCnt
+            visible: root.freshMsgCnt > 0 || root.isContactRequest
+
+            // Align label in the center of a badge.
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+
+            // Make sure badge is not too narrow.
+            Layout.minimumWidth: height
+
+            background: Rectangle {
+            color: Kirigami.Theme.alternateBackgroundColor
+            radius: 0.25 * height
+            }
+        }
+
+        // "Pinned" badge
+        Rectangle {
+            visible: root.isPinned
+            color: Kirigami.Theme.alternateBackgroundColor
+            width: Kirigami.Units.gridUnit
+            height: Kirigami.Units.gridUnit
+            radius: 0.25 * height
+                Kirigami.Icon {
+                source: "pin"
+                height: Kirigami.Units.gridUnit
+                width: Kirigami.Units.gridUnit
+            }
+        }
+    }
+}
diff --git a/qml/ChatlistPage.qml b/qml/ChatlistPage.qml
index 17b0dc3..a7341ec 100644
--- a/qml/ChatlistPage.qml
+++ b/qml/ChatlistPage.qml
@@ -171,98 +171,17 @@ Kirigami.ScrollablePage {
             }
         }
 
-        delegate: Kirigami.AbstractListItem {
-            width: chatlist.width
-
-            RowLayout {
-                Kirigami.Avatar {
-                    source: model.avatarSource
-                    name: model.chatName
-                    color: chatlistPage.context.getChat(model.chatId).getColor()
-                    MouseArea {
-                        anchors.fill: parent
-                        acceptedButtons: Qt.RightButton
-                        onClicked: {
-                            if (mouse.button === Qt.RightButton)
-                                contextMenu.popup()
-                        }
-
-                        Menu {
-                            id: contextMenu
-
-                            Action {
-                                icon.name: "pin"
-                                text: "Pin chat"
-                                onTriggered: chatlistPage.context.setChatVisibility(model.chatId, 2)
-                            }
-                            Action {
-                                text: "Unpin chat"
-                                onTriggered: chatlistPage.context.setChatVisibility(model.chatId, 0)
-                            }
-                            Action {
-                                text: "Archive chat"
-                                onTriggered: chatlistPage.context.setChatVisibility(model.chatId, 1)
-                            }
-                            Action {
-                                text: "Unarchive chat"
-                                onTriggered: chatlistPage.context.setChatVisibility(model.chatId, 0)
-                            }
-                            Action {
-                                icon.name: "delete"
-                                text: "Delete chat"
-                                onTriggered: chatlistPage.context.deleteChat(model.chatId)
-                            }
-                        }
-                    }
-                }
-
-                ColumnLayout {
-                    Layout.fillWidth: true
-
-                    Label {
-                        text: chatlistPage.context.getChat(model.chatId).getName()
-                        font.weight: Font.Bold
-                        Layout.fillWidth: true
-                    }
-                    Label {
-                        text: model.username
-                        font: Kirigami.Theme.smallFont
-                        Layout.fillWidth: true
-                    }
-                }
-
+        delegate: ChatlistItem {
+            context: chatlistPage.context
+            chatId: model.chatId
+            chatName: model.chatName
+            avatarSource: model.avatarSource
+            username: model.username
+            freshMsgCnt: model.freshMsgCnt
+            isContactRequest: model.isContactRequest
+            isPinned: model.visibility == 2
 
-                Label {
-                    text: model.isContactRequest ? "NEW" : model.freshMsgCnt
-                    visible: model.freshMsgCnt > 0 || model.isContactRequest
-
-                    // Align label in the center of a badge.
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: Text.AlignHCenter
-
-                    // Make sure badge is not too narrow.
-                    Layout.minimumWidth: height
-
-                    background: Rectangle {
-                        color: Kirigami.Theme.alternateBackgroundColor
-                        radius: 0.25 * height
-                    }
-                }
-
-                // "Pinned" badge
-                Rectangle {
-                    visible: model.visibility == 2
-                    color: Kirigami.Theme.alternateBackgroundColor
-                    width: Kirigami.Units.gridUnit
-                    height: Kirigami.Units.gridUnit
-                    radius: 0.25 * height
-                    Kirigami.Icon {
-                        source: "pin"
-                        height: Kirigami.Units.gridUnit
-                        width: Kirigami.Units.gridUnit
-                    }
-                }
-            }
+            width: chatlist.width
         }
     }
 }