Use overlay buttons for message actions

resources/qml/EncryptionIndicator.qml

@@ -2,40 +2,24 @@ import QtQuick 2.12
 import QtQuick.Controls 2.1
 import im.nheko 1.0
 
-Rectangle {
-    id: indicator
+Image {
+    id: stateImg
 
     property bool encrypted: false
 
-    function getEncryptionImage() {
+    width: 16
+    height: 16
+    source: {
         if (encrypted)
             return "image://colorimage/:/icons/icons/ui/lock.png?" + colors.buttonText;
         else
             return "image://colorimage/:/icons/icons/ui/unlock.png?#dd3d3d";
     }
-
-    function getEncryptionTooltip() {
-        if (encrypted)
-            return qsTr("Encrypted");
-        else
-            return qsTr("This message is not encrypted!");
-    }
-
-    color: "transparent"
-    width: 16
-    height: 16
-    ToolTip.visible: ma.hovered && indicator.visible
-    ToolTip.text: getEncryptionTooltip()
+    ToolTip.visible: ma.hovered
+    ToolTip.text: encrypted ? qsTr("Encrypted") : qsTr("This message is not encrypted!")
 
     HoverHandler {
         id: ma
     }
 
-    Image {
-        id: stateImg
-
-        anchors.fill: parent
-        source: getEncryptionImage()
-    }
-
 }

resources/qml/MessageView.qml

 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 {

resources/qml/TimelineRow.qml

@@ -79,68 +79,26 @@ Item {
             encrypted: model.isEncrypted
             Layout.alignment: Qt.AlignRight | Qt.AlignTop
             Layout.preferredHeight: 16
-            width: 16
+            Layout.preferredWidth: 16
         }
 
-        ImageButton {
-            id: editButton
-
-            visible: (Settings.buttonsInTimeline && model.isEditable) || model.isEdited
-            buttonTextColor: chat.model.edit == model.id ? colors.highlight : colors.buttonText
+        Image {
+            visible: model.isEdited
             Layout.alignment: Qt.AlignRight | Qt.AlignTop
             Layout.preferredHeight: 16
+            Layout.preferredWidth: 16
+            height: 16
             width: 16
-            hoverEnabled: true
-            image: ":/icons/icons/ui/edit.png"
-            ToolTip.visible: hovered
-            ToolTip.text: model.isEditable ? qsTr("Edit") : qsTr("Edited")
-            onClicked: {
-                if (model.isEditable)
-                    chat.model.editAction(model.id);
+            sourceSize.width: 16
+            sourceSize.height: 16
+            source: "image://colorimage/:/icons/icons/ui/edit.png?" + colors.buttonText
+            ToolTip.visible: editHovered.hovered
+            ToolTip.text: qsTr("Edited")
 
+            HoverHandler {
+                id: editHovered
             }
-        }
-
-        EmojiButton {
-            id: reactButton
-
-            visible: Settings.buttonsInTimeline
-            Layout.alignment: Qt.AlignRight | Qt.AlignTop
-            Layout.preferredHeight: 16
-            width: 16
-            hoverEnabled: true
-            ToolTip.visible: hovered
-            ToolTip.text: qsTr("React")
-            emojiPicker: emojiPopup
-            event_id: model.id
-        }
 
-        ImageButton {
-            id: replyButton
-
-            visible: Settings.buttonsInTimeline
-            Layout.alignment: Qt.AlignRight | Qt.AlignTop
-            Layout.preferredHeight: 16
-            width: 16
-            hoverEnabled: true
-            image: ":/icons/icons/ui/mail-reply.png"
-            ToolTip.visible: hovered
-            ToolTip.text: qsTr("Reply")
-            onClicked: chat.model.replyAction(model.id)
-        }
-
-        ImageButton {
-            id: optionsButton
-
-            visible: Settings.buttonsInTimeline
-            Layout.alignment: Qt.AlignRight | Qt.AlignTop
-            Layout.preferredHeight: 16
-            width: 16
-            hoverEnabled: true
-            image: ":/icons/icons/ui/vertical-ellipsis.png"
-            ToolTip.visible: hovered
-            ToolTip.text: qsTr("Options")
-            onClicked: messageContextMenu.show(model.id, model.type, model.isEncrypted, model.isEditable, optionsButton)
         }
 
         Label {

resources/qml/delegates/NoticeMessage.qml

 TextMessage {
     font.italic: true
     color: colors.buttonText
-    height: isReply ? Math.min(timelineRoot.height / 8, implicitHeight) : undefined
-    clip: isReply
 }