[vlc-devel] [PATCH 13/33] QML: change the header style of MusicTrackListDisplay

Adrien Maglo magsoft at videolan.org
Wed Jun 12 14:01:20 CEST 2019


---
 .../MusicAlbumsGridExpandDelegate.qml         |   4 +-
 .../qml/mediacenter/MusicTrackListDisplay.qml |   2 +
 .../gui/qt/qml/utils/KeyNavigableListView.qml |   1 +
 .../qt/qml/utils/KeyNavigableTableView.qml    | 101 +++++++++++-------
 4 files changed, 66 insertions(+), 42 deletions(-)

diff --git a/modules/gui/qt/qml/mediacenter/MusicAlbumsGridExpandDelegate.qml b/modules/gui/qt/qml/mediacenter/MusicAlbumsGridExpandDelegate.qml
index b7afd83cae..bfdc645c4c 100644
--- a/modules/gui/qt/qml/mediacenter/MusicAlbumsGridExpandDelegate.qml
+++ b/modules/gui/qt/qml/mediacenter/MusicAlbumsGridExpandDelegate.qml
@@ -186,6 +186,8 @@ Utils.NavigableFocusScope {
 
                 interactive: false
 
+                headerColor: VLCStyle.colors.bgAlt
+
                 parentId : root.model.id
                 onParentIdChanged: {
                     currentIndex = 0
@@ -194,7 +196,7 @@ Utils.NavigableFocusScope {
 
                 onCurrentItemChanged: {
                     if (currentItem != undefined) {
-                        root.currentItemY = expand_infos_id.y + expand_track_id.y + currentItem.y
+                        root.currentItemY = expand_infos_id.y + expand_track_id.y + headerItem.height + currentItem.y
                         root.currentItemHeight = currentItem.height
                     }
                 }
diff --git a/modules/gui/qt/qml/mediacenter/MusicTrackListDisplay.qml b/modules/gui/qt/qml/mediacenter/MusicTrackListDisplay.qml
index f82e5e1299..a33c0659f2 100644
--- a/modules/gui/qt/qml/mediacenter/MusicTrackListDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/MusicTrackListDisplay.qml
@@ -39,6 +39,8 @@ Utils.KeyNavigableTableView {
 
     section.property: "first_symbol"
 
+    headerColor: VLCStyle.colors.bg
+
     model: MLAlbumTrackModel {
         id: rootmodel
         ml: medialib
diff --git a/modules/gui/qt/qml/utils/KeyNavigableListView.qml b/modules/gui/qt/qml/utils/KeyNavigableListView.qml
index ad7e864779..63aa56d84d 100644
--- a/modules/gui/qt/qml/utils/KeyNavigableListView.qml
+++ b/modules/gui/qt/qml/utils/KeyNavigableListView.qml
@@ -49,6 +49,7 @@ NavigableFocusScope {
     property alias footerItem: view.footerItem
     property alias header: view.header
     property alias headerItem: view.headerItem
+    property alias headerPositioning: view.headerPositioning
 
     property alias currentIndex: view.currentIndex
     property alias currentItem: view.currentItem
diff --git a/modules/gui/qt/qml/utils/KeyNavigableTableView.qml b/modules/gui/qt/qml/utils/KeyNavigableTableView.qml
index 178ab54c86..f63ce9cbda 100644
--- a/modules/gui/qt/qml/utils/KeyNavigableTableView.qml
+++ b/modules/gui/qt/qml/utils/KeyNavigableTableView.qml
@@ -43,6 +43,9 @@ NavigableFocusScope {
     property alias currentIndex: view.currentIndex
     property alias currentItem: view.currentItem
 
+    property alias headerItem: view.headerItem
+    property color headerColor
+
     Utils.SelectableDelegateModel {
         id: delegateModel
 
@@ -123,56 +126,72 @@ NavigableFocusScope {
         model : delegateModel.parts.list
         modelCount: delegateModel.items.count
 
+        headerPositioning: ListView.OverlayHeader
+
         header: Rectangle {
-            height: VLCStyle.fontHeight_normal
             width: parent.width
-            color: VLCStyle.colors.button
-
-            Row {
-                anchors.fill: parent
-                Repeater {
-                    model: sortModel
-                    MouseArea {
-                        height: VLCStyle.fontHeight_normal
-                        width: model.width * view.width
-                        //Layout.alignment: Qt.AlignVCenter
-
-                        Text {
-                            text: model.text
-                            elide: Text.ElideRight
-                            font {
-                                bold: true
-                                pixelSize: VLCStyle.fontSize_normal
+            height: childrenRect.height
+            color: headerColor
+            z: 3
 
+            Column {
+                width: parent.width
+                height: childrenRect.height
+
+                Row {
+                    x: VLCStyle.margin_normal
+                    width: childrenRect.width - 2 * VLCStyle.margin_normal
+                    height: childrenRect.height + VLCStyle.margin_xxsmall
+
+                    Repeater {
+                        model: sortModel
+                        MouseArea {
+                            height: VLCStyle.fontHeight_normal
+                            width: model.width * view.width
+                            //Layout.alignment: Qt.AlignVCenter
+
+                            Text {
+                                text: model.text
+                                elide: Text.ElideRight
+                                font {
+                                    pixelSize: VLCStyle.fontSize_normal
+
+                                }
+                                color: VLCStyle.colors.buttonText
+                                horizontalAlignment: Text.AlignLeft
+                                anchors {
+                                    fill: parent
+                                    leftMargin: VLCStyle.margin_xsmall
+                                    rightMargin: VLCStyle.margin_xsmall
+                                }
                             }
-                            color: VLCStyle.colors.buttonText
-                            horizontalAlignment: Text.AlignLeft
-                            anchors {
-                                fill: parent
-                                leftMargin: VLCStyle.margin_xxsmall
-                                rightMargin: VLCStyle.margin_xxsmall
-                            }
-                        }
 
-                        Text {
-                            text: (root.model.sortOrder === Qt.AscendingOrder) ? "▼" : "▲"
-                            visible: root.model.sortCriteria === model.criteria
-                            font.pixelSize: VLCStyle.fontSize_normal
-                            color: VLCStyle.colors.accent
-                            anchors {
-                                right: parent.right
-                                leftMargin: VLCStyle.margin_xxsmall
-                                rightMargin: VLCStyle.margin_xxsmall
+                            Text {
+                                text: (root.model.sortOrder === Qt.AscendingOrder) ? "▼" : "▲"
+                                visible: root.model.sortCriteria === model.criteria
+                                font.pixelSize: VLCStyle.fontSize_normal
+                                color: VLCStyle.colors.accent
+                                anchors {
+                                    right: parent.right
+                                    leftMargin: VLCStyle.margin_xsmall
+                                    rightMargin: VLCStyle.margin_xsmall
+                                }
+                            }
+                            onClicked: {
+                                if (root.model.sortCriteria !== model.criteria)
+                                    root.model.sortCriteria = model.criteria
+                                else
+                                    root.model.sortOrder = (root.model.sortOrder === Qt.AscendingOrder) ? Qt.DescendingOrder : Qt.AscendingOrder
                             }
-                        }
-                        onClicked: {
-                            if (root.model.sortCriteria !== model.criteria)
-                                root.model.sortCriteria = model.criteria
-                            else
-                                root.model.sortOrder = (root.model.sortOrder === Qt.AscendingOrder) ? Qt.DescendingOrder : Qt.AscendingOrder
                         }
                     }
                 }
+
+                Rectangle {
+                    width: parent.width
+                    height: 1
+                    color: VLCStyle.colors.textInactive
+                }
             }
         }
 
-- 
2.20.1



More information about the vlc-devel mailing list