PropertyEditor: Make use of label blocked states

* Make use of blocked states in PropertyLabels, ControlsLabels and
  MultiIconLabels
* Update Ultralite specifics

Task-number: QDS-4692
Change-Id: Id6383f0327351069ab1dd530f5eb94f7267c98fe
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

6 files changed, 299 insertions, 360 deletions

diff --git a/src/imports/compatibility/QtQuickUltralite/Extras/designer/ColorizedImageSpecifics.qml b/src/imports/compatibility/QtQuickUltralite/Extras/designer/ColorizedImageSpecifics.qml
index 9905ccb..7110ed3 100644
--- a/src/imports/compatibility/QtQuickUltralite/Extras/designer/ColorizedImageSpecifics.qml
+++ b/src/imports/compatibility/QtQuickUltralite/Extras/designer/ColorizedImageSpecifics.qml
@@ -28,236 +28,226 @@
 ****************************************************************************/
 
 import QtQuick 2.15
-
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 //! [ColorizedImage compatibility]
-Column {
+Section {
     anchors.left: parent.left
     anchors.right: parent.right
+    caption: qsTr("Image")
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Image Color")
+    SectionLayout {
+        PropertyLabel { text: qsTr("Image color") }
 
         ColorEditor {
-            caption: qsTr("Image Color")
             backendValue: backendValues.color
             supportGradient: false
         }
-    }
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Image")
+        PropertyLabel { text: qsTr("Source") }
 
-        SectionLayout {
-            Label {
-                text: qsTr("Source")
+        SecondColumnLayout {
+            UrlChooser {
+                backendValue: backendValues.source
             }
 
-            SecondColumnLayout {
-                UrlChooser {
-                    Layout.fillWidth: true
-                    backendValue: backendValues.source
-                }
+            ExpandingSpacer {}
+        }
 
-                ExpandingSpacer {
-                }
-            }
+        PropertyLabel { text: qsTr("Fill mode") }
 
-            Label {
-                text: qsTr("Fill mode")
+        SecondColumnLayout {
+            ComboBox {
+                scope: "Image"
+                model: ["Stretch", "PreserveAspectFit", "PreserveAspectCrop", "Tile", "TileVertically", "TileHorizontally", "Pad"]
+                backendValue: backendValues.fillMode
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
             }
 
-            SecondColumnLayout {
-                ComboBox {
-                    scope: "Image"
-                    model: ["Stretch", "PreserveAspectFit", "PreserveAspectCrop", "Tile", "TileVertically", "TileHorizontally", "Pad"]
-                    backendValue: backendValues.fillMode
-                    implicitWidth: 180
-                    Layout.fillWidth: true
-                }
-
-                ExpandingSpacer {
-                }
-            }
+            ExpandingSpacer {}
+        }
 
-            Label {
-                text: qsTr("Source size")
-                disabledState: !backendValues.sourceSize.isAvailable
-            }
+        PropertyLabel {
+            text: qsTr("Source size")
+            blockedByTemplate: !backendValues.sourceSize.isAvailable
+        }
 
-            SecondColumnLayout {
-                Label {
-                    text: "W"
-                    width: 12
-                    disabledStateSoft: !backendValues.sourceSize_width.isAvailable
-                }
-
-                SpinBox {
-                    backendValue: backendValues.sourceSize_width
-                    minimumValue: 0
-                    maximumValue: 8192
-                    decimals: 0
-                    enabled: backendValue.isAvailable
-                }
-
-                Item {
-                    width: 4
-                    height: 4
-                }
-
-                Label {
-                    text: "H"
-                    width: 12
-                    disabledStateSoft: !backendValues.sourceSize_height.isAvailable
-                }
-
-                SpinBox {
-                    backendValue: backendValues.sourceSize_height
-                    minimumValue: 0
-                    maximumValue: 8192
-                    decimals: 0
-                    enabled: backendValue.isAvailable
-                }
-
-                ExpandingSpacer {
-                }
+        SecondColumnLayout {
+            SpinBox {
+                backendValue: backendValues.sourceSize_width
+                minimumValue: 0
+                maximumValue: 8192
+                decimals: 0
+                enabled: backendValue.isAvailable
             }
 
-            Label {
-                text: qsTr("Horizontal alignment")
-            }
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
 
-            SecondColumnLayout {
-                ComboBox {
-                    scope: "Image"
-                    model: ["AlignLeft", "AlignRight", "AlignHCenter"]
-                    backendValue: backendValues.horizontalAlignment
-                    implicitWidth: 180
-                    Layout.fillWidth: true
-                }
-
-                ExpandingSpacer {
-                }
+            ControlLabel {
+                //: The width of the object
+                text: qsTr("W", "width")
+                enabled: backendValues.sourceSize_width.isAvailable
             }
 
-            Label {
-                text: qsTr("Vertical alignment")
+            SpinBox {
+                backendValue: backendValues.sourceSize_height
+                minimumValue: 0
+                maximumValue: 8192
+                decimals: 0
+                enabled: backendValue.isAvailable
             }
 
-            SecondColumnLayout {
-                ComboBox {
-                    scope: "Image"
-                    model: ["AlignTop", "AlignBottom", "AlignVCenter"]
-                    backendValue: backendValues.verticalAlignment
-                    implicitWidth: 180
-                    Layout.fillWidth: true
-                }
-
-                ExpandingSpacer {
-                }
-            }
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
 
-            Label {
-                text: qsTr("Asynchronous")
-                tooltip: qsTr("Specifies that images on the local filesystem should be loaded asynchronously in a separate thread.")
-                disabledState: !backendValues.asynchronous.isAvailable
+            ControlLabel {
+                //: The height of the object
+                text: qsTr("H", "height")
+                enabled: backendValues.sourceSize_height.isAvailable
             }
 
-            SecondColumnLayout {
-                CheckBox {
-                    enabled: backendValues.asynchronous.isAvailable
-                    text: backendValues.asynchronous.valueToString
-                    backendValue: backendValues.asynchronous
-                    implicitWidth: 180
-                }
-                ExpandingSpacer {}
-            }
+            ExpandingSpacer {}
+        }
 
-            Label {
-                text: qsTr("Auto transform")
-                tooltip: qsTr("Specifies whether the image should automatically apply image transformation metadata such as EXIF orientation.")
-                disabledState: !backendValues.autoTransform.isAvailable
-            }
+        PropertyLabel { text: qsTr("Alignment H") }
 
-            SecondColumnLayout {
-                CheckBox {
-                    enabled: backendValues.autoTransform.isAvailable
-                    text: backendValues.autoTransform.valueToString
-                    backendValue: backendValues.autoTransform
-                    implicitWidth: 180
-                }
-                ExpandingSpacer {}
+        SecondColumnLayout {
+            ComboBox {
+                scope: "Image"
+                model: ["AlignLeft", "AlignRight", "AlignHCenter"]
+                backendValue: backendValues.horizontalAlignment
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
             }
 
-            Label {
-                text: qsTr("Cache")
-                tooltip: qsTr("Specifies whether the image should be cached.")
-                disabledState: !backendValues.cache.isAvailable
-            }
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel { text: qsTr("Alignment V") }
 
-            SecondColumnLayout {
-                CheckBox {
-                    enabled: backendValues.cache.isAvailable
-                    text: backendValues.cache.valueToString
-                    backendValue: backendValues.cache
-                    implicitWidth: 180
-                }
-                ExpandingSpacer {}
+        SecondColumnLayout {
+            ComboBox {
+                scope: "Image"
+                model: ["AlignTop", "AlignBottom", "AlignVCenter"]
+                backendValue: backendValues.verticalAlignment
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
             }
 
-            Label {
-                text: qsTr("Mipmap")
-                tooltip: qsTr("Specifies whether the image uses mipmap filtering when scaled or transformed.")
-                disabledState: !backendValues.mipmap.isAvailable
+            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
             }
 
-            SecondColumnLayout {
-                CheckBox {
-                    enabled: backendValues.mipmap.isAvailable
-                    text: backendValues.mipmap.valueToString
-                    backendValue: backendValues.mipmap
-                    implicitWidth: 180
-                }
-                ExpandingSpacer {}
+            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
             }
 
-            Label {
-                text: qsTr("Mirror")
-                tooltip: qsTr("Specifies whether the image should be horizontally inverted.")
-                disabledState: !backendValues.mirror.isAvailable
+            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
             }
 
-            SecondColumnLayout {
-                CheckBox {
-                    enabled: backendValues.mirror.isAvailable
-                    text: backendValues.mirror.valueToString
-                    backendValue: backendValues.mirror
-                    implicitWidth: 180
-                }
-                ExpandingSpacer {}
+            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
             }
 
-            Label {
-                text: qsTr("Smooth")
-                tooltip: qsTr("Specifies whether the image is smoothly filtered when scaled or transformed.")
-                disabledState: !backendValues.smooth.isAvailable
+            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
             }
 
-            SecondColumnLayout {
-                CheckBox {
-                    enabled: backendValues.smooth.isAvailable
-                    text: backendValues.smooth.valueToString
-                    backendValue: backendValues.smooth
-                    implicitWidth: 180
-                }
-                ExpandingSpacer {}
+            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 {}
         }
     }
 }
diff --git a/src/imports/compatibility/QtQuickUltralite/Extras/designer/StaticTextSpecifics.qml b/src/imports/compatibility/QtQuickUltralite/Extras/designer/StaticTextSpecifics.qml
index 74e7eea..e75bbfa 100644
--- a/src/imports/compatibility/QtQuickUltralite/Extras/designer/StaticTextSpecifics.qml
+++ b/src/imports/compatibility/QtQuickUltralite/Extras/designer/StaticTextSpecifics.qml
@@ -28,57 +28,33 @@
 ****************************************************************************/
 
 import QtQuick 2.15
-
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
 
 //! [StaticText compatibility]
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
-    StandardTextSection {
+    CharacterSection {
+        richTextEditorAvailable: true
+        showLineHeight: true
         showVerticalAlignment: true
-        showFormatProperty: true
+    }
+
+    TextExtrasSection {
         showElide: true
+        showWrapMode: true
+        showFormatProperty: true
         showFontSizeMode: true
         showLineHeight: true
-        richTextEditorAvailable: true
     }
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Text Color")
-
-        ColorEditor {
-            caption: qsTr("Text Color")
-            backendValue: backendValues.color
-            supportGradient: false
-        }
-
+    FontExtrasSection {
+        showStyle: true
     }
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Style Color")
-        visible: backendValues.styleColor.isAvailable
-
-        ColorEditor {
-            caption: qsTr("Style Color")
-            backendValue:  backendValues.styleColor
-            supportGradient: false
-        }
-    }
-
-   FontSection {
-       showStyle: true
-   }
-
-   PaddingSection {
-       visible: minorQtQuickVersion > 5
-   }
+    PaddingSection {}
 }
 
 //! [StaticText compatibility]
diff --git a/src/imports/compatibility/QtQuickUltralite/Layers/designer/ImageLayerSpecifics.qml b/src/imports/compatibility/QtQuickUltralite/Layers/designer/ImageLayerSpecifics.qml
index 6bac0f6..ac60034 100644
--- a/src/imports/compatibility/QtQuickUltralite/Layers/designer/ImageLayerSpecifics.qml
+++ b/src/imports/compatibility/QtQuickUltralite/Layers/designer/ImageLayerSpecifics.qml
@@ -28,63 +28,54 @@
 ****************************************************************************/
 
 import QtQuick 2.15
-
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 //! [ImageLayer compatibility]
-Column {
+Section {
     anchors.left: parent.left
     anchors.right: parent.right
+    caption: qsTr("Image Layer")
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Image Layer")
+    SectionLayout {
+        PropertyLabel { text: qsTr("Platform ID") }
 
-        SectionLayout {
-            Label {
-                text: qsTr("Platform ID")
+        SecondColumnLayout {
+            SpinBox {
+                backendValue: backendValues.platformId
+                minimumValue: 0
+                maximumValue: 2000
+                decimals: 0
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
 
-            SecondColumnLayout {
-                SpinBox {
-                    backendValue: backendValues.platformId
-                    minimumValue: 0
-                    maximumValue: 2000
-                    decimals: 0
-                }
-
-                ExpandingSpacer {
-                }
-            }
+            ExpandingSpacer {}
+        }
 
-            Label {
-                text: qsTr("Rendering Hints")
-            }
+        PropertyLabel { text: qsTr("Rendering hints") }
 
-            SecondColumnLayout {
-                ComboBox {
-                    model: ["OptimizeForSpeed", "OptimizeForSize", "StaticContents"]
-                    backendValue: backendValues.renderingHints
-                    Layout.fillWidth: true
-                    scope: "ImageLayer"
-                }
+        SecondColumnLayout {
+            ComboBox {
+                model: ["OptimizeForSpeed", "OptimizeForSize", "StaticContents"]
+                backendValue: backendValues.renderingHints
+                scope: "ImageLayer"
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
 
-            Label {
-                text: qsTr("Source")
-            }
+            ExpandingSpacer {}
+        }
 
-            SecondColumnLayout {
-                UrlChooser {
-                    Layout.fillWidth: true
-                    backendValue: backendValues.source
-                }
+        PropertyLabel { text: qsTr("Source") }
 
-                ExpandingSpacer {
-                }
+        SecondColumnLayout {
+            UrlChooser {
+                backendValue: backendValues.source
             }
+
+            ExpandingSpacer {}
         }
     }
 }
diff --git a/src/imports/compatibility/QtQuickUltralite/Layers/designer/ItemLayerSpecifics.qml b/src/imports/compatibility/QtQuickUltralite/Layers/designer/ItemLayerSpecifics.qml
index 8f2636f..d36486c 100644
--- a/src/imports/compatibility/QtQuickUltralite/Layers/designer/ItemLayerSpecifics.qml
+++ b/src/imports/compatibility/QtQuickUltralite/Layers/designer/ItemLayerSpecifics.qml
@@ -28,78 +28,73 @@
 ****************************************************************************/
 
 import QtQuick 2.15
-
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 //! [ItemLayer compatibility]
-Column {
+Section {
     anchors.left: parent.left
     anchors.right: parent.right
+    caption: qsTr("Item Layer")
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Item Layer")
+    SectionLayout {
+        PropertyLabel { text: qsTr("Platform ID") }
 
-        SectionLayout {
-            Label {
-                text: qsTr("Platform ID")
+        SecondColumnLayout {
+            SpinBox {
+                backendValue: backendValues.platformId
+                minimumValue: 0
+                maximumValue: 2000
+                decimals: 0
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
 
-            SecondColumnLayout {
-                SpinBox {
-                    backendValue: backendValues.platformId
-                    minimumValue: 0
-                    maximumValue: 2000
-                    decimals: 0
-                }
+            ExpandingSpacer {}
+        }
 
-                ExpandingSpacer {
-                }
-            }
+        PropertyLabel { text: qsTr("Rendering hints") }
 
-            Label {
-                text: qsTr("Rendering Hints")
+        SecondColumnLayout {
+            ComboBox {
+                model: ["OptimizeForSpeed", "OptimizeForSize", "StaticContents"]
+                backendValue: backendValues.renderingHints
+                scope: "ItemLayer"
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
 
-            SecondColumnLayout {
-                ComboBox {
-                    model: ["OptimizeForSpeed", "OptimizeForSize", "StaticContents"]
-                    backendValue: backendValues.renderingHints
-                    Layout.fillWidth: true
-                    scope: "ItemLayer"
-                }
-            }
+            ExpandingSpacer {}
+        }
 
-            Label {
-                text: qsTr("Depth")
-            }
+        PropertyLabel { text: qsTr("Depth") }
 
-            SecondColumnLayout {
-                ComboBox {
-                    model: ["Bpp16", "Bpp16Alpha", "Bpp24", "Bpp32", "Bpp32Alpha"]
-                    backendValue: backendValues.depth
-                    Layout.fillWidth: true
-                    scope: "ItemLayer"
-                }
+        SecondColumnLayout {
+            ComboBox {
+                model: ["Bpp16", "Bpp16Alpha", "Bpp24", "Bpp32", "Bpp32Alpha"]
+                backendValue: backendValues.depth
+                scope: "ItemLayer"
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
 
-            Label {
-                text: qsTr("Refresh Interval")
-            }
+            ExpandingSpacer {}
+        }
 
-            SecondColumnLayout {
-                SpinBox {
-                    backendValue: backendValues.refreshInterval
-                    minimumValue: 0
-                    maximumValue: 1000
-                    decimals: 0
-                }
+        PropertyLabel { text: qsTr("Refresh interval") }
 
-                ExpandingSpacer {
-                }
+        SecondColumnLayout {
+            SpinBox {
+                backendValue: backendValues.refreshInterval
+                minimumValue: 0
+                maximumValue: 1000
+                decimals: 0
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
+
+            ExpandingSpacer {}
         }
     }
 }
diff --git a/src/imports/compatibility/QtQuickUltralite/Layers/designer/ScreenSpecifics.qml b/src/imports/compatibility/QtQuickUltralite/Layers/designer/ScreenSpecifics.qml
index dc37c36..f3e1416 100644
--- a/src/imports/compatibility/QtQuickUltralite/Layers/designer/ScreenSpecifics.qml
+++ b/src/imports/compatibility/QtQuickUltralite/Layers/designer/ScreenSpecifics.qml
@@ -28,43 +28,34 @@
 ****************************************************************************/
 
 import QtQuick 2.15
-
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 //! [Screen compatibility]
-Column {
+Section {
     anchors.left: parent.left
     anchors.right: parent.right
+    caption: qsTr("Screen")
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Screen")
-
-        Label {
-            text: qsTr("Output Device")
-        }
+    SectionLayout {
+        PropertyLabel { text: qsTr("Output Device") }
 
         SecondColumnLayout {
             LineEdit {
                 backendValue: backendValues.outputDevice
-                Layout.fillWidth: true
                 showTranslateCheckBox: false
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
             }
 
-            ExpandingSpacer {
-            }
+            ExpandingSpacer {}
         }
-    }
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Background Color")
+        PropertyLabel { text: qsTr("Background color") }
 
         ColorEditor {
-            caption: qsTr("Background Color")
             backendValue: backendValues.backgroundColor
             supportGradient: false
         }
diff --git a/src/imports/compatibility/QtQuickUltralite/Layers/designer/SpriteLayerSpecifics.qml b/src/imports/compatibility/QtQuickUltralite/Layers/designer/SpriteLayerSpecifics.qml
index 2025d2a..2059d6e 100644
--- a/src/imports/compatibility/QtQuickUltralite/Layers/designer/SpriteLayerSpecifics.qml
+++ b/src/imports/compatibility/QtQuickUltralite/Layers/designer/SpriteLayerSpecifics.qml
@@ -28,49 +28,45 @@
 ****************************************************************************/
 
 import QtQuick 2.15
-
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 //! [SpriteLayer compatibility]
-Column {
+Section {
     anchors.left: parent.left
     anchors.right: parent.right
+    caption: qsTr("Item Layer")
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Item Layer")
+    SectionLayout {
+        PropertyLabel { text: qsTr("Platform ID") }
 
-        SectionLayout {
-            Label {
-                text: qsTr("Platform ID")
+        SecondColumnLayout {
+            SpinBox {
+                backendValue: backendValues.platformId
+                minimumValue: 0
+                maximumValue: 2000
+                decimals: 0
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
 
-            SecondColumnLayout {
-                SpinBox {
-                    backendValue: backendValues.platformId
-                    minimumValue: 0
-                    maximumValue: 2000
-                    decimals: 0
-                }
+            ExpandingSpacer {}
+        }
 
-                ExpandingSpacer {
-                }
-            }
+        PropertyLabel { text: qsTr("Depth") }
 
-            Label {
-                text: qsTr("Depth")
+        SecondColumnLayout {
+            ComboBox {
+                model: ["Bpp16", "Bpp16Alpha", "Bpp24", "Bpp32", "Bpp32Alpha"]
+                backendValue: backendValues.depth
+                scope: "SpriteLayer"
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
             }
 
-            SecondColumnLayout {
-                ComboBox {
-                    model: ["Bpp16", "Bpp16Alpha", "Bpp24", "Bpp32", "Bpp32Alpha"]
-                    backendValue: backendValues.depth
-                    Layout.fillWidth: true
-                    scope: "SpriteLayer"
-                }
-            }
+            ExpandingSpacer {}
         }
     }
 }