ColorizedImage: Change the way to colorize

ColorOverlay would be used as a sibling of the image to fix an issue
which the effect was not updated in the 2D view.
It led to changing base QML type from Image to Item, and some properties
in the Properties panel were not supported in ColorizedImage type, so
the unsupported fields in the panel would be removed.

Task-number: QDS-11902
Change-Id: I80770358ba6ae44d79c29917cbba68fe462fcfa4
Reviewed-by: Yasser Grimes <yasser.grimes@qt.io>
Reviewed-by: Gatis Paeglis <gatis.paeglis@qt.io>
Reviewed-by: Aleksei German <aleksei.german@qt.io>

2 files changed, 20 insertions, 156 deletions

diff --git a/src/imports/compat/Extras/ColorizedImage.qml b/src/imports/compat/Extras/ColorizedImage.qml
index d440b39..27235dd 100644
--- a/src/imports/compat/Extras/ColorizedImage.qml
+++ b/src/imports/compat/Extras/ColorizedImage.qml
@@ -31,15 +31,28 @@ import QtQuick 2.12
 import Qt5Compat.GraphicalEffects
 //! [ColorizedImage compatibility]
 //  Displays a colorized image.
-Image {
+Item {
     id: colorizedRoot
-    property var color: "transparent"
+    implicitHeight: img.implicitHeight
+    implicitWidth: img.implicitWidth
 
-    layer.enabled: true
-    layer.effect: ColorOverlay {
-        anchors.fill: colorizedRoot
-        source: colorizedRoot
-        color: colorizedRoot.color
+    property alias color: colorize.color
+    property alias source: img.source
+    property alias fillMode: img.fillMode
+    property alias horizontalAlignment: img.horizontalAlignment
+    property alias verticalAlignment: img.verticalAlignment
+
+    Image {
+        id: img
+        anchors.fill: parent
+        visible: false
+    }
+
+    ColorOverlay {
+        id: colorize
+        anchors.fill: img
+        color: "transparent"
+        source: img
     }
 }
 //! [ColorizedImage compatibility]
diff --git a/src/imports/compat/Extras/designer/ColorizedImageSpecifics.qml b/src/imports/compat/Extras/designer/ColorizedImageSpecifics.qml
index c0e9ce5..bfb28dc 100644
--- a/src/imports/compat/Extras/designer/ColorizedImageSpecifics.qml
+++ b/src/imports/compat/Extras/designer/ColorizedImageSpecifics.qml
@@ -71,47 +71,6 @@ Section {
             ExpandingSpacer {}
         }
 
-        PropertyLabel {
-            text: qsTr("Source size")
-            blockedByTemplate: !backendValues.sourceSize.isAvailable
-        }
-
-        SecondColumnLayout {
-            SpinBox {
-                backendValue: backendValues.sourceSize_width
-                minimumValue: 0
-                maximumValue: 8192
-                decimals: 0
-                enabled: backendValue.isAvailable
-            }
-
-            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-
-            ControlLabel {
-                //: The width of the object
-                text: qsTr("W", "width")
-                enabled: backendValues.sourceSize_width.isAvailable
-            }
-
-            SpinBox {
-                backendValue: backendValues.sourceSize_height
-                minimumValue: 0
-                maximumValue: 8192
-                decimals: 0
-                enabled: backendValue.isAvailable
-            }
-
-            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-
-            ControlLabel {
-                //: The height of the object
-                text: qsTr("H", "height")
-                enabled: backendValues.sourceSize_height.isAvailable
-            }
-
-            ExpandingSpacer {}
-        }
-
         PropertyLabel { text: qsTr("Alignment H") }
 
         SecondColumnLayout {
@@ -141,114 +100,6 @@ Section {
 
             ExpandingSpacer {}
         }
-
-        PropertyLabel {
-            text: qsTr("Asynchronous")
-            tooltip: qsTr("Loads images on the local filesystem asynchronously in a separate thread.")
-            blockedByTemplate: !backendValues.asynchronous.isAvailable
-        }
-
-        SecondColumnLayout {
-            CheckBox {
-                enabled: backendValues.asynchronous.isAvailable
-                text: backendValues.asynchronous.valueToString
-                backendValue: backendValues.asynchronous
-                implicitWidth: StudioTheme.Values.twoControlColumnWidth
-                               + StudioTheme.Values.actionIndicatorWidth
-            }
-
-            ExpandingSpacer {}
-        }
-
-        PropertyLabel {
-            text: qsTr("Auto transform")
-            tooltip: qsTr("Automatically applies image transformation metadata such as EXIF orientation.")
-            blockedByTemplate: !backendValues.autoTransform.isAvailable
-        }
-
-        SecondColumnLayout {
-            CheckBox {
-                enabled: backendValues.autoTransform.isAvailable
-                text: backendValues.autoTransform.valueToString
-                backendValue: backendValues.autoTransform
-                implicitWidth: StudioTheme.Values.twoControlColumnWidth
-                               + StudioTheme.Values.actionIndicatorWidth
-            }
-
-            ExpandingSpacer {}
-        }
-
-        PropertyLabel {
-            text: qsTr("Cache")
-            tooltip: qsTr("Caches the image.")
-            blockedByTemplate: !backendValues.cache.isAvailable
-        }
-
-        SecondColumnLayout {
-            CheckBox {
-                enabled: backendValues.cache.isAvailable
-                text: backendValues.cache.valueToString
-                backendValue: backendValues.cache
-                implicitWidth: StudioTheme.Values.twoControlColumnWidth
-                               + StudioTheme.Values.actionIndicatorWidth
-            }
-
-            ExpandingSpacer {}
-        }
-
-        PropertyLabel {
-            text: qsTr("Mipmap")
-            tooltip: qsTr("Uses mipmap filtering when the image is scaled or transformed.")
-            blockedByTemplate: !backendValues.mipmap.isAvailable
-        }
-
-        SecondColumnLayout {
-            CheckBox {
-                enabled: backendValues.mipmap.isAvailable
-                text: backendValues.mipmap.valueToString
-                backendValue: backendValues.mipmap
-                implicitWidth: StudioTheme.Values.twoControlColumnWidth
-                               + StudioTheme.Values.actionIndicatorWidth
-            }
-
-            ExpandingSpacer {}
-        }
-
-        PropertyLabel {
-            text: qsTr("Mirror")
-            tooltip: qsTr("Inverts the image horizontally.")
-            blockedByTemplate: !backendValues.mirror.isAvailable
-        }
-
-        SecondColumnLayout {
-            CheckBox {
-                enabled: backendValues.mirror.isAvailable
-                text: backendValues.mirror.valueToString
-                backendValue: backendValues.mirror
-                implicitWidth: StudioTheme.Values.twoControlColumnWidth
-                               + StudioTheme.Values.actionIndicatorWidth
-            }
-
-            ExpandingSpacer {}
-        }
-
-        PropertyLabel {
-            text: qsTr("Smooth")
-            tooltip: qsTr("Smoothly filters the image when it is scaled or transformed.")
-            blockedByTemplate: !backendValues.smooth.isAvailable
-        }
-
-        SecondColumnLayout {
-            CheckBox {
-                enabled: backendValues.smooth.isAvailable
-                text: backendValues.smooth.valueToString
-                backendValue: backendValues.smooth
-                implicitWidth: StudioTheme.Values.twoControlColumnWidth
-                               + StudioTheme.Values.actionIndicatorWidth
-            }
-
-            ExpandingSpacer {}
-        }
     }
 }
 //! [ColorizedImage compatibility]