QmlDesigner: Add placeholder controls for when the assets view is empty

Change-Id: I8cf864f97aff09f846411e50cec17e7cdf1be2d0
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Samuel Ghinet <samuel.ghinet@qt.io>
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>

share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml

@@ -32,6 +32,8 @@ import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
 Item {
+    id: rootItem
+
     property var selectedAssets: ({})
     property int allExpandedState: 0
     property string delFilePath: ""
@@ -257,4 +259,52 @@ Item {
             }
         }
     }
+
+    // Placeholder when the assets panel is empty
+    Column {
+        id: colNoAssets
+        visible: assetsModel.isEmpty()
+
+        spacing: 20
+        x: 20
+        width: rootItem.width - 2 * x
+        anchors.verticalCenter: parent.verticalCenter
+
+        Text {
+            text: qsTr("Looks like you don't have any assets yet.")
+            color: StudioTheme.Values.themeTextColor
+            font.pixelSize: 18
+            width: colNoAssets.width
+            horizontalAlignment: Text.AlignHCenter
+            wrapMode: Text.WordWrap
+        }
+
+        Image {
+            source: "image://qmldesigner_assets/browse"
+            anchors.horizontalCenter: parent.horizontalCenter
+            scale: maBrowse.containsMouse ? 1.2 : 1
+            Behavior on scale {
+                NumberAnimation {
+                    duration: 300
+                    easing.type: Easing.OutQuad
+                }
+            }
+
+            MouseArea {
+                id: maBrowse
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked: rootView.handleAddAsset();
+            }
+        }
+
+        Text {
+            text: qsTr("Drag-and-drop your assets here or click the '+' button to browse assets from the file system.")
+            color: StudioTheme.Values.themeTextColor
+            font.pixelSize: 18
+            width: colNoAssets.width
+            horizontalAlignment: Text.AlignHCenter
+            wrapMode: Text.WordWrap
+        }
+    }
 }

src/plugins/qmldesigner/components/itemlibrary/itemlibrary.qrc

@@ -31,5 +31,7 @@
         <file>images/asset_sound_384.png</file>
         <file>images/x.png</file>
         <file>images/x@2x.png</file>
+        <file>images/browse.png</file>
+        <file>images/browse@2x.png</file>
     </qresource>
 </RCC>

src/plugins/qmldesigner/components/itemlibrary/itemlibraryassetsiconprovider.cpp

@@ -42,16 +42,18 @@ QPixmap ItemLibraryAssetsIconProvider::requestPixmap(const QString &id, QSize *s
 {
     QPixmap pixmap;
     const QString suffix = "*." + id.split('.').last().toLower();
-    if (ItemLibraryAssetsModel::supportedFontSuffixes().contains(suffix))
+    if (id == "browse")
+        pixmap = Utils::StyleHelper::dpiSpecificImageFile(":/ItemLibrary/images/browse.png");
+    else if (ItemLibraryAssetsModel::supportedFontSuffixes().contains(suffix))
         pixmap = generateFontIcons(id);
     else if (ItemLibraryAssetsModel::supportedImageSuffixes().contains(suffix))
         pixmap = Utils::StyleHelper::dpiSpecificImageFile(id);
     else if (ItemLibraryAssetsModel::supportedTexture3DSuffixes().contains(suffix))
         pixmap = HdrImage{id}.toPixmap();
     else if (ItemLibraryAssetsModel::supportedShaderSuffixes().contains(suffix))
-        pixmap = QPixmap(Utils::StyleHelper::dpiSpecificImageFile(":/ItemLibrary/images/asset_shader_48.png"));
+        pixmap = Utils::StyleHelper::dpiSpecificImageFile(":/ItemLibrary/images/asset_shader_48.png");
     else if (ItemLibraryAssetsModel::supportedAudioSuffixes().contains(suffix))
-        pixmap = QPixmap(Utils::StyleHelper::dpiSpecificImageFile(":/ItemLibrary/images/asset_sound_48.png"));
+        pixmap = Utils::StyleHelper::dpiSpecificImageFile(":/ItemLibrary/images/asset_sound_48.png");
 
     if (size) {
         size->setWidth(pixmap.width());

src/plugins/qmldesigner/components/itemlibrary/itemlibraryassetsmodel.cpp

@@ -275,7 +275,7 @@ void ItemLibraryAssetsModel::setRootPath(const QString &path)
 
     beginResetModel();
     m_assetsDir = new ItemLibraryAssetsDir(path, 0, true, this);
-    parseDirRecursive(m_assetsDir, 1);
+    m_isEmpty = parseDirRecursive(m_assetsDir, 1);
     endResetModel();
 }
 

src/plugins/qmldesigner/components/itemlibrary/itemlibraryassetsmodel.h

@@ -51,8 +51,8 @@ public:
                            Utils::FileSystemWatcher *fileSystemWatcher,
                            QObject *parent = nullptr);
 
-    QVariant data(const QModelIndex & index, int role = Qt::DisplayRole) const override;
+    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
-    int rowCount(const QModelIndex & parent = QModelIndex()) const override;
+    int rowCount(const QModelIndex &parent = QModelIndex()) const override;
     QHash<int, QByteArray> roleNames() const override;
 
     void refresh();
@@ -81,6 +81,7 @@ public:
     Q_INVOKABLE void toggleExpandAll(bool expand);
     Q_INVOKABLE DirExpandState getAllExpandedState() const;
     Q_INVOKABLE void removeFile(const QString &filePath);
+    Q_INVOKABLE bool isEmpty() const { return m_isEmpty; };
 
 private:
     const QSet<QString> &supportedSuffixes() const;
@@ -91,6 +92,7 @@ private:
     QString m_searchText;
     Utils::FileSystemWatcher *m_fileSystemWatcher = nullptr;
     ItemLibraryAssetsDir *m_assetsDir = nullptr;
+    bool m_isEmpty = true;
 
     QHash<int, QByteArray> m_roleNames;
     inline static QHash<QString, bool> m_expandedStateHash; // <assetPath, isExpanded>