[vlc-commits] qml: rework key navigation in MusicAlbumsGridExpandDelegate
Pierre Lamot
git at videolan.org
Fri Jan 10 15:06:48 CET 2020
vlc | branch: master | Pierre Lamot <pierre at videolabs.io> | Thu Dec 19 15:39:25 2019 +0100| [c36fa3c55564255d71e569559b89ec5f6bfe0721] | committer: Jean-Baptiste Kempf
qml: rework key navigation in MusicAlbumsGridExpandDelegate
- use a NavigableCol for action buttons
- limit the number of displayed tracks
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=c36fa3c55564255d71e569559b89ec5f6bfe0721
---
.../gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml | 2 +
.../qml/MusicAlbumsGridExpandDelegate.qml | 168 ++++++++-------------
modules/gui/qt/style/VLCStyle.qml | 2 +
3 files changed, 65 insertions(+), 107 deletions(-)
diff --git a/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml b/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
index b614e9b371..83ffd8fe5b 100644
--- a/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
@@ -142,6 +142,8 @@ Widgets.NavigableFocusScope {
id: expandDelegateId
width: root.width
+ implicitHeight: gridView_id.height - gridView_id.cellHeight
+
navigationParent: root
navigationCancel: function() { gridView_id.retract() }
navigationUp: function() { gridView_id.retract() }
diff --git a/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml b/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
index 9b02f50295..822686f61a 100644
--- a/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicAlbumsGridExpandDelegate.qml
@@ -18,6 +18,7 @@
import QtQuick 2.11
import QtQuick.Controls 2.4
import QtQuick.Layouts 1.3
+import QtQml.Models 2.11
import org.videolan.medialib 0.1
@@ -27,38 +28,35 @@ import "qrc:///style/"
Widgets.NavigableFocusScope {
id: root
property variant model: MLAlbumModel{}
- //color: VLCStyle.colors.bg
- implicitHeight: layout.height
- clip: true
+ implicitHeight: layout.implicitHeight
+ implicitWidth: layout.implicitWidth
- width: parent.width
+ clip: true
property int currentItemY
property int currentItemHeight
- Row {
+ RowLayout {
id: layout
+
+ anchors.fill: parent
+ implicitHeight: Math.max(expand_infos_id.height, artAndControl.height)
+
spacing: VLCStyle.margin_xsmall
- width: parent.width
- height: Math.max(expand_infos_id.height, artAndControl.height)
FocusScope {
id: artAndControl
- //width: VLCStyle.cover_large + VLCStyle.margin_small * 2
- //height: VLCStyle.cover_xsmall + VLCStyle.cover_large
- width: artAndControlLayout.implicitWidth
- height: artAndControlLayout.implicitHeight
+
+ Layout.preferredHeight: artAndControlLayout.implicitHeight
+ Layout.preferredWidth: artAndControlLayout.implicitWidth
+ Layout.alignment: Qt.AlignTop
Column {
id: artAndControlLayout
+
anchors.margins: VLCStyle.margin_small
- spacing: VLCStyle.margin_small
- Item {
- //dummy item for margins
- width: parent.width
- height: 1
- }
+ spacing: VLCStyle.margin_small
/* A bigger cover for the album */
Image {
@@ -69,105 +67,77 @@ Widgets.NavigableFocusScope {
sourceSize: Qt.size(width, height)
}
- RowLayout {
- anchors {
- left: parent.left
- right: parent.right
- }
+ Widgets.NavigableCol {
+ id: actionButtons
- Widgets.IconToolButton {
- id: addButton
- focus: true
+ focus: true
- Layout.preferredWidth: VLCStyle.icon_normal
- Layout.preferredHeight: VLCStyle.icon_normal
- size: VLCStyle.icon_normal
- Layout.alignment: Qt.AlignHCenter
+ width: expand_cover_id.width
- iconText: VLCIcons.add
- text: i18n.qtr("Enqueue")
+ Layout.alignment: Qt.AlignCenter
- onClicked: medialib.addToPlaylist(model.id)
+ model: ObjectModel {
+ Widgets.TabButtonExt {
+ id: playActionBtn
- KeyNavigation.right: playButton
- }
- Widgets.IconToolButton {
- id: playButton
+ width: actionButtons.width
- Layout.preferredWidth: VLCStyle.icon_normal
- Layout.preferredHeight: VLCStyle.icon_normal
- Layout.alignment: Qt.AlignHCenter
- size: VLCStyle.icon_normal
+ iconTxt: VLCIcons.play
+ text: i18n.qtr("Play album")
+ onClicked: medialib.addAndPlay( model.id )
+ }
- iconText: VLCIcons.play
- text: i18n.qtr("Play")
+ Widgets.TabButtonExt {
+ id: enqueueActionBtn
- onClicked: medialib.addAndPlay(model.id)
+ width: actionButtons.width
- Keys.onRightPressed: {
- expand_track_id.focus = true
- event.accepted = true
+ iconTxt: VLCIcons.add
+ text: i18n.qtr("Enqueue album")
+ onClicked: medialib.addToPlaylist( model.id )
}
}
- }
- Item {
- //dummy item for margins
- width: parent.width
- height: 1
+ navigationParent: root
+ navigationRightItem: expand_track_id
}
+
}
}
- Column {
+ ColumnLayout {
id: expand_infos_id
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+
spacing: VLCStyle.margin_xsmall
- width: root.width - x
/* The title of the albums */
- // Needs a rectangle too prevent the tracks from overlapping the title when scrolled
- Rectangle {
- id: expand_infos_titleRect_id
- height: expand_infos_title_id.implicitHeight
- anchors {
- left: parent.left
- right: parent.right
- topMargin: VLCStyle.margin_small
- leftMargin: VLCStyle.margin_small
- rightMargin: VLCStyle.margin_small
- }
- color: "transparent"
- Text {
- id: expand_infos_title_id
- text: "<b>"+(model.title || i18n.qtr("Unknown title") )+"</b>"
- font.pixelSize: VLCStyle.fontSize_xxlarge
- color: VLCStyle.colors.text
- }
+ Text {
+ id: expand_infos_title_id
+
+ Layout.fillWidth: true
+ Layout.preferredHeight: implicitHeight
+
+ text: "<b>"+(model.title || i18n.qtr("Unknown title") )+"</b>"
+ font.pixelSize: VLCStyle.fontSize_xxlarge
+ color: VLCStyle.colors.text
}
- Rectangle {
- id: expand_infos_subtitleRect_id
- height: expand_infos_subtitle_id.implicitHeight
- anchors {
- left: parent.left
- right: parent.right
- topMargin: VLCStyle.margin_xxsmall
- leftMargin: VLCStyle.margin_small
- rightMargin: VLCStyle.margin_small
- }
+ Text {
+ id: expand_infos_subtitle_id
- color: "transparent"
- Text {
- id: expand_infos_subtitle_id
- text: i18n.qtr("By %1 - %2 - %3")
+ Layout.fillWidth: true
+ Layout.preferredHeight: implicitHeight
+
+ text: i18n.qtr("By %1 - %2 - %3")
.arg(model.main_artist || i18n.qtr("Unknown title"))
.arg(model.release_year || "")
.arg(model.duration || "")
- font.pixelSize: VLCStyle.fontSize_large
- color: VLCStyle.colors.text
- }
+ font.pixelSize: VLCStyle.fontSize_large
+ color: VLCStyle.colors.text
}
/* The list of the tracks available */
@@ -176,17 +146,8 @@ Widgets.NavigableFocusScope {
section.property: ""
- height: expand_track_id.contentHeight
- anchors {
- left: parent.left
- right: parent.right
- topMargin: VLCStyle.margin_xxsmall
- leftMargin: VLCStyle.margin_small
- rightMargin: VLCStyle.margin_small
- bottomMargin: VLCStyle.margin_small
- }
-
- interactive: false
+ Layout.fillWidth: true
+ Layout.fillHeight: true
headerColor: VLCStyle.colors.bgAlt
@@ -198,7 +159,6 @@ Widgets.NavigableFocusScope {
onCurrentItemChanged: {
if (currentItem != undefined) {
- root.currentItemY = expand_infos_id.y + expand_track_id.y + headerItem.height + currentItem.y
root.currentItemHeight = currentItem.height
}
}
@@ -211,13 +171,7 @@ Widgets.NavigableFocusScope {
focus: true
navigationParent: root
- navigationLeft: function() { playButton.forceActiveFocus() }
- }
-
- Item {
- //dummy item for margins
- width: parent.width
- height: 1
+ navigationLeftItem: actionButtons
}
}
}
diff --git a/modules/gui/qt/style/VLCStyle.qml b/modules/gui/qt/style/VLCStyle.qml
index e5401e2ad9..576e327f1e 100644
--- a/modules/gui/qt/style/VLCStyle.qml
+++ b/modules/gui/qt/style/VLCStyle.qml
@@ -118,6 +118,8 @@ Item {
property int miniPlayerHeight: 60 * scale;
+ property int expandAlbumTracksHeight: 200 * scale;
+
//combobox
property int combobox_width_small: 64 * scale
property int combobox_width_normal: 96 * scale
More information about the vlc-commits
mailing list