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>

10 files changed, 42 insertions, 27 deletions

diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/CameraGizmo.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/CameraGizmo.qml
index e158128a5f..3b6badbb28 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/CameraGizmo.qml
+++ b/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
 
+    Model {
+        id: gizmoModel
+        geometry: cameraGeometry
+        visible: cameraGizmo.visible
+        materials: [
+            DefaultMaterial {
+                id: defaultMaterial
+                emissiveColor: cameraGizmo.targetNode === cameraGizmo.selectedNode ? "#FF0000"
+                                                                                   : "#555555"
+                lighting: DefaultMaterial.NoLighting
+                cullingMode: Material.DisableCulling
+            }
+        ]
+    }
+
     CameraGeometry {
         id: cameraGeometry
         camera: cameraGizmo.targetNode
     }
-
-    gizmoModel.materials: [
-        DefaultMaterial {
-            id: defaultMaterial
-            emissiveColor: cameraGizmo.targetNode === cameraGizmo.selectedNode ? "#FF0000" : "#555555"
-            lighting: DefaultMaterial.NoLighting
-            cullingMode: Material.DisableCulling
-        }
-    ]
 }
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/IconGizmo.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/IconGizmo.qml
index f41fbad0be..ea6c17a1c3 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/IconGizmo.qml
+++ b/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
+            }
+
         }
     }
 }
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/LightGizmo.qml b/share/qtcreator/qml/qmlpuppet/mockfiles/LightGizmo.qml
index 888b2fce5c..de6deefb94 100644
--- a/share/qtcreator/qml/qmlpuppet/mockfiles/LightGizmo.qml
+++ b/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
 }
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/area_light_gradient.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/area_light_gradient.png
new file mode 100644
index 0000000000..bd6404a36c
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/area_light_gradient.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/area_light_gradient@2x.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/area_light_gradient@2x.png
new file mode 100644
index 0000000000..463f3ac481
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/area_light_gradient@2x.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/directional_light_gradient.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/directional_light_gradient.png
new file mode 100644
index 0000000000..f3c013e157
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/directional_light_gradient.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/directional_light_gradient@2x.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/directional_light_gradient@2x.png
new file mode 100644
index 0000000000..87d60515f5
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/directional_light_gradient@2x.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/point_light_gradient.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/point_light_gradient.png
new file mode 100644
index 0000000000..5136b39fc2
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/point_light_gradient.png
diff --git a/share/qtcreator/qml/qmlpuppet/mockfiles/images/point_light_gradient@2x.png b/share/qtcreator/qml/qmlpuppet/mockfiles/images/point_light_gradient@2x.png
new file mode 100644
index 0000000000..ccbfb1c846
--- /dev/null
+++ b/share/qtcreator/qml/qmlpuppet/mockfiles/images/point_light_gradient@2x.png
diff --git a/share/qtcreator/qml/qmlpuppet/qmlpuppet.qrc b/share/qtcreator/qml/qmlpuppet/qmlpuppet.qrc
index a91590b59e..fa07a2ff11 100644
--- a/share/qtcreator/qml/qmlpuppet/qmlpuppet.qrc
+++ b/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>