QML the read receipts list

There are probably a few things wrong with this, but I'm going to call it good enough for an initial commit

3 files changed, 138 insertions, 1 deletions

diff --git a/resources/qml/ReadReceipts.qml b/resources/qml/ReadReceipts.qml
new file mode 100644
index 00000000..21b9b15e
--- /dev/null
+++ b/resources/qml/ReadReceipts.qml
@@ -0,0 +1,118 @@
+// SPDX-FileCopyrightText: 2021 Nheko Contributors
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import im.nheko 1.0
+
+ApplicationWindow {
+    id: readReceiptsRoot
+
+    property ReadReceiptsModel readReceipts
+
+    x: MainWindow.x + (MainWindow.width / 2) - (width / 2)
+    y: MainWindow.y + (MainWindow.height / 2) - (height / 2)
+    height: 380
+    width: 340
+    minimumHeight: 380
+    minimumWidth: headerTitle.width + 2 * Nheko.paddingMedium
+    palette: Nheko.colors
+    color: Nheko.colors.window
+
+    ColumnLayout {
+        anchors.fill: parent
+        anchors.margins: Nheko.paddingMedium
+        spacing: Nheko.paddingMedium
+
+        Label {
+            id: headerTitle
+
+            Layout.alignment: Qt.AlignCenter
+            text: qsTr("Read receipts")
+            font.pointSize: fontMetrics.font.pointSize * 1.5
+        }
+
+        ScrollView {
+            palette: Nheko.colors
+            padding: Nheko.paddingMedium
+            ScrollBar.horizontal.visible: false
+            Layout.fillHeight: true
+            Layout.minimumHeight: 200
+            Layout.fillWidth: true
+
+            ListView {
+                id: readReceiptsList
+
+                clip: true
+                spacing: Nheko.paddingMedium
+                boundsBehavior: Flickable.StopAtBounds
+                model: readReceipts
+
+                delegate: RowLayout {
+                    spacing: Nheko.paddingMedium
+
+                    Avatar {
+                        width: Nheko.avatarSize
+                        height: Nheko.avatarSize
+                        userid: model.mxid
+                        url: model.avatarUrl.replace("mxc://", "image://MxcImage/")
+                        displayName: model.displayName
+                        onClicked: Rooms.currentRoom.openUserProfile(model.mxid)
+                        ToolTip.visible: avatarHover.hovered
+                        ToolTip.text: model.mxid
+
+                        HoverHandler {
+                            id: avatarHover
+                        }
+
+                    }
+
+                    ColumnLayout {
+                        spacing: Nheko.paddingSmall
+
+                        Label {
+                            text: model.displayName
+                            color: TimelineManager.userColor(model ? model.mxid : "", Nheko.colors.window)
+                            font.pointSize: fontMetrics.font.pointSize
+                            ToolTip.visible: displayNameHover.hovered
+                            ToolTip.text: model.mxid
+
+                            TapHandler {
+                                onSingleTapped: chat.model.openUserProfile(userId)
+                            }
+
+                            CursorShape {
+                                anchors.fill: parent
+                                cursorShape: Qt.PointingHandCursor
+                            }
+
+                            HoverHandler {
+                                id: displayNameHover
+                            }
+
+                        }
+
+                        Label {
+                            text: model.timestamp
+                            color: Nheko.colors.buttonText
+                            font.pointSize: fontMetrics.font.pointSize * 0.9
+                        }
+
+                        Item {
+                            Layout.fillHeight: true
+                            Layout.fillWidth: true
+                        }
+
+                    }
+
+                }
+
+            }
+
+        }
+
+    }
+
+}
diff --git a/resources/qml/Root.qml b/resources/qml/Root.qml
index e80ff764..a099b5e6 100644
--- a/resources/qml/Root.qml
+++ b/resources/qml/Root.qml
@@ -96,6 +96,14 @@ Page {
 
     }
 
+    Component {
+        id: readReceiptsDialog
+
+        ReadReceipts {
+        }
+
+    }
+
     Shortcut {
         sequence: "Ctrl+K"
         onActivated: {
@@ -165,6 +173,17 @@ Page {
     }
 
     Connections {
+        function onOpenReadReceiptsDialog() {
+            var dialog = readReceiptsDialog.createObject(timelineRoot, {
+                "readReceipts": rr
+            });
+            dialog.show();
+        }
+
+        target: Rooms.currentRoom
+    }
+
+    Connections {
         function onNewInviteState() {
             if (CallManager.haveCallInvite && Settings.mobileMode) {
                 var dialog = mobileCallInviteDialog.createObject(msgView);
diff --git a/resources/qml/StatusIndicator.qml b/resources/qml/StatusIndicator.qml
index 7e471d69..0af02b3c 100644
--- a/resources/qml/StatusIndicator.qml
+++ b/resources/qml/StatusIndicator.qml
@@ -34,7 +34,7 @@ ImageButton {
     }
     onClicked: {
         if (status == MtxEvent.Read)
-            room.readReceiptsAction(eventId);
+            room.showReadReceipts(eventId);
 
     }
     image: {