modules/gui/qt/maininterface/qml/MainDisplay.qml

@@ -426,6 +426,8 @@ FocusScope {
 
                                 property bool _inhibitMainInterfaceUpdate: false
 
+                                parent: playlist
+
                                 anchors {
                                     top: parent.top
                                     bottom: parent.bottom

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

@@ -32,7 +32,9 @@ T.ItemDelegate {
 
     // Properties
 
-    readonly property int selectionLength: root.model.selectedCount
+    property Flickable view: ListView.view
+
+    readonly property int selectionLength: view.model.selectedCount
 
     readonly property bool selected : model.selected
 
@@ -42,13 +44,28 @@ T.ItemDelegate {
 
     readonly property bool containsDrag: (topContainsDrag || bottomContainsDrag)
 
+    // Optional
+    property var contextMenu
+
+    // Optional, an item to show as drag target
+    property Item dragItem
+
+    // Optional, used to show the drop indicator
+    property var isDropAcceptable
+
+    // Optional, but required to drop a drag
+    property var acceptDrop
+
+    // Optional, but required for some actions
+    property int mode: -1
+
     // Settings
 
     verticalPadding: VLCStyle.playlistDelegate_verticalPadding
 
-    leftPadding: VLCStyle.margin_xxsmall
+    leftPadding: VLCStyle.margin_normal
 
-    rightPadding: Math.max(listView.scrollBarWidth, VLCStyle.margin_normal)
+    rightPadding: VLCStyle.margin_normal
 
     implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                             implicitContentWidth + leftPadding + rightPadding)
@@ -57,8 +74,7 @@ T.ItemDelegate {
 
     ListView.delayRemove: mouseArea.drag.active
 
-    T.ToolTip.visible: ( (visualFocus || hovered) &&
-                         !overlayMenu.shown && MainCtx.playlistVisible &&
+    T.ToolTip.visible: ( visible && (visualFocus || hovered) &&
                          (textInfoColumn.implicitWidth > textInfoColumn.width) )
 
     // NOTE: This is useful for keyboard navigation on a column, to avoid blocking visibility on
@@ -74,7 +90,7 @@ T.ItemDelegate {
     // Functions
 
     function moveSelected() {
-        const selectedIndexes = root.model.getSelection()
+        const selectedIndexes = view.model.getSelection()
         if (selectedIndexes.length === 0)
             return
         let preTarget = index
@@ -82,8 +98,8 @@ T.ItemDelegate {
          * _below_ the clicked item if move down */
         if (preTarget > selectedIndexes[0])
             preTarget++
-        listView.currentIndex = selectedIndexes[0]
-        root.model.moveItemsPre(selectedIndexes, preTarget)
+        view.currentIndex = selectedIndexes[0]
+        view.model.moveItemsPre(selectedIndexes, preTarget)
     }
 
     // Childs
@@ -105,20 +121,22 @@ T.ItemDelegate {
 
         activeBorderColor: theme.visualFocus
 
-        visible: animationRunning || active || selected || hovered
-    }
-
-    contentItem: RowLayout {
-        spacing: 0
-
         Widgets.CurrentIndicator {
             id: currentIndicator
 
+            anchors {
+                left: parent.left
+                top: parent.top
+                bottom: parent.bottom
+                leftMargin: VLCStyle.margin_xxsmall
+                topMargin: VLCStyle.margin_xxsmall
+                bottomMargin: anchors.topMargin
+            }
+
             // disable positioning via CurrentIndicator, manually position according to RowLayout
             source: null
 
             implicitWidth: VLCStyle.heightBar_xxxsmall
-            Layout.fillHeight: true
 
             color: {
                 if (model.isCurrent)
@@ -131,6 +149,10 @@ T.ItemDelegate {
                 return theme.indicator
             }
         }
+    }
+
+    contentItem: RowLayout {
+        spacing: 0
 
         Item {
             id: artworkItem
@@ -138,7 +160,6 @@ T.ItemDelegate {
             Layout.preferredHeight: VLCStyle.icon_playlistArt
             Layout.preferredWidth: VLCStyle.icon_playlistArt
             Layout.alignment: Qt.AlignVCenter
-            Layout.leftMargin: VLCStyle.margin_xsmall
 
             Accessible.role: Accessible.Graphic
             Accessible.name: I18n.qtr("Cover")
@@ -247,29 +268,31 @@ T.ItemDelegate {
 
         onClicked: {
             /* to receive keys events */
-            listView.forceActiveFocus()
-            if (root.mode === PlaylistListView.Mode.Move) {
+            view.forceActiveFocus(Qt.MouseFocusReason)
+            if (mode === PlaylistListView.Mode.Move) {
                 moveSelected()
                 return
-            } 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
+            } else if (mode === PlaylistListView.Mode.Select) {
+            } else if (!(view.model.isSelected(index) && mouse.button === Qt.RightButton)) {
+                view.updateSelection(mouse.modifiers, view.currentIndex, index)
+                view.currentIndex = index
             }
 
-            if (mouse.button === Qt.RightButton)
+            if (contextMenu && mouse.button === Qt.RightButton)
                 contextMenu.popup(index, this.mapToGlobal(mouse.x, mouse.y))
         }
 
         onDoubleClicked: {
-            if (mouse.button !== Qt.RightButton && root.mode === PlaylistListView.Mode.Normal)
+            if (mouse.button !== Qt.RightButton && (mode >= 0 && mode === PlaylistListView.Mode.Normal))
                 MainPlaylistController.goTo(index, true)
         }
 
         onPressed: {
-            const pos = mapToItem(dragItem.parent, mouseX, mouseY)
-            dragItem.x = pos.x + VLCStyle.dragDelta
-            dragItem.y = pos.y + VLCStyle.dragDelta
+            if (dragItem) {
+                const pos = mapToItem(dragItem.parent, mouseX, mouseY)
+                dragItem.x = pos.x + VLCStyle.dragDelta
+                dragItem.y = pos.y + VLCStyle.dragDelta
+            }
         }
 
         drag.target: dragItem
@@ -277,16 +300,18 @@ T.ItemDelegate {
         drag.smoothed: false
 
         drag.onActiveChanged: {
-            if (drag.active) {
-                if (!selected) {
-                    /* the dragged item is not in the selection, replace the selection */
-                    root.model.setSelection([index])
+            if (dragItem) {
+                if (drag.active) {
+                    if (!selected) {
+                        /* the dragged item is not in the selection, replace the selection */
+                        view.model.setSelection([index])
+                    }
+
+                    dragItem.indexes = view.model.getSelection()
+                    dragItem.Drag.active = true
+                } else {
+                    dragItem.Drag.drop()
                 }
-
-                dragItem.indexes = root.model.getSelection()
-                dragItem.Drag.active = true
-            } else {
-                dragItem.Drag.drop()
             }
         }
 
@@ -294,15 +319,16 @@ T.ItemDelegate {
             acceptedDevices: PointerDevice.TouchScreen
             
             onTapped: {
-                if (root.mode === PlaylistListView.Mode.Normal) {
+                if (mode >= 0 && mode === PlaylistListView.Mode.Normal) {
                     MainPlaylistController.goTo(index, true)
-                } else if (root.mode === PlaylistListView.Mode.Move) {
+                } else if (mode >= 0 && mode === PlaylistListView.Mode.Move) {
                     moveSelected()
                 }
             }
 
             onLongPressed: {
-                contextMenu.popup(index, point.scenePosition)
+                if (contextMenu)
+                    contextMenu.popup(index, point.scenePosition)
             }
         }
     }
@@ -318,14 +344,20 @@ T.ItemDelegate {
             Layout.fillHeight: true
 
             onEntered: {
-                if (!isDropAcceptable(drag, index)) {
+                if (!acceptDrop) {
+                    drag.accept = false
+                    return
+                }
+
+                if (isDropAcceptable && !isDropAcceptable(drag, index)) {
                     drag.accepted = false
                     return
                 }
             }
 
             onDropped: {
-                root.acceptDrop(index, drop)
+                console.assert(acceptDrop)
+                acceptDrop(index, drop)
             }
         }
 
@@ -336,14 +368,20 @@ T.ItemDelegate {
             Layout.fillHeight: true
 
             onEntered: {
-                if (!isDropAcceptable(drag, index + 1)) {
+                if (!acceptDrop) {
+                    drag.accept = false
+                    return
+                }
+
+                if (isDropAcceptable && !isDropAcceptable(drag, index + 1)) {
                     drag.accepted = false
                     return
                 }
             }
 
             onDropped: {
-                root.acceptDrop(index + 1, drop)
+                console.assert(acceptDrop)
+                acceptDrop(index + 1, drop)
             }
         }
     }

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

@@ -28,25 +28,36 @@ import "qrc:///widgets/" as Widgets
 import "qrc:///util/Helpers.js" as Helpers
 import "qrc:///style/"
 
-Control {
+T.Pane {
     id: root
 
-    property alias model: listView.model
+    property var model: PlaylistListModel {
+        playlist: MainPlaylistController.playlist
+    }
 
     property bool useAcrylic: true
 
-    readonly property real minimumWidth: noContentInfoColumn.implicitWidth +
+    readonly property real minimumWidth: contentItem.Layout.minimumWidth +
                                          leftPadding +
                                          rightPadding +
                                          2 * (VLCStyle.margin_xsmall)
 
+    readonly property ListView listView: contentItem.listView
+
+    property alias contextMenu: contextMenu
+
+    property alias dragItem: dragItem
+
+    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
+                            contentWidth + leftPadding + rightPadding)
+    implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
+                             contentHeight + topPadding + bottomPadding)
+
     topPadding: VLCStyle.margin_normal
     bottomPadding: VLCStyle.margin_normal
 
     Accessible.name: I18n.qtr("Playqueue")
 
-    onActiveFocusChanged: if (activeFocus) listView.forceActiveFocus(focusReason)
-
     readonly property ColorContext colorContext: ColorContext {
         id: theme
         colorSet: ColorContext.View
@@ -106,32 +117,23 @@ Control {
         listView.forceActiveFocus();
     }
 
-    Loader {
+    PlaylistOverlayMenu {
         id: overlayMenu
+
         anchors.fill: parent
+        parent: root
         z: 1
 
-        active: MainCtx.playlistDocked
-
-        focus: shown ? item.focus : false
-
-        onFocusChanged: {
-            if (!focus)
-                listView.forceActiveFocus(Qt.BacktabFocusReason)
-        }
-
-        readonly property bool shown: (status === Loader.Ready) ? item.visible : false
-
-        function open() {
-            if (status === Loader.Ready)
-                item.open()
+        onVisibleChanged: {
+            if (visible)
+                focus = true
+            else
+                listView.focus = true
         }
 
-        sourceComponent: PlaylistOverlayMenu {
-            isRight: true
-            rightPadding: VLCStyle.margin_xsmall + VLCStyle.applicationHorizontalMargin
-            bottomPadding: VLCStyle.margin_large + root.bottomPadding
-        }
+        isRight: true
+        rightPadding: VLCStyle.margin_xsmall + VLCStyle.applicationHorizontalMargin
+        bottomPadding: VLCStyle.margin_large + root.bottomPadding
     }
 
     Widgets.DragItem {
@@ -168,6 +170,10 @@ Control {
     contentItem: ColumnLayout {
         spacing: 0
 
+        Layout.minimumWidth: noContentInfoColumn.implicitWidth
+
+        readonly property ListView listView: listView
+
         ColumnLayout {
             id: headerTextLayout
 
@@ -276,9 +282,7 @@ Control {
 
             clip: true // else out of view items will overlap with surronding items
 
-            model: PlaylistListModel {
-                playlist: MainPlaylistController.playlist
-            }
+            model: root.model
 
             dragAutoScrollDragItem: dragItem
 
@@ -420,6 +424,21 @@ Control {
                 id: delegate
 
                 width: listView.width
+                rightPadding: Math.max(listView.ScrollBar.vertical.width, VLCStyle.margin_normal)
+
+                contextMenu: root.contextMenu
+
+                dragItem: root.dragItem
+
+                isDropAcceptable: root.isDropAcceptable
+                acceptDrop: root.acceptDrop
+
+                mode: root.mode
+
+                BindingCompat on T.ToolTip.visible {
+                    value: false
+                    when: overlayMenu.visible
+                }
 
                 onContainsDragChanged: listView.updateItemContainsDrag(this, containsDrag)
             }

modules/gui/qt/widgets/qml/KeyNavigableListView.qml

@@ -294,7 +294,8 @@ FadingEdgeListView {
         acceptedButtons: Qt.LeftButton | Qt.RightButton
 
         onPressed: {
-            Helpers.enforceFocus(root, Qt.MouseFocusReason)
+            focus = true // Grab the focus from delegate
+            root.forceActiveFocus(Qt.MouseFocusReason) // Re-focus the list
 
             if (!(mouse.modifiers & (Qt.ShiftModifier | Qt.ControlModifier))) {
                 root.deselectAll()