QmlDesigner: Move new item lib qmls to the share folder

...so that theming and hot reloading can be applied. Theming isn't part
of this commit. Also used icon font instead of pngs.

Change-Id: I7df149fe9c07fb4c2e3deca6bcf3b0346025e3d6
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Miina Puuronen <miina.puuronen@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qmldesigner/itemLibraryQmlSources/AddImport.qml

@@ -30,8 +30,6 @@ import QtQuickDesignerTheme 1.0
 Column {
     id: root
 
-    signal addImport(int index)
-
     Text {
         id: header
         text: qsTr("Select a Module to Add")
@@ -78,7 +76,7 @@ Column {
                         id: mouseArea
                         anchors.fill: parent
                         hoverEnabled: true
-                        onClicked: addImport(index)
+                        onClicked: rootView.handleAddImport(index)
                         enabled: !isSeparator
                     }
                 }

share/qtcreator/qmldesigner/itemLibraryQmlSources/LibraryHeader.qml

@@ -26,17 +26,14 @@
 import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuickDesignerTheme 1.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Item {
     id: root
     width: 200
     height: 75
 
-    signal tabChanged(int index)
-    signal filterChanged(string filterText)
-    signal addModuleClicked()
-    signal addAssetClicked()
-
     function setTab(index)
     {
         tabBar.setCurrentIndex(index);
@@ -86,26 +83,30 @@ Item {
                             anchors.bottom: parent.bottom
                             anchors.rightMargin: 2
                             anchors.bottomMargin: 2
-                            width: img.width + 10
+                            width: 25
-                            height: img.height + 10
+                            height: 25
                             color: mouseArea.containsMouse ? "#353535" : "#262626"
 
                             ToolTip.delay: 500
                             ToolTip.text: modelData.addToolTip
                             ToolTip.visible: mouseArea.containsMouse
 
-                            Image {
+                            Label { // + sign
-                                id: img
+                                text: StudioTheme.Constants.plus
-                                source: tabBar.currentIndex === index ? "../images/add.png"
+                                font.family: StudioTheme.Constants.iconFont.family
-                                                                      : "../images/add_unselected.png"
+                                font.pixelSize: StudioTheme.Values.myIconFontSize
+                                verticalAlignment: Text.AlignVCenter
+                                horizontalAlignment: Text.AlignHCenter
                                 anchors.centerIn: parent
+                                color: tabBar.currentIndex === index  ? "#0094ce" : "#a8a8a8"
                             }
 
                             MouseArea {
                                 id: mouseArea
                                 anchors.fill: parent
                                 hoverEnabled: true
-                                onClicked: index == 0 ? addModuleClicked() : addAssetClicked()
+                                onClicked: index == 0 ? rootView.handleAddModule()
+                                                      : rootView.handleAddAsset()
                             }
                         }
 
@@ -117,7 +118,7 @@ Item {
                         }
                     }
 
-                    onClicked: tabChanged(index)
+                    onClicked: rootView.handleTabChanged(index);
                 }
             }
         }
@@ -138,16 +139,30 @@ Item {
             anchors.rightMargin: 5
             selectByMouse: true
 
-            onTextChanged: filterChanged(text)
+            onTextChanged: rootView.handleSearchfilterChanged(text)
 
-            Image { // clear text button
+            Rectangle { // x button
-                source: "../images/x.png"
+                width: 15
+                height: 15
                 anchors.right: parent.right
                 anchors.rightMargin: 5
                 anchors.verticalCenter: parent.verticalCenter
                 visible: searchFilterText.text !== ""
+                color: xMouseArea.containsMouse ? "#353535" : "transparent"
+
+                Label {
+                    text: StudioTheme.Constants.closeCross
+                    font.family: StudioTheme.Constants.iconFont.family
+                    font.pixelSize: StudioTheme.Values.myIconFontSize
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                    anchors.centerIn: parent
+                    color: "#dadada"
+                }
 
                 MouseArea {
+                    id: xMouseArea
+                    hoverEnabled: true
                     anchors.fill: parent
                     onClicked: searchFilterText.text = ""
                 }

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

@@ -29,17 +29,7 @@
         <file>images/asset_sound_192.png</file>
         <file>images/asset_sound_256.png</file>
         <file>images/asset_sound_384.png</file>
-        <file>images/tab_icon.png</file>
-        <file>images/tab_icon@2x.png</file>
         <file>images/x.png</file>
         <file>images/x@2x.png</file>
-        <file>images/add.png</file>
-        <file>images/add@2x.png</file>
-        <file>images/add_unselected.png</file>
-        <file>images/add_unselected@2x.png</file>
-        <file>images/down.png</file>
-        <file>images/down@2x.png</file>
-        <file>qml/libraryheader.qml</file>
-        <file>qml/addimport.qml</file>
     </qresource>
 </RCC>

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

@@ -141,27 +141,19 @@ ItemLibraryWidget::ItemLibraryWidget(AsynchronousImageCache &imageCache,
 
     // create header widget
     m_headerWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
-    m_headerWidget->setClearColor(Theme::getColor(Theme::Color::QmlDesigner_BackgroundColorDarkAlternate));
     Theme::setupTheme(m_headerWidget->engine());
-    m_headerWidget->setSource(QUrl("qrc:/ItemLibrary/qml/libraryheader.qml"));
+    m_headerWidget->engine()->addImportPath(propertyEditorResourcesPath() + "/imports");
-    QObject::connect(m_headerWidget->rootObject(), SIGNAL(tabChanged(int)), this,
+    m_headerWidget->setClearColor(Theme::getColor(Theme::Color::QmlDesigner_BackgroundColorDarkAlternate));
-                     SLOT(handleTabChanged(int)));
+    m_headerWidget->rootContext()->setContextProperty("rootView", QVariant::fromValue(this));
-    QObject::connect(m_headerWidget->rootObject(), SIGNAL(filterChanged(QString)), this,
-                     SLOT(handleFilterChanged(QString)));
-    QObject::connect(m_headerWidget->rootObject(), SIGNAL(addModuleClicked()), this,
-                     SLOT(handleAddModule()));
-    QObject::connect(m_headerWidget->rootObject(), SIGNAL(addAssetClicked()), this,
-                     SLOT(handleAddAsset()));
 
     // create add imports widget
     m_addImportWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
     m_addImportWidget->setClearColor(Theme::getColor(Theme::Color::QmlDesigner_BackgroundColorDarkAlternate));
     Theme::setupTheme(m_addImportWidget->engine());
-    m_addImportWidget->setSource(QUrl("qrc:/ItemLibrary/qml/addimport.qml"));
+    m_addImportWidget->rootContext()->setContextProperties({
-    m_addImportWidget->rootContext()->setContextProperty(
+        {"addImportModel", QVariant::fromValue(m_itemLibraryAddImportModel.data())},
-        "addImportModel", QVariant::fromValue(m_itemLibraryAddImportModel.data()));
+        {"rootView", QVariant::fromValue(this)},
-    QObject::connect(m_addImportWidget->rootObject(), SIGNAL(addImport(int)), this,
+    });
-                     SLOT(handleAddImport(int)));
 
     // set up Item Library view and model
     m_itemViewQuickWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
@@ -270,7 +262,7 @@ QList<QToolButton *> ItemLibraryWidget::createToolBarWidgets()
     return buttons;
 }
 
-void ItemLibraryWidget::handleFilterChanged(const QString &filterText)
+void ItemLibraryWidget::handleSearchfilterChanged(const QString &filterText)
 {
     m_filterText = filterText;
 
@@ -339,11 +331,20 @@ void ItemLibraryWidget::clearSearchFilter()
 
 void ItemLibraryWidget::reloadQmlSource()
 {
-    QString itemLibraryQmlFilePath = qmlSourcesPath() + QStringLiteral("/ItemsView.qml");
+    const QString libraryHeaderQmlPath = qmlSourcesPath() + "/LibraryHeader.qml";
+    QTC_ASSERT(QFileInfo::exists(libraryHeaderQmlPath), return);
+    m_headerWidget->engine()->clearComponentCache();
+    m_headerWidget->setSource(QUrl::fromLocalFile(libraryHeaderQmlPath));
 
-    QTC_ASSERT(QFileInfo::exists(itemLibraryQmlFilePath), return);
+    const QString addImportQmlPath = qmlSourcesPath() + "/AddImport.qml";
+    QTC_ASSERT(QFileInfo::exists(addImportQmlPath), return);
+    m_addImportWidget->engine()->clearComponentCache();
+    m_addImportWidget->setSource(QUrl::fromLocalFile(addImportQmlPath));
+
+    const QString itemLibraryQmlPath = qmlSourcesPath() + "/ItemsView.qml";
+    QTC_ASSERT(QFileInfo::exists(itemLibraryQmlPath), return);
     m_itemViewQuickWidget->engine()->clearComponentCache();
-    m_itemViewQuickWidget->setSource(QUrl::fromLocalFile(itemLibraryQmlFilePath));
+    m_itemViewQuickWidget->setSource(QUrl::fromLocalFile(itemLibraryQmlPath));
 }
 
 void ItemLibraryWidget::updateModel()

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

@@ -91,6 +91,11 @@ public:
     Q_INVOKABLE void startDragAndDrop(const QVariant &itemLibEntry, const QPointF &mousePos);
     Q_INVOKABLE void removeImport(const QString &importUrl);
     Q_INVOKABLE void addImportForItem(const QVariant &entry);
+    Q_INVOKABLE void handleTabChanged(int index);
+    Q_INVOKABLE void handleAddModule();
+    Q_INVOKABLE void handleAddAsset();
+    Q_INVOKABLE void handleSearchfilterChanged(const QString &filterText);
+    Q_INVOKABLE void handleAddImport(int index);
 
 signals:
     void itemActivated(const QString& itemName);
@@ -130,13 +135,6 @@ private:
     bool m_updateRetry = false;
     QString m_filterText;
     QPoint m_dragStartPoint;
-
-private slots:
-    void handleTabChanged(int index);
-    void handleFilterChanged(const QString &filterText);
-    void handleAddModule();
-    void handleAddAsset();
-    void handleAddImport(int index);
 };
 
-}
+} // namespace QmlDesigner