[vlc-commits] qml: remove the GridView of MusicArtistDisplay and rework the behavior

Adrien Maglo git at videolan.org
Thu Jun 13 13:10:57 CEST 2019


vlc | branch: master | Adrien Maglo <magsoft at videolan.org> | Tue May 14 18:16:16 2019 +0200| [0bb1998f55b9d7aa8397bb0925e91536787d500d] | committer: Thomas Guillem

qml: remove the GridView of MusicArtistDisplay and rework the behavior

Signed-off-by: Thomas Guillem <thomas at gllm.fr>

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

 modules/gui/qt/Makefile.am                         |   1 +
 modules/gui/qt/pixmaps/noart_artist_small.svg      |  81 +++++++++
 .../gui/qt/qml/mediacenter/MusicArtistsDisplay.qml | 193 ++++++---------------
 .../qt/qml/mediacenter/MusicTrackListDisplay.qml   |   2 +-
 modules/gui/qt/qml/style/VLCStyle.qml              |   1 +
 modules/gui/qt/qml/utils/KeyNavigableTableView.qml |   3 +
 modules/gui/qt/qml/utils/ListItem.qml              |  15 +-
 modules/gui/qt/vlc.qrc                             |   1 +
 8 files changed, 155 insertions(+), 142 deletions(-)

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index 5334d951d5..075288808e 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -407,6 +407,7 @@ libqt_plugin_la_RES = \
 	gui/qt/pixmaps/noart.png \
 	gui/qt/pixmaps/noart_album.svg \
 	gui/qt/pixmaps/noart_artist.svg \
+	gui/qt/pixmaps/noart_artist_small.svg \
 	gui/qt/pixmaps/pause.svg \
 	gui/qt/pixmaps/play.svg \
 	gui/qt/pixmaps/playlist/add.svg \
diff --git a/modules/gui/qt/pixmaps/noart_artist_small.svg b/modules/gui/qt/pixmaps/noart_artist_small.svg
new file mode 100644
index 0000000000..e591ac4e4a
--- /dev/null
+++ b/modules/gui/qt/pixmaps/noart_artist_small.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   viewBox="0 0 12.7 12.7"
+   version="1.1"
+   id="svg825"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="noart_artist_small.svg">
+  <defs
+     id="defs819" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="11.2"
+     inkscape:cx="27.588042"
+     inkscape:cy="26.831439"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1031"
+     inkscape:window-x="1920"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata822">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-284.29998)">
+    <g
+       id="g1393"
+       transform="matrix(1.1524035,0,0,1.1524035,1.8580705,-41.459352)">
+      <path
+         transform="scale(-1)"
+         d="m -0.71552062,-291.69281 a 3.1823585,3.2496254 0 0 1 -1.59117928,2.81426 3.1823585,3.2496254 0 0 1 -3.1823586,0 3.1823585,3.2496254 0 0 1 -1.5911791,-2.81426"
+         sodipodi:open="true"
+         sodipodi:end="3.1415927"
+         sodipodi:start="0"
+         sodipodi:ry="3.2496254"
+         sodipodi:rx="3.1823585"
+         sodipodi:cy="-291.69281"
+         sodipodi:cx="-3.8978791"
+         sodipodi:type="arc"
+         id="path818"
+         style="display:inline;fill:none;stroke:#747474;stroke-width:0.52916664;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <circle
+         r="1.7328954"
+         cy="286.68149"
+         cx="3.8978791"
+         id="path828"
+         style="display:inline;fill:none;fill-opacity:1;stroke:#747474;stroke-width:0.52916664;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>
diff --git a/modules/gui/qt/qml/mediacenter/MusicArtistsDisplay.qml b/modules/gui/qt/qml/mediacenter/MusicArtistsDisplay.qml
index cda97eda2f..b5346109ba 100644
--- a/modules/gui/qt/qml/mediacenter/MusicArtistsDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/MusicArtistsDisplay.qml
@@ -32,119 +32,69 @@ Utils.NavigableFocusScope {
         ListElement { text: qsTr("Alphabetic");  criteria: "title" }
     }
 
-    property int currentArtistIndex: -1
-    onCurrentArtistIndexChanged: {
-        if (currentArtistIndex == -1)
-            view.replace(artistGridComponent)
-        else
-            view.replace(albumComponent)
-    }
-    property var artistId: null
+    property var artistId
 
     Utils.SelectableDelegateModel {
         id: delegateModel
         model: MLArtistModel {
             ml: medialib
         }
-        delegate: Package {
-            id: element
-            Utils.ListItem {
-                Package.name: "list"
-                height: VLCStyle.icon_normal
-                width: parent.width
-
-                color: VLCStyle.colors.getBgColor(element.DelegateModel.inSelected, this.hovered, this.activeFocus)
 
-                cover: Image {
-                    id: cover_obj
-                    fillMode: Image.PreserveAspectFit
-                    source: model.cover || VLCStyle.noArtArtist
-                }
-                line1: model.name || qsTr("Unknown artist")
-
-                onItemClicked: {
-                    currentArtistIndex = index
-                    artistId = model.id
-                    delegateModel.updateSelection( modifier , artistList.currentIndex, index)
-                    artistList.currentIndex = index
-                    artistList.forceActiveFocus()
-                }
-
-                onItemDoubleClicked: {
-                    delegateModel.actionAtIndex(index)
-                }
-
-                onPlayClicked: {
-                    console.log('Clicked on play : '+model.name);
-                    medialib.addAndPlay( model.id )
-                }
-                onAddToPlaylistClicked: {
-                    console.log('Clicked on addToPlaylist : '+model.name);
-                    medialib.addToPlaylist( model.id );
-                }
-            }
+        Component.onCompleted: {
+            artistId = items.get(0).model.id
+        }
 
-            Utils.GridItem {
-                Package.name: "grid"
-                id: gridItem
+        delegate: Utils.ListItem {
+            height: VLCStyle.icon_normal
+            width: parent.width
 
-                title: model.name || "Unknown Artist"
-                selected: element.DelegateModel.inSelected
+            color: VLCStyle.colors.getBgColor(delegateModel.inSelected, this.hovered, this.activeFocus)
 
-                //shiftX: view.currentItem.shiftX(index)
+            cover: Rectangle {
+                color: VLCStyle.colors.banner
+                width: cover_obj.width
 
-                onItemClicked: {
-                    delegateModel.updateSelection( modifier , artistList.currentIndex, index)
-                    artistList.currentIndex = index
-                    artistList.forceActiveFocus()
-                }
+                Image {
+                    id: cover_obj
+                    anchors.fill: parent
 
-                onItemDoubleClicked: {
-                    delegateModel.actionAtIndex(index)
+                    fillMode: Image.PreserveAspectFit
+                    source: model.cover || VLCStyle.noArtArtistSmall
                 }
+            }
+            line1: model.name || qsTr("Unknown artist")
 
-                onPlayClicked: {
-                    medialib.addAndPlay( model.id )
-                }
-                onAddToPlaylistClicked: {
-                    console.log('Clicked on addToPlaylist : '+model.name);
-                    medialib.addToPlaylist( model.id );
-                }
+            onItemClicked: {
+                artistId = model.id
+                delegateModel.updateSelection( modifier , artistList.currentIndex, index)
+                artistList.currentIndex = index
+                artistList.forceActiveFocus()
+            }
 
-                //replace image with a mutlicovers preview
-                Utils.MultiCoverPreview {
-                    id: multicover
-                    visible: false
-                    width: VLCStyle.cover_normal
-                    height: VLCStyle.cover_normal
+            onItemDoubleClicked: {
+                delegateModel.actionAtIndex(index)
+            }
 
-                    albums: MLAlbumModel {
-                        ml: medialib
-                        parentId: model.id
-                        maxItems: 4
-                    }
-                }
-                Component.onCompleted: {
-                    multicover.grabToImage(function(result) {
-                        gridItem.sourceSize = undefined
-                        gridItem.image = result.url
-                        //multicover.destroy()
-                    })
-                }
+            onPlayClicked: {
+                console.log('Clicked on play : '+model.name);
+                medialib.addAndPlay( model.id )
+            }
+            onAddToPlaylistClicked: {
+                console.log('Clicked on addToPlaylist : '+model.name);
+                medialib.addToPlaylist( model.id );
             }
         }
 
         function actionAtIndex(index) {
             console.log("actionAtIndex", index)
+            artistBanner.artist = delegateModel.items.get(index).model
             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.selectedGroup.get(0).model.id
-                root.currentArtistIndex = index
-                artistList.currentIndex = index
+                root.artistId = delegateModel.items.get(artistList.currentIndex).model.id
             }
         }
     }
@@ -157,39 +107,42 @@ Utils.NavigableFocusScope {
     onActiveFocusChanged: {
         if (activeFocus && delegateModel.items.count > 0 && delegateModel.selectedGroup.count === 0) {
             var initialIndex = 0
-            if (view.currentItem.currentIndex !== -1)
-                initialIndex = view.currentItem.currentIndex
+            if (view.currentIndex !== -1)
+                initialIndex = view.currentIndex
             delegateModel.items.get(initialIndex).inSelected = true
-            view.currentItem.currentIndex = initialIndex
+            view.currentIndex = initialIndex
         }
     }
 
-    Component {
-        id: artistGridComponent
-        Utils.KeyNavigableGridView {
-            cellWidth: (VLCStyle.cover_normal) + VLCStyle.margin_small
-            cellHeight: (VLCStyle.cover_normal + VLCStyle.fontHeight_normal)  + VLCStyle.margin_small
+    Row {
+        anchors.fill: parent
+        Utils.KeyNavigableListView {
+            width: parent.width * 0.25
+            height: parent.height
 
-            model: delegateModel.parts.grid
+            id: artistList
+            spacing: 4
+            model: delegateModel
             modelCount: delegateModel.items.count
 
+            focus: true
+
             onSelectAll: delegateModel.selectAll()
-            onActionAtIndex: delegateModel.actionAtIndex(index)
             onSelectionUpdated: delegateModel.updateSelection( keyModifiers, oldIndex, newIndex )
+            onCurrentIndexChanged: delegateModel.actionAtIndex(currentIndex)
 
-            onActionLeft: artistList.focus = true
-            onActionRight: root.actionRight(index)
+            onActionRight: view.focus = true
+            onActionLeft: root.actionLeft(index)
             onActionUp: root.actionUp(index)
             onActionDown: root.actionDown(index)
             onActionCancel: root.actionCancel(index)
         }
-    }
-
-    Component {
-        id: albumComponent
-        // Display selected artist albums
 
         FocusScope {
+            id: view
+            width: parent.width * 0.75
+            height: parent.height
+
             property alias currentIndex: albumSubView.currentIndex
             ColumnLayout {
                 anchors.fill: parent
@@ -199,7 +152,7 @@ Utils.NavigableFocusScope {
                     focus: false
                     //contentY: albumsView.contentY
                     contentY: 0
-                    artist: delegateModel.items.get(currentArtistIndex).model
+                    artist: undefined
                 }
                 MusicAlbumsDisplay {
                     id: albumSubView
@@ -218,38 +171,6 @@ Utils.NavigableFocusScope {
         }
     }
 
-    Row {
-        anchors.fill: parent
-        Utils.KeyNavigableListView {
-            width: parent.width * 0.25
-            height: parent.height
-
-            id: artistList
-            spacing: 2
-            model: delegateModel.parts.list
-            modelCount: delegateModel.items.count
-
-            onSelectAll: delegateModel.selectAll()
-            onSelectionUpdated: delegateModel.updateSelection( keyModifiers, oldIndex, newIndex )
-            onActionAtIndex: delegateModel.actionAtIndex(index)
-
-            onActionRight:  view.focus = true
-            onActionLeft: root.actionLeft(index)
-            onActionUp: root.actionUp(index)
-            onActionDown: root.actionDown(index)
-            onActionCancel: root.actionCancel(index)
-        }
-
-        Utils.StackViewExt {
-            id: view
-            width: parent.width * 0.75
-            height: parent.height
-            focus: true
-
-            initialItem: artistGridComponent
-        }
-    }
-
     Label {
         anchors.centerIn: parent
         visible: delegateModel.items.count === 0
diff --git a/modules/gui/qt/qml/mediacenter/MusicTrackListDisplay.qml b/modules/gui/qt/qml/mediacenter/MusicTrackListDisplay.qml
index 46701a4755..9314cd0ecc 100644
--- a/modules/gui/qt/qml/mediacenter/MusicTrackListDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/MusicTrackListDisplay.qml
@@ -69,7 +69,7 @@ Utils.KeyNavigableTableView {
 
     Label {
         anchors.centerIn: parent
-        visible: rootmodel.count === 0
+        visible: delegateModel.items.count === 0
         font.pixelSize: VLCStyle.fontHeight_xxlarge
         color: root.activeFocus ? VLCStyle.colors.accent : VLCStyle.colors.text
         text: qsTr("No tracks found")
diff --git a/modules/gui/qt/qml/style/VLCStyle.qml b/modules/gui/qt/qml/style/VLCStyle.qml
index e746920a64..ba418da034 100644
--- a/modules/gui/qt/qml/style/VLCStyle.qml
+++ b/modules/gui/qt/qml/style/VLCStyle.qml
@@ -106,6 +106,7 @@ Item {
     property url noArtCover: "qrc:///noart.png";
     property url noArtAlbum: "qrc:///noart_album.svg";
     property url noArtArtist: "qrc:///noart_artist.svg";
+    property url noArtArtistSmall: "qrc:///noart_artist_small.svg";
 
 
 }
diff --git a/modules/gui/qt/qml/utils/KeyNavigableTableView.qml b/modules/gui/qt/qml/utils/KeyNavigableTableView.qml
index f63ce9cbda..9d5b608264 100644
--- a/modules/gui/qt/qml/utils/KeyNavigableTableView.qml
+++ b/modules/gui/qt/qml/utils/KeyNavigableTableView.qml
@@ -46,6 +46,8 @@ NavigableFocusScope {
     property alias headerItem: view.headerItem
     property color headerColor
 
+    property alias delegateModel: delegateModel
+
     Utils.SelectableDelegateModel {
         id: delegateModel
 
@@ -132,6 +134,7 @@ NavigableFocusScope {
             width: parent.width
             height: childrenRect.height
             color: headerColor
+            visible: view.modelCount > 0
             z: 3
 
             Column {
diff --git a/modules/gui/qt/qml/utils/ListItem.qml b/modules/gui/qt/qml/utils/ListItem.qml
index 39863544f8..e1bea726ad 100644
--- a/modules/gui/qt/qml/utils/ListItem.qml
+++ b/modules/gui/qt/qml/utils/ListItem.qml
@@ -44,7 +44,7 @@ NavigableFocusScope {
 
             focus: true
 
-            highlightColor: activeFocus ? VLCStyle.colors.buttonText : "transparent"
+            highlightColor: activeFocus ? VLCStyle.colors.banner : "transparent"
 
             //visible: mouse.containsMouse || root.activeFocus
             onClicked: root.addToPlaylistClicked()
@@ -62,7 +62,7 @@ NavigableFocusScope {
 
             focus: true
 
-            highlightColor: add_and_play_icon.activeFocus ? VLCStyle.colors.buttonText : "transparent"
+            highlightColor: add_and_play_icon.activeFocus ? VLCStyle.colors.banner : "transparent"
             onClicked: root.playClicked()
         }
     }
@@ -101,12 +101,16 @@ NavigableFocusScope {
                 focus: true
 
                 Column {
-                    anchors.fill: parent
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        verticalCenter: parent.verticalCenter
+                    }
 
                     Text{
                         id: line1_text
-                        font.bold: true
                         width: parent.width
+
                         elide: Text.ElideRight
                         color: VLCStyle.colors.text
                         font.pixelSize: VLCStyle.fontSize_normal
@@ -118,7 +122,8 @@ NavigableFocusScope {
                         text: ""
                         elide: Text.ElideRight
                         color: VLCStyle.colors.text
-                        font.pixelSize: VLCStyle.fontSize_xsmall
+                        font.pixelSize: VLCStyle.fontSize_small
+                        visible: text !== ""
                         enabled: text !== ""
                     }
                 }
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index 3658c2702e..01f88048d9 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -99,6 +99,7 @@
         <file alias="VLCIcons.ttf">pixmaps/VLCIcons.ttf</file>
         <file alias="noart_album.svg">pixmaps/noart_album.svg</file>
         <file alias="noart_artist.svg">pixmaps/noart_artist.svg</file>
+        <file alias="noart_artist_small.svg">pixmaps/noart_artist_small.svg</file>
     </qresource>
     <qresource prefix="/prefsmenu">
         <file alias="cone_audio_64.png">pixmaps/prefs/spref_cone_Audio_64.png</file>



More information about the vlc-commits mailing list