From 676cf35c3f7f4135598a082683b57351d8450ade Mon Sep 17 00:00:00 2001
From: Black Hat <bhat@encom.eu.org>
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"