QmlDesigner: Add UX approved light icons for 3D editview

Light icons have a color overlay that indicates light color.

Change-Id: I5f6d80f63d0916dd7cb7b2d5345d586aacd550ef
Fixes: QDS-1209
Reviewed-by: Mahmoud Badri <mahmoud.badri@qt.io>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qml/qmlpuppet/mockfiles/CameraGizmo.qml

@@ -31,21 +31,26 @@ IconGizmo {
     id: cameraGizmo
 
     iconSource: "qrc:///qtquickplugin/mockfiles/images/editor_camera.png"
-    gizmoModel.geometry: cameraGeometry
     property alias geometryName: cameraGeometry.name // Name must be unique for each geometry
     property alias viewPortRect: cameraGeometry.viewPortRect
 
-    CameraGeometry {
-        id: cameraGeometry
-        camera: cameraGizmo.targetNode
-    }
-
-    gizmoModel.materials: [
+    Model {
+        id: gizmoModel
+        geometry: cameraGeometry
+        visible: cameraGizmo.visible
+        materials: [
             DefaultMaterial {
                 id: defaultMaterial
-            emissiveColor: cameraGizmo.targetNode === cameraGizmo.selectedNode ? "#FF0000" : "#555555"
+                emissiveColor: cameraGizmo.targetNode === cameraGizmo.selectedNode ? "#FF0000"
+                                                                                   : "#555555"
                 lighting: DefaultMaterial.NoLighting
                 cullingMode: Material.DisableCulling
             }
         ]
     }
+
+    CameraGeometry {
+        id: cameraGeometry
+        camera: cameraGizmo.targetNode
+    }
+}

share/qtcreator/qml/qmlpuppet/mockfiles/IconGizmo.qml

@@ -25,6 +25,7 @@
 
 import QtQuick 2.0
 import QtQuick3D 1.0
+import QtGraphicalEffects 1.12
 
 Node {
     id: iconGizmo
@@ -34,8 +35,8 @@ Node {
     property Node targetNode: null
     property Node selectedNode: null
 
-    property alias gizmoModel: gizmoModel
     property alias iconSource: iconImage.source
+    property alias overlayColor: colorOverlay.color
 
     signal positionCommit()
     signal clicked(Node node)
@@ -44,13 +45,9 @@ Node {
     rotation: targetNode ? targetNode.sceneRotation : Qt.vector3d(0, 0, 0)
     visible: targetNode ? targetNode.visible : false
 
-    Model {
-        id: gizmoModel
-        visible: iconGizmo.visible
-    }
     Overlay2D {
-        id: gizmoLabel
-        targetNode: gizmoModel
+        id: iconOverlay
+        targetNode: iconGizmo
         targetView: view3D
         offsetX: 0
         offsetY: 0
@@ -58,6 +55,7 @@ Node {
         parent: view3D
 
         Rectangle {
+            id: iconRect
             width: iconImage.width
             height: iconImage.height
             x: -width / 2
@@ -81,6 +79,15 @@ Node {
                                      ? Qt.LeftButton : Qt.NoButton
                 }
             }
+            ColorOverlay {
+                id: colorOverlay
+                anchors.fill: parent
+                cached: true
+                source: iconImage
+                color: transparent
+                opacity: 0.6
+            }
+
         }
     }
 }

share/qtcreator/qml/qmlpuppet/mockfiles/LightGizmo.qml

@@ -29,14 +29,11 @@ import QtQuick3D 1.0
 IconGizmo {
     id: lightGizmo
 
-    iconSource: "qrc:///qtquickplugin/mockfiles/images/light-pick-icon.png"
-    gizmoModel.source: "#Sphere"
-    gizmoModel.scale: Qt.vector3d(0.10, 0.10, 0.10)
-    gizmoModel.materials: [
-        DefaultMaterial {
-            id: defaultMaterial
-            emissiveColor: "yellow"
-            lighting: DefaultMaterial.NoLighting
-        }
-    ]
+    iconSource: targetNode instanceof DirectionalLight
+                ? "qrc:///qtquickplugin/mockfiles/images/directional_light_gradient.png"
+                : targetNode instanceof AreaLight
+                  ? "qrc:///qtquickplugin/mockfiles/images/area_light_gradient.png"
+                  : "qrc:///qtquickplugin/mockfiles/images/point_light_gradient.png"
+
+    overlayColor: targetNode.color
 }

share/qtcreator/qml/qmlpuppet/qmlpuppet.qrc

@@ -54,5 +54,11 @@
         <file>mockfiles/images/scale_active@2x.png</file>
         <file>mockfiles/images/scale_selected.png</file>
         <file>mockfiles/images/scale_selected@2x.png</file>
+        <file>mockfiles/images/directional_light_gradient.png</file>
+        <file>mockfiles/images/directional_light_gradient@2x.png</file>
+        <file>mockfiles/images/point_light_gradient.png</file>
+        <file>mockfiles/images/point_light_gradient@2x.png</file>
+        <file>mockfiles/images/area_light_gradient.png</file>
+        <file>mockfiles/images/area_light_gradient@2x.png</file>
     </qresource>
 </RCC>