Use overlay buttons for message actions

1 files changed, 108 insertions, 0 deletions

diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml
index 0503f467..6c8a4917 100644
--- a/resources/qml/MessageView.qml
+++ b/resources/qml/MessageView.qml
@@ -1,4 +1,5 @@
 import "./delegates"
+import "./emoji"
 import QtGraphicalEffects 1.0
 import QtQuick 2.12
 import QtQuick.Controls 2.3
@@ -29,6 +30,95 @@ ScrollView {
 
         }
 
+        Rectangle {
+            //closePolicy: Popup.NoAutoClose
+
+            id: messageActions
+
+            property Item attached: null
+            property alias model: row.model
+            // use comma to update on scroll
+            property var attachedPos: chat.contentY, attached ? chat.mapFromItem(attached, attached ? attached.width - width : 0, -height) : null
+            property int padding: 4
+
+            visible: Settings.buttonsInTimeline && !!attached && (attached.hovered || messageActionHover.hovered)
+            x: attached ? attachedPos.x : 0
+            y: attached ? attachedPos.y : 0
+            z: 10
+            height: row.implicitHeight + padding * 2
+            width: row.implicitWidth + padding * 2
+            color: colors.window
+            border.color: colors.buttonText
+            border.width: 1
+            radius: padding
+
+            HoverHandler {
+                id: messageActionHover
+                grabPermissions: PointerHandler.CanTakeOverFromAnything
+            }
+
+            Row {
+                id: row
+
+                property var model
+
+                anchors.centerIn: parent
+                spacing: messageActions.padding
+
+                ImageButton {
+                    id: editButton
+
+                    visible: !!row.model && row.model.isEditable
+                    buttonTextColor: colors.buttonText
+                    width: 16
+                    hoverEnabled: true
+                    image: ":/icons/icons/ui/edit.png"
+                    ToolTip.visible: hovered
+                    ToolTip.text: row.model && row.model.isEditable ? qsTr("Edit") : qsTr("Edited")
+                    onClicked: {
+                        if (row.model.isEditable)
+                            chat.model.editAction(row.model.id);
+
+                    }
+                }
+
+                EmojiButton {
+                    id: reactButton
+
+                    width: 16
+                    hoverEnabled: true
+                    ToolTip.visible: hovered
+                    ToolTip.text: qsTr("React")
+                    emojiPicker: emojiPopup
+                    event_id: row.model ? row.model.id : ""
+                }
+
+                ImageButton {
+                    id: replyButton
+
+                    width: 16
+                    hoverEnabled: true
+                    image: ":/icons/icons/ui/mail-reply.png"
+                    ToolTip.visible: hovered
+                    ToolTip.text: qsTr("Reply")
+                    onClicked: chat.model.replyAction(row.model.id)
+                }
+
+                ImageButton {
+                    id: optionsButton
+
+                    width: 16
+                    hoverEnabled: true
+                    image: ":/icons/icons/ui/vertical-ellipsis.png"
+                    ToolTip.visible: hovered
+                    ToolTip.text: qsTr("Options")
+                    onClicked: messageContextMenu.show(row.model.id, row.model.type, row.model.isEncrypted, row.model.isEditable, optionsButton)
+                }
+
+            }
+
+        }
+
         ScrollHelper {
             flickable: parent
             anchors.fill: parent
@@ -203,7 +293,25 @@ ScrollView {
             TimelineRow {
                 id: timelinerow
 
+                property alias hovered: hoverHandler.hovered
+
                 y: section.visible && section.active ? section.y + section.height : 0
+
+                HoverHandler {
+                    id: hoverHandler
+
+                    enabled: !Settings.mobileMode
+
+                    onHoveredChanged: {
+                        if (hovered) {
+                            if (!messageActionHover.hovered) {
+                                messageActions.attached = timelinerow;
+                                messageActions.model = model;
+                            }
+                        }
+                    }
+                }
+
             }
 
             Connections {