[vlc-devel] [PATCH 04/27] qml: hide playlist separator when drop indicator is visible

[Fatih Uzunoglu]

---
 modules/gui/qt/playlist/qml/PLItem.qml        | 17 +++++++-------
 .../gui/qt/playlist/qml/PlaylistListView.qml  | 23 ++++++++++++++++---
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/modules/gui/qt/playlist/qml/PLItem.qml b/modules/gui/qt/playlist/qml/PLItem.qml
index 8b76bacf2b..e5bc926da1 100644
--- a/modules/gui/qt/playlist/qml/PLItem.qml
+++ b/modules/gui/qt/playlist/qml/PLItem.qml
@@ -54,8 +54,6 @@ Rectangle {
 
     height: Math.max( VLCStyle.fontHeight_normal, VLCStyle.icon_normal ) + VLCStyle.margin_xsmall
 
-    property bool dropVisible: false
-
     function showTooltip(binding) {
         plInfoTooltip.close()
         plInfoTooltip.text = Qt.binding(function() { return (textInfo.text + '\n' + textArtist.text); })
@@ -90,7 +88,7 @@ Rectangle {
                 if (top)
                 {
                     // show top drop indicator bar
-                    dropVisible = isVisible
+                    topDropIndicator.visible = isVisible
                 }
                 else
                 {
@@ -103,12 +101,13 @@ Rectangle {
 
     // top drop indicator bar
     Rectangle {
-        z: 2
+        id: topDropIndicator
+        z: 1
         width: parent.width
         height: 1
         anchors.top: parent.top
         antialiasing: true
-        visible: dropVisible
+        visible: false
         color: _colors.accent
     }
 
@@ -119,7 +118,7 @@ Rectangle {
         active: model.index === root.plmodel.count - 1
         visible: false
 
-        z: 2
+        z: 1
         width: parent.width
         height: 1
         anchors.top: parent.bottom
@@ -293,10 +292,10 @@ Rectangle {
                     if(delta === 0 || delta === -1)
                         return
 
-                    dropVisible = true
+                    root.setItemDropIndicatorVisible(model.index, true, true)
                 }
                 onExited: {
-                    dropVisible = false
+                    root.setItemDropIndicatorVisible(model.index, false, true)
                 }
                 onDropped: {
                     var delta = 1
@@ -308,7 +307,7 @@ Rectangle {
                         return
 
                     plitem.dropedMovedAt(model.index, drop)
-                    dropVisible = false
+                    root.setItemDropIndicatorVisible(model.index, false, true)
                 }
             }
 
diff --git a/modules/gui/qt/playlist/qml/PlaylistListView.qml b/modules/gui/qt/playlist/qml/PlaylistListView.qml
index a0219e6271..8089b1e1ae 100644
--- a/modules/gui/qt/playlist/qml/PlaylistListView.qml
+++ b/modules/gui/qt/playlist/qml/PlaylistListView.qml
@@ -455,13 +455,17 @@ Widgets.NavigableFocusScope {
                     delay: 750
                 }
 
-                delegate: Column {
+                delegate: Item {
+                    implicitWidth: plitem.width
+                    implicitHeight: childrenRect.height
 
                     Loader {
+                        anchors.top: plitem.top
+
                         active: (index === 0) // load only for the first element to prevent overlapping
                         width: parent.width
                         height: 1
-                        z: 0
+                        z: (model.selected || plitem.hovered || plitem.activeFocus) ? 2 : 1
                         sourceComponent: Rectangle {
                             color: _colors.playlistSeparator
                             opacity: _colors.isThemeDark ? 0.05 : 1.0
@@ -544,10 +548,23 @@ Widgets.NavigableFocusScope {
                         }
                     }
 
+                    Connections {
+                        target: root
+
+                        onSetItemDropIndicatorVisible: {
+                            if ((index === model.index && !top) || (index === model.index + 1 && top)) {
+                                bottomSeparator.visible = !isVisible
+                            }
+                        }
+                    }
+
                     Rectangle {
+                        id: bottomSeparator
+                        anchors.top: plitem.bottom
+
                         width: parent.width
                         height: 1
-                        z: 0
+                        z: 2
                         color: _colors.playlistSeparator
                         opacity: _colors.isThemeDark ? 0.05 : 1.0
                     }
-- 
2.27.0