From 676cf35c3f7f4135598a082683b57351d8450ade Mon Sep 17 00:00:00 2001 From: Black Hat Date: Mon, 6 May 2019 21:26:46 +0800 Subject: [PATCH] Add animation when switching between events. --- .../Component/Timeline/MessageDelegate.qml | 3 ++- imports/Spectral/Panel/RoomPanel.qml | 25 ++++++++++++++++++- imports/Spectral/Panel/RoomPanelInput.qml | 1 + 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/imports/Spectral/Component/Timeline/MessageDelegate.qml b/imports/Spectral/Component/Timeline/MessageDelegate.qml index cac2cb6..9d1ef6b 100644 --- a/imports/Spectral/Component/Timeline/MessageDelegate.qml +++ b/imports/Spectral/Component/Timeline/MessageDelegate.qml @@ -140,6 +140,7 @@ ColumnLayout { Avatar { Layout.preferredWidth: 28 Layout.preferredHeight: 28 + Layout.alignment: Qt.AlignTop source: replyVisible ? replyAuthor.avatarMediaId : "" hint: replyVisible ? replyAuthor.displayName : "H" @@ -156,7 +157,7 @@ ColumnLayout { Control { Layout.fillWidth: true - padding: 4 + padding: 0 background: RippleEffect { onClicked: goToEvent(replyEventId) diff --git a/imports/Spectral/Panel/RoomPanel.qml b/imports/Spectral/Panel/RoomPanel.qml index 0176e5c..26eb049 100644 --- a/imports/Spectral/Panel/RoomPanel.qml +++ b/imports/Spectral/Panel/RoomPanel.qml @@ -303,6 +303,28 @@ Item { onClicked: messageListView.positionViewAtBeginning() } + + NumberAnimation { + id: timelineAnimation + target: messageListView + property: "contentY" + easing.type: Easing.InOutQuad + duration: 500 + } + + function gotoIndex(idx) { + timelineAnimation.stop() + + var pos = contentY + var destPos + + positionViewAtIndex(idx, ListView.Contain) + destPos = contentY + + timelineAnimation.from = pos + timelineAnimation.to = destPos + timelineAnimation.start() + } } Control { @@ -350,7 +372,8 @@ Item { var index = messageEventModel.eventIDToIndex(eventID) if (index === -1) return // messageListView.currentIndex = sortedMessageEventModel.mapFromSource(index) - messageListView.positionViewAtIndex(sortedMessageEventModel.mapFromSource(index), ListView.Contain) + // messageListView.positionViewAtIndex(sortedMessageEventModel.mapFromSource(index), ListView.Contain) + messageListView.gotoIndex(sortedMessageEventModel.mapFromSource(index)) } function saveReadMarker(room) { diff --git a/imports/Spectral/Panel/RoomPanelInput.qml b/imports/Spectral/Panel/RoomPanelInput.qml index 90a0b28..a69ebb3 100644 --- a/imports/Spectral/Panel/RoomPanelInput.qml +++ b/imports/Spectral/Panel/RoomPanelInput.qml @@ -51,6 +51,7 @@ Control { Avatar { Layout.preferredWidth: 32 Layout.preferredHeight: 32 + Layout.alignment: Qt.AlignTop source: replyUser ? replyUser.avatarMediaId : "" hint: replyUser ? replyUser.displayName : "No name"