[vlc-devel] [PATCH 18/33] QML: remove the GridView of MusicArtistDisplay and rework the behavior
Adrien Maglo
magsoft at videolan.org
Wed Jun 12 14:01:25 CEST 2019
---
modules/gui/qt/Makefile.am | 1 +
modules/gui/qt/pixmaps/noart_artist_small.svg | 81 ++++++++
.../qml/mediacenter/MusicArtistsDisplay.qml | 193 ++++++------------
.../qml/mediacenter/MusicTrackListDisplay.qml | 2 +-
modules/gui/qt/qml/style/VLCStyle.qml | 1 +
.../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(-)
create mode 100644 modules/gui/qt/pixmaps/noart_artist_small.svg
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>
--
2.20.1
More information about the vlc-devel
mailing list