feat(ui/modules/Common/View/ScrollableListView): try other solution to scroll to bottom correctly

linphone-desktop/resources.qrc

@@ -262,6 +262,7 @@
     <file>ui/modules/Common/Styles/Tooltip/TooltipStyle.qml</file>
     <file>ui/modules/Common/Tooltip/TooltipArea.qml</file>
     <file>ui/modules/Common/Tooltip/Tooltip.qml</file>
+    <file>ui/modules/Common/View/ScrollableListView.js</file>
     <file>ui/modules/Common/View/ScrollableListView.qml</file>
     <file>ui/modules/Linphone/Account/AccountStatus.qml</file>
     <file>ui/modules/Linphone/Calls/CallControls.qml</file>

linphone-desktop/ui/modules/Common/Misc/ForceScrollBar.qml

@@ -26,6 +26,4 @@ ScrollBar {
     radius: ForceScrollBarStyle.contentItem.radius
   }
   hoverEnabled: true
-
-  visible: size < 1.0
 }

linphone-desktop/ui/modules/Common/View/ScrollableListView.js

@@ -0,0 +1,13 @@
+// =============================================================================
+// `ScrollableListView.qml` Logic.
+// =============================================================================
+
+function positionViewAtEnd () {
+  view.interactive = false
+  scrollAnimation.start()
+  view.interactive = true
+}
+
+function getYEnd () {
+  return view.originY + view.contentHeight - view.height
+}

linphone-desktop/ui/modules/Common/View/ScrollableListView.qml

@@ -3,25 +3,55 @@ import QtQuick.Controls 2.0
 
 import Common 1.0
 
+import 'ScrollableListView.js' as Logic
+
 // =============================================================================
 
 ListView {
-  id: listView
+  id: view
 
-  ScrollBar.horizontal: ForceScrollBar {
-    id: hScrollBar
+  // ---------------------------------------------------------------------------
 
-    onPressedChanged: pressed ? listView.movementStarted() : listView.movementEnded()
+  function positionViewAtEnd () {
+    Logic.positionViewAtEnd()
   }
 
+  // ---------------------------------------------------------------------------
+
   ScrollBar.vertical: ForceScrollBar {
     id: vScrollBar
 
-    onPressedChanged: pressed ? listView.movementStarted() : listView.movementEnded()
+    onPressedChanged: pressed ? view.movementStarted() : view.movementEnded()
   }
 
+  // ---------------------------------------------------------------------------
+
   boundsBehavior: Flickable.StopAtBounds
   clip: true
-  contentWidth: vScrollBar.visible ? width - vScrollBar.width : width
+  contentWidth: width - vScrollBar.width
   spacing: 0
+
+  // ---------------------------------------------------------------------------
+
+  SequentialAnimation {
+    id: scrollAnimation
+
+    ScriptAction {
+      script: {
+        view.contentY = view.contentY
+        view.contentY = Logic.getYEnd()
+        view.contentY = view.contentY
+      }
+    }
+
+    PauseAnimation {
+      duration: 200
+    }
+
+    ScriptAction {
+      script: {
+        view.contentY = Logic.getYEnd()
+      }
+    }
+  }
 }

linphone-desktop/ui/modules/Linphone/Chat/Chat.js

@@ -28,22 +28,6 @@ function getComponentFromEntry (chatEntry) {
   return chatEntry.isOutgoing ? 'OutgoingMessage.qml' : 'IncomingMessage.qml'
 }
 
-function handleCurrentItemChanged (currentItem) {
-  // Go to last item only!
-  if (!chat.bindToEnd || !currentItem || chat.currentIndex + 1 !== chat.count) {
-    return
-  }
-
-  var chatHeight = chat.height
-  var messageY = currentItem.mapToItem(chat.contentItem, 0, 0).y
-  var messageHeight = currentItem.height
-  console.log(chat.contentY, chatHeight, messageY)
-  if (chat.contentY <= messageY) {
-    chat.contentY = messageY
-  }
-  chat.currentIndex = -1
-}
-
 function handleFilesDropped (files) {
   chat.bindToEnd = true
   files.forEach(proxyModel.sendFileMessage)
@@ -69,7 +53,7 @@ function handleDataChanged (_, bottomRight) {
   var index = bottomRight.row
 
   if (chat.bindToEnd && index + 1 === n) {
-    chat.currentIndex = index
+    chat.positionViewAtEnd()
   }
 }
 

linphone-desktop/ui/modules/Linphone/Chat/Chat.qml

@@ -52,7 +52,6 @@ Rectangle {
       Component.onCompleted: Logic.initView()
 
       onContentYChanged: Logic.loadMoreEntries()
-      onCurrentItemChanged: Logic.handleCurrentItemChanged(currentItem)
       onMovementEnded: Logic.handleMovementEnded()
       onMovementStarted: Logic.handleMovementStarted()
 

linphone-desktop/ui/views/App/Main/Home.qml

@@ -12,8 +12,10 @@ import App.Styles 1.0
 Rectangle {
   color: HomeStyle.color
 
-  ScrollableListView {
+  ListView {
     anchors.horizontalCenter: parent.horizontalCenter
+    boundsBehavior: Flickable.StopAtBounds
+    clip: true
     orientation: ListView.Horizontal
     spacing: HomeStyle.spacing