Better touch scrolling (#1012)

resources/qml/MessageView.qml

@@ -362,7 +362,7 @@ Item {
 
         }
 
-        delegate: ItemDelegate {
+        delegate: Item {
             id: wrapper
 
             required property double proportionalHeight
@@ -407,55 +407,6 @@ Item {
             width: chat.delegateMaxWidth
             height: section.active ? section.height + timelinerow.height : timelinerow.height
 
-            hoverEnabled: true
-
-            background: Rectangle {
-                id: scrollHighlight
-
-                opacity: 0
-                visible: true
-                z: 1
-                enabled: false
-                color: Nheko.colors.highlight
-
-                states: State {
-                    name: "revealed"
-                    when: wrapper.scrolledToThis
-                }
-
-                transitions: Transition {
-                    from: ""
-                    to: "revealed"
-
-                    SequentialAnimation {
-                        PropertyAnimation {
-                            target: scrollHighlight
-                            properties: "opacity"
-                            easing.type: Easing.InOutQuad
-                            from: 0
-                            to: 1
-                            duration: 500
-                        }
-
-                        PropertyAnimation {
-                            target: scrollHighlight
-                            properties: "opacity"
-                            easing.type: Easing.InOutQuad
-                            from: 1
-                            to: 0
-                            duration: 500
-                        }
-
-                        ScriptAction {
-                            script: chat.model.eventShown()
-                        }
-
-                    }
-
-                }
-
-            }
-
             Loader {
                 id: section
 
@@ -480,8 +431,6 @@ Item {
             TimelineRow {
                 id: timelinerow
 
-                hovered: messageActions.hovered ? (messageActions.model != undefined && messageActions.model == timelinerow) : wrapper.hovered
-
                 proportionalHeight: wrapper.proportionalHeight
                 type: chat.model, wrapper.type
                 typeString: wrapper.typeString
@@ -523,7 +472,52 @@ Item {
                         }
                     }
                 }
+                background: Rectangle {
+                    id: scrollHighlight
 
+                    opacity: 0
+                    visible: true
+                    z: 1
+                    enabled: false
+                    color: Nheko.colors.highlight
+
+                    states: State {
+                        name: "revealed"
+                        when: wrapper.scrolledToThis
+                    }
+
+                    transitions: Transition {
+                        from: ""
+                        to: "revealed"
+
+                        SequentialAnimation {
+                            PropertyAnimation {
+                                target: scrollHighlight
+                                properties: "opacity"
+                                easing.type: Easing.InOutQuad
+                                from: 0
+                                to: 1
+                                duration: 500
+                            }
+
+                            PropertyAnimation {
+                                target: scrollHighlight
+                                properties: "opacity"
+                                easing.type: Easing.InOutQuad
+                                from: 1
+                                to: 0
+                                duration: 500
+                            }
+
+                            ScriptAction {
+                                script: chat.model.eventShown()
+                            }
+
+                        }
+
+                    }
+
+                }
             }
 
             Connections {
@@ -729,10 +723,12 @@ Item {
 
         property string text
         property string link
+        property string eventId
 
-        function show(text_, link_) {
+        function show(text_, link_, eventId_) {
             text = text_;
             link = link_;
+            eventId = eventId_;
             open();
         }
 
@@ -754,7 +750,7 @@ Item {
             visible: true
             enabled: visible
             text: qsTr("&Go to quoted message")
-            onTriggered: chat.model.showEvent(eventId)
+            onTriggered: chat.model.showEvent(replyContextMenu.eventId)
         }
 
     }

resources/qml/TimelineRow.qml

@@ -11,7 +11,7 @@ import QtQuick.Layouts 1.2
 import QtQuick.Window 2.13
 import im.nheko 1.0
 
-Item {
+AbstractButton {
     id: r
 
     required property double proportionalHeight
@@ -46,7 +46,7 @@ Item {
     required property int status
     required property int relatedEventCacheBuster
 
-    property bool hovered: false
+    hoverEnabled: true
 
     width: parent.width
     height: row.height+(reactionRow.height > 0 ? reactionRow.height-2 : 0 )
@@ -55,21 +55,18 @@ Item {
         color: (Settings.messageHoverHighlight && hovered) ? Nheko.colors.alternateBase : "transparent"
         anchors.fill: parent
         // this looks better without margins
+        TapHandler {
+            acceptedButtons: Qt.RightButton
+            onSingleTapped: messageContextMenu.show(eventId, type, isSender, isEncrypted, isEditable, contentItem.child.hoveredLink, contentItem.child.copyText)
+            gesturePolicy: TapHandler.ReleaseWithinBounds
+        }
     }
 
-    TapHandler {
-        acceptedButtons: Qt.RightButton
-        onSingleTapped: messageContextMenu.show(eventId, type, isSender, isEncrypted, isEditable, contentItem.child.hoveredLink, contentItem.child.copyText)
-        gesturePolicy: TapHandler.ReleaseWithinBounds
-    }
 
-    TapHandler {
+    onPressAndHold: messageContextMenu.show(eventId, type, isSender, isEncrypted, isEditable, contentItem.child.hoveredLink, contentItem.child.copyText)
-        onLongPressed: messageContextMenu.show(eventId, type, isSender, isEncrypted, isEditable, contentItem.child.hoveredLink, contentItem.child.copyText)
+    onDoubleClicked: chat.model.reply = eventId
-        onDoubleTapped: chat.model.reply = eventId
-        gesturePolicy: TapHandler.ReleaseWithinBounds
-    }
 
-    Control {
+    Rectangle {
         id: row
         property bool bubbleOnRight : isSender && Settings.bubbles
         anchors.leftMargin: isStateEvent || Settings.smallAvatars? 0 : Nheko.avatarSize+8 // align bubble with section header
@@ -78,20 +75,21 @@ Item {
         anchors.horizontalCenter: isStateEvent? parent.horizontalCenter : undefined
         property int maxWidth: (parent.width-(Settings.smallAvatars || isStateEvent? 0 : Nheko.avatarSize+8))*(Settings.bubbles && !isStateEvent? 0.9 : 1)
         width: Settings.bubbles? Math.min(maxWidth,Math.max(reply.implicitWidth+8,contentItem.implicitWidth+metadata.width+20)) : maxWidth
+        height: msg.height+msg.anchors.margins*2
 
-        leftPadding: 4
+        property color userColor: TimelineManager.userColor(userId, Nheko.colors.base)
-        rightPadding: (Settings.bubbles && !isStateEvent)? 4: 2
+        property color bgColor: Nheko.colors.base
-        topPadding: rightPadding
+        color: (Settings.bubbles && !isStateEvent) ? Qt.tint(bgColor, Qt.hsla(userColor.hslHue, 0.5, userColor.hslLightness, 0.2)) : "#00000000"
-        bottomPadding: topPadding
+        radius: 4
-        background: Rectangle {
-            property color userColor: TimelineManager.userColor(userId, Nheko.colors.base)
-            property color bgColor: Nheko.colors.base
-            color: Qt.tint(bgColor, Qt.hsla(userColor.hslHue, 0.5, userColor.hslLightness, 0.2))
-            radius: 4
-            visible: Settings.bubbles && !isStateEvent
-        }
 
-        contentItem: GridLayout {
+        GridLayout {
+            anchors {
+                left: parent.left
+                top: parent.top
+                right: parent.right
+                margins: (Settings.bubbles && ! isStateEvent)? 4 : 2
+                leftMargin: 4
+            }
             id: msg
             rowSpacing: 0
             columnSpacing: 2

resources/qml/delegates/ImageMessage.qml

@@ -5,9 +5,10 @@
 
 import QtQuick 2.15
 import QtQuick.Window 2.15
+import QtQuick.Controls 2.3
 import im.nheko 1.0
 
-Item {
+AbstractButton {
     required property int type
     required property int originalWidth
     required property double proportionalHeight
@@ -24,6 +25,7 @@ Item {
     implicitWidth: Math.round(tempWidth*Math.min((timelineView.height/divisor)/(tempWidth*proportionalHeight), 1))
     width: Math.min(parent.width,implicitWidth)
     height: width*proportionalHeight
+    hoverEnabled: true
 
     property int metadataWidth
     property bool fitsMetadata: (parent.width - width) > metadataWidth+4
@@ -61,28 +63,17 @@ Item {
         visible: loaded
         anchors.fill: parent
         roomm: room
-        play: !Settings.animateImagesOnHover || mouseArea.hovered
+        play: !Settings.animateImagesOnHover || parent.hovered
         eventId: parent.eventId
     }
 
-    TapHandler {
+    onClicked :Settings.openImageExternal ? room.openMedia(eventId) : TimelineManager.openImageOverlay(room, url, eventId);
-        //enabled: type == MtxEvent.ImageMessage && (img.status == Image.Ready || mxcimage.loaded)
-        onSingleTapped: {
-            Settings.openImageExternal ? room.openMedia(eventId) : TimelineManager.openImageOverlay(room, url, eventId);
-            eventPoint.accepted = true;
-        }
-        gesturePolicy: TapHandler.ReleaseWithinBounds
-    }
-
-    HoverHandler {
-        id: mouseArea
-    }
 
     Item {
         id: overlay
 
         anchors.fill: parent
-        visible: mouseArea.hovered
+        visible: parent.hovered
 
         Rectangle {
             id: container

resources/qml/delegates/Reply.qml

@@ -11,7 +11,7 @@ import QtQuick.Window 2.13
 import im.nheko 1.0
 import "../"
 
-Item {
+AbstractButton {
     id: r
 
     property color userColor: "red"
@@ -57,6 +57,16 @@ Item {
         color: TimelineManager.userColor(userId, Nheko.colors.base)
     }
 
+    onClicked: {
+        let link = reply.child.linkAt != undefined && reply.child.linkAt(pressX-colorLine.width, pressY - userName_.implicitHeight);
+        if (link) {
+            Nheko.openLink(link)
+        } else {
+            room.showEvent(r.eventId)
+        }
+    }
+    onPressAndHold: replyContextMenu.show(reply.child.copyText, reply.child.linkAt(pressX-colorLine.width, pressY - userName_.implicitHeight), r.eventId)
+
     ColumnLayout {
         id: replyContainer
 
@@ -64,23 +74,9 @@ Item {
         width: parent.width - 4
         spacing: 0
 
-        TapHandler {
-            acceptedButtons: Qt.LeftButton
-            onSingleTapped: {
-                let link = reply.child.linkAt != undefined && reply.child.linkAt(eventPoint.position.x, eventPoint.position.y - userName_.implicitHeight);
-                if (link) {
-                    Nheko.openLink(link)
-                } else {
-                    room.showEvent(r.eventId)
-                }
-            }
-            gesturePolicy: TapHandler.ReleaseWithinBounds
-        }
-
         TapHandler {
             acceptedButtons: Qt.RightButton
-            onLongPressed: replyContextMenu.show(reply.child.copyText, reply.child.linkAt(eventPoint.position.x, eventPoint.position.y - userName_.implicitHeight))
+            onSingleTapped: replyContextMenu.show(reply.child.copyText, reply.child.linkAt(eventPoint.position.x, eventPoint.position.y - userName_.implicitHeight), r.eventId)
-            onSingleTapped: replyContextMenu.show(reply.child.copyText, reply.child.linkAt(eventPoint.position.x, eventPoint.position.y - userName_.implicitHeight))
             gesturePolicy: TapHandler.ReleaseWithinBounds
         }