QmlDesigner: Adding icons for property editor to icon provider

Change-Id: I0869138783230fe3ff54e59e4d9094d23f5d42cc
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CustomComboBoxStyle.qml

@@ -54,7 +54,7 @@ ComboBoxStyle {
         }
 
         Rectangle {
-            color: "#333"
+            color: creatorTheme.IconsBaseColor
             width: 1
             anchors.right: imageItem.left
             anchors.topMargin: 4
@@ -66,11 +66,13 @@ ComboBoxStyle {
 
         Image {
             id: imageItem
-            source: "images/down-arrow.png"
+            width: 8
+            height: 4
+            source: "image://icons/down-arrow"
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
-            anchors.rightMargin: 10
+            anchors.rightMargin: 8
-            opacity: control.enabled ? 0.7 : 0.5
+            opacity: control.enabled ? 1 : 0.5
         }
     }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/CustomSpinBoxStyle.qml

@@ -43,7 +43,9 @@ SpinBoxStyle {
         implicitHeight: parent.height/2
         opacity: styleData.upEnabled ? styleData.upPressed ? 0.5 : 1 : 0.5
         Image {
-            source: "images/up-arrow.png"
+            width: 8
+            height: 4
+            source: "image://icons/up-arrow"
             x: 1
             y: 5
         }
@@ -54,7 +56,9 @@ SpinBoxStyle {
         implicitHeight: parent.height/2
         opacity: styleData.downEnabled ? styleData.downPressed ? 0.5 : 1 : 0.5
         Image {
-            source: "images/down-arrow.png"
+            width: 8
+            height: 4
+            source: "image://icons/down-arrow"
             x: 1
             y: 2.5 // Hack! Spinbox sets an non-int offset, somewhere
         }

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ExtendedFunctionButton.qml

@@ -37,26 +37,25 @@ Item {
 
     property variant backendValue
 
-    property string icon:  "images/placeholder.png"
+    property string icon: "image://icons/placeholder"
-    property string hoverIcon:  "images/submenu.png";
+    property string hoverIcon: "image://icons/submenu"
 
     property bool active: true
 
 
     function setIcon() {
         if (backendValue == null) {
-            extendedFunctionButton.icon = "images/placeholder.png"
+            extendedFunctionButton.icon = "image://icons/placeholder"
         } else if (backendValue.isBound ) {
             if (backendValue.isTranslated) { //translations are a special case
-                extendedFunctionButton.icon = "images/placeholder.png"
+                extendedFunctionButton.icon = "image://icons/placeholder"
             } else {
-                extendedFunctionButton.icon = "images/expression.png"
+                extendedFunctionButton.icon = "image://icons/expression"
             }
         } else {
             if (backendValue.complexNode != null && backendValue.complexNode.exists) {
-                //extendedFunctionButton.icon = "images/behaivour.png"
             } else {
-                extendedFunctionButton.icon = "images/placeholder.png"
+                extendedFunctionButton.icon = "image://icons/placeholder"
             }
         }
     }
@@ -86,6 +85,8 @@ Item {
     }
 
     Image {
+        width: 14
+        height: 14
         source: extendedFunctionButton.icon
         anchors.centerIn: parent
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/Section.qml

@@ -55,12 +55,15 @@ Item {
 
         Image {
             id: arrow
-            source: "images/down-arrow.png"
+            width: 8
+            height: 4
+            source: "image://icons/down-arrow"
             anchors.left: parent.left
             anchors.leftMargin: 4
             anchors.verticalCenter: parent.verticalCenter
             Behavior on rotation {
                 NumberAnimation {
+                    easing.type: Easing.OutCubic
                     duration: animationDuration
                 }
             }

src/plugins/qmldesigner/components/componentcore/qmldesignericonprovider.cpp

@@ -26,6 +26,9 @@
 #include "qmldesignericonprovider.h"
 
 #include <coreplugin/coreicons.h>
+#include <coreplugin/icore.h>
+
+#include <QDebug>
 
 namespace QmlDesigner {
 
@@ -35,10 +38,30 @@ QmlDesignerIconProvider::QmlDesignerIconProvider()
 
 }
 
+static QString iconPath()
+{
+    return Core::ICore::resourcePath() + QLatin1String("/qmldesigner/propertyEditorQmlSources/HelperWidgets/images/");
+}
+
 QPixmap QmlDesignerIconProvider::requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
 {
     Q_UNUSED(requestedSize)
 
+    static Utils::Icon UP_ARROW({
+            { iconPath() + QLatin1String("up-arrow.png"), Utils::Theme::IconsBaseColor}});
+
+    static Utils::Icon DOWN_ARROW({
+            { iconPath() + QLatin1String("down-arrow.png"), Utils::Theme::IconsBaseColor}});
+
+    static Utils::Icon PLACEHOLDER({
+            { iconPath() + QLatin1String("placeholder.png"), Utils::Theme::IconsBaseColor}});
+
+    static Utils::Icon EXPRESSION({
+            { iconPath() + QLatin1String("expression.png"), Utils::Theme::IconsBaseColor}});
+
+    static Utils::Icon SUBMENU({
+            { iconPath() + QLatin1String("submenu.png"), Utils::Theme::IconsBaseColor}});
+
     QPixmap result;
 
     if (id == "close")
@@ -46,6 +69,20 @@ QPixmap QmlDesignerIconProvider::requestPixmap(const QString &id, QSize *size, c
 
     else if (id == "plus")
         result = Core::Icons::PLUS.pixmap();
+    else if (id == "expression")
+        result = EXPRESSION.pixmap();
+    else if (id == "placeholder")
+        result = PLACEHOLDER.pixmap();
+    else if (id == "expression")
+        result = EXPRESSION.pixmap();
+    else if (id == "submenu")
+        result = SUBMENU.pixmap();
+    else if (id == "up-arrow")
+        result = UP_ARROW.pixmap();
+    else if (id == "down-arrow")
+        result = DOWN_ARROW.pixmap();
+    else
+        qWarning() << Q_FUNC_INFO << "Image not found.";
 
     if (size)
         *size = result.size();

src/tools/icons/qtcreatoricons.svg

@@ -1482,18 +1482,25 @@
     <rect
        style="opacity:1;fill:#000000;fill-opacity:1;stroke:none;stroke-opacity:1"
        id="rect6617"
-       width="232"
+       width="173"
        height="16"
-       x="484"
+       x="543"
        y="584" />
     <g
        id="share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/images/down-arrow">
+      <rect
+         style="fill:#ffffff"
+         id="rect5094"
+         width="8"
+         height="4"
+         x="485"
+         y="585" />
       <path
          sodipodi:nodetypes="cccc"
          inkscape:connector-curvature="0"
          id="path6627"
          d="m 485,585 8,0 -4,4 -4,-4"
-         style="fill:#dbdbdb;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
+         style="fill:#000000;fill-opacity:1.0;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
     </g>
     <use
        x="0"
@@ -1505,49 +1512,56 @@
        height="100%" />
     <g
        id="share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/images/placeholder">
-      <circle
-         r="2"
-         cy="591.5"
-         cx="507.5"
-         id="path6659"
-         style="opacity:1;fill:none;fill-opacity:1;stroke:#dbdbdb;stroke-opacity:1" />
       <rect
          y="584"
          x="501"
          height="14"
          width="14"
          id="rect6661"
-         style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-opacity:1" />
+         style="fill:#ffffff" />
+      <circle
+         r="2"
+         cy="591.5"
+         cx="507.5"
+         id="path6659"
+         style="fill:none;stroke:#000000" />
     </g>
     <g
        id="share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/images/submenu">
-      <path
-         style="fill:#dbdbdb;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         d="m 521.5,587 c -2.48528,0 -4.5,2.01472 -4.5,4.5 0,2.48528 2.01472,4.5 4.5,4.5 2.48528,0 4.5,-2.01472 4.5,-4.5 0,-2.48528 -2.01472,-4.5 -4.5,-4.5 z m -4,3 8,0 -4,4 z"
-         id="path6673"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="ssssscccc" />
       <rect
          y="584"
          x="515"
          height="14"
          width="14"
          id="rect6685"
-         style="opacity:0.647;fill:none;fill-opacity:1;stroke:none;stroke-opacity:1" />
+         style="fill:#ffffff" />
+      <path
+         style="fill:#000000"
+         d="m 521.5,587 c -2.48528,0 -4.5,2.01472 -4.5,4.5 0,2.48528 2.01472,4.5 4.5,4.5 2.48528,0 4.5,-2.01472 4.5,-4.5 0,-2.48528 -2.01472,-4.5 -4.5,-4.5 z m -4,3 8,0 -4,4 z"
+         id="path6673"
+         inkscape:connector-curvature="0"
+         sodipodi:nodetypes="ssssscccc" />
     </g>
     <g
        id="share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/images/expression">
+      <rect
+         y="584"
+         x="529"
+         height="14"
+         width="14"
+         id="rect6738"
+         style="fill:#ffffff" />
       <g
          transform="matrix(0.98173989,-0.19022827,0.19022827,0.98173989,-103.24469,112.42841)"
          id="g6727">
         <circle
-           style="opacity:1;fill:none;fill-opacity:1;stroke:#dbdbdb;stroke-opacity:1"
+           style="fill:none;stroke:#000000"
            id="path6713"
            cx="534"
            cy="594"
            r="2.5" />
         <rect
-           style="opacity:1;fill:#dbdbdb;fill-opacity:1;stroke:none;stroke-opacity:1"
+           style="fill:#000000"
            id="rect6715"
            width="1"
            height="1.5"
@@ -1612,13 +1626,6 @@
          xlink:href="#g6727"
          y="0"
          x="0" />
-      <rect
-         y="584"
-         x="529"
-         height="14"
-         width="14"
-         id="rect6738"
-         style="opacity:1;fill:none;fill-opacity:1;stroke:none;stroke-opacity:1" />
     </g>
     <g
        id="src/libs/qmleditorwidgets/images/checkbox_unchecked">