[vlc-devel] [PATCH 2/2] qml: introduce fixed width column sizes in KeyNavigableTableView

jagannatharjun guptaprince8832 at gmail.com
Thu May 14 17:10:27 CEST 2020


---
 .../qml/MusicAlbumsGridExpandDelegate.qml     | 23 +++++++++++---
 .../qml/MusicTrackListDisplay.qml             | 31 ++++++++++++++-----
 .../qt/medialibrary/qml/VideoListDisplay.qml  | 28 ++++++++++++++---
 .../qt/widgets/qml/KeyNavigableTableView.qml  | 24 +++++++++-----
 4 files changed, 83 insertions(+), 23 deletions(-)

diff --git a/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml b/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
index 83ffccf..b1ccd26 100644
--- a/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
@@ -164,12 +164,27 @@ Widgets.NavigableFocusScope {
                     }
                 }
 
-                sortModel: [
-                    { criteria: "track_number",  width:0.10, visible: true, text: i18n.qtr("#"), showSection: "" },
-                    { isPrimary: true, criteria: "title",         width:0.70, visible: true, text: i18n.qtr("Title"), showSection: "" },
-                    { criteria: "duration",      width:0.20, visible: true, text: i18n.qtr("Duration"), showSection: "" },
+                sortModelSmall: [
+                    { criteria: "track_number",           columns: 1, visible: true, text: i18n.qtr("#"), showSection: "" },
+                    { isPrimary: true, criteria: "title", columns: 2, visible: true, text: i18n.qtr("Title"), showSection: "" },
+                    { criteria: "duration",               columns: 1, visible: true, text: i18n.qtr("Duration"), showSection: "" },
                 ]
 
+                sortModelMedium: [
+                    { criteria: "track_number",           columns: 1, visible: true, text: i18n.qtr("#"), showSection: "" },
+                    { isPrimary: true, criteria: "title", columns: 4, visible: true, text: i18n.qtr("Title"), showSection: "" },
+                    { criteria: "duration",               columns: 1, visible: true, text: i18n.qtr("Duration"), showSection: "" },
+                ]
+
+                sortModelLarge: [
+                    { criteria: "track_number",           columns: 1, visible: true, text: i18n.qtr("#"), showSection: "" },
+                    { isPrimary: true, criteria: "title", columns: 6, visible: true, text: i18n.qtr("Title"), showSection: "" },
+                    { criteria: "duration",               columns: 1, visible: true, text: i18n.qtr("Duration"), showSection: "" },
+                ]
+
+                sortModel: ( width < VLCStyle.colWidth(6) ) ? sortModelSmall
+                                                            : ( width < VLCStyle.colWidth(8) ) ? sortModelMedium : sortModelLarge
+
                 navigationParent: root
                 navigationLeftItem: actionButtons
             }
diff --git a/modules/gui/qt/medialibrary/qml/MusicTrackListDisplay.qml b/modules/gui/qt/medialibrary/qml/MusicTrackListDisplay.qml
index be67b9c..1f11089 100644
--- a/modules/gui/qt/medialibrary/qml/MusicTrackListDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicTrackListDisplay.qml
@@ -28,15 +28,32 @@ import "qrc:///style/"
 Widgets.KeyNavigableTableView {
     id: root
 
-    sortModel: [
-        { isPrimary: true, criteria: "title",       width:0.44, text: i18n.qtr("Title"),    showSection: "title" },
-        { criteria: "album_title", width:0.25, text: i18n.qtr("Album"),    showSection: "album_title" },
-        { criteria: "main_artist", width:0.15, text: i18n.qtr("Artist"),   showSection: "main_artist" },
-        { criteria: "duration",    width:0.06, text: i18n.qtr("Duration"), showSection: "" },
-        { criteria: "track_number",width:0.05, text: i18n.qtr("Track"), showSection: "" },
-        { criteria: "disc_number", width:0.05, text: i18n.qtr("Disc"),  showSection: "" },
+    property var sortModelSmall: [
+        { isPrimary: true, criteria: "title",       columns:1, text: i18n.qtr("Title"),    showSection: "title" },
+        { criteria: "album_title", columns:1, text: i18n.qtr("Album"),    showSection: "album_title" },
+        { criteria: "main_artist", columns:1, text: i18n.qtr("Artist"),   showSection: "main_artist" },
+        { criteria: "duration",    columns:1, text: i18n.qtr("Duration"), showSection: "" },
     ]
 
+    property var sortModelMedium: [
+        { isPrimary: true, criteria: "title",       columns:2, text: i18n.qtr("Title"),    showSection: "title" },
+        { criteria: "album_title", columns:2, text: i18n.qtr("Album"),    showSection: "album_title" },
+        { criteria: "main_artist", columns:1, text: i18n.qtr("Artist"),   showSection: "main_artist" },
+        { criteria: "duration",    columns:1, text: i18n.qtr("Duration"), showSection: "" },
+    ]
+
+    property var sortModelLarge: [
+        { isPrimary: true, criteria: "title",       columns:2, text: i18n.qtr("Title"),    showSection: "title" },
+        { criteria: "album_title", columns:2, text: i18n.qtr("Album"),    showSection: "album_title" },
+        { criteria: "main_artist", columns:2, text: i18n.qtr("Artist"),   showSection: "main_artist" },
+        { criteria: "duration",    columns:1, text: i18n.qtr("Duration"), showSection: "" },
+        { criteria: "track_number",columns:1, text: i18n.qtr("Track"), showSection: "" },
+        { criteria: "disc_number", columns:1, text: i18n.qtr("Disc"),  showSection: "" },
+
+    ]
+
+    sortModel: ( width < VLCStyle.colWidth(6) ) ? sortModelSmall
+                                                : ( width < VLCStyle.colWidth(9) ) ? sortModelMedium : sortModelLarge
     section.property: "title_first_symbol"
 
     headerColor: VLCStyle.colors.bg
diff --git a/modules/gui/qt/medialibrary/qml/VideoListDisplay.qml b/modules/gui/qt/medialibrary/qml/VideoListDisplay.qml
index aabfc6b..45b8310 100644
--- a/modules/gui/qt/medialibrary/qml/VideoListDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/VideoListDisplay.qml
@@ -29,12 +29,30 @@ Widgets.KeyNavigableTableView {
     model: MLVideoModel {
         ml: medialib
     }
-    sortModel: [
-        { type: "image", criteria: "thumbnail",   width:0.2, text: i18n.qtr("Thumbnail"), showSection: "" },
-        { criteria: "duration",    width:0.1, text: i18n.qtr("Duration"), showSection: "" },
-        { isPrimary: true, criteria: "title",       width:0.6, text: i18n.qtr("Title"),    showSection: "title" },
-        { type: "contextButton",   width:0.1, },
+
+    property var sortModelSmall: [
+        { type: "image", criteria: "thumbnail", columns: 1, text: i18n.qtr("Thumbnail"), showSection: "" },
+        { isPrimary: true, criteria: "title",   columns: 2, text: i18n.qtr("Title"),    showSection: "title" },
+        { type: "contextButton",                columns: 1  }
+    ]
+
+    property var sortModelMedium:  [
+        { type: "image", criteria: "thumbnail", columns: 1, text: i18n.qtr("Thumbnail"), showSection: "" },
+        { criteria: "duration",                 columns: 1, text: i18n.qtr("Duration"), showSection: "" },
+        { isPrimary: true, criteria: "title",   columns: 2, text: i18n.qtr("Title"),    showSection: "title" },
+        { type: "contextButton",                columns: 1  }
     ]
+
+    property var sortModelLarge:  [
+        { type: "image", criteria: "thumbnail", columns: 1, text: i18n.qtr("Thumbnail"), showSection: "" },
+        { criteria: "duration",                 columns: 1, text: i18n.qtr("Duration"), showSection: "" },
+        { isPrimary: true, criteria: "title",   columns: 4, text: i18n.qtr("Title"),    showSection: "title" },
+        { type: "contextButton",                columns: 1 }
+    ]
+
+
+    sortModel: ( width < VLCStyle.colWidth(6) ) ? sortModelSmall
+                                                : ( width < VLCStyle.colWidth(7) ) ? sortModelMedium : sortModelLarge
     section.property: "title_first_symbol"
 
     rowHeight: VLCStyle.video_small_height + VLCStyle.margin_normal
diff --git a/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml b/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
index ad59f7f..964e38d 100644
--- a/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
+++ b/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
@@ -103,22 +103,31 @@ NavigableFocusScope {
                                 bottomMargin: VLCStyle.margin_xxsmall
                                 leftMargin: VLCStyle.margin_xxxsmall
                                 rightMargin: VLCStyle.margin_xxxsmall
-                                fill: parent
+                                horizontalCenter: parent.horizontalCenter
+                                top: parent.top
+                                bottom: parent.bottom
                             }
+                            spacing: VLCStyle.column_margin_width
+
                             Repeater {
                                 model: sortModel
 
                                 Item {
                                     height: parent.height
-                                    width: modelData.width * view.width
+                                    width: VLCStyle.colWidth(modelData.columns || 1)
                                     Layout.alignment: Qt.AlignVCenter
-                                    Loader{
-                                        anchors.fill: parent
-                                        sourceComponent: colDelegate
 
+                                    SmoothedAnimation on width {
+                                        duration: 256
+                                        easing.type: Easing.OutCubic
+                                    }
+
+                                    Loader {
                                         property var rowModel: element.rowModel
                                         property var colModel: modelData
 
+                                        anchors.fill: parent
+                                        sourceComponent: colDelegate
                                     }
 
                                 }
@@ -156,14 +165,15 @@ NavigableFocusScope {
 
                 Row {
                     x: VLCStyle.margin_normal
-                    width: childrenRect.width - 2 * VLCStyle.margin_normal
+                    anchors.horizontalCenter: parent.horizontalCenter
                     height: childrenRect.height + VLCStyle.margin_xxsmall
+                    spacing: VLCStyle.column_margin_width
 
                     Repeater {
                         model: sortModel
                         MouseArea {
                             height: VLCStyle.fontHeight_normal
-                            width: modelData.width * view.width
+                            width: VLCStyle.colWidth(modelData.columns || 1)
                             //Layout.alignment: Qt.AlignVCenter
 
                             Text {
-- 
2.25.1



More information about the vlc-devel mailing list