[vlc-devel] [PATCH 04/16] qml: set proper drop areas for playlist item dragging

[Fatih Uzunoglu]

---
 modules/gui/qt/playlist/qml/PLItem.qml        | 114 ++++++++++++++----
 modules/gui/qt/playlist/qml/PLItemFooter.qml  |  24 +++-
 .../gui/qt/playlist/qml/PlaylistListView.qml  |   2 +
 3 files changed, 111 insertions(+), 29 deletions(-)

diff --git a/modules/gui/qt/playlist/qml/PLItem.qml b/modules/gui/qt/playlist/qml/PLItem.qml
index cd673b112e..348babada2 100644
--- a/modules/gui/qt/playlist/qml/PLItem.qml
+++ b/modules/gui/qt/playlist/qml/PLItem.qml
@@ -28,7 +28,7 @@ import "qrc:///style/"
 
 
 Rectangle {
-    id: root
+    id: plitem
 
     property var plmodel
 
@@ -56,6 +56,16 @@ Rectangle {
 
     property bool dropVisible: false
 
+    Connections {
+        target: root
+
+        onSetItemDropIndicatorVisible: {
+            if (index === model.index)
+            {
+                dropVisible = isVisible
+            }
+        }
+    }
 
     Rectangle {
         z: 2
@@ -75,11 +85,11 @@ Rectangle {
         acceptedButtons: acceptedButtons | Qt.RightButton
 
         onClicked:{
-            root.itemClicked(mouse.button, mouse.modifiers);
+            plitem.itemClicked(mouse.button, mouse.modifiers);
         }
         onDoubleClicked: {
             if (mouse.button !== Qt.RightButton)
-                root.itemDoubleClicked(mouse.buttons, mouse.modifiers);
+                plitem.itemDoubleClicked(mouse.buttons, mouse.modifiers);
         }
 
         drag.target: dragItem
@@ -92,7 +102,7 @@ Rectangle {
                 if (mouse.__rightButton)
                     return
                 if (target.active) {
-                    root.dragStarting()
+                    plitem.dragStarting()
                     dragItem.model = model
                     dragItem.count = plmodel.getSelection().length
                     dragItem.visible = true
@@ -124,15 +134,15 @@ Rectangle {
         Rectangle {
             color: _colors.bg
             anchors.fill: parent
-            visible: model.isCurrent && !root.hovered && !model.selected
+            visible: model.isCurrent && !plitem.hovered && !model.selected
         }
 
         RowLayout {
             id: content
             anchors {
                 fill: parent
-                leftMargin: root.leftPadding
-                rightMargin: root.rightPadding
+                leftMargin: plitem.leftPadding
+                rightMargin: plitem.rightPadding
             }
 
             Item {
@@ -208,32 +218,84 @@ Rectangle {
                     text: "-00:00-"
                 }
             }
-
         }
 
-        DropArea {
-            anchors { fill: parent }
-            onEntered: {
-                var delta = drag.source.model.index - model.index
-                if(delta === 0 || delta === -1)
-                    return
+        ColumnLayout {
+            anchors.fill: parent
+            spacing: 0
+
+            DropArea {
+                id: higherDropArea
+                Layout.fillWidth: true
+                Layout.preferredHeight: parent.height / 2
+
+                onEntered: {
+                    var delta = drag.source.model.index - model.index
+                    if(delta === 0 || delta === -1)
+                        return
+
+                    dropVisible = true
+                }
+                onExited: {
+                    var delta = drag.source.model.index - model.index
+                    if(delta === 0 || delta === -1)
+                        return
+
+                    dropVisible = false
+                }
+                onDropped: {
+                    var delta = drag.source.model.index - model.index
+                    if(delta === 0 || delta === -1)
+                        return
 
-                dropVisible = true
+                    plitem.dropedMovedAt(model.index, drop)
+                    dropVisible = false
+                }
             }
-            onExited: {
-                var delta = drag.source.model.index - model.index
-                if(delta === 0 || delta === -1)
-                    return
 
-                dropVisible = false
+            DropArea {
+                id: lowerDropArea
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+
+                // not visible on the last item since PLItemFooter handles it
+                visible: model.index !== plitem.plmodel.count - 1
+
+                onEntered: {
+                    var delta = drag.source.model.index - model.index
+                    if(delta === 0 || delta === 1)
+                        return
+
+
+                    root.setItemDropIndicatorVisible(model.index + 1, true, true);
+                }
+                onExited: {
+                    var delta = drag.source.model.index - model.index
+                    if(delta === 0 || delta === 1)
+                        return
+
+                    root.setItemDropIndicatorVisible(model.index + 1, false, true);
+                }
+                onDropped: {
+                    var delta = drag.source.model.index - model.index
+                    if(delta === 0 || delta === 1)
+                        return
+
+                    plitem.dropedMovedAt(model.index + 1, drop)
+                    root.setItemDropIndicatorVisible(model.index + 1, false, true);
+                }
             }
-            onDropped: {
-                var delta = drag.source.model.index - model.index
-                if(delta === 0 || delta === -1)
-                    return
 
-                root.dropedMovedAt(model.index, drop)
-                dropVisible = false
+            PLItemFooter {
+               Layout.fillWidth: true
+               Layout.fillHeight: true
+
+               visible: !lowerDropArea.visible
+
+               dropIndicatorBottom: true
+               onDropURLAtEnd: mainPlaylistController.insert(plitem.plmodel.count, urlList)
+               onMoveAtEnd: plitem.plmodel.moveItemsPost(plitem.plmodel.getSelection(), plitem.plmodel.count - 1)
+               listCount: plitem.plmodel.count
             }
         }
     }
diff --git a/modules/gui/qt/playlist/qml/PLItemFooter.qml b/modules/gui/qt/playlist/qml/PLItemFooter.qml
index 958dc79e77..f9ba37e257 100644
--- a/modules/gui/qt/playlist/qml/PLItemFooter.qml
+++ b/modules/gui/qt/playlist/qml/PLItemFooter.qml
@@ -28,17 +28,22 @@ Item {
     signal moveAtEnd()
 
     property bool _dropVisible: false
+    property bool dropIndicatorBottom: false
 
     width: parent.width
     height: Math.max(VLCStyle.icon_normal, view.height - y)
 
-    Rectangle {
+    Loader {
+        active: !dropIndicatorBottom
         width: parent.width
         anchors.top: parent.top
         antialiasing: true
-        height: 2
+        height: 1
         visible: foot._dropVisible
-        color: VLCStyle.colors.accent
+
+        sourceComponent: Rectangle {
+            color: VLCStyle.colors.accent
+        }
     }
 
     DropArea {
@@ -72,4 +77,17 @@ Item {
             foot._dropVisible = false
         }
     }
+
+    Loader {
+        active: dropIndicatorBottom
+        width: parent.width
+        anchors.top: parent.bottom
+        antialiasing: true
+        height: 1
+        visible: foot._dropVisible
+
+        sourceComponent: Rectangle {
+            color: VLCStyle.colors.accent
+        }
+    }
 }
diff --git a/modules/gui/qt/playlist/qml/PlaylistListView.qml b/modules/gui/qt/playlist/qml/PlaylistListView.qml
index fa7256f279..78e482b440 100644
--- a/modules/gui/qt/playlist/qml/PlaylistListView.qml
+++ b/modules/gui/qt/playlist/qml/PlaylistListView.qml
@@ -42,6 +42,8 @@ Widgets.NavigableFocusScope {
     property bool forceDark: false
     property VLCColors _colors: forceDark ? vlcNightColors : VLCStyle.colors
 
+    signal setItemDropIndicatorVisible(int index, bool isVisible)
+
     VLCColors {id: vlcNightColors; state: "night"}
 
     Rectangle {
-- 
2.25.1