[vlc-devel] [PATCH 06/29] qml: redesign ArtistTopBanner

[Prince Gupta]

---
 .../qt/medialibrary/qml/ArtistTopBanner.qml   | 148 ++++++++++--------
 1 file changed, 84 insertions(+), 64 deletions(-)

diff --git a/modules/gui/qt/medialibrary/qml/ArtistTopBanner.qml b/modules/gui/qt/medialibrary/qml/ArtistTopBanner.qml
index a2423c3c5a..a76acefd7d 100644
--- a/modules/gui/qt/medialibrary/qml/ArtistTopBanner.qml
+++ b/modules/gui/qt/medialibrary/qml/ArtistTopBanner.qml
@@ -28,101 +28,121 @@ import "qrc:///style/"
 
 Widgets.NavigableFocusScope {
     id: root
-    property var artist: ({})
 
-    height: col.implicitHeight
+    property var artist: ({})
 
+    height: VLCStyle.artistBanner_height
 
     Image {
         id: background
 
-        anchors.fill: parent
-
+        width: parent.width
+        height: VLCStyle.artistBanner_height
         source: artist.cover || VLCStyle.noArtArtist
+        fillMode: artist.cover ? Image.PreserveAspectCrop : Image.Tile
 
-        fillMode: Image.PreserveAspectCrop
-        sourceSize.width: parent.width
-        sourceSize.height: parent.height
-
-        layer.enabled: true
-        layer.effect: OpacityMask {
-            maskSource: LinearGradient {
-                id: mask
-                width: background.width
-                height: background.height
-                gradient: Gradient {
-                    GradientStop { position: 0.2; color: "#88000000" }
-                    GradientStop { position: 0.9; color: "transparent" }
-                }
+        Rectangle {
+            anchors.fill: background
+            gradient: Gradient {
+                GradientStop { position: 0.0; color: Qt.rgba(0, 0, 0, .5) }
+                GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, .7) }
             }
         }
     }
 
-    ColumnLayout {
+    GaussianBlur {
+        source: background
+        anchors.fill: background
+        radius: VLCStyle.dp(4, VLCStyle.scale)
+        samples: (radius * 2) + 1
+    }
+
+    RowLayout {
         id: col
-        anchors.fill: parent
-        RowLayout {
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-            Layout.leftMargin: VLCStyle.margin_small
-            Layout.rightMargin: VLCStyle.margin_small
+
+        anchors.fill: background
+        anchors.topMargin: VLCStyle.margin_xxlarge
+        anchors.bottomMargin: VLCStyle.margin_xxlarge
+        anchors.leftMargin: VLCStyle.margin_xlarge
+        spacing: VLCStyle.margin_normal
+        clip: true
+
+        Item {
+            Layout.alignment: Qt.AlignVCenter
+            Layout.preferredHeight: VLCStyle.cover_normal
+            Layout.preferredWidth: VLCStyle.cover_normal
 
             Widgets.RoundImage {
                 source: artist.cover || VLCStyle.noArtArtist
-                height: VLCStyle.cover_xsmall
-                width: VLCStyle.cover_xsmall
-                radius: VLCStyle.cover_xsmall
+                height: VLCStyle.cover_normal
+                width: VLCStyle.cover_normal
+                radius: VLCStyle.cover_normal
 
-                Layout.alignment: Qt.AlignVCenter
-                Layout.preferredHeight: VLCStyle.cover_small
-                Layout.preferredWidth: VLCStyle.cover_small
             }
 
-            Text {
-                id: artistName
-                text: artist.name || i18n.qtr("No artist")
+            Rectangle {
+                height: VLCStyle.cover_normal
+                width: VLCStyle.cover_normal
+                radius: VLCStyle.cover_normal
+                color: "transparent"
+                border.width: VLCStyle.dp(1, VLCStyle.scale)
+                border.color: VLCStyle.colors.roundPlayCoverBorder
+            }
+        }
 
-                Layout.alignment: Qt.AlignVCenter
-                Layout.leftMargin: VLCStyle.margin_small
-                Layout.rightMargin: VLCStyle.margin_small
+        ColumnLayout {
+            spacing: 0
 
-                font.pixelSize: VLCStyle.fontSize_xxlarge
-                wrapMode: Text.WordWrap
-                maximumLineCount: 2
-                elide: Text.ElideRight
-                color: VLCStyle.colors.text
-            }
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true
 
-            Item {
-                Layout.fillWidth: true
+            Widgets.SubtitleLabel {
+                text: artist.name || i18n.qtr("No artist")
+                color: "white"
             }
-        }
 
-        Widgets.NavigableRow {
-            id: actionButtons
+            Widgets.MenuCaption {
+                text: i18n.qtr("%1 Songs").arg(artist.nb_tracks)
+                color: "white"
+                opacity: .6
 
-            Layout.fillWidth: true
+                Layout.topMargin: VLCStyle.margin_xxxsmall
+            }
 
-            focus: true
-            navigationParent: root
+            Widgets.NavigableRow {
+                id: actionButtons
 
-            model: ObjectModel {
-                Widgets.TabButtonExt {
-                    id: playActionBtn
-                    iconTxt: VLCIcons.play
-                    text: i18n.qtr("Play all")
-                    onClicked: medialib.addAndPlay( artist.id )
-                }
+                focus: true
+                navigationParent: root
+                spacing: VLCStyle.margin_large
 
-                Widgets.TabButtonExt {
-                    id: enqueueActionBtn
-                    iconTxt: VLCIcons.add
-                    text: i18n.qtr("Enqueue all")
-                    onClicked: medialib.addToPlaylist( artist.id )
+                Layout.fillWidth: true
+                Layout.topMargin: VLCStyle.margin_large
+
+                model: ObjectModel {
+                    Widgets.TabButtonExt {
+                        id: playActionBtn
+                        iconTxt: VLCIcons.play
+                        text: i18n.qtr("Play all")
+                        color: "white"
+                        focus: true
+                        onClicked: medialib.addAndPlay( artist.id )
+                    }
+
+                    Widgets.TabButtonExt {
+                        id: enqueueActionBtn
+                        iconTxt: VLCIcons.enqueue
+                        text: i18n.qtr("Enqueue all")
+                        color: "white"
+                        onClicked: medialib.addToPlaylist( artist.id )
+                    }
                 }
             }
-        }
 
+            Item {
+                Layout.fillWidth: true
+            }
+        }
     }
 
 }
-- 
2.25.1