adding a bar to track the active slide

src/qml/presenter/Presentation.qml

@@ -177,23 +177,44 @@ FocusScope {
     }
 
     ListView {
+        // The active items X value from root
+        property int activeX
         id: previewSlidesList
         anchors.top: mainGrid.bottom
-        anchors.bottom: root.bottom
+        anchors.bottom: root.bottom - Kirigami.Units.gridUnit
         width: parent.width
         orientation: ListView.Horizontal
         spacing: Kirigami.Units.smallSpacing * 2
         cacheBuffer: 900
         reuseItems: true
-
         model: serviceItemModel
         delegate: Presenter.PreviewSlideListDelegate {}
+
         Kirigami.WheelHandler {
             id: wheelHandler
             target: previewSlidesList
             filterMouseEvents: true
+            onWheel: {
+                wheel.accepted = true;
+                showPassiveNotification(wheel.inverted)
+            }
+        }
     }
 
+    Rectangle {
+        id: activeHighlightBar
+        width: previewSlidesList.currentItem.width - Kirigami.Units.smallSpacing * 2
+        height: Kirigami.Units.gridUnit / 4
+        y: previewSlidesList.y + Kirigami.Units.gridUnit * 6
+        x: previewSlidesList.currentItem.x + Kirigami.Units.smallSpacing
+        radius: 5
+        color: Kirigami.Theme.negativeTextColor
+
+        Behavior on x { PropertyAnimation {
+            properties: "x"
+            easing.type: Easing.InOutQuad;
+            duration: 150
+        }}
     }
 
     Item {

src/qml/presenter/PreviewSlideListDelegate.qml

@@ -66,17 +66,6 @@ Item {
                         onClicked: changeSlideAndIndex(outerModelData, index)
                         cursorShape: Qt.PointingHandCursor
                     }
-
-                    Rectangle {
-                        id: activeHighlightBar
-                        width: previewSlideItem.width
-                        height: Kirigami.Units.gridUnit / 4
-                        anchors.top: previewSlideItem.bottom
-                        anchors.left: previewSlideItem.left
-                        anchors.topMargin: Kirigami.Units.smallSpacing
-                        color: Kirigami.Theme.negativeTextColor
-                        visible: outerModelData.active && SlideObject.slideIndex == index - 1
-                    }
                 }
             }
         }
@@ -105,15 +94,17 @@ Item {
         Connections {
             target: serviceItemModel
             onDataChanged: if (active)
-                previewSlidesList.positionViewAtIndex(index, ListView.Center)
+                previewSlidesList.positionViewAtIndex(index, ListView.Contain)
         }
     }
 
     function changeSlideAndIndex(serviceItem, index) {
         // TODO
         console.log("Item: " + serviceItem.index + " is " + serviceItem.active);
-        if (!serviceItem.active)
+        if (!serviceItem.active) {
             changeServiceItem(serviceItem.index)
+            previewSlidesList.currentIndex = serviceItem.index;
+        }
         console.log("Slide Index is: " + index);
         if (index === 0)
             return;