[vlc-devel] [PATCH 6/9] qml: allow header and selective column delegation in KeyNavigableTableView

[jagannatharjun]

this also remove margins from provided column delegation inside KeyNavigableTableView as they are now managed by column system
---
 .../qml/MusicTrackListDisplay.qml             | 24 -----------
 .../qt/medialibrary/qml/VideoListDisplay.qml  | 22 ++++------
 .../qt/widgets/qml/KeyNavigableTableView.qml  | 42 ++++++++++---------
 3 files changed, 30 insertions(+), 58 deletions(-)

diff --git a/modules/gui/qt/medialibrary/qml/MusicTrackListDisplay.qml b/modules/gui/qt/medialibrary/qml/MusicTrackListDisplay.qml
index 6a092639c1..32c1e3a6f0 100644
--- a/modules/gui/qt/medialibrary/qml/MusicTrackListDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicTrackListDisplay.qml
@@ -76,30 +76,6 @@ Widgets.KeyNavigableTableView {
 
     property alias parentId: rootmodel.parentId
 
-    colDelegate: Item {
-        anchors.fill: parent
-
-        property var rowModel: parent.rowModel
-        property var model: parent.colModel
-
-        Text {
-            anchors.fill:parent
-
-            text: !rowModel ? "" : (rowModel[model.criteria] || "")
-            elide: Text.ElideRight
-            font.pixelSize: VLCStyle.fontSize_normal
-            color: (model.isPrimary)? VLCStyle.colors.text : VLCStyle.colors.textDisabled
-
-            anchors {
-                fill: parent
-                leftMargin: VLCStyle.margin_xsmall
-                rightMargin: VLCStyle.margin_xsmall
-            }
-            verticalAlignment: Text.AlignVCenter
-            horizontalAlignment: Text.AlignLeft
-        }
-    }
-
     onActionForSelection: {
         var list = []
         for (var i = 0; i < selection.count; i++ ) {
diff --git a/modules/gui/qt/medialibrary/qml/VideoListDisplay.qml b/modules/gui/qt/medialibrary/qml/VideoListDisplay.qml
index 660a04204c..2431698e46 100644
--- a/modules/gui/qt/medialibrary/qml/VideoListDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/VideoListDisplay.qml
@@ -58,14 +58,15 @@ Widgets.KeyNavigableTableView {
     rowHeight: VLCStyle.video_small_height + VLCStyle.margin_normal
 
     property bool isFocusOnContextButton: false
+
     colDelegate: Item {
         id: colDel
-        anchors.fill: parent
-        anchors.leftMargin: VLCStyle.margin_normal
-        anchors.rightMargin: VLCStyle.margin_normal
 
         property var rowModel: parent.rowModel
         property var model: parent.colModel
+
+        anchors.fill: parent
+
         FocusScope{
             anchors.fill: parent
             focus: isFocusOnContextButton && rowModel.index === currentIndex
@@ -132,19 +133,10 @@ Widgets.KeyNavigableTableView {
             Loader{
                 anchors.fill:parent
                 active: model.type !== "image"
-                sourceComponent: Text {
+                sourceComponent: Widgets.ListLabel {
+                    anchors.fill: parent
+                    anchors.rightMargin: VLCStyle.margin_xxxsmall // without this text is not initially visible
                     text: !rowModel ? "" : rowModel[model.criteria] || ""
-                    elide: Text.ElideRight
-                    font.pixelSize: VLCStyle.fontSize_normal
-                    color: (model.isPrimary)? VLCStyle.colors.text : VLCStyle.colors.textDisabled
-
-                    anchors {
-                        fill: parent
-                        leftMargin: VLCStyle.margin_xsmall
-                        rightMargin: VLCStyle.margin_xsmall
-                    }
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: Text.AlignLeft
                 }
             }
         }
diff --git a/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml b/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
index f67c1869fc..1f721abc6a 100644
--- a/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
+++ b/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
@@ -34,7 +34,17 @@ NavigableFocusScope {
     signal rightClick(Item menuParent, var menuModel)
 
     property var sortModel: []
-    property Component colDelegate: Item { }
+    property Component colDelegate: Widgets.ListLabel {
+        property var rowModel: parent.rowModel
+        property var model: parent.colModel
+
+        anchors.fill: parent
+        text: !rowModel ? "" : (rowModel[model.criteria] || "")
+    }
+    property Component headerDelegate: Widgets.CaptionLabel {
+        text: model.text || ""
+    }
+
     property var model: []
 
     property alias contentHeight: view.contentHeight
@@ -128,7 +138,7 @@ NavigableFocusScope {
                                         property var colModel: modelData
 
                                         anchors.fill: parent
-                                        sourceComponent: colDelegate
+                                        sourceComponent: colModel.colDelegate || root.colDelegate
                                     }
 
                                 }
@@ -165,32 +175,26 @@ NavigableFocusScope {
                 height: childrenRect.height
 
                 Row {
-                    x: VLCStyle.margin_normal
-                    anchors.horizontalCenter: parent.horizontalCenter
+                    anchors {
+                        leftMargin: VLCStyle.margin_xxxsmall
+                        rightMargin: VLCStyle.margin_xxxsmall
+                        horizontalCenter: parent.horizontalCenter
+                    }
                     height: childrenRect.height + VLCStyle.margin_xxsmall
-                    spacing: VLCStyle.column_margin_width
+                    topPadding: VLCStyle.margin_xxsmall
+                    spacing: root.horizontalSpacing
 
                     Repeater {
                         model: sortModel
                         MouseArea {
-                            height: VLCStyle.fontHeight_normal
+                            height: childrenRect.height
                             width: modelData.width || 1
                             //Layout.alignment: Qt.AlignVCenter
 
-                            Text {
-                                text: modelData.text || ""
-                                elide: Text.ElideRight
-                                font {
-                                    pixelSize: VLCStyle.fontSize_normal
+                            Loader {
+                                property var model: modelData
 
-                                }
-                                color: VLCStyle.colors.buttonText
-                                horizontalAlignment: Text.AlignLeft
-                                anchors {
-                                    fill: parent
-                                    leftMargin: VLCStyle.margin_xsmall
-                                    rightMargin: VLCStyle.margin_xsmall
-                                }
+                                sourceComponent: model.headerDelegate || root.headerDelegate
                             }
 
                             Text {
-- 
2.25.1