[vlc-devel] [PATCH 2/9] qml: introduce fixed width column sizes in KeyNavigableTableView
jagannatharjun
guptaprince8832 at gmail.com
Tue Jun 2 17:17:26 CEST 2020
---
.../qml/MusicAlbumsGridExpandDelegate.qml | 8 +++--
.../qml/MusicTrackListDisplay.qml | 31 ++++++++++++++-----
.../qt/medialibrary/qml/VideoListDisplay.qml | 28 ++++++++++++++---
.../qt/widgets/qml/KeyNavigableTableView.qml | 25 ++++++++++-----
4 files changed, 70 insertions(+), 22 deletions(-)
diff --git a/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml b/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
index 83ffccf6df..defc49a6ae 100644
--- a/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
@@ -146,6 +146,8 @@ Widgets.NavigableFocusScope {
MusicTrackListDisplay {
id: expand_track_id
+ readonly property int _nbCols: VLCStyle.gridColumnsForWidth(expand_track_id.width)
+
section.property: ""
Layout.fillWidth: true
@@ -165,9 +167,9 @@ 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: "" },
+ { criteria: "track_number", width: VLCStyle.colWidth(1), visible: true, text: i18n.qtr("#"), showSection: "" },
+ { isPrimary: true, criteria: "title", width: VLCStyle.colWidth(Math.max(expand_track_id._nbCols - 2, 1)), visible: true, text: i18n.qtr("Title"), showSection: "" },
+ { criteria: "duration", width: VLCStyle.colWidth(1), visible: true, text: i18n.qtr("Duration"), showSection: "" },
]
navigationParent: root
diff --git a/modules/gui/qt/medialibrary/qml/MusicTrackListDisplay.qml b/modules/gui/qt/medialibrary/qml/MusicTrackListDisplay.qml
index be67b9c069..6a092639c1 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", width: VLCStyle.colWidth(1), text: i18n.qtr("Title"), showSection: "title" },
+ { criteria: "album_title", width: VLCStyle.colWidth(1), text: i18n.qtr("Album"), showSection: "album_title" },
+ { criteria: "main_artist", width: VLCStyle.colWidth(1), text: i18n.qtr("Artist"), showSection: "main_artist" },
+ { criteria: "duration", width: VLCStyle.colWidth(1), text: i18n.qtr("Duration"), showSection: "" },
]
+ property var sortModelMedium: [
+ { isPrimary: true, criteria: "title", width: VLCStyle.colWidth(2), text: i18n.qtr("Title"), showSection: "title" },
+ { criteria: "album_title", width: VLCStyle.colWidth(2), text: i18n.qtr("Album"), showSection: "album_title" },
+ { criteria: "main_artist", width: VLCStyle.colWidth(1), text: i18n.qtr("Artist"), showSection: "main_artist" },
+ { criteria: "duration", width: VLCStyle.colWidth(1), text: i18n.qtr("Duration"), showSection: "" },
+ ]
+
+ property var sortModelLarge: [
+ { isPrimary: true, criteria: "title", width: VLCStyle.colWidth(2), text: i18n.qtr("Title"), showSection: "title" },
+ { criteria: "album_title", width: VLCStyle.colWidth(2), text: i18n.qtr("Album"), showSection: "album_title" },
+ { criteria: "main_artist", width: VLCStyle.colWidth(2), text: i18n.qtr("Artist"), showSection: "main_artist" },
+ { criteria: "duration", width: VLCStyle.colWidth(1), text: i18n.qtr("Duration"), showSection: "" },
+ { criteria: "track_number",width: VLCStyle.colWidth(1), text: i18n.qtr("Track"), showSection: "" },
+ { criteria: "disc_number", width: VLCStyle.colWidth(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 aabfc6b579..660a04204c 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", width: VLCStyle.colWidth(1), text: i18n.qtr("Thumbnail"), showSection: "" },
+ { isPrimary: true, criteria: "title", width: VLCStyle.colWidth(2), text: i18n.qtr("Title"), showSection: "title" },
+ { type: "contextButton", width: VLCStyle.colWidth(1) }
+ ]
+
+ property var sortModelMedium: [
+ { type: "image", criteria: "thumbnail", width: VLCStyle.colWidth(1), text: i18n.qtr("Thumbnail"), showSection: "" },
+ { criteria: "duration", width: VLCStyle.colWidth(1), text: i18n.qtr("Duration"), showSection: "" },
+ { isPrimary: true, criteria: "title", width: VLCStyle.colWidth(2), text: i18n.qtr("Title"), showSection: "title" },
+ { type: "contextButton", width: VLCStyle.colWidth(1) }
]
+
+ property var sortModelLarge: [
+ { type: "image", criteria: "thumbnail", width: VLCStyle.colWidth(1), text: i18n.qtr("Thumbnail"), showSection: "" },
+ { criteria: "duration", width: VLCStyle.colWidth(1), text: i18n.qtr("Duration"), showSection: "" },
+ { isPrimary: true, criteria: "title", width: VLCStyle.colWidth(4), text: i18n.qtr("Title"), showSection: "title" },
+ { type: "contextButton", width: VLCStyle.colWidth(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 ad59f7ff8e..f67c1869fc 100644
--- a/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
+++ b/modules/gui/qt/widgets/qml/KeyNavigableTableView.qml
@@ -52,6 +52,7 @@ NavigableFocusScope {
property alias delegateModel: delegateModel
property real rowHeight: VLCStyle.fontHeight_normal + VLCStyle.margin_large
property alias spacing: view.spacing
+ property int horizontalSpacing: VLCStyle.column_margin_width
Accessible.role: Accessible.Table
@@ -103,22 +104,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: root.horizontalSpacing
+
Repeater {
model: sortModel
Item {
height: parent.height
- width: modelData.width * view.width
+ width: modelData.width || 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 +166,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: modelData.width || 1
//Layout.alignment: Qt.AlignVCenter
Text {
--
2.25.1
More information about the vlc-devel
mailing list