[WIP] Use image provider to load icons

.travis.yml

@@ -8,7 +8,7 @@ install:
   - sudo apt-get -y install pep8 pyflakes python python-pip npm
   - sudo apt-get -y install qt54declarative
   - sudo apt-get -y install qt54quickcontrols qt54graphicaleffects
-  - sudo apt-get -y install qt54tools
+  - sudo apt-get -y install qt54tools qt54svg
 
 before_script:
   - git clone git://github.com/papyros/docmaker.git

demo/IconsDemo.qml

@@ -166,7 +166,7 @@ Item {
 
                 Repeater {
                     id: awesomeList
-                    model: Object.keys(awesomeIcon.icons)
+                    //model: Object.keys(awesomeIcon.icons)
                     delegate: Item {
                         width: section.state == "list" ? Units.dp(240) : icon.size
                         height: icon.size

modules/Material/Action.qml

@@ -44,7 +44,7 @@ Controls.Action {
        \sa iconName
        \sa Icon
      */
-    property string iconSource: "icon://" + iconName
+    property string iconSource: "image://material/" + iconName
 
     /*!
        The text displayed for the action.

modules/Material/ActionBar.qml

@@ -290,7 +290,7 @@ Item {
 
                 color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor,
                                                                   Theme.dark.iconColor)
-                size: iconSource == "icon://content/add" ? Units.dp(27) : Units.dp(24)
+                size: Units.dp(24)
 
                 anchors.verticalCenter: parent ? parent.verticalCenter : undefined
             }

modules/Material/Icon.qml

@@ -35,7 +35,7 @@ Item {
 
     /*!
        The name of the icon to display.
-       
+
        \sa source
     */
     property string name
@@ -48,41 +48,25 @@ Item {
 
        \sa name
       */
-    property string source: "icon://" + name
+    property string source: name ? "image://material/" + name : ""
 
-    property bool valid: source.indexOf("icon://awesome/") == 0 
+    property bool valid: source.indexOf("icon://awesome/") == 0
             ? awesomeIcon.valid : image.status == Image.Ready
 
     property url iconDirectory: Qt.resolvedUrl("icons")
 
     width: size
     height: size
 
-    property bool colorize: icon.source.indexOf("icon://") === 0 || icon.source.indexOf(".color.") === -1
+    property bool colorize: icon.source.indexOf("image://material/") === 0 || icon.source.indexOf(".color.") === -1
 
     Image {
         id: image
 
-        anchors.fill: parent
-        visible: source != "" && !colorize
-
-        source: {
-            if (icon.source.indexOf("icon://") == 0) {
-                var name = icon.source.substring(7)
-                var list = name.split("/");
-
-                if (name == "" || list[0] === "awesome")
-                    return "";
-                return Qt.resolvedUrl("icons/%1/%2.svg".arg(list[0]).arg(list[1]));
-            } else {
-                return icon.source
-            }
-        }
-
-        sourceSize {
-            width: size * Screen.devicePixelRatio
-            height: size * Screen.devicePixelRatio
-        }
+        visible: !colorize
+        sourceSize.width: parent.width
+        sourceSize.height: parent.height
+        source: icon.source
     }
 
     ColorOverlay {
@@ -94,27 +78,5 @@ Item {
         cached: true
         visible: image.source != "" && colorize
         opacity: icon.color.a
-    }  
-
-    AwesomeIcon {
-        id: awesomeIcon
-
-        anchors.centerIn: parent
-        size: icon.size * 0.9
-        visible: name != ""
-        color: icon.color
-
-        name: {
-            if (icon.source.indexOf("icon://") == 0) {
-                var name = icon.source.substring(7)
-                var list = name.split("/")
-
-                if (list[0] === "awesome") {
-                    return list[1]
-                }
-            }
-
-            return ""
-        }
     }
 }

modules/Material/IconButton.qml

@@ -30,7 +30,7 @@ Item {
 
     property Action action
     property string iconName
-    property string iconSource: action ? action.iconSource : "icon://" + iconName
+    property string iconSource: action ? action.iconSource : "image://material/" + iconName
     property bool hoverAnimation: action ? action.hoverAnimation : false
     property alias color: icon.color
     property alias size: icon.size

modules/Material/Tab.qml

@@ -43,6 +43,6 @@ Controls.Tab {
        \sa iconName
        \sa Icon
      */
-    property string iconSource: "icon://" + iconName
+    property string iconSource: iconName ? "image://material/" + iconName : ""
 }
 

modules/Material/TabBar.qml

@@ -153,14 +153,13 @@ Item {
                 Icon {
                     anchors.verticalCenter: parent.verticalCenter
 
-                    source: tabItem.tab.hasOwnProperty("iconSource")
-                            ? tabItem.tab.iconSource : tabItem.tab.hasOwnProperty("iconName")
-                            ? "icon://" + tabItem.tab.iconName : ""
+                    source: tabItem.tab.hasOwnProperty("iconSource") 
+                            ? tabItem.tab.iconSource : ""
                     color: tabItem.selected
                             ? darkBackground ? Theme.dark.iconColor : Theme.light.accentColor
                             : darkBackground ? Theme.dark.shade(tab.enabled ? 0.6 : 0.2) : Theme.light.shade(tab.enabled ? 0.6 : 0.2)
 
-                    visible: source != "" && source != "icon://"
+                    visible: source != ""
 
                     Behavior on color {
                         ColorAnimation { duration: 200 }

modules/Material/qmldir

@@ -1,4 +1,5 @@
 module Material
+plugin materialiconprovider
 Action 0.1 Action.qml
 ActionBar 0.1 ActionBar.qml
 ActionButton 0.1 ActionButton.qml

plugins/materialiconprovider.cpp

@@ -0,0 +1,78 @@
+/*
+ * QML Material - An application framework implementing Material Design.
+ * Copyright (C) 2015 Ricardo Vieira <[email protected]>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation, either version 2.1 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 Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+#include <qqmlextensionplugin.h>
+
+#include <qqmlengine.h>
+#include <qquickimageprovider.h>
+#include <QImage>
+#include <QPainter>
+#include <QSvgRenderer>
+
+#include <QDebug>
+
+class MaterialIconProvider : public QQuickImageProvider
+{
+public:
+    MaterialIconProvider()
+        : QQuickImageProvider(QQuickImageProvider::Image)
+    {
+    }
+
+    QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize)
+    {
+        QString iconPath = "/lib/qt/qml/Material/icons/" + id + ".svg";
+
+        QSvgRenderer renderer;
+        if (!renderer.load(iconPath))
+            qWarning() << "Unable to load image:" << iconPath;
+
+        QImage image(requestedSize.width() > 0 ? requestedSize.width() : renderer.defaultSize().width(),
+                     requestedSize.height() > 0 ? requestedSize.height() : renderer.defaultSize().height(),
+                     QImage::Format_ARGB32_Premultiplied);
+        image.fill(Qt::transparent);
+
+        if (size)
+            *size = image.size();
+
+        QPainter p(&image);
+        renderer.render(&p);
+
+        return image;
+    }
+};
+
+class ImageProviderExtensionPlugin : public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID "Material")
+public:
+    void registerTypes(const char *uri)
+    {
+        Q_UNUSED(uri);
+    }
+
+    void initializeEngine(QQmlEngine *engine, const char *uri)
+    {
+        Q_UNUSED(uri);
+        engine->addImageProvider("material", new MaterialIconProvider);
+    }
+
+};
+
+#include "materialiconprovider.moc"

plugins/plugins.pro

@@ -0,0 +1,11 @@
+TEMPLATE = lib
+CONFIG += plugin
+QT += qml quick svg
+
+DESTDIR = ../modules/Material
+TARGET  = materialiconprovider
+
+SOURCES += materialiconprovider.cpp
+
+target.path = $$[QT_INSTALL_QML]/Material
+INSTALLS = target

qml-material.pro

@@ -1,4 +1,4 @@
 TEMPLATE = subdirs
-SUBDIRS = modules/Material modules/Material/Extras modules/QtQuick/Controls/Styles/Material tests
+SUBDIRS = modules/Material modules/Material/Extras modules/QtQuick/Controls/Styles/Material plugins tests
 
 OTHER_FILES = README.md CHANGELOG.md