[vlc-devel] [RFC 66/82] qml: provide a component to display up to 4 images in a grid

[Pierre Lamot]

From: Maël Kervella <dev at maelkervella.eu>

---
 modules/gui/qt/Makefile.am                    |  1 +
 .../gui/qt/qml/utils/MultiCoverPreview.qml    | 85 +++++++++++++++++++
 modules/gui/qt/vlc.qrc                        |  1 +
 3 files changed, 87 insertions(+)
 create mode 100644 modules/gui/qt/qml/utils/MultiCoverPreview.qml

diff --git a/modules/gui/qt/Makefile.am b/modules/gui/qt/Makefile.am
index edce0db776..36e2699f86 100644
--- a/modules/gui/qt/Makefile.am
+++ b/modules/gui/qt/Makefile.am
@@ -530,6 +530,7 @@ libqt_plugin_la_RES = \
 	gui/qt/qml/utils/TextToolButton.qml \
 	gui/qt/qml/utils/MenuExt.qml \
 	gui/qt/qml/utils/MenuItemExt.qml \
+	gui/qt/qml/utils/MultiCoverPreview.qml \
 	gui/qt/qml/utils/NavigableFocusScope.qml \
 	gui/qt/qml/utils/KeyNavigableGridView.qml \
 	gui/qt/qml/utils/KeyNavigableListView.qml \
diff --git a/modules/gui/qt/qml/utils/MultiCoverPreview.qml b/modules/gui/qt/qml/utils/MultiCoverPreview.qml
new file mode 100644
index 0000000000..4054f8f60d
--- /dev/null
+++ b/modules/gui/qt/qml/utils/MultiCoverPreview.qml
@@ -0,0 +1,85 @@
+/*****************************************************************************
+ * Copyright (C) 2019 VLC authors and VideoLAN
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * ( at your option ) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston MA 02110-1301, USA.
+ *****************************************************************************/
+
+/********************************************************
+ * If 2 or 3 items, some cover will be cropped to fit in
+ * not square spaces
+ * If 1 album : |---------| If 2 albums : |----|----|
+ *              |         |               |    |    |
+ *              |         |               |    |    |
+ *              |         |               |    |    |
+ *              |---------|               |----|----|
+ * If 3 albums : |----|----| If 4+ albums : |----|----|
+ *               |    |    |                |    |    |
+ *               |    |----|                |----|----|
+ *               |    |    |                |    |    |
+ *               |----|----|                |----|----|
+ ********************************************************/
+
+import QtQuick 2.11
+import QtQuick.Layouts 1.3
+import "qrc:///style"
+
+Item {
+    id: root
+    property var albums: undefined
+
+    GridLayout {
+        id: gridCover_id
+
+        anchors.fill: parent
+
+        columns: 2
+        columnSpacing: VLCStyle.margin_xxxsmall
+        rowSpacing: VLCStyle.margin_xxxsmall
+
+        Repeater {
+            property int count: albums.rowCount()
+            model: Math.min(albums.rowCount(), 4)
+
+            /* One cover */
+            Image {
+                id: img
+
+                Layout.rowSpan: albums.rowCount() >= 1 ? 2 : 1
+                Layout.columnSpan: albums.rowCount() === 1 ? 2 : 1
+                Layout.fillHeight: true
+                Layout.fillWidth: true
+                source: albums.get(index).cover || VLCStyle.noArtCover
+                fillMode: Image.PreserveAspectCrop
+            }
+        }
+    }
+
+    /* "..." label */
+    // If there are more than 4 albums, display "..." to signal there are more
+    Text {
+        id: moreText
+
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+
+        text: "..."
+        font.pixelSize: 30
+        color: VLCStyle.colors.text
+        style: Text.Outline
+        styleColor: VLCStyle.colors.bg
+
+        visible: albums.rowCount() >= 4
+    }
+}
diff --git a/modules/gui/qt/vlc.qrc b/modules/gui/qt/vlc.qrc
index d83148de8e..e7b5110013 100644
--- a/modules/gui/qt/vlc.qrc
+++ b/modules/gui/qt/vlc.qrc
@@ -159,6 +159,7 @@
         <file alias="addon_yellow.svg">pixmaps/addons/addon_yellow.svg</file>
     </qresource>
     <qresource prefix="/utils">
+        <file alias="MultiCoverPreview.qml">qml/utils/MultiCoverPreview.qml</file>
         <file alias="SelectableDelegateModel.qml">qml/utils/SelectableDelegateModel.qml</file>
         <file alias="KeyNavigableGridView.qml">qml/utils/KeyNavigableGridView.qml</file>
         <file alias="KeyNavigableListView.qml">qml/utils/KeyNavigableListView.qml</file>
-- 
2.19.1