[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