modules/gui/qt/playlist/qml/PlaylistDelegate.qml

@@ -35,10 +35,14 @@ T.Control {
 
     readonly property int selectionLength: root.model.selectedCount
 
-    readonly property bool isLastItem: (index === listView.modelCount - 1)
-
     readonly property bool selected : model.selected
 
+    readonly property bool topContainsDrag: higherDropArea.containsDrag
+
+    readonly property bool bottomContainsDrag: lowerDropArea.containsDrag
+
+    readonly property bool containsDrag: (topContainsDrag || bottomContainsDrag)
+
     // Settings
 
     topPadding: VLCStyle.margin_xxsmall
@@ -69,18 +73,6 @@ T.Control {
             adjustTooltip()
     }
 
-    // Connections
-
-    Connections {
-        target: listView
-
-        onSetItemDropIndicatorVisible: {
-            if (index === model.index) {
-                topDropIndicator.visible = Qt.binding(function() { return visible || higherDropArea.containsDrag; })
-            }
-        }
-    }
-
     // Functions
 
     function adjustTooltip() {
@@ -213,22 +205,6 @@ T.Control {
         }
     }
 
-    Rectangle {
-        id: topDropIndicator
-
-        anchors {
-            left: parent.left
-            right: parent.right
-            top: parent.top
-        }
-
-        visible: higherDropArea.containsDrag
-
-        height: VLCStyle.dp(1, VLCStyle.scale)
-
-        color: colors.accent
-    }
-
     MouseArea {
         id: mouseArea
 
@@ -257,7 +233,7 @@ T.Control {
         onClicked: {
             /* to receive keys events */
             listView.forceActiveFocus()
-            if (listView.mode === PlaylistListView.Mode.Move) {
+            if (root.mode === PlaylistListView.Mode.Move) {
                 var selectedIndexes = root.model.getSelection()
                 if (selectedIndexes.length === 0)
                     return
@@ -269,7 +245,7 @@ T.Control {
                 listView.currentIndex = selectedIndexes[0]
                 root.model.moveItemsPre(selectedIndexes, preTarget)
                 return
-            } else if (listView.mode === PlaylistListView.Mode.Select) {
+            } else if (root.mode === PlaylistListView.Mode.Select) {
             } else if (!(root.model.isSelected(index) && mouse.button === Qt.RightButton)) {
                 listView.updateSelection(mouse.modifiers, listView.currentIndex, index)
                 listView.currentIndex = index
@@ -280,7 +256,7 @@ T.Control {
         }
 
         onDoubleClicked: {
-            if (mouse.button !== Qt.RightButton && listView.mode === PlaylistListView.Mode.Normal)
+            if (mouse.button !== Qt.RightButton && root.mode === PlaylistListView.Mode.Normal)
                 mainPlaylistController.goTo(index, true)
         }
 
@@ -345,29 +321,15 @@ T.Control {
             Layout.fillWidth: true
             Layout.fillHeight: true
 
-            function handleDropIndicators(visible) {
-                if (isLastItem)
-                    listView.footerItem.setDropIndicatorVisible(visible)
-                else
-                    listView.setItemDropIndicatorVisible(index + 1, visible)
-            }
-
             onEntered: {
                 if (!isDropAcceptable(drag, index + 1)) {
                     drag.accepted = false
                     return
                 }
-
-                handleDropIndicators(true)
-            }
-
-            onExited: {
-                handleDropIndicators(false)
             }
 
             onDropped: {
                 root.acceptDrop(index + 1, drop)
-                handleDropIndicators(false)
             }
         }
     }

modules/gui/qt/playlist/qml/PlaylistListView.qml

@@ -47,6 +47,8 @@ Control {
 
     property VLCColors colors: VLCStyle.colors
 
+    property int mode: PlaylistListView.Mode.Normal
+
     enum Mode {
         Normal,
         Select, // Keyboard item selection mode, activated through PlaylistOverlayMenu
@@ -240,11 +242,11 @@ Control {
             }
 
             Widgets.CaptionLabel {
-                color: (listView.mode === PlaylistListView.Mode.Select || listView.mode === PlaylistListView.Mode.Move)
+                color: (root.mode === PlaylistListView.Mode.Select || root.mode === PlaylistListView.Mode.Move)
                        ? colors.accent : colors.caption
                 visible: model.count !== 0
                 text: {
-                    switch (listView.mode) {
+                    switch (root.mode) {
                     case PlaylistListView.Mode.Select:
                         return I18n.qtr("Selected tracks: %1").arg(model.selectedCount)
                     case PlaylistListView.Mode.Move:
@@ -283,7 +285,7 @@ Control {
             Layout.leftMargin: VLCStyle.margin_normal
             Layout.rightMargin: Math.max(listView.scrollBarWidth, VLCStyle.margin_normal)
 
-            spacing: 0
+            spacing: VLCStyle.margin_large
 
             Widgets.IconLabel {
                 Layout.preferredWidth: VLCStyle.icon_normal
@@ -296,7 +298,6 @@ Control {
 
             Widgets.CaptionLabel {
                 Layout.fillWidth: true
-                Layout.leftMargin: VLCStyle.margin_large
 
                 verticalAlignment: Text.AlignVCenter
                 text: I18n.qtr("Title")
@@ -339,9 +340,8 @@ Control {
                                                : background.alternativeColor
 
             property int shiftIndex: -1
-            property int mode: PlaylistListView.Mode.Normal
 
-            signal setItemDropIndicatorVisible(int index, bool visible)
+            property PlaylistDelegate delegateContainsDrag: null
 
             onDeselectAll: {
                 root.model.deselectAll()
@@ -391,21 +391,7 @@ Control {
 
                 property alias firstItemIndicatorVisible: firstItemIndicator.visible
 
-                function setDropIndicatorVisible(visible) {
-                    dropIndicator.visible = Qt.binding(function() { return (visible || dropArea.containsDrag); })
-                }
-
-                Rectangle {
-                    id: dropIndicator
-
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: VLCStyle.dp(1)
-                    anchors.top: parent.top
-
-                    visible: (root.model.count > 0 && dropArea.containsDrag)
-                    color: colors.accent
-                }
+                readonly property bool containsDrag: dropArea.containsDrag
 
                 Rectangle {
                     id: firstItemIndicator
@@ -459,13 +445,44 @@ Control {
                 colors: root.colors
             }
 
+            Rectangle {
+                id: dropIndicator
+
+                parent: visible ? (listView.delegateContainsDrag ? listView.delegateContainsDrag
+                                                                 : listView.footerItem)
+                                : null
+                z: 99
+
+                anchors {
+                    left: !!parent ? parent.left : undefined
+                    right: !!parent ? parent.right : undefined
+                    top: listView.delegateContainsDrag ? (parent.topContainsDrag ? parent.top : undefined)
+                                                       : (parent ? parent.top : undefined)
+                    bottom: listView.delegateContainsDrag ? (parent.bottomContainsDrag ? parent.bottom : undefined)
+                                                          : undefined
+                    bottomMargin: -height
+                }
+
+                implicitHeight: VLCStyle.dp(1)
+
+                visible: !!listView.delegateContainsDrag || (listView.footerItem.containsDrag && !listView.footerItem.firstItemIndicatorVisible)
+                color: colors.accent
+            }
+
             delegate: PlaylistDelegate {
                 id: delegate
 
-                // Instead of property forwarding, PlaylistDelegate is tightly coupled with PlaylistlistView
-                // since PlaylistDelegate is expected to be used only within PlaylistlistView
-
                 width: listView.width
+
+                onContainsDragChanged: {
+                    if (delegate.topContainsDrag || delegate.bottomContainsDrag) {
+                        console.assert(listView.delegateContainsDrag === null)
+                        listView.delegateContainsDrag = delegate
+                    } else {
+                        console.assert(listView.delegateContainsDrag === delegate)
+                        listView.delegateContainsDrag = null
+                    }
+                }
             }
 
             add: Transition {
@@ -488,9 +505,9 @@ Control {
 
             onSelectAll: root.model.selectAll()
             onSelectionUpdated: {
-                if (listView.mode === PlaylistListView.Mode.Select) {
+                if (root.mode === PlaylistListView.Mode.Select) {
                     console.log("update selection select")
-                } else if (listView.mode === PlaylistListView.Mode.Move) {
+                } else if (root.mode === PlaylistListView.Mode.Move) {
                     var selectedIndexes = root.model.getSelection()
                     if (selectedIndexes.length === 0)
                         return

modules/gui/qt/playlist/qml/PlaylistOverlayMenu.qml

@@ -116,13 +116,13 @@ Widgets.OverlayMenu {
     Action {
         id: selectTracksAction
         text: I18n.qtr("Select Tracks")
-        onTriggered: listView.mode = PlaylistListView.Mode.Select
+        onTriggered: root.mode = PlaylistListView.Mode.Select
     }
 
     Action {
         id: moveTracksAction
         text: I18n.qtr("Move Selection")
-        onTriggered: listView.mode = PlaylistListView.Mode.Move
+        onTriggered: root.mode = PlaylistListView.Mode.Move
     }
 
     Action {