[vlc-commits] qml: move play/enqueue buttons to the header of the Artist view

Pierre Lamot git at videolan.org
Fri Jan 10 15:06:26 CET 2020


vlc | branch: master | Pierre Lamot <pierre at videolabs.io> | Fri Dec 13 11:18:12 2019 +0100| [1549eca9fec4de14e32fd159346f2217383c1b88] | committer: Jean-Baptiste Kempf

qml: move play/enqueue buttons to the header of the Artist view

Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=1549eca9fec4de14e32fd159346f2217383c1b88
---

 .../gui/qt/medialibrary/qml/ArtistTopBanner.qml    | 138 +++++++++++++++------
 .../gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml |   1 +
 .../qt/medialibrary/qml/MusicArtistsDisplay.qml    |  39 +++---
 3 files changed, 120 insertions(+), 58 deletions(-)

diff --git a/modules/gui/qt/medialibrary/qml/ArtistTopBanner.qml b/modules/gui/qt/medialibrary/qml/ArtistTopBanner.qml
index f687417d99..dc92fbc810 100644
--- a/modules/gui/qt/medialibrary/qml/ArtistTopBanner.qml
+++ b/modules/gui/qt/medialibrary/qml/ArtistTopBanner.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 QtGraphicalEffects 1.0
 
 import org.videolan.medialib 0.1
@@ -25,61 +26,122 @@ import org.videolan.medialib 0.1
 import "qrc:///widgets/" as Widgets
 import "qrc:///style/"
 
-Rectangle {
+Widgets.NavigableFocusScope {
     id: root
     property var artist: ({})
 
-    color: VLCStyle.colors.bg
+    height: col.implicitHeight
 
-    height: VLCStyle.heightBar_xlarge
 
-    Rectangle {
-        id: artistImageContainer
-        color: VLCStyle.colors.banner
+    Image {
+        id: background
 
-        height: VLCStyle.cover_small
-        width: VLCStyle.cover_small
+        anchors.fill: parent
 
-        anchors {
-            verticalCenter: parent.verticalCenter
-            left: parent.left
-            leftMargin: VLCStyle.margin_small
+        source: artist.cover || VLCStyle.noArtArtist
 
-        }
-
-        Image {
-            id: artistImage
-            source: artist.cover || VLCStyle.noArtArtist
-            fillMode: Image.PreserveAspectCrop
-            anchors.fill: parent
-        }
+        fillMode: Image.PreserveAspectCrop
+        sourceSize.width: parent.width
+        sourceSize.height: parent.height
 
         layer.enabled: true
         layer.effect: OpacityMask {
-            maskSource: Rectangle {
-                width: VLCStyle.cover_small
-                height: VLCStyle.cover_small
-                radius: VLCStyle.cover_small
+            maskSource: LinearGradient {
+                id: mask
+                width: background.width
+                height: background.height
+                gradient: Gradient {
+                    GradientStop { position: 0.2; color: "#88000000" }
+                    GradientStop { position: 0.9; color: "transparent" }
+                }
             }
         }
     }
 
-    Text {
-        id: artistName
-        text: artist.name || i18n.qtr("No artist")
+    ColumnLayout {
+        id: col
+        anchors.fill: parent
+        RowLayout {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            Layout.leftMargin: VLCStyle.margin_small
+            Layout.rightMargin: VLCStyle.margin_small
+
+            Rectangle {
+                id: artistImageContainer
+                color: VLCStyle.colors.banner
+
+                height: VLCStyle.cover_xsmall
+                width: VLCStyle.cover_xsmall
+
+                Layout.alignment: Qt.AlignVCenter
+                Layout.preferredHeight: VLCStyle.cover_small
+                Layout.preferredWidth: VLCStyle.cover_small
+
+                Image {
+                    id: artistImage
+                    source: artist.cover || VLCStyle.noArtArtist
+                    fillMode: Image.PreserveAspectCrop
+                    anchors.fill: parent
+                }
+
+                layer.enabled: true
+                layer.effect: OpacityMask {
+                    maskSource: Rectangle {
+                        width: VLCStyle.cover_small
+                        height: VLCStyle.cover_small
+                        radius: VLCStyle.cover_small
+                    }
+                }
+            }
+
+
+
+            Text {
+                id: artistName
+                text: artist.name || i18n.qtr("No artist")
 
-        anchors {
-            verticalCenter: parent.verticalCenter
-            left: artistImageContainer.right
-            right: parent.right
-            leftMargin: VLCStyle.margin_small
-            rightMargin: VLCStyle.margin_small
+                Layout.alignment: Qt.AlignVCenter
+                Layout.leftMargin: VLCStyle.margin_small
+                Layout.rightMargin: VLCStyle.margin_small
+
+                font.pixelSize: VLCStyle.fontSize_xxlarge
+                wrapMode: Text.WordWrap
+                maximumLineCount: 2
+                elide: Text.ElideRight
+                color: VLCStyle.colors.text
+            }
+
+            Item {
+                Layout.fillWidth: true
+            }
+        }
+
+        Widgets.NavigableRow {
+            id: actionButtons
+
+            Layout.fillWidth: true
+
+            focus: true
+            navigationParent: root
+
+            model: ObjectModel {
+                Widgets.TabButtonExt {
+                    id: playActionBtn
+                    iconTxt: VLCIcons.play
+                    text: i18n.qtr("Play all")
+                    onClicked: medialib.addAndPlay( artist.id )
+                }
+
+                Widgets.TabButtonExt {
+                    id: enqueueActionBtn
+                    iconTxt: VLCIcons.add
+                    text: i18n.qtr("Enqueue all")
+                    onClicked: medialib.addToPlaylist( artist.id )
+                }
+            }
         }
 
-        font.pixelSize: VLCStyle.fontSize_xxlarge
-        wrapMode: Text.WordWrap
-        maximumLineCount: 2
-        elide: Text.ElideRight
-        color: VLCStyle.colors.text
     }
+
 }
diff --git a/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml b/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
index f7f89c6d3e..def0a352cb 100644
--- a/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicAlbumsDisplay.qml
@@ -42,6 +42,7 @@ Widgets.NavigableFocusScope {
 
 
     property Component header: Item{}
+    readonly property var headerItem: view.currentItem ? view.currentItem.headerItem : undefined
 
     Util.SelectableDelegateModel {
         id: delegateModel
diff --git a/modules/gui/qt/medialibrary/qml/MusicArtistsDisplay.qml b/modules/gui/qt/medialibrary/qml/MusicArtistsDisplay.qml
index 896b6ae459..d293c7ee5f 100644
--- a/modules/gui/qt/medialibrary/qml/MusicArtistsDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/MusicArtistsDisplay.qml
@@ -65,6 +65,8 @@ Widgets.NavigableFocusScope {
             }
             line1: model.name || i18n.qtr("Unknown artist")
 
+            actionButtons: []
+
             onItemClicked: {
                 artistId = model.id
                 delegateModel.updateSelection( modifier , artistList.currentIndex, index)
@@ -73,26 +75,15 @@ Widgets.NavigableFocusScope {
             }
 
             onItemDoubleClicked: {
-                delegateModel.actionAtIndex(index)
-            }
-
-            onPlayClicked: {
-                medialib.addAndPlay( model.id )
-            }
-            onAddToPlaylistClicked: {
-                medialib.addToPlaylist( model.id );
+                if (keys === Qt.RightButton)
+                    medialib.addAndPlay( model.id )
+                else
+                    view.forceActiveFocus()
             }
         }
 
         function actionAtIndex(index) {
-            if (delegateModel.selectedGroup.count > 1) {
-                var list = []
-                for (var i = 0; i < delegateModel.selectedGroup.count; i++)
-                    list.push(delegateModel.selectedGroup.get(i).model.id)
-                medialib.addAndPlay( list )
-            } else if (delegateModel.selectedGroup.count === 1) {
-                root.artistId = delegateModel.items.get(artistList.currentIndex).model.id
-            }
+            view.forceActiveFocus()
         }
     }
 
@@ -128,10 +119,12 @@ Widgets.NavigableFocusScope {
 
             onSelectAll: delegateModel.selectAll()
             onSelectionUpdated: delegateModel.updateSelection( keyModifiers, oldIndex, newIndex )
-            onCurrentIndexChanged: delegateModel.actionAtIndex(currentIndex)
+            onCurrentIndexChanged: {
+                root.artistId = delegateModel.items.get(artistList.currentIndex).model.id
+            }
 
             navigationParent: root
-            navigationRight: function () { view.focus = true }
+            navigationRightItem: view
         }
 
         FocusScope {
@@ -148,17 +141,23 @@ Widgets.NavigableFocusScope {
                 header: ArtistTopBanner {
                     id: artistBanner
                     width: albumSubView.width
-                    focus: false
                     artist: (artistList.currentIndex >= 0)
                             ? delegateModel.items.get(artistList.currentIndex).model
                             : ({})
+                    navigationParent: root
+                    navigationLeftItem: artistList
+                    navigationDown: function() {
+                        artistBanner.focus = false
+                        view.forceActiveFocus()
+                    }
                 }
 
                 focus: true
                 parentId: artistId
 
                 navigationParent: root
-                navigationLeft: function () { artistList.focus = true }
+                navigationUpItem: albumSubView.headerItem
+                navigationLeftItem: artistList
             }
 
         }



More information about the vlc-commits mailing list