From 2b3090c886d13230cb7cffc0ebea5c5a1ced5cc1 Mon Sep 17 00:00:00 2001 From: Ricardo Vieira Date: Tue, 12 Jan 2016 01:21:42 +0000 Subject: [PATCH 1/3] [WIP] Use image provider to load icons Not implemented AwesomeIcons Some improvements can be made in properties like "name" and "source" to make the code even simpler --- demo/IconsDemo.qml | 2 +- modules/Material/Action.qml | 2 +- modules/Material/ActionBar.qml | 2 +- modules/Material/Icon.qml | 47 ++--------------------- modules/Material/IconButton.qml | 2 +- modules/Material/Tab.qml | 2 +- modules/Material/TabBar.qml | 7 ++-- modules/Material/qmldir | 1 + plugins/materialiconprovider.cpp | 65 ++++++++++++++++++++++++++++++++ plugins/plugins.pro | 10 +++++ qml-material.pro | 2 +- 11 files changed, 89 insertions(+), 53 deletions(-) create mode 100644 plugins/materialiconprovider.cpp create mode 100644 plugins/plugins.pro diff --git a/demo/IconsDemo.qml b/demo/IconsDemo.qml index 7ee9681c..af6d1f6d 100644 --- a/demo/IconsDemo.qml +++ b/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 diff --git a/modules/Material/Action.qml b/modules/Material/Action.qml index 1450da51..100ad442 100644 --- a/modules/Material/Action.qml +++ b/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. diff --git a/modules/Material/ActionBar.qml b/modules/Material/ActionBar.qml index 21e87291..9aca0f46 100644 --- a/modules/Material/ActionBar.qml +++ b/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 } diff --git a/modules/Material/Icon.qml b/modules/Material/Icon.qml index c39ae295..69d1ddf1 100644 --- a/modules/Material/Icon.qml +++ b/modules/Material/Icon.qml @@ -48,7 +48,7 @@ Item { \sa name */ - property string source: "icon://" + name + property string source: name ? "image://material/" + name : "" property bool valid: source.indexOf("icon://awesome/") == 0 ? awesomeIcon.valid : image.status == Image.Ready @@ -58,31 +58,14 @@ Item { 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 - } - } + visible: !colorize - sourceSize { - width: size * Screen.devicePixelRatio - height: size * Screen.devicePixelRatio - } + source: icon.source } ColorOverlay { @@ -95,26 +78,4 @@ Item { 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 "" - } - } } diff --git a/modules/Material/IconButton.qml b/modules/Material/IconButton.qml index b64ded35..57f47bd8 100644 --- a/modules/Material/IconButton.qml +++ b/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 diff --git a/modules/Material/Tab.qml b/modules/Material/Tab.qml index 271a51fb..24d19ee6 100644 --- a/modules/Material/Tab.qml +++ b/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 : "" } diff --git a/modules/Material/TabBar.qml b/modules/Material/TabBar.qml index 9eb43175..3b02201c 100644 --- a/modules/Material/TabBar.qml +++ b/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 } diff --git a/modules/Material/qmldir b/modules/Material/qmldir index 399da227..ad93b3ff 100644 --- a/modules/Material/qmldir +++ b/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 diff --git a/plugins/materialiconprovider.cpp b/plugins/materialiconprovider.cpp new file mode 100644 index 00000000..02c4c802 --- /dev/null +++ b/plugins/materialiconprovider.cpp @@ -0,0 +1,65 @@ +/* + * QML Material - An application framework implementing Material Design. + * Copyright (C) 2015 Ricardo Vieira + * + * 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 . + */ + +#include + +#include +#include +#include +#include + +class MaterialIconProvider : public QQuickImageProvider +{ +public: + MaterialIconProvider() + : QQuickImageProvider(QQuickImageProvider::Pixmap) + { + } + + QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize) + { + int width = 100; + int height = 50; + QImage icon = QImage("/lib/qt/qml/Material/icons/" + id + ".svg"); + + if (size) + *size = QSize(width, height); + + return QPixmap::fromImage(icon); + } +}; + +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" diff --git a/plugins/plugins.pro b/plugins/plugins.pro new file mode 100644 index 00000000..fb94cbfc --- /dev/null +++ b/plugins/plugins.pro @@ -0,0 +1,10 @@ +TEMPLATE = lib +CONFIG += plugin +QT += qml quick + +TARGET = materialiconprovider + +SOURCES += materialiconprovider.cpp + +target.path = $$[QT_INSTALL_QML]/Material +INSTALLS = target diff --git a/qml-material.pro b/qml-material.pro index 90676b85..c09483d0 100644 --- a/qml-material.pro +++ b/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 From 2009a58c02eee86aadddfc6b1332d002fffc8a8e Mon Sep 17 00:00:00 2001 From: Ricardo Vieira Date: Fri, 15 Jan 2016 13:20:29 +0000 Subject: [PATCH 2/3] Properly scale images --- modules/Material/Icon.qml | 9 +++++---- plugins/materialiconprovider.cpp | 27 ++++++++++++++++++++------- plugins/plugins.pro | 2 +- 3 files changed, 26 insertions(+), 12 deletions(-) diff --git a/modules/Material/Icon.qml b/modules/Material/Icon.qml index 69d1ddf1..b5ba7c4a 100644 --- a/modules/Material/Icon.qml +++ b/modules/Material/Icon.qml @@ -35,7 +35,7 @@ Item { /*! The name of the icon to display. - + \sa source */ property string name @@ -50,7 +50,7 @@ Item { */ 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") @@ -64,7 +64,8 @@ Item { id: image visible: !colorize - + sourceSize.width: parent.width + sourceSize.height: parent.height source: icon.source } @@ -77,5 +78,5 @@ Item { cached: true visible: image.source != "" && colorize opacity: icon.color.a - } + } } diff --git a/plugins/materialiconprovider.cpp b/plugins/materialiconprovider.cpp index 02c4c802..ea89f8a3 100644 --- a/plugins/materialiconprovider.cpp +++ b/plugins/materialiconprovider.cpp @@ -22,25 +22,38 @@ #include #include #include +#include + +#include class MaterialIconProvider : public QQuickImageProvider { public: MaterialIconProvider() - : QQuickImageProvider(QQuickImageProvider::Pixmap) + : QQuickImageProvider(QQuickImageProvider::Image) { } - QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize) + QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize) { - int width = 100; - int height = 50; - QImage icon = QImage("/lib/qt/qml/Material/icons/" + id + ".svg"); + 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 = QSize(width, height); + *size = image.size(); + + QPainter p(&image); + renderer.render(&p); - return QPixmap::fromImage(icon); + return image; } }; diff --git a/plugins/plugins.pro b/plugins/plugins.pro index fb94cbfc..a11468e7 100644 --- a/plugins/plugins.pro +++ b/plugins/plugins.pro @@ -1,6 +1,6 @@ TEMPLATE = lib CONFIG += plugin -QT += qml quick +QT += qml quick svg TARGET = materialiconprovider From 35f1bc0dec0bf37e5ddfc2887d6408065c186152 Mon Sep 17 00:00:00 2001 From: Ricardo Vieira Date: Sat, 23 Jan 2016 18:49:02 +0000 Subject: [PATCH 3/3] Fix travis build Move plugin to modules/Material after build --- .travis.yml | 2 +- plugins/plugins.pro | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.travis.yml b/.travis.yml index 9f795935..e9570d49 100644 --- a/.travis.yml +++ b/.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 diff --git a/plugins/plugins.pro b/plugins/plugins.pro index a11468e7..d2dc5e43 100644 --- a/plugins/plugins.pro +++ b/plugins/plugins.pro @@ -2,6 +2,7 @@ TEMPLATE = lib CONFIG += plugin QT += qml quick svg +DESTDIR = ../modules/Material TARGET = materialiconprovider SOURCES += materialiconprovider.cpp