QmlDesigner: Implementing the resource images view as ListView with flow

This design allows different image preview sizes and
is a lot more usable.

Change-Id: I0be4270a16e28d549296e0659b76cd7eecab1f57
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>

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

@@ -0,0 +1,192 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+#include "customfilesystemmodel.h"
+
+#include <utils/filesystemwatcher.h>
+
+#include <QDir>
+#include <QDirIterator>
+#include <QFileIconProvider>
+#include <QFileSystemModel>
+#include <QImageReader>
+
+namespace QmlDesigner {
+
+class ItemLibraryFileIconProvider : public QFileIconProvider
+{
+public:
+    ItemLibraryFileIconProvider()
+    {
+    }
+
+    QIcon icon( const QFileInfo & info ) const
+    {
+        QIcon icon;
+
+        for (auto iconSize : iconSizes) {
+
+            QPixmap pixmap(info.absoluteFilePath());
+
+            QImage image(info.absoluteFilePath());
+
+            if (pixmap.isNull())
+                return QFileIconProvider::icon(info);
+
+            if (pixmap.width() == iconSize.width()
+                    && pixmap.height() == iconSize.height())
+                return pixmap;
+
+            if ((pixmap.width() > iconSize.width())
+                    || (pixmap.height() > iconSize.height()))
+                pixmap = pixmap.scaled(iconSize, Qt::KeepAspectRatio, Qt::SmoothTransformation);
+
+            icon.addPixmap(pixmap);
+        }
+
+        return icon;
+    }
+
+    QList<QSize> iconSizes  = {{256, 196},{128, 96},{64, 64},{32, 32}};
+
+};
+
+CustomFileSystemModel::CustomFileSystemModel(QObject *parent) : QAbstractListModel(parent)
+  , m_fileSystemModel(new QFileSystemModel)
+  , m_fileSystemWatcher(new Utils::FileSystemWatcher(this))
+{
+    m_fileSystemModel->setIconProvider(new ItemLibraryFileIconProvider());
+
+    connect(m_fileSystemWatcher, &Utils::FileSystemWatcher::directoryChanged, [this] {
+        setRootPath(m_fileSystemModel->rootPath());
+    });
+
+}
+
+void CustomFileSystemModel::setFilter(QDir::Filters)
+{
+
+}
+
+QModelIndex CustomFileSystemModel::setRootPath(const QString &newPath)
+{
+    beginResetModel();
+    m_fileSystemModel->setRootPath(newPath);
+
+    m_fileSystemWatcher->removeDirectories(m_fileSystemWatcher->directories());
+
+    m_fileSystemWatcher->addDirectory(newPath, Utils::FileSystemWatcher::WatchAllChanges);
+
+    QStringList nameFilterList;
+
+    const QString searchFilter = m_searchFilter;
+
+    if (searchFilter.contains(QLatin1Char('.'))) {
+        nameFilterList.append(QString(QStringLiteral("*%1*")).arg(searchFilter));
+    } else {
+        foreach (const QByteArray &extension, QImageReader::supportedImageFormats()) {
+            nameFilterList.append(QString(QStringLiteral("*%1*.%2")).arg(searchFilter, QString::fromUtf8(extension)));
+        }
+    }
+
+    m_files.clear();
+
+    QDirIterator fileIterator(newPath, nameFilterList, QDir::Files, QDirIterator::Subdirectories);
+
+    while (fileIterator.hasNext())
+        m_files.append(fileIterator.next());
+
+    QDirIterator dirIterator(newPath, {}, QDir::Dirs | QDir::NoDotAndDotDot, QDirIterator::Subdirectories);
+    while (dirIterator.hasNext())
+        m_fileSystemWatcher->addDirectory(dirIterator.next(), Utils::FileSystemWatcher::WatchAllChanges);
+
+    endResetModel();
+    return QAbstractListModel::index(0, 0);
+}
+
+QVariant CustomFileSystemModel::data(const QModelIndex &index, int role) const
+{
+    if (role == Qt::ToolTipRole)
+        return fileInfo(index).filePath();
+
+    if (role == Qt::FontRole) {
+        QFont font = m_fileSystemModel->data(fileSystemModelIndex(index), role).value<QFont>();
+        font.setPixelSize(9);
+        return font;
+    }
+
+
+    return m_fileSystemModel->data(fileSystemModelIndex(index), role);
+}
+
+int CustomFileSystemModel::rowCount(const QModelIndex &) const
+{
+    return m_files.count();
+}
+
+int CustomFileSystemModel::columnCount(const QModelIndex &) const
+{
+    return 1;
+}
+
+QModelIndex CustomFileSystemModel::index(const QString &path, int /*column*/) const
+{
+    return QAbstractListModel::index(m_files.indexOf(path), 0);
+}
+
+QIcon CustomFileSystemModel::fileIcon(const QModelIndex &index) const
+{
+    return m_fileSystemModel->fileIcon(fileSystemModelIndex(index));
+}
+
+QString CustomFileSystemModel::fileName(const QModelIndex &index) const
+{
+    return m_fileSystemModel->fileName(fileSystemModelIndex(index));
+}
+
+QFileInfo CustomFileSystemModel::fileInfo(const QModelIndex &index) const
+{
+    return m_fileSystemModel->fileInfo(fileSystemModelIndex(index));
+}
+
+Qt::ItemFlags CustomFileSystemModel::flags(const QModelIndex &index) const
+{
+    return m_fileSystemModel->flags (fileSystemModelIndex(index));
+}
+
+void CustomFileSystemModel::setSearchFilter(const QString &nameFilterList)
+{
+    m_searchFilter = nameFilterList;
+    setRootPath(m_fileSystemModel->rootPath());
+}
+
+QModelIndex CustomFileSystemModel::fileSystemModelIndex(const QModelIndex &index) const
+{
+    const int row = index.row();
+    const int column = index.column();
+    return m_fileSystemModel->index(m_files.at(row));
+}
+
+} //QmlDesigner

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

@@ -25,38 +25,50 @@
 
 #pragma once
 
-#include <QTreeView>
+#include <QAbstractTableModel>
-#include <QStyledItemDelegate>
+#include <QDir>
+
+#include <memory>
 
 QT_BEGIN_NAMESPACE
 class QFileSystemModel;
-class QLabel;
+class QFileIconProvider;
 QT_END_NAMESPACE
 
+namespace Utils { class FileSystemWatcher; }
+
 namespace QmlDesigner {
 
-class ResourceItemDelegate;
+class CustomFileSystemModel : public QAbstractListModel
-
+{
-// ItemLibraryTreeView with Drag implementation
-class ItemLibraryTreeView : public QTreeView {
-
     Q_OBJECT
 public:
-    explicit ItemLibraryTreeView(QWidget *parent = 0);
+    CustomFileSystemModel(QObject *parent = 0);
 
-    virtual void startDrag(Qt::DropActions supportedActions);
+    void setFilter(QDir::Filters filters);
-    virtual void setModel(QAbstractItemModel *model);
+    QString rootPath() const;
+    QModelIndex setRootPath(const QString &newPath);
 
-    static void drawSelectionBackground(QPainter *painter, const QStyleOption &option);
+    QVariant data(const QModelIndex & index, int role = Qt::DisplayRole) const override;
+    int rowCount(const QModelIndex & parent = QModelIndex()) const override;
+    int columnCount(const QModelIndex & parent = QModelIndex()) const override;
 
-signals:
+    QModelIndex index(const QString & path, int column = 0) const;
-    void itemActivated(const QString &itemName);
 
-private slots:
+    QIcon fileIcon(const QModelIndex & index) const;
-    void activateItem( const QModelIndex &index);
+    QString fileName(const QModelIndex & index) const;
+    QFileInfo fileInfo(const QModelIndex & index) const;
+
+    Qt::ItemFlags flags(const QModelIndex &index) const override;
+    void setSearchFilter(const QString &nameFilterList);
 
 private:
-    ResourceItemDelegate *m_delegate;
+    QModelIndex fileSystemModelIndex(const QModelIndex &index) const;
+
+    std::unique_ptr<QFileSystemModel> m_fileSystemModel;
+    QStringList m_files;
+    QString m_searchFilter;
+    Utils::FileSystemWatcher *m_fileSystemWatcher;
 };
 
-} // namespace QmlDesigner
+} //QmlDesigner

src/plugins/qmldesigner/components/itemlibrary/itemlibrary.pri

@@ -4,21 +4,21 @@ VPATH += $$PWD
 HEADERS += itemlibraryview.h \
            itemlibrarywidget.h \
            itemlibrarymodel.h \
-           itemlibrarytreeview.h \
+           itemlibraryresourceview.h \
            itemlibraryimageprovider.h \
            itemlibrarysectionmodel.h \
            itemlibraryitem.h \
-           resourceitemdelegate.h \
+           itemlibrarysection.h \
-           itemlibrarysection.h
+           customfilesystemmodel.h
 
 SOURCES += itemlibraryview.cpp \
            itemlibrarywidget.cpp \
            itemlibrarymodel.cpp \
-           itemlibrarytreeview.cpp \
+           itemlibraryresourceview.cpp \
            itemlibraryimageprovider.cpp \
            itemlibrarysectionmodel.cpp \
            itemlibraryitem.cpp \
-           resourceitemdelegate.cpp \
+           itemlibrarysection.cpp \
-           itemlibrarysection.cpp
+           customfilesystemmodel.cpp
 
 RESOURCES += itemlibrary.qrc

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

@@ -0,0 +1,131 @@
+/****************************************************************************
+**
+** Copyright (C) 2016 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+#include "itemlibraryresourceview.h"
+
+#include "customfilesystemmodel.h"
+
+#include <QAction>
+#include <QActionGroup>
+#include <QDebug>
+#include <QDrag>
+#include <QFileSystemModel>
+#include <QMimeData>
+#include <QPainter>
+#include <QPixmap>
+
+#include <QProxyStyle>
+
+#include <functional>
+
+enum { debug = 0 };
+
+namespace QmlDesigner {
+
+void ItemLibraryResourceView::addSizeAction(QActionGroup *group, const QString &text, int gridSize, int iconSize)
+{
+    QAction *action = new QAction(text, group);
+    group->addAction(action);
+    action->setCheckable(true);
+    QAction::connect(action, &QAction::triggered, this, [this, gridSize, iconSize]() {
+        setViewMode(QListView::IconMode);
+        setGridSize(QSize(gridSize, gridSize));
+        setIconSize(QSize(iconSize, iconSize));
+        setDragEnabled(true);
+        setWrapping(true);
+    });
+}
+
+ItemLibraryResourceView::ItemLibraryResourceView(QWidget *parent) :
+        QListView(parent)
+{
+    setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
+    setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
+    setAttribute(Qt::WA_MacShowFocusRect, false);
+
+    setGridSize(QSize(128, 128));
+    setIconSize(QSize(96, 96));
+    setSpacing(4);
+
+    setViewMode(QListView::IconMode);
+    setMovement(QListView::Static);
+    setResizeMode(QListView::Adjust);
+    setSelectionRectVisible(false);
+    setWrapping(true);
+    setWordWrap(true);
+
+    setDragDropMode(QAbstractItemView::DragOnly);
+
+    setContextMenuPolicy(Qt::ActionsContextMenu);
+
+    QActionGroup *actionGroup = new QActionGroup(this);
+    actionGroup->setExclusive(true);
+
+    addSizeAction(actionGroup, tr("Large Icons"), 256, 192);
+    addSizeAction(actionGroup, tr("Medium Icons"), 128, 96);
+    addSizeAction(actionGroup, tr("Small Icons"), 96, 48);
+
+    QAction *action = new QAction(tr("List"), actionGroup);
+    actionGroup->addAction(action);
+    action->setCheckable(true);
+    QAction::connect(action, &QAction::triggered, this, [this](){
+        setViewMode(QListView::ListMode);
+        setGridSize(QSize());
+        setIconSize(QSize(32, 32));
+        setDragEnabled(true);
+        setWrapping(false);
+    });
+
+    QAction *defaultAction = actionGroup->actions().at(1);
+    defaultAction->toggle();
+
+    addActions(actionGroup->actions());
+}
+
+void ItemLibraryResourceView::startDrag(Qt::DropActions /* supportedActions */)
+{
+    if (debug)
+        qDebug() << Q_FUNC_INFO;
+    QMimeData *mimeData = model()->mimeData(selectedIndexes());
+
+    if (!mimeData)
+        return;
+
+    CustomFileSystemModel *fileSystemModel = qobject_cast<CustomFileSystemModel*>(model());
+    Q_ASSERT(fileSystemModel);
+    QFileInfo fileInfo = fileSystemModel->fileInfo(selectedIndexes().front());
+    QPixmap pixmap(fileInfo.absoluteFilePath());
+    if (!pixmap.isNull()) {
+        QDrag *drag = new QDrag(this);
+        drag->setPixmap(QIcon(pixmap).pixmap(128, 128));
+        QMimeData *mimeData = new QMimeData;
+        mimeData->setData(QLatin1String("application/vnd.bauhaus.libraryresource"), fileInfo.absoluteFilePath().toUtf8());
+        drag->setMimeData(mimeData);
+        drag->exec();
+    }
+}
+
+} // namespace QmlDesigner
+

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

@@ -25,27 +25,23 @@
 
 #pragma once
 
-#include <QStyledItemDelegate>
+#include <QListView>
-#include <QFileSystemModel>
+
+QT_BEGIN_NAMESPACE
+class QActionGroup;
+QT_END_NAMESPACE
 
 namespace QmlDesigner {
 
-class ResourceItemDelegate : public QStyledItemDelegate
+class ItemLibraryResourceView : public QListView {
-{
+
+    Q_OBJECT
 public:
-    explicit ResourceItemDelegate(QObject *parent=0);
+    explicit ItemLibraryResourceView(QWidget *parent = 0);
-
-    void paint(QPainter *painter,
-               const QStyleOptionViewItem &option,
-               const QModelIndex &index) const;
-
-    QSize sizeHint(const QStyleOptionViewItem &option,
-                   const QModelIndex &index) const;
-
-    void setModel(QFileSystemModel *model);
 
+    void startDrag(Qt::DropActions supportedActions) override;
 private:
-    QFileSystemModel *m_model;
+    void addSizeAction(QActionGroup *group, const QString &text, int size, int iconSize);
 };
 
 } // namespace QmlDesigner

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

@@ -1,161 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2016 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Creator.
-**
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 as published by the Free Software
-** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-****************************************************************************/
-
-#include "itemlibrarytreeview.h"
-
-#include "resourceitemdelegate.h"
-
-#include <QMimeData>
-#include <QDebug>
-
-#include <QPixmap>
-#include <QDrag>
-#include <QPainter>
-#include <QFileSystemModel>
-#include <QProxyStyle>
-
-enum { debug = 0 };
-
-namespace QmlDesigner {
-
-void ItemLibraryTreeView::drawSelectionBackground(QPainter *painter, const QStyleOption &option)
-{
-    painter->save();
-    QLinearGradient gradient;
-    QColor highlight = option.palette.highlight().color();
-    gradient.setColorAt(0, highlight.lighter(130));
-    gradient.setColorAt(1, highlight.darker(130));
-    gradient.setStart(option.rect.topLeft());
-    gradient.setFinalStop(option.rect.bottomLeft());
-    painter->fillRect(option.rect, gradient);
-    painter->setPen(highlight.lighter());
-    painter->drawLine(option.rect.topLeft(),option.rect.topRight());
-    painter->setPen(highlight.darker());
-    painter->drawLine(option.rect.bottomLeft(),option.rect.bottomRight());
-    painter->restore();
-}
-
-namespace {
-// This style basically allows us to span the entire row
-// including the arrow indicators which would otherwise not be
-// drawn by the delegate
-class TreeViewStyle : public QProxyStyle
-{
-public:
-    void drawPrimitive(PrimitiveElement element, const QStyleOption *option, QPainter *painter, const QWidget * = 0) const
-    {
-        if (element == QStyle::PE_PanelItemViewRow) {
-            if (option->state & QStyle::State_Selected)
-                ItemLibraryTreeView::drawSelectionBackground(painter, *option);
-        }
-    }
-    int styleHint(StyleHint hint, const QStyleOption *option = 0, const QWidget *widget = 0, QStyleHintReturn *returnData = 0) const {
-        if (hint == SH_ItemView_ShowDecorationSelected)
-            return 0;
-        else
-            return QProxyStyle::styleHint(hint, option, widget, returnData);
-    }
-};
-
-}
-ItemLibraryTreeView::ItemLibraryTreeView(QWidget *parent) :
-        QTreeView(parent)
-{
-    setDragEnabled(true);
-    setDragDropMode(QAbstractItemView::DragOnly);
-    setUniformRowHeights(true);
-    connect(this, SIGNAL(clicked(QModelIndex)), this, SLOT(activateItem(QModelIndex)));
-    setHeaderHidden(true);
-    setIndentation(20);
-    setVerticalScrollBarPolicy(Qt::ScrollBarAsNeeded);
-    setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
-    setAttribute(Qt::WA_MacShowFocusRect, false);
-
-    TreeViewStyle *style = new TreeViewStyle;
-    setStyle(style);
-    style->setParent(this);
-    m_delegate = new ResourceItemDelegate(this);
-    setItemDelegateForColumn(0, m_delegate);
-}
-
-// We need to implement startDrag ourselves since we cannot
-// otherwise influence drag pixmap and hotspot in the standard
-// implementation.
-void ItemLibraryTreeView::startDrag(Qt::DropActions /* supportedActions */)
-{
-    if (debug)
-        qDebug() << Q_FUNC_INFO;
-    QMimeData *mimeData = model()->mimeData(selectedIndexes());
-    if (!mimeData)
-        return;
-
-    QFileSystemModel *fileSystemModel = qobject_cast<QFileSystemModel*>(model());
-    Q_ASSERT(fileSystemModel);
-    QFileInfo fileInfo = fileSystemModel->fileInfo(selectedIndexes().front());
-    QPixmap pixmap(fileInfo.absoluteFilePath());
-    if (!pixmap.isNull()) {
-        QDrag *drag = new QDrag(this);
-        drag->setPixmap(QIcon(pixmap).pixmap(128, 128));
-        QMimeData *mimeData = new QMimeData;
-        mimeData->setData(QLatin1String("application/vnd.bauhaus.libraryresource"), fileInfo.absoluteFilePath().toUtf8());
-        drag->setMimeData(mimeData);
-        drag->exec();
-    }
-}
-
-void ItemLibraryTreeView::setModel(QAbstractItemModel *model)
-{
-    QFileSystemModel *fileSystemModel = dynamic_cast<QFileSystemModel *>(model);
-    if (fileSystemModel) {
-        QTreeView::setModel(model);
-        m_delegate->setModel(fileSystemModel);
-        setColumnHidden(1, true);
-        setColumnHidden(2, true);
-        setColumnHidden(3, true);
-        setSortingEnabled(true);
-    }
-}
-
-void ItemLibraryTreeView::activateItem( const QModelIndex & /*index*/)
-{
-    QMimeData *mimeData = model()->mimeData(selectedIndexes());
-    if (!mimeData)
-        return;
-
-    QString name;
-    QFileSystemModel *fileSystemModel = qobject_cast<QFileSystemModel*>(model());
-    Q_ASSERT(fileSystemModel);
-    QFileInfo fileInfo = fileSystemModel->fileInfo(selectedIndexes().front());
-    QPixmap pixmap(fileInfo.absoluteFilePath());
-    if (!pixmap.isNull()) {
-        name = QLatin1String("image^") + fileInfo.absoluteFilePath();
-        emit itemActivated(name);
-    }
-}
-
-
-
-} // namespace QmlDesigner
-

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

@@ -25,6 +25,8 @@
 
 #include "itemlibrarywidget.h"
 
+#include "customfilesystemmodel.h"
+
 #include <theming.h>
 
 #include <utils/fileutils.h>
@@ -62,10 +64,8 @@ namespace QmlDesigner {
 ItemLibraryWidget::ItemLibraryWidget(QWidget *parent) :
     QFrame(parent),
     m_itemIconSize(24, 24),
-    m_resIconSize(64, 64),
-    m_iconProvider(m_resIconSize),
     m_itemViewQuickWidget(new QQuickWidget),
-    m_resourcesView(new ItemLibraryTreeView(this)),
+    m_resourcesView(new ItemLibraryResourceView(this)),
     m_filterFlag(QtBasic)
 {
     m_compressionTimer.setInterval(200);
@@ -88,10 +88,8 @@ ItemLibraryWidget::ItemLibraryWidget(QWidget *parent) :
     m_itemViewQuickWidget->rootContext()->setContextProperty(QStringLiteral("highlightColor"), Utils::StyleHelper::notTooBrightHighlightColor());
 
     /* create Resources view and its model */
-    m_resourcesFileSystemModel = new QFileSystemModel(this);
+    m_resourcesFileSystemModel = new CustomFileSystemModel(this);
-    m_resourcesFileSystemModel->setIconProvider(&m_iconProvider);
     m_resourcesView->setModel(m_resourcesFileSystemModel.data());
-    m_resourcesView->setIconSize(m_resIconSize);
 
     /* create image provider for loading item icons */
     m_itemViewQuickWidget->engine()->addImageProvider(QStringLiteral("qmldesigner_itemlibrary"), new Internal::ItemLibraryImageProvider);
@@ -199,18 +197,9 @@ void ItemLibraryWidget::setSearchFilter(const QString &searchFilter)
         m_itemViewQuickWidget->update();
     } else {
         QStringList nameFilterList;
-        if (searchFilter.contains(QLatin1Char('.'))) {
-            nameFilterList.append(QString(QStringLiteral("*%1*")).arg(searchFilter));
-        } else {
-            foreach (const QByteArray &extension, QImageReader::supportedImageFormats()) {
-                nameFilterList.append(QString(QStringLiteral("*%1*.%2")).arg(searchFilter, QString::fromUtf8(extension)));
-            }
-        }
 
+        m_resourcesFileSystemModel->setSearchFilter(searchFilter);
         m_resourcesFileSystemModel->setFilter(QDir::AllDirs | QDir::Files | QDir::NoDotAndDotDot);
-        m_resourcesFileSystemModel->setNameFilterDisables(false);
-        m_resourcesFileSystemModel->setNameFilters(nameFilterList);
-        m_resourcesView->expandToDepth(1);
         m_resourcesView->scrollToTop();
     }
 }
@@ -320,44 +309,4 @@ void ItemLibraryWidget::addImport(const QString &name, const QString &version)
     m_model->changeImports(QList<Import>() << Import::createLibraryImport(name, version), QList<Import>());
 }
 
-QIcon ItemLibraryFileIconProvider::icon(const QFileInfo &info) const
-{
-    QSize iconSize = m_iconSize;
-
-    QPixmap pixmap(info.absoluteFilePath());
-
-    if (pixmap.isNull()) {
-        QIcon defaultIcon(QFileIconProvider::icon(info));
-        pixmap = defaultIcon.pixmap(defaultIcon.actualSize(QSize(16, 16)));
-    }
-
-    if (pixmap.isNull())
-        return pixmap;
-
-    if (pixmap.width() == iconSize.width()
-            && pixmap.height() == iconSize.height())
-        return pixmap;
-
-    if ((pixmap.width() > iconSize.width())
-            || (pixmap.height() > iconSize.height())) {
-
-        pixmap = pixmap.scaled(iconSize, Qt::KeepAspectRatio,
-                             Qt::SmoothTransformation);
-    }
-
-    QImage newIcon(iconSize, QImage::Format_ARGB32_Premultiplied);
-    newIcon.fill(Qt::transparent);
-    QPainter painter(&newIcon);
-
-    painter.drawPixmap(qAbs(m_iconSize.width() - pixmap.width()) / 2, qAbs(m_iconSize.height() - pixmap.height()) / 2, pixmap);
-
-    QIcon icon(QPixmap::fromImage(newIcon));
-
-    return icon;
-}
-
-ItemLibraryFileIconProvider::ItemLibraryFileIconProvider(const QSize &iconSize)
-    : QFileIconProvider(),
-      m_iconSize(iconSize)
-{}
 }

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

@@ -26,7 +26,7 @@
 #pragma once
 
 #include "itemlibraryinfo.h"
-#include "itemlibrarytreeview.h"
+#include "itemlibraryresourceview.h"
 
 #include <utils/fancylineedit.h>
 
@@ -38,7 +38,6 @@
 #include <QTimer>
 
 QT_BEGIN_NAMESPACE
-class QFileSystemModel;
 class QStackedWidget;
 class QShortcut;
 QT_END_NAMESPACE
@@ -48,23 +47,11 @@ namespace QmlDesigner {
 class MetaInfo;
 class ItemLibraryEntry;
 class Model;
+class CustomFileSystemModel;
 
 
 class ItemLibraryModel;
-class ItemLibraryTreeView;
+class ItemLibraryResourceView;
-
-
-class ItemLibraryFileIconProvider : public QFileIconProvider
-{
-public:
-    ItemLibraryFileIconProvider(const QSize &iconSize);
-
-    QIcon icon( const QFileInfo & info ) const;
-
-private:
-    QSize m_iconSize;
-};
-
 
 class ItemLibraryWidget : public QFrame
 {
@@ -114,19 +101,17 @@ private slots:
 private:
     QTimer m_compressionTimer;
     QSize m_itemIconSize;
-    QSize m_resIconSize;
-    ItemLibraryFileIconProvider m_iconProvider;
 
     QPointer<ItemLibraryInfo> m_itemLibraryInfo;
 
     QPointer<ItemLibraryModel> m_itemLibraryModel;
-    QPointer<QFileSystemModel> m_resourcesFileSystemModel;
+    QPointer<CustomFileSystemModel> m_resourcesFileSystemModel;
 
     QPointer<QStackedWidget> m_stackedWidget;
 
     QPointer<Utils::FancyLineEdit> m_filterLineEdit;
     QScopedPointer<QQuickWidget> m_itemViewQuickWidget;
-    QScopedPointer<ItemLibraryTreeView> m_resourcesView;
+    QScopedPointer<ItemLibraryResourceView> m_resourcesView;
     QShortcut *m_qmlSourceUpdateShortcut;
 
     QPointer<Model> m_model;

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

@@ -1,73 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2016 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Creator.
-**
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 as published by the Free Software
-** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-****************************************************************************/
-
-#include "resourceitemdelegate.h"
-
-#include "itemlibrarytreeview.h"
-
-#include <QPainter>
-
-namespace QmlDesigner {
-
-ResourceItemDelegate::ResourceItemDelegate(QObject *parent)
-    : QStyledItemDelegate(parent),
-      m_model(0) {}
-
-void ResourceItemDelegate::paint(QPainter *painter,
-                                 const QStyleOptionViewItem &option,
-                                 const QModelIndex &index) const
-{
-    if (option.state & QStyle::State_Selected)
-        ItemLibraryTreeView::drawSelectionBackground(painter, option);
-
-    painter->save();
-
-    QIcon icon(m_model->fileIcon(index));
-    QPixmap pixmap(icon.pixmap(icon.availableSizes().front()));
-    painter->drawPixmap(option.rect.x(),option.rect.y() + 2, pixmap);
-    QString myString(m_model->fileName(index));
-
-    // Check text length does not exceed available space
-    int extraSpace = 12 + pixmap.width();
-    QFontMetrics fm(option.font);
-    myString = fm.elidedText(myString, Qt::ElideMiddle, option.rect.width() - extraSpace);
-
-    painter->drawText(QPoint(option.rect.bottomLeft().x() + 16 + pixmap.width(), option.rect.center().y() + fm.height()  / 2), myString);
-
-    painter->restore();
-}
-
-QSize ResourceItemDelegate::sizeHint(const QStyleOptionViewItem &/*option*/,
-                                     const QModelIndex &) const
-{
-    return QSize(90, 64);
-}
-
-void ResourceItemDelegate::setModel(QFileSystemModel *model)
-{
-    m_model = model;
-}
-
-} // namespace QmlDesigner

src/plugins/qmldesigner/components/navigator/navigatortreeview.cpp

@@ -51,10 +51,10 @@ namespace {
 // This style basically allows us to span the entire row
 // including the arrow indicators which would otherwise not be
 // drawn by the delegate
-class TreeViewStyle : public QProxyStyle
+class TableViewStyle : public QProxyStyle
 {
 public:
-    TreeViewStyle(QObject *parent) : QProxyStyle(QStyleFactory::create("fusion"))
+    TableViewStyle(QObject *parent) : QProxyStyle(QStyleFactory::create("fusion"))
     {
         setParent(parent);
         baseStyle()->setParent(parent);
@@ -169,7 +169,7 @@ private: // variables
 NavigatorTreeView::NavigatorTreeView(QWidget *parent)
     : QTreeView(parent)
 {
-    setStyle(new TreeViewStyle(this));
+    setStyle(new TableViewStyle(this));
 }
 
 void NavigatorTreeView::drawSelectionBackground(QPainter *painter, const QStyleOption &option)

src/plugins/qmldesigner/qmldesignerplugin.qbs

@@ -525,14 +525,14 @@ Project {
                 "itemlibrary/itemlibrarysection.h",
                 "itemlibrary/itemlibrarysectionmodel.cpp",
                 "itemlibrary/itemlibrarysectionmodel.h",
-                "itemlibrary/itemlibrarytreeview.cpp",
+                "itemlibrary/itemlibraryresourceview.cpp",
-                "itemlibrary/itemlibrarytreeview.h",
+                "itemlibrary/itemlibraryresourceview.h",
                 "itemlibrary/itemlibraryview.cpp",
                 "itemlibrary/itemlibraryview.h",
                 "itemlibrary/itemlibrarywidget.cpp",
                 "itemlibrary/itemlibrarywidget.h",
-                "itemlibrary/resourceitemdelegate.cpp",
+                "itemlibrary/customfilesystemmodel.cpp",
-                "itemlibrary/resourceitemdelegate.h",
+                "itemlibrary/customfilesystemmodel.h",
                 "navigator/iconcheckboxitemdelegate.cpp",
                 "navigator/iconcheckboxitemdelegate.h",
                 "navigator/nameitemdelegate.cpp",