Add Overlay sheet for message actions

qml/ChatTextInput.qml

@@ -16,10 +16,9 @@ Control {
 
     property alias isReply: replyItem.visible
     property bool isReaction: false
-    property var replyModel
-    readonly property var replyUser: replyModel ? replyModel.author : null
-    readonly property string replyEventID: replyModel ? replyModel.eventId : ""
-    readonly property string replyContent: replyModel ? replyModel.display : ""
+    property var replyUser
+    property string replyEventID
+    property string replyContent
 
     property alias isAutoCompleting: autoCompleteListView.visible
     property var autoCompleteModel
@@ -75,10 +74,7 @@ Control {
 
                     Label {
                         Layout.alignment: Qt.AlignVCenter
-
                         text: replyUser ? replyUser.displayName : "No name"
-                        color: "white"
-                        font.weight: Font.Medium
                         rightPadding: 8
                     }
                 }
@@ -417,6 +413,7 @@ Control {
                         messageEventType = RoomMessageEvent.Notice
                     }
 
+                    console.log(replyContent, replyUser, replyEventID, messageEventType);
                     currentRoom.postArbitaryMessage(text, messageEventType, replyEventID)
                 }
             }
@@ -444,7 +441,9 @@ Control {
 
     function clearReply() {
         isReply = false
-        replyModel = null
+        replyUser = null;
+        replyContent = "";
+        replyEventID = ""
     }
 
     function focus() {

qml/RoomPage.qml

@@ -105,6 +105,7 @@ Kirigami.ScrollablePage {
         id: messageListView
 
         spacing: Kirigami.Units.smallSpacing
+        clip: true
 
         displayMarginBeginning: 100
         displayMarginEnd: 100
@@ -152,6 +153,7 @@ Kirigami.ScrollablePage {
         //        }
 
         delegate: DelegateChooser {
+            id: timelineDelegateChooser
             role: "eventType"
 
             DelegateChoice {
@@ -182,11 +184,16 @@ Kirigami.ScrollablePage {
                 roleValue: "message"
                 delegate: TimelineContainer {
                     width: messageListView.width
-
+                    MouseArea {
+                        acceptedButtons: Qt.RightButton
+                        anchors.fill: parent
+                        onClicked: openMessageContext(author, display, eventId, toolTip);
+                    }
                     innerObject: MessageDelegate {
                         Layout.fillWidth: true
                         Layout.maximumWidth: messageListView.width
 
+
                         innerObject: TextDelegate {
                             Layout.fillWidth: true
                         }
@@ -292,4 +299,42 @@ Kirigami.ScrollablePage {
     }
 
     background: Item {}
+
+    function openMessageContext(author, message, eventId, toolTip, model) {
+        const contextMenu = messageDelegateContextMenu.createObject(root, {
+            'author': author,
+            'message': message
+        });
+        contextMenu.viewSource.connect(function() {
+            messageSourceDialog.createObject(root, {
+                'sourceText': toolTip,
+            }).open();
+            contextMenu.close();
+        });
+        contextMenu.reply.connect(function(replyUser, replyContent) {
+            chatTextInput.replyUser = replyUser;
+            chatTextInput.replyEventID = eventId;
+            chatTextInput.replyContent = replyContent;
+            chatTextInput.isReply = true;
+            chatTextInput.focus();
+            contextMenu.close();
+        })
+        contextMenu.remove.connect(function() {
+            currentRoom.redactEvent(eventId);
+            contextMenu.close();
+        })
+        contextMenu.open()
+    }
+
+    Component {
+        id: messageDelegateContextMenu
+
+        MessageDelegateContextMenu {}
+    }
+
+    Component {
+        id: messageSourceDialog
+
+        MessageSourceDialog {}
+    }
 }