From 13baf774358e700de65ca7dc934eb276ea29442a Mon Sep 17 00:00:00 2001 From: Malte E <97891689+maltee1@users.noreply.github.com> Date: Thu, 24 Mar 2022 01:35:42 +0100 Subject: [PATCH] Better touch scrolling (#1012) --- resources/qml/MessageView.qml | 104 +++++++++++------------ resources/qml/TimelineRow.qml | 48 +++++------ resources/qml/delegates/ImageMessage.qml | 21 ++--- resources/qml/delegates/Reply.qml | 28 +++--- 4 files changed, 91 insertions(+), 110 deletions(-) diff --git a/resources/qml/MessageView.qml b/resources/qml/MessageView.qml index 90ba4787..3763c24a 100644 --- a/resources/qml/MessageView.qml +++ b/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) } } diff --git a/resources/qml/TimelineRow.qml b/resources/qml/TimelineRow.qml index 032821ba..947ba030 100644 --- a/resources/qml/TimelineRow.qml +++ b/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 { - onLongPressed: messageContextMenu.show(eventId, type, isSender, isEncrypted, isEditable, contentItem.child.hoveredLink, contentItem.child.copyText) - onDoubleTapped: chat.model.reply = eventId - gesturePolicy: TapHandler.ReleaseWithinBounds - } + onPressAndHold: messageContextMenu.show(eventId, type, isSender, isEncrypted, isEditable, contentItem.child.hoveredLink, contentItem.child.copyText) + onDoubleClicked: chat.model.reply = eventId - 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 - rightPadding: (Settings.bubbles && !isStateEvent)? 4: 2 - topPadding: rightPadding - bottomPadding: topPadding - 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 - } + property color userColor: TimelineManager.userColor(userId, Nheko.colors.base) + property color bgColor: Nheko.colors.base + color: (Settings.bubbles && !isStateEvent) ? Qt.tint(bgColor, Qt.hsla(userColor.hslHue, 0.5, userColor.hslLightness, 0.2)) : "#00000000" + radius: 4 - 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 diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml index 2ee8da7f..23cca019 100644 --- a/resources/qml/delegates/ImageMessage.qml +++ b/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 { - //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 - } + onClicked :Settings.openImageExternal ? room.openMedia(eventId) : TimelineManager.openImageOverlay(room, url, eventId); Item { id: overlay anchors.fill: parent - visible: mouseArea.hovered + visible: parent.hovered Rectangle { id: container diff --git a/resources/qml/delegates/Reply.qml b/resources/qml/delegates/Reply.qml index 27fb4e07..53a007fe 100644 --- a/resources/qml/delegates/Reply.qml +++ b/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)) + onSingleTapped: replyContextMenu.show(reply.child.copyText, reply.child.linkAt(eventPoint.position.x, eventPoint.position.y - userName_.implicitHeight), r.eventId) gesturePolicy: TapHandler.ReleaseWithinBounds }