QmlDesigner: PropertyEditor redesign

* Add responsive resizing for property editor width
* Adapt custom component templates
* Fix custom component template generation if no properties defined
* Adapt Animation specifics and sections
* Adapt HelperWidgets specifics and sections
* Update ColorEditor and its components
* Remove SimpleColorPalette and its components
* Add ColorPaletteSingleton
* Implement eye dropper for ColorEditor
* Add TextExtrasSection and FontExtrasSection
* Move Component section to a new file
* Remove Advanced tab make its content a section
* Redesign TabBar and TabButton
* Make QtQuick.Controls 2 specifics part of QtCreator repository for now
* Update import versions
* Add new constants
* Update icon font
* Fix/update StudioControls and HelperWidgets
* Fix a few undefined warnings

Task-number: QDS-4582
Task-number: QDS-4562
Task-number: QDS-4555
Task-number: QDS-4554
Task-number: QDS-4553
Task-number: QDS-4299
Task-number: QDS-4296
Task-number: QDS-3769
Change-Id: Ia9677fd97f26e0e31a45da7a4136db1c9e1a5bf2
Reviewed-by: Vikas Pachdha <vikas.pachdha@qt.io>

share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml

@@ -105,7 +105,6 @@ Item {
                     caption: dirName
                     sectionHeight: 30
                     sectionFontSize: 15
-                    contentLevel: dirDepth
                     levelShift: 20
                     leftPadding: 0
                     hideHeader: dirDepth === 0

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/BooleanEditorTemplate.template

@@ -1,14 +1,15 @@
-Label {
+PropertyLabel {
     text: "%1"
     tooltip: "%1"
 }
 
 SecondColumnLayout {
     CheckBox {
+        implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                       + StudioTheme.Values.actionIndicatorWidth
         text: backendValues.%2.valueToString
         backendValue: backendValues.%2
     }
 
-    ExpandingSpacer {
+    ExpandingSpacer {}
-    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/ColorEditorTemplate.template

@@ -1,14 +1,9 @@
-// Dummy comment to consume the first argument and suppress warnings %1
+PropertyLabel {
-
+    text: "%1"
-Section {
+    tooltip: "%1"
-    anchors.left: parent.left
+}
-    anchors.right: parent.right
+
-    caption: qsTr("Color")
+ColorEditor {
-    expanded: false
+    backendValue: backendValues.%2
-    level: 2
+    supportGradient: false
-
-    ColorEditor {
-        backendValue: backendValues.%2
-        supportGradient: false
-    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/FontEditorTemplate.template

@@ -1,10 +1,10 @@
-// Dummy comment to consume the first argument and suppress warnings %1
-
 FontSection {
     anchors.left: parent.left
     anchors.right: parent.right
-    caption: qsTr("Font")
+    leftPadding: 8
+    rightPadding: 0
+    caption: "%1" + " - " + qsTr("Font")
     fontName: "%2"
     expanded: false
-    level: 2
+    level: 1
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/ImageEditorTemplate.template

@@ -1,57 +1,48 @@
-// Dummy comment to consume the first argument and suppress warnings %1
-
 Section {
     anchors.left: parent.left
     anchors.right: parent.right
-    caption: qsTr("Image")
+    leftPadding: 8
+    rightPadding: 0
+    caption: "%1" + " - " + qsTr("Image")
     expanded: false
-    level: 2
+    level: 1
 
     SectionLayout {
-        Label {
+        PropertyLabel { text: qsTr("Source") }
-            text: qsTr("Source")
-        }
 
         SecondColumnLayout {
             UrlChooser {
-                Layout.fillWidth: true
                 backendValue: backendValues.%2_source
             }
 
-            ExpandingSpacer {
+            ExpandingSpacer {}
-            }
         }
 
-        Label {
+        PropertyLabel { text: qsTr("Fill mode") }
-            text: qsTr("Fill mode")
-        }
 
         SecondColumnLayout {
             ComboBox {
                 scope: "Image"
                 model: ["Stretch", "PreserveAspectFit", "PreserveAspectCrop", "Tile", "TileVertically", "TileHorizontally", "Pad"]
                 backendValue: backendValues.%2_fillMode
-                implicitWidth: 180
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
-                Layout.fillWidth: true
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
             }
 
-            ExpandingSpacer {
+            ExpandingSpacer {}
-            }
         }
 
-        Label {
+        PropertyLabel {
             text: qsTr("Source size")
-            disabledState: !backendValues.%2_sourceSize.isAvailable
+            disabledState: !backendValues.%2_sourceSize_height.isAvailable
+                           && !backendValues.%2_sourceSize_width.isAvailable
         }
 
         SecondColumnLayout {
-            Label {
-                text: "W"
-                width: 12
-                disabledStateSoft: !backendValues.%2_sourceSize_width.isAvailable
-            }
-
             SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.%2_sourceSize_width
                 minimumValue: 0
                 maximumValue: 8192
@@ -59,18 +50,18 @@ Section {
                 enabled: backendValue.isAvailable
             }
 
-            Item {
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-                width: 4
+
-                height: 4
+            ControlLabel {
+                text: qsTr("W")
+                //disabledStateSoft: !backendValues.%2_sourceSize_width.isAvailable
             }
 
-            Label {
+            Spacer { implicitWidth: StudioTheme.Values.controlGap }
-                text: "H"
-                width: 12
-                disabledStateSoft: !backendValues.%2_sourceSize_height.isAvailable
-            }
 
             SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.%2_sourceSize_height
                 minimumValue: 0
                 maximumValue: 8192
@@ -78,45 +69,47 @@ Section {
                 enabled: backendValue.isAvailable
             }
 
-            ExpandingSpacer {
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+            ControlLabel {
+                text: qsTr("H")
+                //disabledStateSoft: !backendValues.%2_sourceSize_height.isAvailable
             }
+
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel { text: qsTr("Alignment H") }
-            text: qsTr("Horizontal alignment")
-        }
 
         SecondColumnLayout {
             ComboBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
                 scope: "Image"
                 model: ["AlignLeft", "AlignRight", "AlignHCenter"]
                 backendValue: backendValues.%2_horizontalAlignment
-                implicitWidth: 180
-                Layout.fillWidth: true
             }
 
-            ExpandingSpacer {
+            ExpandingSpacer {}
-            }
         }
 
-        Label {
+        PropertyLabel { text: qsTr("Alignment V") }
-            text: qsTr("Vertical alignment")
-        }
 
         SecondColumnLayout {
             ComboBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
                 scope: "Image"
                 model: ["AlignTop", "AlignBottom", "AlignVCenter"]
                 backendValue: backendValues.%2_verticalAlignment
-                implicitWidth: 180
-                Layout.fillWidth: true
             }
 
-            ExpandingSpacer {
+            ExpandingSpacer {}
-            }
         }
 
-        Label {
+        PropertyLabel {
             text: qsTr("Asynchronous")
             tooltip: qsTr("Loads images on the local filesystem asynchronously in a separate thread.")
             disabledState: !backendValues.%2_asynchronous.isAvailable
@@ -127,12 +120,14 @@ Section {
                 enabled: backendValues.%2_asynchronous.isAvailable
                 text: backendValues.%2_asynchronous.valueToString
                 backendValue: backendValues.%2_asynchronous
-                implicitWidth: 180
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
+
             ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
             text: qsTr("Auto transform")
             tooltip: qsTr("Automatically applies image transformation metadata such as EXIF orientation.")
             disabledState: !backendValues.%2_autoTransform.isAvailable
@@ -143,12 +138,14 @@ Section {
                 enabled: backendValues.%2_autoTransform.isAvailable
                 text: backendValues.%2_autoTransform.valueToString
                 backendValue: backendValues.%2_autoTransform
-                implicitWidth: 180
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
+
             ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
             text: qsTr("Cache")
             tooltip: qsTr("Caches the image.")
             disabledState: !backendValues.%2_cache.isAvailable
@@ -159,12 +156,14 @@ Section {
                 enabled: backendValues.%2_cache.isAvailable
                 text: backendValues.%2_cache.valueToString
                 backendValue: backendValues.%2_cache
-                implicitWidth: 180
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
+
             ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
             text: qsTr("Mipmap")
             tooltip: qsTr("Uses mipmap filtering when the image is scaled or transformed.")
             disabledState: !backendValues.%2_mipmap.isAvailable
@@ -175,12 +174,14 @@ Section {
                 enabled: backendValues.%2_mipmap.isAvailable
                 text: backendValues.%2_mipmap.valueToString
                 backendValue: backendValues.%2_mipmap
-                implicitWidth: 180
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
+
             ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
             text: qsTr("Mirror")
             tooltip: qsTr("Inverts the image horizontally.")
             disabledState: !backendValues.%2_mirror.isAvailable
@@ -191,12 +192,14 @@ Section {
                 enabled: backendValues.%2_mirror.isAvailable
                 text: backendValues.%2_mirror.valueToString
                 backendValue: backendValues.%2_mirror
-                implicitWidth: 180
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
+
             ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
             text: qsTr("Smooth")
             tooltip: qsTr("Smoothly filters the image when it is scaled or transformed.")
             disabledState: !backendValues.%2_smooth.isAvailable
@@ -207,8 +210,10 @@ Section {
                 enabled: backendValues.%2_smooth.isAvailable
                 text: backendValues.%2_smooth.valueToString
                 backendValue: backendValues.%2_smooth
-                implicitWidth: 180
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
+
             ExpandingSpacer {}
         }
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/IntEditorTemplate.template

@@ -1,4 +1,4 @@
-Label {
+PropertyLabel {
     text: "%1"
     tooltip: "%1"
 }
@@ -8,10 +8,9 @@ SecondColumnLayout {
         maximumValue: 9999999
         minimumValue: -9999999
         backendValue: backendValues.%2
-        Layout.fillWidth: true
+        implicitWidth: StudioTheme.Values.twoControlColumnWidth
-        Layout.maximumWidth: 100
+                       + StudioTheme.Values.actionIndicatorWidth
     }
 
-    ExpandingSpacer {
+    ExpandingSpacer {}
-    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/RealEditorTemplate.template

@@ -1,18 +1,18 @@
-Label {
+PropertyLabel {
     text: "%1"
     tooltip: "%1"
 }
 
 SecondColumnLayout {
     SpinBox {
-        maximumValue: 9999999
         minimumValue: -9999999
+        maximumValue: 9999999
         decimals: 2
         stepSize: 0.1
         backendValue: backendValues.%2
-        Layout.fillWidth: true
+        implicitWidth: StudioTheme.Values.twoControlColumnWidth
-        Layout.maximumWidth: 100
+                       + StudioTheme.Values.actionIndicatorWidth
-    }
-    ExpandingSpacer {
     }
+
+    ExpandingSpacer {}
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/RectangleEditorTemplate.template

@@ -1,69 +1,55 @@
-// Dummy comment to consume the first argument and suppress warnings %1
-
 Section {
     anchors.left: parent.left
     anchors.right: parent.right
-    caption: qsTr("Color")
+    leftPadding: 8
+    rightPadding: 0
+    caption: "%1" + " - " + qsTr("Rectangle")
     expanded: false
-    level: 2
+    level: 1
-
-    ColorEditor {
-        caption: qsTr("Color")
-        backendValue: backendValues.%2_color
-        supportGradient: true
-    }
-}
-
-Section {
-    anchors.left: parent.left
-    anchors.right: parent.right
-    caption: qsTr("Border Color")
-    expanded: false
-    level: 2
-
-    ColorEditor {
-        caption: qsTr("Border Color")
-        backendValue: backendValues.%2_border_color
-        supportGradient: false
-    }
-}
-
-Section {
-    anchors.left: parent.left
-    anchors.right: parent.right
-    caption: qsTr("Rectangle")
-    expanded: false
-    level: 2
 
     SectionLayout {
-        rows: 2
+        PropertyLabel { text: qsTr("Color") }
-        Label {
+
-            text: qsTr("Border")
+        ColorEditor {
+            backendValue: backendValues.%2_color
+            supportGradient: true
         }
+
+        PropertyLabel { text: qsTr("Border Color") }
+
+        ColorEditor {
+            backendValue: backendValues.%2_border_color
+            supportGradient: false
+        }
+
+        PropertyLabel { text: qsTr("Border") }
+
         SecondColumnLayout {
             SpinBox {
                 backendValue: backendValues.%2_border_width
                 hasSlider: true
-                Layout.preferredWidth: 120
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
             }
-            ExpandingSpacer {
 
-            }
+            ExpandingSpacer {}
-        }
-        Label {
-            text: qsTr("Radius")
         }
+
+        PropertyLabel { text: qsTr("Radius") }
+
         SecondColumnLayout {
             SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
                 backendValue: backendValues.%2_radius
                 hasSlider: true
-                Layout.preferredWidth: 120
                 minimumValue: 0
                 maximumValue: Math.min(backendValues.height.value, backendValues.width.value) / 2
             }
-            ExpandingSpacer {
 
-            }
+            ExpandingSpacer {}
         }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/StringEditorTemplate.template

@@ -1,4 +1,4 @@
-Label {
+PropertyLabel {
     text: "%1"
     tooltip: "%1"
 }
@@ -6,9 +6,10 @@ Label {
 SecondColumnLayout {
     LineEdit {
         backendValue: backendValues.%2
-        Layout.fillWidth: true
+        implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                       + StudioTheme.Values.actionIndicatorWidth
+        width: implicitWidth
     }
 
-    ExpandingSpacer {
+    ExpandingSpacer {}
-    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/TemplateTypes.qml

@@ -24,7 +24,10 @@
 ****************************************************************************/
 
 AutoTypes {
-    imports: [ "import HelperWidgets 2.0", "import QtQuick 2.15", "import QtQuick.Layouts 1.15" ]
+    imports: [ "import HelperWidgets 2.0",
+               "import QtQuick 2.15",
+               "import QtQuick.Layouts 1.15",
+               "import StudioTheme 1.0 as StudioTheme" ]
 
     Type {
        typeNames: ["int"]
@@ -50,7 +53,6 @@ AutoTypes {
     Type {
         typeNames: ["color", "QColor"]
         sourceFile: "ColorEditorTemplate.template"
-        separateSection: true
     }
 
     Type {

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/TextEditorTemplate.template

@@ -1,107 +1,153 @@
 Section {
     anchors.left: parent.left
     anchors.right: parent.right
-    caption: qsTr("Text")
+    leftPadding: 8
+    rightPadding: 0
+    caption: "%1" + " - " + qsTr("Text")
     expanded: false
-    level: 2
+    level: 1
 
     SectionLayout {
-        columns: 2
+        PropertyLabel { text: qsTr("Text") }
-        rows: 3
+
-        Label {
+        SecondColumnLayout {
-            text: qsTr("Text")
+            LineEdit {
-        }
+                backendValue: backendValues.%2_text
-        LineEdit {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
-            backendValue: backendValues.%2_text
+                               + StudioTheme.Values.actionIndicatorWidth
-            Layout.fillWidth: true
+                width: implicitWidth
+            }
+
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel { text: qsTr("Text color") }
-            text: qsTr("Wrap mode")
+
+        ColorEditor {
+            backendValue: backendValues.%2_color
+            supportGradient: false
         }
 
-        ComboBox {
+        PropertyLabel { text: qsTr("Wrap mode") }
-            Layout.fillWidth: true
+
-            backendValue: backendValues.%2_wrapMode
+        SecondColumnLayout {
-            scope: "Text"
+            ComboBox {
-            model: ["NoWrap", "WordWrap", "WrapAnywhere", "WrapAtWordBoundaryOrAnywhere"]
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                backendValue: backendValues.%2_wrapMode
+                scope: "Text"
+                model: ["NoWrap", "WordWrap", "WrapAnywhere", "WrapAtWordBoundaryOrAnywhere"]
+            }
+
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel { text: qsTr("Elide") }
-            text: qsTr("Elide")
+
+        SecondColumnLayout {
+            ComboBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                backendValue: backendValues.%2_elide
+                scope: "Text"
+                model: ["ElideNone", "ElideLeft", "ElideMiddle", "ElideRight"]
+            }
+
+            ExpandingSpacer {}
         }
 
-        ComboBox {
+        PropertyLabel { text: qsTr("Alignment") }
-            Layout.fillWidth: true
+
-            backendValue: backendValues.%2_elide
+        SecondColumnLayout {
-            scope: "Text"
+            AligmentHorizontalButtons {
-            model: ["ElideNone", "ElideLeft", "ElideMiddle", "ElideRight"]
+                id: horizontalAlignmentButtons
+                backendValue: backendValues.%2_horizontalAlignment;
+            }
+
+            Spacer {
+                implicitWidth: StudioTheme.Values.controlGap
+                               + StudioTheme.Values.controlLabelWidth
+                               + StudioTheme.Values.controlGap
+                               + StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                               - horizontalAlignmentButtons.implicitWidth
+            }
+
+            AligmentVerticalButtons {
+                backendValue: backendValues.%2_verticalAlignment;
+            }
         }
 
-        Label {
+        PropertyLabel { text: qsTr("Format") }
-            text: qsTr("Alignment")
+
+        SecondColumnLayout {
+            ComboBox {
+                scope: "Text"
+                model: ["PlainText", "RichText", "AutoText"]
+                backendValue: backendValues.%2_textFormat
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+            }
+
+            ExpandingSpacer {}
         }
 
-        AligmentHorizontalButtons {
+        PropertyLabel {
-            backendValue: backendValues.%2_horizontalAlignment;
-
-        }
-
-        Label {
-            text: ("")
-        }
-
-        AligmentVerticalButtons {
-            backendValue: backendValues.%2_verticalAlignment;
-        }
-
-
-        Label {
-            text: qsTr("Format")
-        }
-        ComboBox {
-            scope: "Text"
-            model:  ["PlainText", "RichText", "AutoText"]
-            backendValue: backendValues.%2_textFormat
-            Layout.fillWidth: true
-        }
-
-        Label {
             text: qsTr("Render type")
-            toolTip: qsTr("Override the default rendering type for this item.")
+            tooltip: qsTr("Overrides the default rendering type for this component.")
-        }
-        ComboBox {
-            scope: "Text"
-            model:  ["QtRendering", "NativeRendering"]
-            backendValue: backendValues.%2_renderType
-            Layout.fillWidth: true
         }
 
-        Label {
+        SecondColumnLayout {
-            text: qsTr("Font size mode")
+            ComboBox {
-            toolTip: qsTr("Specifies how the font size of the displayed text is determined.")
+                scope: "Text"
-        }
+                model: ["QtRendering", "NativeRendering"]
-        ComboBox {
+                backendValue: backendValues.%2_renderType
-            scope: "Text"
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
-            model:  ["FixedSize", "HorizontalFit", "VerticalFit", "Fit"]
+                               + StudioTheme.Values.actionIndicatorWidth
-            backendValue: backendValues.%2_fontSizeMode
+                width: implicitWidth
-            Layout.fillWidth: true
+            }
+
+            ExpandingSpacer {}
         }
 
+        PropertyLabel {
+            text: qsTr("Size mode")
+            tooltip: qsTr("Specifies how the font size of the displayed text is determined.")
+        }
 
-        Label {
+        SecondColumnLayout {
+            ComboBox {
+                scope: "Text"
+                model: ["FixedSize", "HorizontalFit", "VerticalFit", "Fit"]
+                backendValue: backendValues.%2_fontSizeMode
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
             text: qsTr("Line height")
             tooltip: qsTr("Sets the line height for the text.")
         }
 
-        SpinBox {
+        SecondColumnLayout {
-            Layout.fillWidth: true
+            SpinBox {
-            backendValue: (backendValues.%2_lineHeight === undefined) ? dummyBackendValue : backendValues.lineHeight
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
-            maximumValue: 500
+                               + StudioTheme.Values.actionIndicatorWidth
-            minimumValue: 0
+                backendValue: (backendValues.%2_lineHeight === undefined) ? dummyBackendValue : backendValues.lineHeight
-            decimals: 2
+                maximumValue: 500
-            stepSize: 0.1
+                minimumValue: 0
-        }
+                decimals: 2
+                stepSize: 0.1
+            }
 
+            ExpandingSpacer {}
+        }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/UrlEditorTemplate.template

@@ -1,14 +1,12 @@
-Label {
+PropertyLabel {
     text: "%1"
     tooltip: "%1"
 }
 
 SecondColumnLayout {
     UrlChooser {
-        Layout.fillWidth: true
+        backendValue: backendValues.%2
-        backendValue:  backendValues.%2
     }
 
-    ExpandingSpacer {
+    ExpandingSpacer {}
-    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AdvancedSection.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,9 +23,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Section {
     anchors.left: parent.left
@@ -33,182 +34,120 @@ Section {
     caption: qsTr("Advanced")
 
     SectionLayout {
-        columns: 2
+        PropertyLabel {
-
-        Label {
-            text: qsTr("Origin")
-            disabledState: !backendValues.transformOrigin.isAvailable
-        }
-
-        OriginControl {
-            backendValue: backendValues.transformOrigin
-            enabled: backendValues.transformOrigin.isAvailable
-        }
-
-        Label {
-            text: qsTr("Scale")
-            disabledState: !backendValues.scale.isAvailable
-        }
-
-        SecondColumnLayout {
-            SpinBox {
-                sliderIndicatorVisible: true
-                backendValue: backendValues.scale
-                hasSlider: true
-                decimals: 2
-                stepSize: 0.1
-                minimumValue: -10
-                maximumValue: 10
-                Layout.preferredWidth: 140
-                enabled: backendValues.scale.isAvailable
-            }
-            ExpandingSpacer {
-            }
-        }
-        Label {
-            text: qsTr("Rotation")
-            disabledState: !backendValues.rotation.isAvailable
-        }
-        SecondColumnLayout {
-            SpinBox {
-                sliderIndicatorVisible: true
-                backendValue: backendValues.rotation
-                hasSlider: true
-                decimals: 2
-                minimumValue: -360
-                maximumValue: 360
-                Layout.preferredWidth: 140
-                enabled: backendValues.rotation.isAvailable
-            }
-            ExpandingSpacer {
-            }
-        }
-        Label {
-            text: "Z"
-        }
-        SecondColumnLayout {
-            SpinBox {
-                sliderIndicatorVisible: true
-                backendValue: backendValues.z
-                hasSlider: true
-                minimumValue: -100
-                maximumValue: 100
-                Layout.preferredWidth: 140
-            }
-            ExpandingSpacer {
-            }
-        }
-
-        Label {
-            text: qsTr("State")
-        }
-        SecondColumnLayout {
-
-            ComboBox {
-                Layout.fillWidth: true
-                backendValue: backendValues.state
-                model: allStateNames
-                valueType: ComboBox.String
-            }
-
-            ExpandingSpacer {
-            }
-        }
-
-        Label {
             visible: majorQtQuickVersion > 1
             text: qsTr("Enabled")
         }
+
         SecondColumnLayout {
             visible: majorQtQuickVersion > 1
+
             CheckBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.enabled
-                text: qsTr("Accept mouse and keyboard events")
+                text: backendValues.enabled.valueToString
-            }
-            ExpandingSpacer {
             }
+
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
             visible: majorQtQuickVersion > 1
             text: qsTr("Smooth")
             disabledState: !backendValues.smooth.isAvailable
         }
+
         SecondColumnLayout {
             visible: majorQtQuickVersion > 1
+
             CheckBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.smooth
-                text: qsTr("Smooth sampling active")
+                text: backendValues.smooth.valueToString
                 enabled: backendValues.smooth.isAvailable
             }
-            ExpandingSpacer {
+
-            }
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
             visible: majorQtQuickVersion > 1
             text: qsTr("Antialiasing")
             disabledState: !backendValues.antialiasing.isAvailable
         }
+
         SecondColumnLayout {
             visible: majorQtQuickVersion > 1
+
             CheckBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.antialiasing
-                text: qsTr("Anti-aliasing active")
+                text: backendValues.antialiasing.valueToString
                 enabled: backendValues.antialiasing.isAvailable
             }
-            ExpandingSpacer {
+
-            }
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
             text: qsTr("Focus")
             tooltip: qsTr("Sets focus on the component within the enclosing focus scope.")
             disabledState: !backendValues.focus.isAvailable
         }
+
         SecondColumnLayout {
             CheckBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.focus
                 text: backendValues.focus.valueToString
                 enabled: backendValues.focus.isAvailable
             }
-            ExpandingSpacer {
+
-            }
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
-            text: qsTr("Active focus on tab")
+            text: qsTr("Focus on Tab")
             tooltip: qsTr("Adds the component to the tab focus chain.")
             disabledState: !backendValues.activeFocusOnTab.isAvailable
         }
+
         SecondColumnLayout {
             CheckBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.activeFocusOnTab
                 text: backendValues.activeFocusOnTab.valueToString
                 enabled: backendValues.activeFocusOnTab.isAvailable
             }
-            ExpandingSpacer {
+
-            }
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
-            text: qsTr("Baseline offset")
+            text: qsTr("Baseline Offset")
             tooltip: qsTr("Position of the component's baseline in local coordinates.")
             disabledState: !backendValues.baselineOffset.isAvailable
         }
+
         SecondColumnLayout {
             SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 sliderIndicatorVisible: true
                 backendValue: backendValues.baselineOffset
                 hasSlider: true
                 decimals: 0
                 minimumValue: -1000
                 maximumValue: 1000
-                Layout.preferredWidth: 140
                 enabled: backendValues.baselineOffset.isAvailable
             }
-            ExpandingSpacer {
+
-            }
+            ExpandingSpacer {}
         }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AlignDistributeSection.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,17 +23,23 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
 Section {
+    id: root
+
+     readonly property bool warningVisible: alignDistribute.multiSelection &&
+                                            (alignDistribute.selectionHasAnchors ||
+                                            !alignDistribute.selectionExclusivlyItems ||
+                                            alignDistribute.selectionContainsRootItem)
+
     anchors.left: parent.left
     anchors.right: parent.right
-
+    caption: qsTr("Alignment")
-    caption: qsTr("Align")
 
     SectionLayout {
         enabled: alignDistribute.multiSelection &&
@@ -46,16 +52,15 @@ Section {
             modelNodeBackendProperty: modelNodeBackend
         }
 
-        Label {
+        PropertyLabel { text: qsTr("Alignment") }
-            text: qsTr("Align objects")
+
-            width: 120
+        SecondColumnLayout {
-            Layout.columnSpan: 2
+            Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth }
-        }
 
-        RowLayout {
-            Layout.columnSpan: 2
             Row {
+                id: horizontalAlignmentButtons
                 spacing: -StudioTheme.Values.border
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.alignLeft
                     tooltip: qsTr("Align left edges.")
@@ -63,6 +68,7 @@ Section {
                                                             alignToComboBox.currentEnum,
                                                             keyObjectComboBox.currentText)
                 }
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.alignCenterHorizontal
                     tooltip: qsTr("Align horizontal centers.")
@@ -70,6 +76,7 @@ Section {
                                                             alignToComboBox.currentEnum,
                                                             keyObjectComboBox.currentText)
                 }
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.alignRight
                     tooltip: qsTr("Align right edges.")
@@ -79,8 +86,18 @@ Section {
                 }
             }
 
+            Spacer {
+                implicitWidth: StudioTheme.Values.controlGap
+                               + StudioTheme.Values.controlLabelWidth
+                               + StudioTheme.Values.controlGap
+                               + StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                               - horizontalAlignmentButtons.implicitWidth
+            }
+
             Row {
                 spacing: -StudioTheme.Values.border
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.alignTop
                     tooltip: qsTr("Align top edges.")
@@ -88,6 +105,7 @@ Section {
                                                             alignToComboBox.currentEnum,
                                                             keyObjectComboBox.currentText)
                 }
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.alignCenterVertical
                     tooltip: qsTr("Align vertical centers.")
@@ -95,6 +113,7 @@ Section {
                                                             alignToComboBox.currentEnum,
                                                             keyObjectComboBox.currentText)
                 }
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.alignBottom
                     tooltip: qsTr("Align bottom edges.")
@@ -105,16 +124,15 @@ Section {
             }
         }
 
-        Label {
+        PropertyLabel { text: qsTr("Distribute Objects") }
-            text: qsTr("Distribute objects")
+
-            width: 120
+        SecondColumnLayout {
-            Layout.columnSpan: 2
+            Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth }
-        }
 
-        RowLayout {
-            Layout.columnSpan: 2
             Row {
+                id: horizontalDistributionButtons
                 spacing: -StudioTheme.Values.border
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.distributeLeft
                     tooltip: qsTr("Distribute left edges.")
@@ -122,6 +140,7 @@ Section {
                                                                  alignToComboBox.currentEnum,
                                                                  keyObjectComboBox.currentText)
                 }
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.distributeCenterHorizontal
                     tooltip: qsTr("Distribute horizontal centers.")
@@ -129,6 +148,7 @@ Section {
                                                                  alignToComboBox.currentEnum,
                                                                  keyObjectComboBox.currentText)
                 }
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.distributeRight
                     tooltip: qsTr("Distribute right edges.")
@@ -138,8 +158,18 @@ Section {
                 }
             }
 
+            Spacer {
+                implicitWidth: StudioTheme.Values.controlGap
+                               + StudioTheme.Values.controlLabelWidth
+                               + StudioTheme.Values.controlGap
+                               + StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                               - horizontalDistributionButtons.implicitWidth
+            }
+
             Row {
                 spacing: -StudioTheme.Values.border
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.distributeTop
                     tooltip: qsTr("Distribute top edges.")
@@ -147,6 +177,7 @@ Section {
                                                                  alignToComboBox.currentEnum,
                                                                  keyObjectComboBox.currentText)
                 }
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.distributeCenterVertical
                     tooltip: qsTr("Distribute vertical centers.")
@@ -154,6 +185,7 @@ Section {
                                                                  alignToComboBox.currentEnum,
                                                                  keyObjectComboBox.currentText)
                 }
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.distributeBottom
                     tooltip: qsTr("Distribute bottom edges.")
@@ -164,16 +196,14 @@ Section {
             }
         }
 
-        Label {
+        PropertyLabel { text: qsTr("Distribute Spacing") }
-            text: qsTr("Distribute spacing")
+
-            width: 120
+        SecondColumnLayout {
-            Layout.columnSpan: 2
+            Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth }
-        }
 
-        RowLayout {
-            Layout.columnSpan: 2
             Row {
                 spacing: -StudioTheme.Values.border
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.distributeSpacingHorizontal
                     tooltip: qsTr("Distribute spacing horizontally.")
@@ -183,6 +213,7 @@ Section {
                                                                  distanceSpinBox.realValue,
                                                                  buttonRow.getDistributeDirection())
                 }
+
                 AbstractButton {
                     buttonIcon: StudioTheme.Constants.distributeSpacingVertical
                     tooltip: qsTr("Distribute spacing vertically.")
@@ -202,8 +233,7 @@ Section {
                     id: group
                 }
 
-                function getDistributeDirection()
+                function getDistributeDirection() {
-                {
                     if (buttonLeftToRight.checked)
                         return AlignDistribute.TopLeft
                     else if (buttonCenter.checked)
@@ -221,33 +251,42 @@ Section {
                     checkable: true
                     StudioControls.ButtonGroup.group: group
                 }
+
                 AbstractButton {
                     id: buttonLeftToRight
                     buttonIcon: StudioTheme.Constants.distributeOriginTopLeft
                     checkable: true
                     StudioControls.ButtonGroup.group: group
                 }
+
                 AbstractButton {
                     id: buttonCenter
                     buttonIcon: StudioTheme.Constants.distributeOriginCenter
                     checkable: true
                     StudioControls.ButtonGroup.group: group
                 }
+
                 AbstractButton {
                     id: buttonRightToLeft
                     buttonIcon: StudioTheme.Constants.distributeOriginBottomRight
                     checkable: true
                     StudioControls.ButtonGroup.group: group
                 }
+            }
+        }
 
-                StudioControls.RealSpinBox {
+        PropertyLabel { text: qsTr("Pixel Spacing") }
-                    id: distanceSpinBox
+
-                    width: 64
+        SecondColumnLayout {
-                    actionIndicatorVisible: false
+            Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth }
-                    realFrom: -1000
+
-                    realTo: 1000
+            StudioControls.RealSpinBox {
-                    enabled: !buttonNone.checked
+                id: distanceSpinBox
-                }
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                actionIndicatorVisible: false
+                realFrom: -1000
+                realTo: 1000
+                enabled: !buttonNone.checked
             }
         }
 
@@ -257,14 +296,16 @@ Section {
             selectionOnly: true
         }
 
-        Label {
+        PropertyLabel { text: qsTr("Align to") }
-            text: qsTr("Align to")
+
-        }
         SecondColumnLayout {
             ComboBox {
                 id: alignToComboBox
-                Layout.fillWidth: true
+
                 property int currentEnum: alignTargets.get(alignToComboBox.currentIndex).value
+
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 textRole: "text"
                 model: ListModel {
                     id: alignTargets
@@ -274,21 +315,24 @@ Section {
                 }
             }
 
-            ExpandingSpacer {
+            ExpandingSpacer {}
-            }
         }
 
-        Label {
+        PropertyLabel { text: qsTr("Key Object") }
-            text: qsTr("Key object")
+
-        }
         SecondColumnLayout {
             ComboBox {
                 id: keyObjectComboBox
+
+                property string lastSelectedItem: ""
+
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 enabled: alignToComboBox.currentIndex === 2
                 model: itemFilterModel.itemModel
-                Layout.fillWidth: true
+
-                property string lastSelectedItem: ""
                 onCompressedActivated: lastSelectedItem = keyObjectComboBox.currentText
+
                 onModelChanged: {
                     var idx = model.indexOf(keyObjectComboBox.lastSelectedItem)
                     if (idx !== -1)
@@ -298,56 +342,55 @@ Section {
                 }
             }
 
-            ExpandingSpacer {
+            ExpandingSpacer {}
-            }
         }
 
-        SectionLayout {
+        PropertyLabel {
-            columns: 1
+            text: qsTr("Warning")
-            Layout.topMargin: 30
+            visible: root.warningVisible
-            Layout.columnSpan: 2
+            font.weight: Font.Bold
-            visible: alignDistribute.multiSelection &&
+        }
-                     (alignDistribute.selectionHasAnchors ||
-                     !alignDistribute.selectionExclusivlyItems ||
-                     alignDistribute.selectionContainsRootItem)
 
-            Text {
+        SecondColumnLayout {
-                id: warningTitle
+            visible: root.warningVisible
-                font.family: StudioTheme.Constants.font.family
+
-                font.pixelSize: StudioTheme.Values.myFontSize
+            Spacer {
-                font.weight: Font.Bold
+                implicitWidth: StudioTheme.Values.actionIndicatorWidth
-                color: StudioTheme.Values.themeTextColor
-                text: qsTr("Warning")
             }
-            Text {
+
-                id: warningRoot
+            Column {
-                visible: alignDistribute.selectionContainsRootItem
+                Text {
-                Layout.fillWidth: true
+                    id: warningRoot
-                font.family: StudioTheme.Constants.font.family
+                    visible: alignDistribute.selectionContainsRootItem
-                font.pixelSize: StudioTheme.Values.myFontSize
+                    Layout.fillWidth: true
-                color: StudioTheme.Values.themeTextColor
+                    font.family: StudioTheme.Constants.font.family
-                wrapMode: Text.WordWrap
+                    font.pixelSize: StudioTheme.Values.myFontSize
-                text: qsTr("- The selection contains the root component.")
+                    color: StudioTheme.Values.themeTextColor
-            }
+                    wrapMode: Text.WordWrap
-            Text {
+                    text: qsTr("- The selection contains the root component.")
-                id: warningNonVisual
+                }
-                visible: !alignDistribute.selectionExclusivlyItems
+
-                Layout.fillWidth: true
+                Text {
-                font.family: StudioTheme.Constants.font.family
+                    id: warningNonVisual
-                font.pixelSize: StudioTheme.Values.myFontSize
+                    visible: !alignDistribute.selectionExclusivlyItems
-                color: StudioTheme.Values.themeTextColor
+                    Layout.fillWidth: true
-                wrapMode: Text.WordWrap
+                    font.family: StudioTheme.Constants.font.family
-                text: qsTr("- The selection contains a non-visual component.")
+                    font.pixelSize: StudioTheme.Values.myFontSize
-            }
+                    color: StudioTheme.Values.themeTextColor
-            Text {
+                    wrapMode: Text.WordWrap
-                id: warningAnchors
+                    text: qsTr("- The selection contains a non-visual component.")
-                visible: alignDistribute.selectionHasAnchors
+                }
-                Layout.fillWidth: true
+
-                font.family: StudioTheme.Constants.font.family
+                Text {
-                font.pixelSize: StudioTheme.Values.myFontSize
+                    id: warningAnchors
-                color: StudioTheme.Values.themeTextColor
+                    visible: alignDistribute.selectionHasAnchors
-                wrapMode: Text.WordWrap
+                    Layout.fillWidth: true
-                text: qsTr("- A component in the selection uses anchors.")
+                    font.family: StudioTheme.Constants.font.family
+                    font.pixelSize: StudioTheme.Values.myFontSize
+                    color: StudioTheme.Values.themeTextColor
+                    wrapMode: Text.WordWrap
+                    text: qsTr("- A component in the selection uses anchors.")
+                }
             }
         }
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml

@@ -24,217 +24,151 @@
 ****************************************************************************/
 
 import QtQuick 2.15
-import HelperWidgets 2.0
 import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
 import QtQuickDesignerTheme 1.0
 
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
-RowLayout {
+SectionLayout {
     id: anchorRow
 
     opacity: enabled ? 1 : 0.5
 
-    property alias iconSource: iconLabel.icon
-
     property variant anchorMargin
 
+    property alias iconSource: iconLabel.icon
     property alias targetName: targetComboBox.targetName
     property alias currentText: targetComboBox.currentText
-
     property alias relativeTarget: buttonRow.relativeTarget
-
+    property alias buttonRow: buttonRow
-    signal targetChanged
 
     property bool verticalAnchor
-
     property bool invertRelativeTargets: false
-
     property bool showAlternativeTargets: true
 
+    signal targetChanged
     signal sameEdgeButtonClicked
     signal centerButtonClicked
     signal oppositeEdgeButtonClicked
 
-    property alias buttonRow: buttonRow
 
-    readonly property color __defaultTextColor: StudioTheme.Values.themeTextColor
+    PropertyLabel { text: qsTr("Target") }
 
-    IconLabel {
+    SecondColumnLayout {
-        id: iconLabel
+        IconLabel {
-        Layout.alignment: Qt.AlignTop
+            id: iconLabel
-        Layout.topMargin: 4
+            implicitWidth: StudioTheme.Values.actionIndicatorWidth
-        Layout.leftMargin: 4
+            horizontalAlignment: Text.AlignLeft
-    }
-
-    GridLayout {
-        Layout.fillWidth: true
-        rows: 2
-        columns: 2
-
-        Label {
-            text: qsTr("Target")
-            color: __defaultTextColor
-            elide: Text.ElideRight
-            Layout.minimumWidth: Math.min(60, Layout.preferredWidth + 10)
         }
 
         TargetComboBox {
             id: targetComboBox
-            onCurrentTextChanged: {
+
-                anchorRow.targetChanged();
+            implicitWidth: StudioTheme.Values.singleControlColumnWidth
+            onCurrentTextChanged: anchorRow.targetChanged()
+        }
+
+        ExpandingSpacer {}
+    }
+
+    PropertyLabel { text: qsTr("Margin") }
+
+    SecondColumnLayout {
+        SpinBox {
+            implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                           + StudioTheme.Values.actionIndicatorWidth
+            minimumValue: -0xffff
+            maximumValue: 0xffff
+            backendValue: anchorMargin
+            realDragRange: 5000
+        }
+
+        Spacer {
+            implicitWidth: StudioTheme.Values.twoControlColumnGap
+                           + StudioTheme.Values.actionIndicatorWidth
+                           + (StudioTheme.Values.twoControlColumnWidth - buttonRow.width)
+        }
+
+        StudioControls.ButtonRow {
+            id: buttonRow
+
+            property variant relativeTarget: anchorBackend.relativeAnchorTargetTop
+
+            actionIndicatorVisible: false
+
+            onRelativeTargetChanged: {
+                buttonSameEdge.checked = false
+                buttonCenter.checked = false
+                buttonOppositeEdge.checked = false
+
+                if (relativeTarget === AnchorBindingProxy.SameEdge) {
+                    if (!invertRelativeTargets) {
+                        buttonSameEdge.checked = true
+                    } else {
+                        buttonOppositeEdge.checked = true
+                    }
+                } else if (relativeTarget === AnchorBindingProxy.OppositeEdge) {
+                    if (!invertRelativeTargets) {
+                        buttonOppositeEdge.checked = true
+                    } else {
+                        buttonSameEdge.checked = true
+                    }
+                } else if (relativeTarget === AnchorBindingProxy.Center) {
+                    buttonCenter.checked = true
+                }
+            }
+
+            StudioControls.ButtonGroup { id: group }
+
+            AbstractButton {
+                id: buttonSameEdge
+                buttonIcon: verticalAnchor ? StudioTheme.Constants.anchorTop
+                                           : StudioTheme.Constants.anchorLeft
+                checkable: true
+                autoExclusive: true
+                StudioControls.ButtonGroup.group: group
+                tooltip: verticalAnchor ? qsTr("Anchor to the top of the target.")
+                                        : qsTr("Anchor to the left of the target.")
+                onClicked: {
+                    if (!invertRelativeTargets)
+                        sameEdgeButtonClicked()
+                    else
+                        oppositeEdgeButtonClicked()
+                }
+            }
+
+            AbstractButton {
+                id: buttonCenter
+                buttonIcon: verticalAnchor ? StudioTheme.Constants.centerVertical
+                                           : StudioTheme.Constants.centerHorizontal
+                checkable: true
+                autoExclusive: true
+                StudioControls.ButtonGroup.group: group
+                tooltip: verticalAnchor ? qsTr("Anchor to the vertical center of the target.")
+                                        : qsTr("Anchor to the horizontal center of the target.")
+                onClicked: centerButtonClicked()
+            }
+
+            AbstractButton {
+                id: buttonOppositeEdge
+                buttonIcon: verticalAnchor ? StudioTheme.Constants.anchorBottom
+                                           : StudioTheme.Constants.anchorRight
+                checkable: true
+                autoExclusive: true
+                StudioControls.ButtonGroup.group: group
+                tooltip: verticalAnchor ? qsTr("Anchor to the bottom of the target.")
+                                        : qsTr("Anchor to the right of the target.")
+                onClicked: {
+                    if (!invertRelativeTargets)
+                        oppositeEdgeButtonClicked()
+                    else
+                        sameEdgeButtonClicked()
+                }
             }
         }
 
-        Label {
+        ExpandingSpacer {}
-            text: qsTr("Margin")
-            color: __defaultTextColor
-            elide: Text.ElideRight
-            Layout.minimumWidth: Math.min(60, Layout.preferredWidth + 10)
-        }
-
-        RowLayout {
-            SpinBox {
-                maximumValue: 0xffff
-                minimumValue: -0xffff
-                backendValue: anchorMargin
-                realDragRange: 5000
-            }
-
-            StudioControls.ButtonRow {
-                id: buttonRow
-                actionIndicatorVisible: false
-
-                property variant relativeTarget: anchorBackend.relativeAnchorTargetTop
-
-                onRelativeTargetChanged: {
-
-                    buttonSameEdge.checked = false
-                    buttonCenter.checked = false
-                    buttonOppositeEdge.checked = false
-
-                    if (relativeTarget == AnchorBindingProxy.SameEdge) {
-                        if (!invertRelativeTargets) {
-                            buttonSameEdge.checked = true
-                        } else {
-                            buttonOppositeEdge.checked = true
-                        }
-                    } else if (relativeTarget == AnchorBindingProxy.OppositeEdge) {
-                        if (!invertRelativeTargets) {
-                            buttonOppositeEdge.checked = true
-                        } else {
-                            buttonSameEdge.checked = true
-                        }
-                    } else if (relativeTarget == AnchorBindingProxy.Center) {
-                        buttonCenter.checked = true
-                    }
-                }
-
-                StudioControls.ButtonGroup {
-                    id: group
-                }
-
-                AbstractButton {
-                    id: buttonSameEdge
-                    buttonIcon: verticalAnchor ? StudioTheme.Constants.anchorTop : StudioTheme.Constants.anchorLeft
-                    checkable: true
-                    autoExclusive: true
-                    StudioControls.ButtonGroup.group: group
-                    tooltip: verticalAnchor ? qsTr("Anchor to the top of the target.") : qsTr("Anchor to the left of the target.")
-                    onClicked: {
-                        if (!invertRelativeTargets)
-                            sameEdgeButtonClicked();
-                        else
-                            oppositeEdgeButtonClicked();
-                    }
-                }
-                AbstractButton {
-                    id: buttonCenter
-                    buttonIcon: verticalAnchor ? StudioTheme.Constants.centerVertical : StudioTheme.Constants.centerHorizontal
-                    checkable: true
-                    autoExclusive: true
-                    StudioControls.ButtonGroup.group: group
-                    tooltip: verticalAnchor ? qsTr("Anchor to the vertical center of the target.") : qsTr("Anchor to the horizontal center of the target.")
-                    onClicked: centerButtonClicked();
-                }
-                AbstractButton {
-                    id: buttonOppositeEdge
-                    buttonIcon: verticalAnchor ? StudioTheme.Constants.anchorBottom : StudioTheme.Constants.anchorRight
-                    checkable: true
-                    autoExclusive: true
-                    StudioControls.ButtonGroup.group: group
-                    tooltip: verticalAnchor ? qsTr("Anchor to the bottom of the target.") : qsTr("Anchor to the right of the target.")
-                    onClicked: {
-                        if (!invertRelativeTargets)
-                            oppositeEdgeButtonClicked();
-                        else
-                            sameEdgeButtonClicked();
-                    }
-                }
-            }
-
-
-/*
-            ButtonRow {
-                id: buttonRow
-
-                property variant relativeTarget: anchorBackend.relativeAnchorTargetTop
-
-                onRelativeTargetChanged: {
-                    if (relativeTarget == AnchorBindingProxy.SameEdge) {
-                        if (!invertRelativeTargets) {
-                            buttonRow.initalChecked = 0
-                            buttonRow.checkedIndex = 0
-                        } else {
-                            buttonRow.initalChecked = 2
-                            buttonRow.checkedIndex = 2
-                        }
-                    } else if (relativeTarget == AnchorBindingProxy.OppositeEdge) {
-                        if (!invertRelativeTargets) {
-                            buttonRow.initalChecked = 2
-                            buttonRow.checkedIndex = 2
-                        } else {
-                            buttonRow.initalChecked = 0
-                            buttonRow.checkedIndex = 0
-                        }
-                    } else if (relativeTarget == AnchorBindingProxy.Center) {
-                        buttonRow.initalChecked = 1
-                        buttonRow.checkedIndex = 1
-                    }
-                }
-
-                exclusive: true
-                ButtonRowButton {
-                    iconSource: "image://icons/anchor-" + (verticalAnchor ? "top" : "left")
-                    tooltip: verticalAnchor ? qsTr("Anchor to the top of the target.") : qsTr("Anchor to the left of the target.")
-                    onClicked: {
-                        if (!invertRelativeTargets)
-                            sameEdgeButtonClicked();
-                        else
-                            oppositeEdgeButtonClicked();
-                    }
-                }
-
-                ButtonRowButton {
-                    iconSource: "image://icons/anchor-" + (verticalAnchor ? "vertical" : "horizontal")
-                    tooltip: verticalAnchor ? qsTr("Anchor to the vertical center of the target.") : qsTr("Anchor to the horizontal center of the target.")
-
-                    onClicked: centerButtonClicked();
-                }
-
-                ButtonRowButton {
-                    iconSource: "image://icons/anchor-" + (verticalAnchor ? "bottom" : "right")
-                    tooltip: verticalAnchor ? qsTr("Anchor to the bottom of the target.") : qsTr("Anchor to the right of the target.")
-                    onClicked: {
-                        if (!invertRelativeTargets)
-                            oppositeEdgeButtonClicked();
-                        else
-                            sameEdgeButtonClicked();
-                    }
-                }
-            }
-*/
-        }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnimatedImageSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,43 +23,49 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
-    ImageSpecifics {
+    ImageSection {
+        caption: qsTr("Animated Image")
     }
 
     Section {
+        caption: qsTr("Animation Settings")
+
         anchors.left: parent.left
         anchors.right: parent.right
-        caption: qsTr("Animated Image")
 
         SectionLayout {
-            Label {
+            PropertyLabel {
                 text: qsTr("Speed")
                 disabledState: !backendValues.speed.isAvailable
             }
+
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     sliderIndicatorVisible: true
                     backendValue: backendValues.speed
                     hasSlider: true
                     decimals: 2
                     minimumValue: 0
                     maximumValue: 100
-                    Layout.preferredWidth: 140
                     enabled: backendValues.speed.isAvailable
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Paused")
                 tooltip: qsTr("Whether the animated image is paused.")
                 disabledState: !backendValues.paused.isAvailable
@@ -67,15 +73,17 @@ Column {
 
             SecondColumnLayout {
                 CheckBox {
-                    enabled: backendValues.paused.isAvailable
                     text: backendValues.paused.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.paused
-                    implicitWidth: 180
+                    enabled: backendValues.paused.isAvailable
                 }
+
                 ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Playing")
                 tooltip: qsTr("Whether the animated image is playing.")
                 disabledState: !backendValues.playing.isAvailable
@@ -83,11 +91,13 @@ Column {
 
             SecondColumnLayout {
                 CheckBox {
-                    enabled: backendValues.playing.isAvailable
                     text: backendValues.playing.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.playing
-                    implicitWidth: 180
+                    enabled: backendValues.playing.isAvailable
                 }
+
                 ExpandingSpacer {}
             }
         }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnimationSection.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,14 +23,16 @@
 **
 ****************************************************************************/
 
+import QtQuick 2.15
 import HelperWidgets 2.0
-import QtQuick 2.1
+import QtQuick.Layouts 1.15
-import QtQuick.Layouts 1.1
+import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
 Section {
     id: section
     caption: qsTr("Animation")
+
     anchors.left: parent.left
     anchors.right: parent.right
 
@@ -38,89 +40,122 @@ Section {
     property bool showEasingCurve: false
 
     SectionLayout {
-        Label {
+        PropertyLabel {
             text: qsTr("Running")
-            tooltip: qsTr("Whether the animation is running.")
+            tooltip: qsTr("Whether the animation is running and paused.")
         }
 
-        CheckBox {
+        SecondColumnLayout {
-            text: backendValues.running.valueToString
+            CheckBox {
-            backendValue: backendValues.running
+                text: StudioTheme.Constants.play
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.running
+                enabled: backendValue.isAvailable
+                fontFamily: StudioTheme.Constants.iconFont.family
+                fontPixelSize: StudioTheme.Values.myIconFontSize
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap }
+
+            CheckBox {
+                text: StudioTheme.Constants.pause
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.paused
+                enabled: backendValue.isAvailable
+                fontFamily: StudioTheme.Constants.iconFont.family
+                fontPixelSize: StudioTheme.Values.myIconFontSize
+            }
+
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
-            text: qsTr("Paused")
-            tooltip: qsTr("Whether the animation is paused.")
-            disabledState: !backendValues.paused.isAvailable
-        }
-
-        CheckBox {
-            text: backendValues.paused.valueToString
-            backendValue: backendValues.paused
-            enabled: backendValue.isAvailable
-        }
-        Label {
             text: qsTr("Loops")
             tooltip: qsTr("Number of times the animation should play.")
         }
 
         SecondColumnLayout {
             SpinBox {
+                id: loopSpinBox
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.loops
                 maximumValue: 9999999
                 minimumValue: -1
-                backendValue: backendValues.loops
-                Layout.fillWidth: true
-                Layout.maximumWidth: 100
             }
 
-            ExpandingSpacer {
+            Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+            StudioControls.InfinityLoopIndicator {
+                id: infinityLoopIndicator
+
+                infinite: backendValues.loops.value === -1 ? true : false
+
+                onInfiniteChanged: {
+                    if (infinityLoopIndicator.infinite === true)
+                        backendValues.loops.value = -1
+                    else
+                        backendValues.loops.value = ((backendValues.loops.value < 0) ? 1 : backendValues.loops.value)
+                }
             }
+
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
-            visible: section.showDuration
             text: qsTr("Duration")
             tooltip: qsTr("Duration of the animation in milliseconds.")
+            visible: section.showDuration
         }
 
         SecondColumnLayout {
             visible: section.showDuration
+
             SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 maximumValue: 9999999
                 minimumValue: -9999999
                 backendValue: backendValues.duration
-                Layout.fillWidth: true
-                Layout.maximumWidth: 100
             }
 
-            ExpandingSpacer {
+            ExpandingSpacer {}
-            }
         }
-        Label {
+
-            text: qsTr("Always run to end")
+        PropertyLabel {
+            text: qsTr("Run to end")
             tooltip: qsTr("Runs the animation to completion when it is stopped.")
         }
 
-        CheckBox {
+        SecondColumnLayout {
-            text: backendValues.alwaysRunToEnd.valueToString
+            CheckBox {
-            backendValue: backendValues.alwaysRunToEnd
+                text: backendValues.alwaysRunToEnd.valueToString
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.alwaysRunToEnd
+            }
+
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
-            visible: section.showEasingCurve
             text: qsTr("Easing curve")
             tooltip: qsTr("Defines a custom easing curve.")
+            visible: section.showEasingCurve
         }
 
         BoolButtonRowButton {
             visible: section.showEasingCurve
             buttonIcon: StudioTheme.Constants.curveDesigner
+
             EasingCurveEditor {
                 id: easingCurveEditor
                 modelNodeBackendProperty: modelNodeBackend
             }
-            onClicked: easingCurveEditor.runDialog()
 
+            onClicked: easingCurveEditor.runDialog()
         }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnimationTargetSection.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,50 +23,67 @@
 **
 ****************************************************************************/
 
+import QtQuick 2.15
 import HelperWidgets 2.0
-import QtQuick 2.1
+import QtQuick.Layouts 1.15
-import QtQuick.Layouts 1.1
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
 Section {
     id: section
     caption: qsTr("Animation Targets")
+
     anchors.left: parent.left
     anchors.right: parent.right
 
     SectionLayout {
-        Label {
+        PropertyLabel {
             text: qsTr("Target")
             tooltip: qsTr("Target to animate the properties of.")
         }
+
         SecondColumnLayout {
             ItemFilterComboBox {
                 typeFilter: "QtQuick.QtObject"
                 validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
                 backendValue: backendValues.target
-                Layout.fillWidth: true
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
             }
 
-            ExpandingSpacer {
+            ExpandingSpacer {}
-            }
         }
 
-        Label {
+        PropertyLabel {
             text: qsTr("Property")
             tooltip: qsTr("Property to animate.")
         }
-        LineEdit {
+
-            backendValue: backendValues.property
+        SecondColumnLayout {
-            Layout.fillWidth: true
+            LineEdit {
-            showTranslateCheckBox: false
+                backendValue: backendValues.property
+                showTranslateCheckBox: false
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+            }
+
+            ExpandingSpacer {}
         }
-        Label {
+
+        PropertyLabel {
             text: qsTr("Properties")
             tooltip: qsTr("Properties to animate.")
         }
-        LineEdit {
-            backendValue: backendValues.properties
-            Layout.fillWidth: true
-            showTranslateCheckBox: false
-        }
 
+        SecondColumnLayout {
+            LineEdit {
+                backendValue: backendValues.properties
+                showTranslateCheckBox: false
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+            }
+
+            ExpandingSpacer {}
+        }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/BorderImageSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,195 +23,193 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
     Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
         caption: qsTr("Border Image")
 
+        anchors.left: parent.left
+        anchors.right: parent.right
+
         SectionLayout {
-            Label {
+            PropertyLabel { text: qsTr("Source") }
-                text: qsTr("Source")
-            }
 
             SecondColumnLayout {
                 UrlChooser {
                     backendValue: backendValues.source
-                    implicitWidth: 180
                 }
-                ExpandingSpacer {
 
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
-                text: qsTr("Border left")
+                text: qsTr("Source size")
+                disabledState: !backendValues.sourceSize.isAvailable
             }
 
             SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.sourceSize_width
+                    minimumValue: -2000
+                    maximumValue: 2000
+                    decimals: 0
+                    enabled: backendValue.isAvailable
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel { text: qsTr("W") }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
 
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.sourceSize_height
+                    minimumValue: -2000
+                    maximumValue: 2000
+                    decimals: 0
+                    enabled: backendValue.isAvailable
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel { text: qsTr("H") }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+                LinkIndicator2D {}
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Tile mode H")
+                disabledState: !backendValues.horizontalTileMode.isAvailable
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.horizontalTileMode
+                    model: ["Stretch", "Repeat", "Round"]
+                    scope: "BorderImage"
+                    enabled: backendValue.isAvailable
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Tile mode V")
+                disabledState: !backendValues.verticalTileMode.isAvailable
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    model: ["Stretch", "Repeat", "Round"]
+                    backendValue: backendValues.verticalTileMode
+                    scope: "BorderImage"
+                    enabled: backendValue.isAvailable
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel { text: qsTr("Border left") }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.border_left
                     minimumValue: -2000
                     maximumValue: 2000
                     decimals: 0
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-
-                }
             }
 
-            Label {
+            PropertyLabel { text: qsTr("Border right") }
-                text: qsTr("Border right")
-            }
 
             SecondColumnLayout {
-
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.border_right
                     minimumValue: -2000
                     maximumValue: 2000
                     decimals: 0
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-
-                }
             }
 
-            Label {
+            PropertyLabel { text: qsTr("Border top") }
-                text: qsTr("Border top")
-            }
 
             SecondColumnLayout {
-
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.border_top
                     minimumValue: -2000
                     maximumValue: 2000
                     decimals: 0
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-
-                }
             }
 
-            Label {
+            PropertyLabel { text: qsTr("Border bottom") }
-                text: qsTr("Border bottom")
-            }
 
             SecondColumnLayout {
-
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.border_bottom
                     minimumValue: -2000
                     maximumValue: 2000
                     decimals: 0
                 }
 
-                ExpandingSpacer {
-
-                }
-            }
-
-            Label {
-                text: qsTr("Horizontal tile mode")
-                disabledState: !backendValues.horizontalTileMode.isAvailable
-            }
-
-            SecondColumnLayout {
-                ComboBox {
-                    model: ["Stretch", "Repeat", "Round"]
-                    backendValue: backendValues.horizontalTileMode
-                    implicitWidth: 180
-                    Layout.fillWidth: true
-                    scope: "BorderImage"
-                    enabled: backendValue.isAvailable
-                }
-            }
-
-            Label {
-                text: qsTr("Vertical tile mode")
-                disabledState: !backendValues.verticalTileMode.isAvailable
-            }
-
-            SecondColumnLayout {
-                ComboBox {
-                    model: ["Stretch", "Repeat", "Round"]
-                    backendValue: backendValues.verticalTileMode
-                    implicitWidth: 180
-                    Layout.fillWidth: true
-                    scope: "BorderImage"
-                    enabled: backendValue.isAvailable
-                }
-            }
-
-
-            Label {
-                text: qsTr("Source size")
-                disabledState: !backendValues.sourceSize.isAvailable
-            }
-
-            SecondColumnLayout {
-                Label {
-                    text: "W"
-                    width: 12
-                    disabledStateSoft: !backendValues.sourceSize_width.isAvailable
-                }
-
-                SpinBox {
-                    backendValue: backendValues.sourceSize_width
-                    minimumValue: -2000
-                    maximumValue: 2000
-                    enabled: backendValue.isAvailable
-                    decimals: 0
-                }
-
-                Label {
-                    text: "H"
-                    width: 12
-                    disabledStateSoft: !backendValues.sourceSize_height.isAvailable
-                }
-
-                SpinBox {
-                    backendValue: backendValues.sourceSize_height
-                    minimumValue: -2000
-                    maximumValue: 2000
-                    enabled: backendValue.isAvailable
-                    decimals: 0
-                }
-
-                ExpandingSpacer {
-
-                }
-            }
-
-            Label {
-                text: qsTr("Mirror")
-                tooltip: qsTr("Specifies whether the image should be horizontally inverted.")
-                disabledState: !backendValues.mirror.isAvailable
-            }
-
-            SecondColumnLayout {
-                CheckBox {
-                    enabled: backendValues.mirror.isAvailable
-                    text: backendValues.mirror.valueToString
-                    backendValue: backendValues.mirror
-                    implicitWidth: 180
-                }
                 ExpandingSpacer {}
             }
 
-            Label {
+           PropertyLabel {
+               text: qsTr("Mirror") // TODO remove Mirror checkbox when flipping is added to a global setion
+               tooltip: qsTr("Specifies whether the image should be horizontally inverted.")
+               disabledState: !backendValues.mirror.isAvailable
+           }
+
+           SecondColumnLayout {
+               CheckBox {
+                   text: backendValues.mirror.valueToString
+                   implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                  + StudioTheme.Values.actionIndicatorWidth
+                   backendValue: backendValues.mirror
+                   enabled: backendValue.isAvailable
+               }
+
+               ExpandingSpacer {}
+           }
+
+            PropertyLabel {
                 text: qsTr("Smooth")
                 tooltip: qsTr("Specifies whether the image is smoothly filtered when scaled or transformed.")
                 disabledState: !backendValues.smooth.isAvailable
@@ -219,15 +217,17 @@ Column {
 
             SecondColumnLayout {
                 CheckBox {
-                    enabled: backendValues.smooth.isAvailable
                     text: backendValues.smooth.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.smooth
-                    implicitWidth: 180
+                    enabled: backendValue.isAvailable
                 }
+
                 ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Cache")
                 tooltip: qsTr("Specifies whether the image should be cached.")
                 disabledState: !backendValues.cache.isAvailable
@@ -235,15 +235,17 @@ Column {
 
             SecondColumnLayout {
                 CheckBox {
-                    enabled: backendValues.cache.isAvailable
                     text: backendValues.cache.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.cache
-                    implicitWidth: 180
+                    enabled: backendValue.isAvailable
                 }
+
                 ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Asynchronous")
                 tooltip: qsTr("Specifies that images on the local filesystem should be loaded asynchronously in a separate thread.")
                 disabledState: !backendValues.asynchronous.isAvailable
@@ -251,11 +253,13 @@ Column {
 
             SecondColumnLayout {
                 CheckBox {
-                    enabled: backendValues.asynchronous.isAvailable
                     text: backendValues.asynchronous.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.asynchronous
-                    implicitWidth: 180
+                    enabled: backendValue.isAvailable
                 }
+
                 ExpandingSpacer {}
             }
         }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ColorAnimationSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,41 +23,41 @@
 **
 ****************************************************************************/
 
+import QtQuick 2.15
 import HelperWidgets 2.0
-import QtQuick 2.1
+import QtQuick.Layouts 1.15
-import QtQuick.Layouts 1.1
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
     Section {
+        caption: qsTr("Color Animation")
+
         anchors.left: parent.left
         anchors.right: parent.right
-        caption: qsTr("To Color")
 
-        ColorEditor {
+        SectionLayout {
-            backendValue: backendValues.to
+            PropertyLabel { text: qsTr("From color") }
-            supportGradient: false
+
+            ColorEditor {
+                backendValue: backendValues.from
+                supportGradient: false
+            }
+
+            PropertyLabel { text: qsTr("To color") }
+
+            ColorEditor {
+                backendValue: backendValues.to
+                supportGradient: false
+            }
         }
     }
 
-    Section {
+    AnimationTargetSection {}
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("From Color")
 
-        ColorEditor {
+    AnimationSection { showEasingCurve: true }
-            backendValue: backendValues.from
-            supportGradient: false
-        }
-    }
-
-    AnimationTargetSection {
-
-    }
-
-    AnimationSection {
-        showEasingCurve: true
-    }
 }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ColumnSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,37 +23,40 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
     Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
         caption: qsTr("Column")
 
-        Label {
+        anchors.left: parent.left
-            text: qsTr("Spacing")
+        anchors.right: parent.right
-        }
 
-        SecondColumnLayout {
+        SectionLayout {
-            SpinBox {
+            PropertyLabel { text: qsTr("Spacing") }
-                backendValue: backendValues.spacing
-                minimumValue: -4000
-                maximumValue: 4000
-                decimals: 0
-            }
 
-            ExpandingSpacer {
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.spacing
+                    minimumValue: -4000
+                    maximumValue: 4000
+                    decimals: 0
+                }
+
+                ExpandingSpacer {}
             }
         }
     }
 
-    PaddingSection {
+    PaddingSection {}
-    }
 }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ComponentSection.qml

@@ -0,0 +1,265 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+import QtQuickDesignerTheme 1.0
+import QtQuick.Templates 2.15 as T
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    caption: qsTr("Component")
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    SectionLayout {
+        PropertyLabel { text: qsTr("Type") }
+
+        SecondColumnLayout {
+            z: 2
+
+            Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth }
+
+            RoundedPanel {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                height: StudioTheme.Values.height
+
+                Label {
+                    anchors.fill: parent
+                    anchors.leftMargin: StudioTheme.Values.inputHorizontalPadding
+                    anchors.topMargin: StudioTheme.Values.typeLabelVerticalShift
+                    text: backendValues.className.value
+                }
+
+                ToolTipArea {
+                    anchors.fill: parent
+                    onDoubleClicked: {
+                        typeLineEdit.text = backendValues.className.value
+                        typeLineEdit.visible = !typeLineEdit.visible
+                        typeLineEdit.forceActiveFocus()
+                    }
+                    tooltip: qsTr("Changes the type of this component.")
+                    enabled: !modelNodeBackend.multiSelection
+                }
+
+                ExpressionTextField {
+                    id: typeLineEdit
+                    z: 2
+                    completeOnlyTypes: true
+                    replaceCurrentTextByCompletion: true
+                    anchors.fill: parent
+                    visible: false
+                    fixedSize: true
+
+                    property bool blockEditingFinished: false
+
+                    onEditingFinished: {
+                        if (typeLineEdit.blockEditingFinished)
+                            return
+
+                        typeLineEdit.blockEditingFinished = true
+
+                        if (typeLineEdit.visible)
+                            changeTypeName(typeLineEdit.text.trim())
+
+                        typeLineEdit.visible = false
+                        typeLineEdit.blockEditingFinished = false
+                        typeLineEdit.completionList.model = null
+                    }
+
+                    onRejected: {
+                        typeLineEdit.visible = false
+                        typeLineEdit.completionList.model = null
+                    }
+                }
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel { text: qsTr("id") }
+
+        SecondColumnLayout {
+            Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth }
+
+            LineEdit {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                width: StudioTheme.Values.singleControlColumnWidth
+                backendValue: backendValues.id
+                placeholderText: qsTr("id")
+                text: backendValues.id.value
+                showTranslateCheckBox: false
+                showExtendedFunctionButton: false
+                enabled: !modelNodeBackend.multiSelection
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap }
+
+            Rectangle {
+                id: aliasIndicator
+                color: "transparent"
+                border.color: "transparent"
+                implicitWidth: StudioTheme.Values.iconAreaWidth // TODO dedicated value
+                implicitHeight: StudioTheme.Values.height // TODO dedicated value
+                z: 10
+
+                T.Label {
+                    id: aliasIndicatorIcon
+                    enabled: !modelNodeBackend.multiSelection && anchorBackend.hasParent
+                    anchors.fill: parent
+                    text: StudioTheme.Constants.alias
+                    color: StudioTheme.Values.themeTextColor
+                    font.family: StudioTheme.Constants.iconFont.family
+                    font.pixelSize: StudioTheme.Values.myIconFontSize + 4 // TODO
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                    states: [
+                        State {
+                            name: "default"
+                            when: !toolTipArea.containsMouse && !hasAliasExport
+                            PropertyChanges {
+                                target: aliasIndicatorIcon
+                                color: StudioTheme.Values.themeLinkIndicatorColor
+                            }
+                        },
+                        State {
+                            name: "hover"
+                            when: toolTipArea.containsMouse && !hasAliasExport
+                            PropertyChanges {
+                                target: aliasIndicatorIcon
+                                color: StudioTheme.Values.themeLinkIndicatorColorHover
+                            }
+                        },
+                        State {
+                            name: "active"
+                            when: hasAliasExport
+                            PropertyChanges {
+                                target: aliasIndicatorIcon
+                                color: StudioTheme.Values.themeLinkIndicatorColorInteraction
+                            }
+                        },
+                        State {
+                            name: "disable"
+                            when: !aliasIndicator.enabled
+                            PropertyChanges {
+                                target: aliasIndicatorIcon
+                                color: StudioTheme.Values.themeLinkIndicatorColorDisabled
+                            }
+                        }
+                    ]
+                }
+
+                ToolTipArea {
+                    id: toolTipArea
+                    enabled: !modelNodeBackend.multiSelection && anchorBackend.hasParent
+                    anchors.fill: parent
+                    onClicked: toogleExportAlias()
+                    tooltip: qsTr("Exports this component as an alias property of the root component.")
+                }
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel { text: qsTr("id Annotation") }
+
+        SecondColumnLayout {
+            enabled: !modelNodeBackend.multiSelection
+
+            Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth }
+
+            Row {
+                spacing: -StudioTheme.Values.border
+                visible: annotationEditor.hasAuxData
+
+                LineEdit {
+                    id: annotationEdit
+                    width: StudioTheme.Values.singleControlColumnWidth
+                            - editAnnotationButton.width
+                            - removeAnnotationButton.width
+                            + 2 * StudioTheme.Values.border
+                    backendValue: backendValues.customId__AUX
+                    placeholderText: qsTr("customId")
+                    text: backendValue.value
+                    showTranslateCheckBox: false
+                    showExtendedFunctionButton: false
+                    onHoveredChanged: annotationEditor.checkAux()
+                    onActiveFocusChanged: annotationEdit.z = activeFocus ? 10 : 0
+                }
+
+                StudioControls.AbstractButton {
+                    id: editAnnotationButton
+                    buttonIcon: StudioTheme.Constants.edit
+                    onClicked: annotationEditor.showWidget()
+                    onHoveredChanged: annotationEditor.checkAux()
+                }
+
+                StudioControls.AbstractButton {
+                    id: removeAnnotationButton
+                    buttonIcon: StudioTheme.Constants.closeCross
+                    onClicked: annotationEditor.removeFullAnnotation()
+                    onHoveredChanged: annotationEditor.checkAux()
+                }
+            }
+
+            StudioControls.AbstractButton {
+                id: addAnnotationButton
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                width: StudioTheme.Values.singleControlColumnWidth
+                visible: !annotationEditor.hasAuxData
+                buttonIcon: qsTr("add")
+                iconFont: StudioTheme.Constants.font
+                onClicked: annotationEditor.showWidget()
+                onHoveredChanged: annotationEditor.checkAux()
+            }
+
+            ExpandingSpacer {}
+
+            AnnotationEditor {
+                id: annotationEditor
+
+                modelNodeBackendProperty: modelNodeBackend
+
+                property bool hasAuxData: (annotationEditor.hasAnnotation || annotationEditor.hasCustomId)
+
+                onModelNodeBackendChanged: checkAux()
+                onCustomIdChanged: checkAux()
+                onAnnotationChanged: checkAux()
+
+                function checkAux() {
+                    hasAuxData = (annotationEditor.hasAnnotation || annotationEditor.hasCustomId)
+                    annotationEdit.update()
+                }
+
+                onAccepted: hideWidget()
+                onCanceled: hideWidget()
+            }
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/AbstractButtonSection.qml

@@ -0,0 +1,152 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import QtQuickDesignerTheme 1.0
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    caption: qsTr("Button content")
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    SectionLayout {
+        PropertyLabel {
+            text: qsTr("Text")
+            tooltip: qsTr("The text displayed on the button.")
+        }
+
+        SecondColumnLayout {
+            LineEdit {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                backendValue: backendValues.text
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Display")
+            tooltip: qsTr("Determines how the icon and text are displayed within the button.")
+            disabledState: !backendValues.display.isAvailable
+        }
+
+        SecondColumnLayout {
+            ComboBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                backendValue: backendValues.display
+                model: [ "IconOnly", "TextOnly", "TextBesideIcon" ]
+                scope: "AbstractButton"
+                enabled: backendValue.isAvailable
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Checkable")
+            tooltip: qsTr("Whether the button is checkable.")
+        }
+
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.checkable.valueToString
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.checkable
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Checked")
+            tooltip: qsTr("Whether the button is checked.")
+        }
+
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.checked.valueToString
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.checked
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Exclusive")
+            tooltip: qsTr("Whether the button is exclusive.")
+            disabledState: !backendValues.autoExclusive.isAvailable
+        }
+
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.autoExclusive.valueToString
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.autoExclusive
+                enabled: backendValue.isAvailable
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Auto-repeat")
+            tooltip: qsTr("Whether the button repeats pressed(), released() and clicked() signals while the button is pressed and held down.")
+        }
+
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.autoRepeat.valueToString
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.autoRepeat
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/BusyIndicatorSpecifics.qml

@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        caption: qsTr("Busy indicator")
+
+        width: parent.width
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Running")
+                tooltip: qsTr("Whether the busy indicator is currently indicating activity.")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: qsTr("live")
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.running
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    ControlSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ButtonSection.qml

@@ -0,0 +1,79 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import QtQuickDesignerTheme 1.0
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    id: section
+    caption: qsTr("Button")
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    SectionLayout {
+        PropertyLabel {
+            text: qsTr("Appearance")
+            tooltip: qsTr("Whether the button is flat and/or highlighted.")
+            disabledState: !backendValues.flat.isAvailable
+        }
+
+        SecondColumnLayout {
+            CheckBox {
+                text: qsTr("Flat")
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.flat
+                enabled: backendValue.isAvailable
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap }
+
+            CheckBox {
+                text: qsTr("Highlight")
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.highlighted
+                enabled: backendValue.isAvailable
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ButtonSpecifics.qml

@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import QtQuickDesignerTheme 1.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    ButtonSection {}
+
+    AbstractButtonSection {}
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/CheckBoxSpecifics.qml

@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    CheckSection {}
+
+    AbstractButtonSection {}
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/CheckDelegateSpecifics.qml

@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    CheckSection {}
+
+    ItemDelegateSection {}
+
+    AbstractButtonSection {}
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/CheckSection.qml

@@ -0,0 +1,84 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    caption: qsTr("Check box")
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    SectionLayout {
+        PropertyLabel {
+            text: qsTr("Check state")
+            tooltip: qsTr("The current check state.")
+        }
+
+        SecondColumnLayout {
+            ComboBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                backendValue: backendValues.checkState
+                model: [ "Unchecked", "PartiallyChecked", "Checked" ]
+                scope: "Qt"
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Tri-state")
+            tooltip: qsTr("Whether the checkbox has three states.")
+        }
+
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.tristate.valueToString
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.tristate
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ComboBoxSpecifics.qml

@@ -0,0 +1,141 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        caption: qsTr("Combo Box")
+
+        width: parent.width
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Text role")
+                tooltip: qsTr("The model role used for displaying text.")
+            }
+
+            SecondColumnLayout {
+                LineEdit {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.textRole
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Display text")
+                tooltip: qsTr("Holds the text that is displayed on the combo box button.")
+            }
+
+            SecondColumnLayout {
+                LineEdit {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.displayText
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Current")
+                tooltip: qsTr("The index of the current item.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.currentIndex
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Flat")
+                tooltip: qsTr("Whether the combo box button is flat.")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.flat.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.flat
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Editable")
+                tooltip: qsTr("Whether the combo box is editable.")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.editable.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.editable
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ContainerSection.qml

@@ -0,0 +1,66 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    caption: qsTr("Container")
+
+    width: parent.width
+
+    SectionLayout {
+        PropertyLabel {
+            text: qsTr("Current index")
+            tooltip: qsTr("The index of the current item.")
+        }
+
+        SecondColumnLayout {
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.currentIndex
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ControlSection.qml

@@ -0,0 +1,128 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    caption: qsTr("Control")
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    SectionLayout {
+        PropertyLabel {
+            text: qsTr("Enable")
+            tooltip: qsTr("Whether the control is enabled and hover events are received.")
+        }
+
+        SecondColumnLayout {
+            CheckBox {
+                text: qsTr("Control")
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.enabled
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap }
+
+            CheckBox {
+                text: qsTr("Hover")
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.hoverEnabled
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Focus policy")
+            tooltip: qsTr("Focus policy of the control.")
+        }
+
+        SecondColumnLayout {
+            ComboBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                backendValue: backendValues.focusPolicy
+                model: [ "TabFocus", "ClickFocus", "StrongFocus", "WheelFocus", "NoFocus" ]
+                scope: "Qt"
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Spacing")
+            tooltip: qsTr("Spacing between internal elements of the control.")
+        }
+
+        SecondColumnLayout {
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.spacing
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Wheel")
+            tooltip: qsTr("Whether control accepts wheel events.")
+        }
+
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.wheelEnabled.valueToString
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.wheelEnabled
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/DelayButtonSpecifics.qml

@@ -0,0 +1,84 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        caption: qsTr("Delay button")
+
+        width: parent.width
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Delay")
+                tooltip: qsTr("The delay in milliseconds.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    minimumValue: 0
+                    maximumValue: 9999999
+                    decimals: 0
+                    stepSize: 1
+                    backendValue: backendValues.delay
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel { text: "ms" }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    AbstractButtonSection {}
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/DialSpecifics.qml

@@ -0,0 +1,197 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        caption: qsTr("Dial")
+
+        width: parent.width
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Value")
+                tooltip: qsTr("The current value of the dial and whether it provides live value updates.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.value
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                CheckBox {
+                    text: qsTr("live")
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.live
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value of the dial range.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.from
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value of the dial range.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.to
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Step size")
+                tooltip: qsTr("The step size of the dial.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.stepSize
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Snap mode")
+                tooltip: qsTr("The snap mode of the dial.")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.snapMode
+                    model: [ "NoSnap", "SnapOnRelease", "SnapAlways" ]
+                    scope: "Dial"
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Input mode")
+                tooltip: qsTr("How the dial tracks movement.")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.inputMode
+                    model: [ "Circular", "Horizontal", "Vertical" ]
+                    scope: "Dial"
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Wrap")
+                tooltip: qsTr("Whether the dial wraps when dragged.")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.wrap.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.wrap
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    ControlSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/FrameSpecifics.qml

@@ -0,0 +1,57 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    PaneSection {
+        caption: qsTr("Frame")
+    }
+
+    ControlSection {}
+
+    PaddingSection {}
+
+    FontSection {
+        caption: qsTr("Font inheritance")
+        expanded: false
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/GroupBoxSpecifics.qml

@@ -0,0 +1,76 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        caption: qsTr("Group box")
+
+        width: parent.width
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Title")
+                tooltip: qsTr("The title of the group box.")
+            }
+
+            SecondColumnLayout {
+                LineEdit {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.title
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    PaneSection {}
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/InsetSection.qml

@@ -0,0 +1,145 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    caption: qsTr("Inset")
+
+    width: parent.width
+
+    SectionLayout {
+        PropertyLabel { text: qsTr("Vertical") }
+
+        SecondColumnLayout {
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    maximumValue: 10000
+                    minimumValue: -10000
+                    realDragRange: 5000
+                    decimals: 0
+                    backendValue: backendValues.topInset
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                MultiIconLabel {
+                    icon0: StudioTheme.Constants.paddingFrame
+                    icon1: StudioTheme.Constants.paddingEdge
+                    tooltip: qsTr("Top inset for the background.")
+                    //disabledStateSoft: !backendValues.topPadding.isAvailable
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    maximumValue: 10000
+                    minimumValue: -10000
+                    realDragRange: 5000
+                    decimals: 0
+                    backendValue: backendValues.bottomInset
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                MultiIconLabel {
+                    icon0: StudioTheme.Constants.paddingFrame
+                    icon1: StudioTheme.Constants.paddingEdge
+                    rotation: 180
+                    tooltip: qsTr("Bottom inset for the background.")
+                    //disabledStateSoft: !backendValues.bottomPadding.isAvailable
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+
+        PropertyLabel { text: qsTr("Horizontal") }
+
+        SecondColumnLayout {
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                maximumValue: 10000
+                minimumValue: -10000
+                realDragRange: 5000
+                decimals: 0
+                backendValue: backendValues.leftInset
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+            MultiIconLabel {
+                icon0: StudioTheme.Constants.paddingFrame
+                icon1: StudioTheme.Constants.paddingEdge
+                rotation: 270
+                tooltip: qsTr("Left inset for the background.")
+                //disabledStateSoft: !backendValues.leftPadding.isAvailable
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                maximumValue: 10000
+                minimumValue: -10000
+                realDragRange: 5000
+                decimals: 0
+                backendValue: backendValues.rightInset
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+            MultiIconLabel {
+                icon0: StudioTheme.Constants.paddingFrame
+                icon1: StudioTheme.Constants.paddingEdge
+                rotation: 90
+                tooltip: qsTr("Right inset for the background.")
+                //disabledStateSoft: !backendValues.rightPadding.isAvailable
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ItemDelegateSection.qml

@@ -0,0 +1,67 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    id: section
+    caption: qsTr("Item delegate")
+
+    anchors.left: parent.left
+    anchors.right: parent.right
+
+    SectionLayout {
+        PropertyLabel {
+            text: qsTr("Highlighted")
+            tooltip: qsTr("Whether the delegate is highlighted.")
+        }
+
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.highlighted.valueToString
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.highlighted
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ItemDelegateSpecifics.qml

@@ -0,0 +1,54 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    ItemDelegateSection {}
+
+    AbstractButtonSection {}
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/LabelSpecifics.qml

@@ -0,0 +1,60 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    CharacterSection {
+        showVerticalAlignment: true
+    }
+
+    TextExtrasSection {
+        width: parent.width
+        showWrapMode: true
+        showFormatProperty: true
+    }
+
+    FontExtrasSection {}
+
+    PaddingSection {}
+
+    InsetSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/PageSpecifics.qml

@@ -0,0 +1,119 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        caption: qsTr("Page")
+
+        width: parent.width
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Title")
+                tooltip: qsTr("Title of the page.")
+            }
+
+            SecondColumnLayout {
+                LineEdit {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.title
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Content size")
+                tooltip: qsTr("Content width and height used for calculating the total implicit size.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentWidth
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    text: qsTr("W")
+                    tooltip: qsTr("Content width used for calculating the total implicit width.")
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentHeight
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    text: qsTr("H")
+                    tooltip: qsTr("Content height used for calculating the total implicit height.")
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/PaneSection.qml

@@ -0,0 +1,93 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    caption: qsTr("Pane")
+
+    width: parent.width
+
+    SectionLayout {
+        PropertyLabel {
+            text: qsTr("Content size")
+            tooltip: qsTr("Content width and height used for calculating the total implicit size.")
+        }
+
+        SecondColumnLayout {
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.contentWidth
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+            ControlLabel {
+                text: qsTr("W")
+                tooltip: qsTr("Content width used for calculating the total implicit width.")
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                maximumValue: 9999999
+                minimumValue: -9999999
+                decimals: 0
+                backendValue: backendValues.contentHeight
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+            ControlLabel {
+                text: qsTr("H")
+                tooltip: qsTr("Content height used for calculating the total implicit height.")
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/PaneSpecifics.qml

@@ -0,0 +1,55 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    PaneSection {}
+
+    ControlSection {}
+
+    PaddingSection {}
+
+    FontSection {
+        caption: qsTr("Font inheritance")
+        expanded: false
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ProgressBarSpecifics.qml

@@ -0,0 +1,132 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        caption: qsTr("Progress bar")
+
+        width: parent.width
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Value")
+                tooltip: qsTr("The current value of the progress.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.value
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value for the progress.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.from
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value for the progress.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.to
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Indeterminate")
+                tooltip: qsTr("Whether the progress is indeterminate.")
+                disabledState: !backendValues.indeterminate.isAvailable
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.indeterminate.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidt
+                    backendValue: backendValues.indeterminate
+                    enabled: backendValue.isAvailable
+                }
+            }
+        }
+    }
+
+    ControlSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/RadioButtonSpecifics.qml

@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    AbstractButtonSection {}
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/RadioDelegateSpecifics.qml

@@ -0,0 +1,56 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    ItemDelegateSection {
+        caption: qsTr("Radio delegate")
+    }
+
+    AbstractButtonSection {}
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/RangeSliderSpecifics.qml

@@ -0,0 +1,216 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        caption: qsTr("Range slider")
+
+        width: parent.width
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Value 1")
+                tooltip: qsTr("The value of the first range slider handle.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                + StudioTheme.Values.actionIndicatorWidth
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.first_value
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap }
+
+                CheckBox {
+                    text: qsTr("live")
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.live
+                    tooltip: qsTr("Whether the range slider provides live value updates.")
+                }
+
+                ExpandingSpacer {}
+            }
+
+
+            PropertyLabel {
+                text: qsTr("Value 2")
+                tooltip: qsTr("The value of the second range slider handle.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                + StudioTheme.Values.actionIndicatorWidth
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.second_value
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value of the range slider range.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.from
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value of the range slider range.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.to
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Step size")
+                tooltip: qsTr("The step size of the range slider.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.stepSize
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Drag threshold")
+                tooltip: qsTr("The threshold (in logical pixels) at which a Drag event will be initiated.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    minimumValue: 0
+                    maximumValue: 10000
+                    decimals: 0
+                    backendValue: backendValues.touchDragThreshold
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Snap mode")
+                tooltip: qsTr("The snap mode of the range slider.")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.snapMode
+                    model: [ "NoSnap", "SnapOnRelease", "SnapAlways" ]
+                    scope: "RangeSlider"
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Orientation")
+                tooltip: qsTr("The orientation of the range slider.")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.orientation
+                    model: [ "Horizontal", "Vertical" ]
+                    scope: "Qt"
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    ControlSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/RoundButtonSpecifics.qml

@@ -0,0 +1,105 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Round button")
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Appearance")
+                tooltip: qsTr("Whether the button is flat and/or highlighted.")
+                disabledState: !backendValues.flat.isAvailable
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: qsTr("Flat")
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.flat
+                    enabled: backendValue.isAvailable
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap }
+
+                CheckBox {
+                    text: qsTr("Highlight")
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.highlighted
+                    enabled: backendValue.isAvailable
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Radius")
+                tooltip: qsTr("Radius of the button.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    minimumValue: 0
+                    maximumValue: 10000
+                    decimals: 0
+                    backendValue: backendValues.radius
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    AbstractButtonSection {}
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ScrollViewSpecifics.qml

@@ -0,0 +1,102 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Scroll view")
+
+        SectionLayout {
+            PropertyLabel { text: qsTr("Content size") }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.contentWidth
+                    minimumValue: 0
+                    maximumValue: 10000
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    text: qsTr("W")
+                    tooltip: qsTr("Content width used for calculating the total implicit width.")
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.contentHeight
+                    minimumValue: 0
+                    maximumValue: 10000
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    text: qsTr("H")
+                    tooltip: qsTr("Content height used for calculating the total implicit height.")
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+                LinkIndicator2D {}
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    ControlSection {}
+
+    PaddingSection {}
+
+    FontSection {
+        caption: qsTr("Font inheritance")
+        expanded: false
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SliderSpecifics.qml

@@ -0,0 +1,195 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Slider")
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Value")
+                tooltip: qsTr("The current value of the slider.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.value
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap }
+
+                CheckBox {
+                    text: qsTr("live")
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.live
+                    tooltip: qsTr("Whether the slider provides live value updates.")
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value of the slider range.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.from
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value of the slider range.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.to
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Step size")
+                tooltip: qsTr("The step size of the slider.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.stepSize
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Drag threshold")
+                tooltip: qsTr("The threshold (in logical pixels) at which a Drag event will be initiated.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    minimumValue: 0
+                    maximumValue: 10000
+                    decimals: 0
+                    backendValue: backendValues.touchDragThreshold
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Snap mode")
+                tooltip: qsTr("The snap mode of the slider.")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.snapMode
+                    model: [ "NoSnap", "SnapOnRelease", "SnapAlways" ]
+                    scope: "RangeSlider"
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Orientation")
+                tooltip: qsTr("The orientation of the slider.")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.orientation
+                    model: [ "Horizontal", "Vertical" ]
+                    scope: "Qt"
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    ControlSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SpinBoxSpecifics.qml

@@ -0,0 +1,161 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Spin box")
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Value")
+                tooltip: qsTr("The current value of the spinbox.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    minimumValue: Math.min(backendValues.from.value, backendValues.to.value)
+                    maximumValue: Math.max(backendValues.from.value, backendValues.to.value)
+                    decimals: 2
+                    backendValue: backendValues.value
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("From")
+                tooltip: qsTr("The starting value of the spinbox range.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    backendValue: backendValues.from
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("To")
+                tooltip: qsTr("The ending value of the spinbox range.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    backendValue: backendValues.to
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Step size")
+                tooltip: qsTr("The step size of the spinbox.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 2
+                    backendValue: backendValues.stepSize
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Editable")
+                tooltip: qsTr("Whether the spinbox is editable.")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    text: backendValues.editable.valueToString
+                    backendValue: backendValues.editable
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Wrap")
+                tooltip: qsTr("Whether the spinbox wraps.")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    text: backendValues.wrap.valueToString
+                    backendValue: backendValues.wrap
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/StackViewSpecifics.qml

@@ -0,0 +1,53 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    ControlSection {}
+
+    PaddingSection {}
+
+    FontSection {
+        caption: qsTr("Font inheritance")
+        expanded: false
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SwipeDelegateSpecifics.qml

@@ -0,0 +1,54 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    ItemDelegateSection {}
+
+    AbstractButtonSection {}
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SwipeViewSpecifics.qml

@@ -0,0 +1,96 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Swipe view")
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Interactive")
+                tooltip: qsTr("Whether the view is interactive.")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.interactive.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.interactive
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Orientation")
+                tooltip: qsTr("Orientation of the view.")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.orientation
+                    model: [ "Horizontal", "Vertical" ]
+                    scope: "Qt"
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    ContainerSection {}
+
+    ControlSection {}
+
+    PaddingSection {}
+
+    FontSection {
+        caption: qsTr("Font inheritance")
+        expanded: false
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SwitchDelegateSpecifics.qml

@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    ItemDelegateSection {}
+
+    AbstractButtonSection {}
+
+    ControlSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SwitchSpecifics.qml

@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    AbstractButtonSection {}
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TabBarSpecifics.qml

@@ -0,0 +1,123 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Tab bar")
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Position")
+                tooltip: qsTr("Position of the tabbar.")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.position
+                    model: [ "Header", "Footer" ]
+                    scope: "TabBar"
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Content size")
+                tooltip: qsTr("Content width and height used for calculating the total implicit size.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentWidth
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    text: qsTr("W")
+                    tooltip: qsTr("Content width used for calculating the total implicit width.")
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.contentHeight
+                }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                ControlLabel {
+                    text: qsTr("H")
+                    tooltip: qsTr("Content height used for calculating the total implicit height.")
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    ContainerSection {}
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TabButtonSpecifics.qml

@@ -0,0 +1,52 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    AbstractButtonSection {}
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TextAreaSpecifics.qml

@@ -0,0 +1,62 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    TextSection {}
+
+    CharacterSection {
+        showVerticalAlignment: true
+    }
+
+    TextExtrasSection {
+        showWrapMode: true
+        showFormatProperty: true
+    }
+
+    FontExtrasSection {}
+
+    PaddingSection {}
+
+    InsetSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TextFieldSpecifics.qml

@@ -0,0 +1,59 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    TextSection {
+        caption: qsTr("Text field")
+    }
+
+    CharacterSection {}
+
+    TextExtrasSection {}
+
+    FontExtrasSection {}
+
+    PaddingSection {}
+
+    InsetSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TextSection.qml

@@ -0,0 +1,89 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    width: parent.width
+    caption: qsTr("Text area")
+
+    SectionLayout {
+        PropertyLabel {
+            text: qsTr("Placeholder text")
+            tooltip: qsTr("Placeholder text displayed when the editor is empty.")
+        }
+
+        SecondColumnLayout {
+            LineEdit {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                backendValue: backendValues.placeholderText
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Placeholder color")
+            tooltip: qsTr("Placeholder text color")
+        }
+
+        ColorEditor {
+            backendValue: backendValues.placeholderTextColor
+            supportGradient: false
+        }
+
+        PropertyLabel {
+            text: qsTr("Hover")
+            tooltip: qsTr("Whether text area accepts hover events.")
+        }
+
+        SecondColumnLayout {
+            CheckBox {
+                text: backendValues.hoverEnabled.valueToString
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.hoverEnabled
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ToolBarSpecifics.qml

@@ -0,0 +1,80 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Tool bar")
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Position")
+                tooltip: qsTr("Position of the toolbar.")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.position
+                    model: [ "Header", "Footer" ]
+                    scope: "ToolBar"
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    PaneSection {}
+
+    ControlSection {}
+
+    PaddingSection {}
+
+    FontSection {
+        caption: qsTr("Font inheritance")
+        expanded: false
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ToolButtonSpecifics.qml

@@ -0,0 +1,54 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    ButtonSection {}
+
+    AbstractButtonSection {}
+
+    ControlSection { }
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ToolSeparatorSpecifics.qml

@@ -0,0 +1,73 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Tool separator")
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Orientation")
+                tooltip: qsTr("The orientation of the separator.")
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.orientation
+                    model: [ "Horizontal", "Vertical" ]
+                    scope: "Qt"
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    ControlSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TumblerSpecifics.qml

@@ -0,0 +1,109 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: http://www.qt.io/licensing/
+**
+** This file is part of the Qt Quick Controls 2 module of the Qt Toolkit.
+**
+** $QT_BEGIN_LICENSE:LGPL3$
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see http://www.qt.io/terms-conditions. For further
+** information use the contact form at http://www.qt.io/contact-us.
+**
+** GNU Lesser General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU Lesser
+** General Public License version 3 as published by the Free Software
+** Foundation and appearing in the file LICENSE.LGPLv3 included in the
+** packaging of this file. Please review the following information to
+** ensure the GNU Lesser General Public License version 3 requirements
+** will be met: https://www.gnu.org/licenses/lgpl.html.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 2.0 or later as published by the Free
+** Software Foundation and appearing in the file LICENSE.GPL included in
+** the packaging of this file. Please review the following information to
+** ensure the GNU General Public License version 2.0 requirements will be
+** met: http://www.gnu.org/licenses/gpl-2.0.html.
+**
+** $QT_END_LICENSE$
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import HelperWidgets 2.0
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
+Column {
+    width: parent.width
+
+    Section {
+        width: parent.width
+        caption: qsTr("Tumbler")
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Visible count")
+                tooltip: qsTr("The count of visible items.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.visibleItemCount
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Current index")
+                tooltip: qsTr("The index of the current item.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    maximumValue: 9999999
+                    minimumValue: -9999999
+                    decimals: 0
+                    backendValue: backendValues.currentIndex
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Wrap")
+                tooltip: qsTr("Whether the tumbler wrap.")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.wrap.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.wrap
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    ControlSection {}
+
+    FontSection {}
+
+    PaddingSection {}
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/FlickableSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,16 +23,15 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import QtQuick.Layouts 1.15
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
-    FlickableSection {
+    FlickableSection {}
-        anchors.left: parent.left
+
-        anchors.right: parent.right
+    FlickableGeometrySection {}
-    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/FlowSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,67 +23,69 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
     Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
         caption: qsTr("Flow")
 
+        anchors.left: parent.left
+        anchors.right: parent.right
+
         SectionLayout {
-            Label {
+            PropertyLabel { text: qsTr("Spacing") }
-                text: qsTr("Flow")
-            }
-
-            SecondColumnLayout {
-                ComboBox {
-                    scope: "Flow"
-                    model: ["LeftToRight", "TopToBottom"]
-                    backendValue: backendValues.flow
-                    Layout.fillWidth: true
-                }
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
-                text: qsTr("Layout direction")
-            }
-
-            SecondColumnLayout {
-                ComboBox {
-                    scope: "Qt"
-                    model: ["LeftToRight", "RightToLeft"]
-                    backendValue: backendValues.layoutDirection
-                    Layout.fillWidth: true
-                }
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
-                text: qsTr("Spacing")
-            }
 
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.spacing
                     minimumValue: -4000
                     maximumValue: 4000
                     decimals: 0
                 }
-                ExpandingSpacer {
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel { text: qsTr("Flow") }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.flow
+                    model: ["LeftToRight", "TopToBottom"]
+                    scope: "Flow"
                 }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel { text: qsTr("Layout direction") }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.layoutDirection
+                    model: ["LeftToRight", "RightToLeft"]
+                    scope: "Qt"
+                }
+
+                ExpandingSpacer {}
             }
         }
     }
 
-    PaddingSection {
+    PaddingSection {}
-    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/GeometrySection.qml

@@ -23,100 +23,186 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Section {
-    caption: qsTr("Geometry")
+    caption: qsTr("Geometry - 2d")
 
     anchors.left: parent.left
     anchors.right: parent.right
 
     SectionLayout {
-        rowSpacing: 4
+        PropertyLabel { text: qsTr("Position") }
-        rows: 2
-
-        Label {
-            text: qsTr("Position")
-        }
 
         SecondColumnLayout {
-
-            Label {
-                text: "X"
-                width: 12
-            }
-
             SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.x
                 maximumValue: 0xffff
                 minimumValue: -0xffff
                 decimals: 0
-                realDragRange: 5000
             }
 
-            Item {
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-                width: 4
-                height: 4
-            }
 
-            Label {
+            ControlLabel { text: "X" }
-                text: "Y"
+
-                width: 12
+            Spacer { implicitWidth: StudioTheme.Values.controlGap }
-            }
 
             SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.y
                 maximumValue: 0xffff
                 minimumValue: -0xffff
                 decimals: 0
-                realDragRange: 5000
             }
-            ExpandingSpacer {
 
-            }
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-        }
+
-        Label {
+            ControlLabel { text: "Y" }
-            text: qsTr("Size")
+
+            Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+            LinkIndicator2D {}
+
+            ExpandingSpacer {}
         }
 
+        PropertyLabel { text: qsTr("Size") }
+
         SecondColumnLayout {
-            Layout.fillWidth: true
-
-            Label {
-                text: "W"
-                width: 12
-            }
-
             SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.width
                 maximumValue: 0xffff
                 minimumValue: 0
                 decimals: 0
-                realDragRange: 5000
             }
 
-            Item {
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-                width: 4
-                height: 4
-            }
 
-            Label {
+            ControlLabel { text: qsTr("W") }
-                text: "H"
+
-                width: 12
+            Spacer { implicitWidth: StudioTheme.Values.controlGap }
-            }
 
             SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.height
                 maximumValue: 0xffff
                 minimumValue: 0
                 decimals: 0
-                realDragRange: 5000
             }
-            ExpandingSpacer {
 
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+            ControlLabel { text: qsTr("H") }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+            LinkIndicator2D {}
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel { text: qsTr("Rotation") }
+
+        SecondColumnLayout {
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.rotation
+                decimals: 2
+                minimumValue: -360
+                maximumValue: 360
+                enabled: backendValues.rotation.isAvailable
             }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+            ControlLabel { text: "°" }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+            StudioControls.ButtonRow {
+                actionIndicatorVisible: true
+
+                StudioControls.ButtonGroup { id: mirrorGroup }
+
+                StudioControls.AbstractButton {
+                    id: mirrorVertical
+                    buttonIcon: StudioTheme.Constants.mirror
+                    checkable: true
+                    autoExclusive: true
+                    StudioControls.ButtonGroup.group: mirrorGroup
+                    checked: true
+                }
+
+                StudioControls.AbstractButton {
+                    id: mirrorHorizontal
+                    buttonIcon: StudioTheme.Constants.mirror
+                    checkable: true
+                    autoExclusive: true
+                    StudioControls.ButtonGroup.group: mirrorGroup
+                    iconRotation: 90
+                }
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel { text: qsTr("Scale") }
+
+        SecondColumnLayout {
+            SpinBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                sliderIndicatorVisible: true
+                backendValue: backendValues.scale
+                decimals: 2
+                stepSize: 0.1
+                minimumValue: -10
+                maximumValue: 10
+                enabled: backendValues.scale.isAvailable
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+            ControlLabel { text: "%" }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel { text: qsTr("Z Stack") }
+
+        SecondColumnLayout {
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.z
+                minimumValue: -100
+                maximumValue: 100
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel { text: qsTr("Origin") }
+
+        SecondColumnLayout {
+            OriginControl {
+                backendValue: backendValues.transformOrigin
+                enabled: backendValues.transformOrigin.isAvailable
+            }
+
+            ExpandingSpacer {}
         }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/GridSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,120 +23,126 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
     Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
         caption: qsTr("Grid")
 
+        anchors.left: parent.left
+        anchors.right: parent.right
 
         SectionLayout {
-
+            PropertyLabel { text: qsTr("Columns") }
-            Label {
-                text: qsTr("Columns")
-            }
 
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.columns
                     minimumValue: 0
                     maximumValue: 2000
                     decimals: 0
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-                }
             }
 
-            Label {
+            PropertyLabel { text: qsTr("Rows") }
-                text: qsTr("Rows")
-            }
 
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.rows
                     minimumValue: 0
                     maximumValue: 2000
                     decimals: 0
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-                }
             }
 
-            Label {
+            PropertyLabel { text: qsTr("Spacing") }
-                text: qsTr("Flow")
-            }
-
-            SecondColumnLayout {
-                ComboBox {
-                    model: ["LeftToRight", "TopToBottom"]
-                    backendValue: backendValues.flow
-                    Layout.fillWidth: true
-                    scope: "Grid"
-                }
-            }
-
-            Label {
-                text: qsTr("Layout direction")
-            }
-
-            SecondColumnLayout {
-                ComboBox {
-                    model: ["LeftToRight", "RightToLeft"]
-                    backendValue: backendValues.layoutDirection
-                    Layout.fillWidth: true
-                    scope: "Qt"
-                }
-            }
-
-            Label {
-                text: qsTr("Horizontal component alignment")
-            }
-
-            SecondColumnLayout {
-                ComboBox {
-                    model: ["AlignLeft", "AlignRight" ,"AlignHCenter"]
-                    backendValue: backendValues.horizontalItemAlignment
-                    Layout.fillWidth: true
-                    scope: "Grid"
-                }
-            }
-
-            Label {
-                text: qsTr("Vertical component alignment")
-            }
-
-            SecondColumnLayout {
-                ComboBox {
-                    model: ["AlignTop", "AlignBottom" ,"AlignVCenter"]
-                    backendValue: backendValues.verticalItemAlignment
-                    Layout.fillWidth: true
-                    scope: "Grid"
-                }
-            }
-
-            Label {
-                text: qsTr("Spacing")
-            }
 
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.spacing
                     minimumValue: -4000
                     maximumValue: 4000
                     decimals: 0
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel { text: qsTr("Flow") }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.flow
+                    model: ["LeftToRight", "TopToBottom"]
+                    scope: "Grid"
                 }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel { text: qsTr("Layout direction") }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.layoutDirection
+                    model: ["LeftToRight", "RightToLeft"]
+                    scope: "Qt"
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel { text: qsTr("Alignment H") }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.horizontalItemAlignment
+                    model: ["AlignLeft", "AlignRight" ,"AlignHCenter"]
+                    scope: "Grid"
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel { text: qsTr("Alignment V") }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.verticalItemAlignment
+                    model: ["AlignTop", "AlignBottom" ,"AlignVCenter"]
+                    scope: "Grid"
+                }
+
+                ExpandingSpacer {}
             }
         }
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/GridViewSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,9 +23,11 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import QtQuick.Layouts 1.15
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
@@ -37,213 +39,230 @@ Column {
     }
 
     Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
         caption: qsTr("Grid View")
 
+        anchors.left: parent.left
+        anchors.right: parent.right
+
         SectionLayout {
-
+            PropertyLabel { text: qsTr("Cell size") }
-            Label {
-                text: qsTr("Cache")
-                tooltip: qsTr("Cache buffer")
-            }
-
-            SectionLayout {
-                SpinBox {
-                    backendValue: backendValues.cacheBuffer
-                    minimumValue: 0
-                    maximumValue: 1000
-                    decimals: 0
-                }
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
-                text: qsTr("Cell size")
-            }
 
             SecondColumnLayout {
-                Label {
-                    text: "W"
-                    width: 12
-                }
                 SpinBox {
-                    backendValue: backendValues.cellWidth
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.contentWidth
                     minimumValue: 0
-                    maximumValue: 1000
+                    maximumValue: 10000
-                    decimals: 0
                 }
 
-                Item {
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-                    width: 4
+
-                    height: 4
+                ControlLabel { text: qsTr("W") }
+
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.contentHeight
+                    minimumValue: 0
+                    maximumValue: 10000
                 }
 
-                Label {
+                Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-                    text: "H"
+
-                    width: 12
+                ControlLabel { text: qsTr("H") }
-                }
+
-                SpinBox {
+                Spacer { implicitWidth: StudioTheme.Values.controlGap }
-                    backendValue: backendValues.cellHeight
+
-                    minimumValue: 0
+                LinkIndicator2D {}
-                    maximumValue: 1000
+
-                    decimals: 0
+                ExpandingSpacer {}
-                }
-                ExpandingSpacer {
-                }
             }
 
-            Label {
+            PropertyLabel { text: qsTr("Flow") }
-                text: qsTr("Flow")
-            }
 
             SecondColumnLayout {
                 ComboBox {
-                    scope: "GridView"
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
-                    model: ["FlowLeftToRight", "FlowTopToBottom"]
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     backendValue: backendValues.flow
-                    Layout.fillWidth: true
+                    model: ["FlowLeftToRight", "FlowTopToBottom"]
-                }
+                    scope: "GridView"
-                ExpandingSpacer {
                 }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel { text: qsTr("Layout direction") }
-                text: qsTr("Navigation wraps")
-                tooltip: qsTr("Whether the grid wraps key navigation.")
-            }
-
-            SectionLayout {
-                CheckBox {
-                    Layout.fillWidth: true
-                    backendValue: backendValues.keyNavigationWraps
-                    text: backendValues.keyNavigationWraps.valueToString
-                }
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
-                text: qsTr("Layout direction")
-            }
 
             SecondColumnLayout {
                 ComboBox {
-                    scope: "Qt"
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
-                    model: ["LeftToRight", "RightToLeft"]
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     backendValue: backendValues.layoutDirection
-                    Layout.fillWidth: true
+                    model: ["LeftToRight", "RightToLeft"]
-                }
+                    scope: "Qt"
-                ExpandingSpacer {
                 }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Snap mode")
                 tooltip: qsTr("Determines how the view scrolling will settle following a drag or flick.")
             }
 
             SecondColumnLayout {
                 ComboBox {
-                    scope: "GridView"
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
-                    model: ["NoSnap", "SnapToRow", "SnapOneRow"]
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     backendValue: backendValues.snapMode
-                    Layout.fillWidth: true
+                    model: ["NoSnap", "SnapToRow", "SnapOneRow"]
-                }
+                    scope: "GridView"
-                ExpandingSpacer {
                 }
+
+                ExpandingSpacer {}
             }
 
+            PropertyLabel {
+                text: qsTr("Cache")
+                tooltip: qsTr("Cache buffer")
+                disabledState: !backendValues.cacheBuffer.isAvailable
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.cacheBuffer
+                    minimumValue: 0
+                    maximumValue: 1000
+                    decimals: 0
+                    enabled: backendValue.isAvailable
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Navigation wraps")
+                tooltip: qsTr("Whether the grid wraps key navigation.")
+                disabledState: !backendValues.keyNavigationWraps.isAvailable
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.keyNavigationWraps.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.keyNavigationWraps
+                    enabled: backendValue.isAvailable
+                }
+
+                ExpandingSpacer {}
+            }
         }
     }
 
     Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
         caption: qsTr("Grid View Highlight")
 
-        SectionLayout {
+        anchors.left: parent.left
+        anchors.right: parent.right
 
-            Label {
+        SectionLayout {
+            PropertyLabel {
                 text: qsTr("Range")
                 tooltip: qsTr("Highlight range")
             }
 
             SecondColumnLayout {
                 ComboBox {
-                    scope: "GridView"
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
-                    model: ["NoHighlightRange", "ApplyRange", "StrictlyEnforceRange"]
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     backendValue: backendValues.highlightRangeMode
-                    Layout.fillWidth: true
+                    model: ["NoHighlightRange", "ApplyRange", "StrictlyEnforceRange"]
-                }
+                    scope: "GridView"
-                ExpandingSpacer {
                 }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Move duration")
                 tooltip: qsTr("Move animation duration of the highlight delegate.")
             }
 
             SectionLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.highlightMoveDuration
                     minimumValue: 0
                     maximumValue: 1000
                     decimals: 0
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Preferred begin")
                 tooltip: qsTr("Preferred highlight begin - must be smaller than Preferred end.")
             }
 
             SectionLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.preferredHighlightBegin
                     minimumValue: 0
                     maximumValue: 1000
                     decimals: 0
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Preferred end")
                 tooltip: qsTr("Preferred highlight end - must be larger than Preferred begin.")
             }
 
             SectionLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.preferredHighlightEnd
                     minimumValue: 0
                     maximumValue: 1000
                     decimals: 0
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Follows current")
                 tooltip: qsTr("Whether the highlight is managed by the view.")
             }
 
             SectionLayout {
                 CheckBox {
-                    Layout.fillWidth: true
-                    backendValue: backendValues.highlightFollowsCurrentItem
                     text: backendValues.highlightFollowsCurrentItem.valueToString
+                    backendValue: backendValues.highlightFollowsCurrentItem
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
-                ExpandingSpacer {
-                }
-            }
 
+                ExpandingSpacer {}
+            }
         }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ImageSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,223 +23,15 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
-    Section {
+    ImageSection {}
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Image")
-
-        SectionLayout {
-            Label {
-                text: qsTr("Source")
-            }
-
-            SecondColumnLayout {
-                UrlChooser {
-                    Layout.fillWidth: true
-                    backendValue: backendValues.source
-                }
-
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
-                text: qsTr("Fill mode")
-            }
-
-            SecondColumnLayout {
-                ComboBox {
-                    scope: "Image"
-                    model: ["Stretch", "PreserveAspectFit", "PreserveAspectCrop", "Tile", "TileVertically", "TileHorizontally", "Pad"]
-                    backendValue: backendValues.fillMode
-                    implicitWidth: 180
-                    Layout.fillWidth: true
-                }
-
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
-                text: qsTr("Source size")
-                disabledState: !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 {
-                }
-            }
-
-            Label {
-                text: qsTr("Horizontal alignment")
-            }
-
-            SecondColumnLayout {
-                ComboBox {
-                    scope: "Image"
-                    model: ["AlignLeft", "AlignRight", "AlignHCenter"]
-                    backendValue: backendValues.horizontalAlignment
-                    implicitWidth: 180
-                    Layout.fillWidth: true
-                }
-
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
-                text: qsTr("Vertical alignment")
-            }
-
-            SecondColumnLayout {
-                ComboBox {
-                    scope: "Image"
-                    model: ["AlignTop", "AlignBottom", "AlignVCenter"]
-                    backendValue: backendValues.verticalAlignment
-                    implicitWidth: 180
-                    Layout.fillWidth: true
-                }
-
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
-                text: qsTr("Asynchronous")
-                tooltip: qsTr("Loads images on the local filesystem asynchronously in a separate thread.")
-                disabledState: !backendValues.asynchronous.isAvailable
-            }
-
-            SecondColumnLayout {
-                CheckBox {
-                    enabled: backendValues.asynchronous.isAvailable
-                    text: backendValues.asynchronous.valueToString
-                    backendValue: backendValues.asynchronous
-                    implicitWidth: 180
-                }
-                ExpandingSpacer {}
-            }
-
-            Label {
-                text: qsTr("Auto transform")
-                tooltip: qsTr("Automatically applies image transformation metadata such as EXIF orientation.")
-                disabledState: !backendValues.autoTransform.isAvailable
-            }
-
-            SecondColumnLayout {
-                CheckBox {
-                    enabled: backendValues.autoTransform.isAvailable
-                    text: backendValues.autoTransform.valueToString
-                    backendValue: backendValues.autoTransform
-                    implicitWidth: 180
-                }
-                ExpandingSpacer {}
-            }
-
-            Label {
-                text: qsTr("Cache")
-                tooltip: qsTr("Caches the image.")
-                disabledState: !backendValues.cache.isAvailable
-            }
-
-            SecondColumnLayout {
-                CheckBox {
-                    enabled: backendValues.cache.isAvailable
-                    text: backendValues.cache.valueToString
-                    backendValue: backendValues.cache
-                    implicitWidth: 180
-                }
-                ExpandingSpacer {}
-            }
-
-            Label {
-                text: qsTr("Mipmap")
-                tooltip: qsTr("Uses mipmap filtering when the image is scaled or transformed.")
-                disabledState: !backendValues.mipmap.isAvailable
-            }
-
-            SecondColumnLayout {
-                CheckBox {
-                    enabled: backendValues.mipmap.isAvailable
-                    text: backendValues.mipmap.valueToString
-                    backendValue: backendValues.mipmap
-                    implicitWidth: 180
-                }
-                ExpandingSpacer {}
-            }
-
-            Label {
-                text: qsTr("Mirror")
-                tooltip: qsTr("Inverts the image horizontally.")
-                disabledState: !backendValues.mirror.isAvailable
-            }
-
-            SecondColumnLayout {
-                CheckBox {
-                    enabled: backendValues.mirror.isAvailable
-                    text: backendValues.mirror.valueToString
-                    backendValue: backendValues.mirror
-                    implicitWidth: 180
-                }
-                ExpandingSpacer {}
-            }
-
-            Label {
-                text: qsTr("Smooth")
-                tooltip: qsTr("Smoothly filters the image when it is scaled or transformed.")
-                disabledState: !backendValues.smooth.isAvailable
-            }
-
-            SecondColumnLayout {
-                CheckBox {
-                    enabled: backendValues.smooth.isAvailable
-                    text: backendValues.smooth.valueToString
-                    backendValue: backendValues.smooth
-                    implicitWidth: 180
-                }
-                ExpandingSpacer {}
-            }
-        }
-    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml

@@ -27,6 +27,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.15
 import QtQuickDesignerTheme 1.0
+import QtQuick.Templates 2.15 as T
 import HelperWidgets 2.0
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
@@ -37,321 +38,90 @@ Rectangle {
     height: 400
     color: Theme.qmlDesignerBackgroundColorDarkAlternate()
 
+    Component.onCompleted: Controller.mainScrollView = mainScrollView
+
     MouseArea {
         anchors.fill: parent
         onClicked: forceActiveFocus()
     }
 
     ScrollView {
+        id: mainScrollView
         clip: true
         anchors.fill: parent
 
         Column {
+            id: mainColumn
             y: -1
             width: itemPane.width
-            Section {
-                z: 2
-                caption: qsTr("Component")
 
-                anchors.left: parent.left
+            onWidthChanged: StudioTheme.Values.responsiveResize(itemPane.width)
-                anchors.right: parent.right
+            Component.onCompleted: StudioTheme.Values.responsiveResize(itemPane.width)
 
-                SectionLayout {
+            ComponentSection {}
-                    Label {
-                        text: qsTr("Type")
-                    }
 
-                    SecondColumnLayout {
+            GeometrySection {}
-                        z: 2
-
-                        RoundedPanel {
-                            Layout.fillWidth: true
-                            height: StudioTheme.Values.height
-
-                            Label {
-                                anchors.fill: parent
-                                anchors.leftMargin: StudioTheme.Values.inputHorizontalPadding
-                                anchors.topMargin: StudioTheme.Values.typeLabelVerticalShift
-                                text: backendValues.className.value
-                            }
-                            ToolTipArea {
-                                anchors.fill: parent
-                                onDoubleClicked: {
-                                    typeLineEdit.text = backendValues.className.value
-                                    typeLineEdit.visible = ! typeLineEdit.visible
-                                    typeLineEdit.forceActiveFocus()
-                                }
-                                tooltip: qsTr("Changes the type of this component.")
-                                enabled: !modelNodeBackend.multiSelection
-                            }
-
-                            ExpressionTextField {
-                                id: typeLineEdit
-                                z: 2
-                                completeOnlyTypes: true
-                                replaceCurrentTextByCompletion: true
-                                anchors.fill: parent
-
-                                visible: false
-
-                                showButtons: false
-                                fixedSize: true
-
-                                property bool blockEditingFinished: false
-
-                                onEditingFinished: {
-                                    if (typeLineEdit.blockEditingFinished)
-                                        return
-
-                                    typeLineEdit.blockEditingFinished = true
-
-                                    if (typeLineEdit.visible)
-                                        changeTypeName(typeLineEdit.text.trim())
-                                    typeLineEdit.visible = false
-
-                                    typeLineEdit.blockEditingFinished = false
-
-                                    typeLineEdit.completionList.model = null
-                                }
-
-                                onRejected: {
-                                    typeLineEdit.visible = false
-                                    typeLineEdit.completionList.model = null
-                                }
-                            }
-
-                        }
-                        Item {
-                            Layout.preferredWidth: 20
-                            Layout.preferredHeight: 20
-                        }
-                    }
-
-                    Label {
-                        text: qsTr("ID")
-                    }
-
-                    SecondColumnLayout {
-                        spacing: 2
-                        LineEdit {
-                            id: lineEdit
-
-                            backendValue: backendValues.id
-                            placeholderText: qsTr("ID")
-                            text: backendValues.id.value
-                            Layout.fillWidth: true
-                            width: 240
-                            showTranslateCheckBox: false
-                            showExtendedFunctionButton: false
-                            enabled: !modelNodeBackend.multiSelection
-                        }
-
-                        Rectangle {
-                            id: aliasIndicator
-                            color: "transparent"
-                            border.color: "transparent"
-                            implicitWidth: StudioTheme.Values.height
-                            implicitHeight: StudioTheme.Values.height
-                            z: 10
-
-                            Label {
-                                id: aliasIndicatorIcon
-                                enabled: !modelNodeBackend.multiSelection
-                                anchors.fill: parent
-                                text: {
-                                    if (!aliasIndicatorIcon.enabled)
-                                        return StudioTheme.Constants.idAliasOff
-
-                                    return hasAliasExport ? StudioTheme.Constants.idAliasOn : StudioTheme.Constants.idAliasOff
-                                }
-                                color: {
-                                    if (!aliasIndicatorIcon.enabled)
-                                        return StudioTheme.Values.themeTextColorDisabled
-
-                                    return hasAliasExport ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeTextColor
-                                }
-                                font.family: StudioTheme.Constants.iconFont.family
-                                font.pixelSize: Math.round(16 * StudioTheme.Values.scaleFactor)
-                                verticalAlignment: Text.AlignVCenter
-                                horizontalAlignment: Text.AlignHCenter
-                                states: [
-                                    State {
-                                        name: "hovered"
-                                        when: toolTipArea.containsMouse && aliasIndicatorIcon.enabled
-                                        PropertyChanges {
-                                            target: aliasIndicatorIcon
-                                            scale: 1.2
-                                        }
-                                    }
-                                ]
-                            }
-
-                            ToolTipArea {
-                                id: toolTipArea
-                                enabled: !modelNodeBackend.multiSelection
-                                anchors.fill: parent
-                                onClicked: toogleExportAlias()
-                                tooltip: qsTr("Exports this component as an alias property of the root component.")
-                            }
-                        }
-                    }
-
-                    Label {
-                        text: qsTr("Custom ID")
-                    }
-
-                    SecondColumnLayout {
-                        enabled: !modelNodeBackend.multiSelection
-                        spacing: 2
-
-                        LineEdit {
-                            id: annotationEdit
-                            visible: annotationEditor.hasAuxData
-
-                            backendValue: backendValues.customId__AUX
-                            placeholderText: qsTr("customId")
-                            text: backendValue.value
-                            Layout.fillWidth: true
-                            Layout.preferredWidth: 240
-                            width: 240
-                            showTranslateCheckBox: false
-                            showExtendedFunctionButton: false
-
-                            onHoveredChanged: annotationEditor.checkAux()
-                        }
-
-                        StudioControls.AbstractButton {
-                            id: editAnnotationButton
-                            visible: annotationEditor.hasAuxData
-
-                            Layout.preferredWidth: 22
-                            Layout.preferredHeight: 22
-                            width: 22
-
-                            buttonIcon: StudioTheme.Constants.edit
-
-                            onClicked: annotationEditor.showWidget()
-                            onHoveredChanged: annotationEditor.checkAux()
-                        }
-
-                        StudioControls.AbstractButton {
-                            id: removeAnnotationButton
-                            visible: annotationEditor.hasAuxData
-
-                            Layout.preferredWidth: 22
-                            Layout.preferredHeight: 22
-                            width: 22
-
-                            buttonIcon: StudioTheme.Constants.closeCross
-
-                            onClicked: annotationEditor.removeFullAnnotation()
-                            onHoveredChanged: annotationEditor.checkAux()
-                        }
-
-                        StudioControls.AbstractButton {
-                            id: addAnnotationButton
-                            visible: !annotationEditor.hasAuxData
-
-                            buttonIcon: qsTr("Add Annotation")
-                            iconFont: StudioTheme.Constants.font
-                            Layout.fillWidth: true
-                            Layout.preferredWidth: 240
-                            width: 240
-
-                            onClicked: annotationEditor.showWidget()
-
-                            onHoveredChanged: annotationEditor.checkAux()
-                        }
-
-                        Item {
-                            Layout.preferredWidth: 22
-                            Layout.preferredHeight: 22
-                            visible: !annotationEditor.hasAuxData
-                        }
-
-                        AnnotationEditor {
-                            id: annotationEditor
-
-                            modelNodeBackendProperty: modelNodeBackend
-
-                            property bool hasAuxData: (annotationEditor.hasAnnotation || annotationEditor.hasCustomId)
-
-                            onModelNodeBackendChanged: checkAux()
-                            onCustomIdChanged: checkAux()
-                            onAnnotationChanged: checkAux()
-
-                            function checkAux() {
-                                hasAuxData = (annotationEditor.hasAnnotation || annotationEditor.hasCustomId)
-                                annotationEdit.update()
-                            }
-
-                            onAccepted: {
-                                hideWidget()
-                            }
-
-                            onCanceled: {
-                                hideWidget()
-                            }
-                        }
-                    }
-                }
-            }
-
-            GeometrySection {
-            }
 
             Section {
-                anchors.left: parent.left
-                anchors.right: parent.right
-
                 caption: qsTr("Visibility")
+                anchors.left: parent.left
+                anchors.right: parent.right
 
                 SectionLayout {
-                    rows: 2
+                    PropertyLabel { text: qsTr("Visibility") }
-                    Label {
-                        text: qsTr("Visibility")
-                    }
 
                     SecondColumnLayout {
-
                         CheckBox {
-                            text: qsTr("Is visible")
+                            text: qsTr("Visible")
+                            implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                           + StudioTheme.Values.actionIndicatorWidth
                             backendValue: backendValues.visible
                         }
 
-                        Item {
+                        Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap }
-                            width: 10
-                            height: 10
-                        }
 
                         CheckBox {
                             text: qsTr("Clip")
+                            implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                           + StudioTheme.Values.actionIndicatorWidth
                             backendValue: backendValues.clip
                         }
-                        Item {
+
-                            Layout.fillWidth: true
+                        ExpandingSpacer {}
-                        }
                     }
 
-                    Label {
+                    PropertyLabel { text: qsTr("Opacity") }
-                        text: qsTr("Opacity")
-                    }
 
                     SecondColumnLayout {
                         SpinBox {
-                            width: StudioTheme.Values.squareComponentWidth * 4
+                            implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                           + StudioTheme.Values.actionIndicatorWidth
                             sliderIndicatorVisible: true
                             backendValue: backendValues.opacity
                             decimals: 2
-
                             minimumValue: 0
                             maximumValue: 1
                             hasSlider: true
                             stepSize: 0.1
                         }
-                        Item {
+
-                            Layout.fillWidth: true
+                        ExpandingSpacer {}
+                    }
+
+                    PropertyLabel { text: qsTr("State") }
+
+                    SecondColumnLayout {
+                        ComboBox {
+                            implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                           + StudioTheme.Values.actionIndicatorWidth
+                            width: implicitWidth
+                            editable: true
+                            backendValue: backendValues.state
+                            model: allStateNames
+                            valueType: ComboBox.String
                         }
+
+                        ExpandingSpacer {}
                     }
                 }
             }
@@ -373,35 +143,31 @@ Rectangle {
                 StudioControls.TabButton {
                     text: qsTr("Layout")
                 }
-                StudioControls.TabButton {
-                    text: qsTr("Advanced")
-                }
             }
 
             StackLayout {
+                id: tabView
+                property int currentHeight: children[tabView.currentIndex].implicitHeight
+                property int extraHeight: 40
+
                 anchors.left: parent.left
                 anchors.right: parent.right
                 currentIndex: tabBar.currentIndex
-
-                property int currentHeight: children[currentIndex].implicitHeight
-                property int extraHeight: 40
-
                 height: currentHeight + extraHeight
 
                 Column {
-                    anchors.left: parent.left
+                    width: parent.width
-                    anchors.right: parent.right
 
                     Loader {
+                        id: specificsTwo
+
+                        property string theSource: specificQmlData
+
                         anchors.left: parent.left
                         anchors.right: parent.right
                         visible: theSource !== ""
-
-                        id: specificsTwo;
                         sourceComponent: specificQmlComponent
 
-                        property string theSource: specificQmlData
-
                         onTheSourceChanged: {
                             active = false
                             active = true
@@ -409,22 +175,22 @@ Rectangle {
                     }
 
                     Loader {
+                        id: specificsOne
                         anchors.left: parent.left
                         anchors.right: parent.right
-
+                        source: specificsUrl
-                        id: specificsOne;
+                        visible: specificsOne.source.toString() !== ""
-                        source: specificsUrl;
-
-                        property int loaderHeight: specificsOne.item.height + tabView.extraHeight
                     }
+
+                    AdvancedSection {}
+
+                    LayerSection {}
                 }
 
                 Column {
-                    anchors.left: parent.left
+                    width: parent.width
-                    anchors.right: parent.right
 
-                    LayoutSection {
+                    LayoutSection {}
-                    }
 
                     MarginSection {
                         visible: anchorBackend.isInLayout
@@ -439,16 +205,6 @@ Rectangle {
                         visible: !anchorBackend.isInLayout
                     }
                 }
-
-                Column {
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-
-                    AdvancedSection {
-                    }
-                    LayerSection {
-                    }
-                }
             }
         }
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayerSection.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2019 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,9 +23,10 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Section {
     anchors.left: parent.left
@@ -34,97 +35,54 @@ Section {
     visible: backendValues.layer_effect.isAvailable
 
     SectionLayout {
-        columns: 2
+        PropertyLabel {
-
-        Label {
-            text: qsTr("Effect")
-            tooltip: qsTr("Applies the effect to this layer.")
-        }
-        SecondColumnLayout {
-            ItemFilterComboBox {
-                typeFilter: "QtQuick.Item"
-                validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
-                backendValue: backendValues.layer_effect
-                Layout.fillWidth: true
-            }
-
-            ExpandingSpacer {
-            }
-        }
-
-        Label {
             text: qsTr("Enabled")
             tooltip: qsTr("Whether the component is layered or not.")
         }
+
         SecondColumnLayout {
             CheckBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 text: backendValues.layer_enabled.valueToString
                 backendValue: backendValues.layer_enabled
-                Layout.fillWidth: true
             }
 
-            ExpandingSpacer {
+            ExpandingSpacer {}
-            }
         }
 
-        Label {
+        PropertyLabel {
-            text: qsTr("Format")
+            text: qsTr("Sampler Name")
-            tooltip: qsTr("Internal OpenGL format of the texture.")
-        }
-        SecondColumnLayout {
-            ComboBox {
-                scope: "ShaderEffectSource"
-                model: ["Alpha", "RGB", "RGBA"]
-                backendValue: backendValues.layer_format
-                Layout.fillWidth: true
-            }
-
-            ExpandingSpacer {
-            }
-        }
-
-        Label {
-            text: qsTr("Mipmap")
-            tooltip: qsTr("Generates mipmaps for the texture.")
-        }
-        SecondColumnLayout {
-            CheckBox {
-                text: backendValues.layer_mipmap.valueToString
-                backendValue: backendValues.layer_mipmap
-                Layout.fillWidth: true
-            }
-
-            ExpandingSpacer {
-            }
-        }
-
-        Label {
-            text: qsTr("Sampler name")
             tooltip: qsTr("Name of the effect's source texture property.")
         }
+
         SecondColumnLayout {
             LineEdit {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
                 backendValue: backendValues.layer_samplerName
                 text: backendValues.layer_samplerName.valueToString
-                Layout.fillWidth: true
                 showTranslateCheckBox: false
             }
 
-            ExpandingSpacer {
+            ExpandingSpacer {}
-            }
         }
 
-        Label {
+        PropertyLabel {
             text: qsTr("Samples")
             tooltip: qsTr("Allows requesting multisampled rendering in the layer.")
         }
+
         SecondColumnLayout {
             ComboBox {
                 id: samplesComboBox
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
                 model: [2, 4, 8, 16]
                 backendValue: backendValues.layer_samples
                 manualMapping: true
-                Layout.fillWidth: true
 
                 onValueFromBackendChanged: {
                     if (!samplesComboBox.__isCompleted)
@@ -150,93 +108,208 @@ Section {
                 }
             }
 
-            ExpandingSpacer {
+            ExpandingSpacer {}
-            }
         }
 
-        Label {
+        PropertyLabel {
+            text: qsTr("Effect")
+            tooltip: qsTr("Applies the effect to this layer.")
+        }
+
+        SecondColumnLayout {
+            ItemFilterComboBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                typeFilter: "QtQuick.Item"
+                validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
+                backendValue: backendValues.layer_effect
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Format")
+            tooltip: qsTr("Internal OpenGL format of the texture.")
+        }
+
+        SecondColumnLayout {
+            ComboBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                scope: "ShaderEffectSource"
+                model: ["Alpha", "RGB", "RGBA"]
+                backendValue: backendValues.layer_format
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Texture size")
+            tooltip: qsTr("Requested pixel size of the layer's texture.")
+        }
+
+        SecondColumnLayout {
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.layer_textureSize_width
+                minimumValue: 0
+                maximumValue: 2000
+                decimals: 0
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+            ControlLabel { text: qsTr("W") }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlGap }
+
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.layer_textureSize_height
+                minimumValue: 0
+                maximumValue: 2000
+                decimals: 0
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+            ControlLabel { text: qsTr("H") }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Texture Mirroring")
+            tooltip: qsTr("Sets how the generated OpenGL texture should be mirrored.")
+        }
+
+        SecondColumnLayout {
+            ComboBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                scope: "ShaderEffectSource"
+                model: ["NoMirroring", "MirrorHorizontally", "MirrorVertically"]
+                backendValue: backendValues.layer_textureMirroring
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Wrap mode")
+            tooltip: qsTr("OpenGL wrap modes associated with the texture.")
+        }
+
+        SecondColumnLayout {
+            ComboBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                scope: "ShaderEffectSource"
+                model: ["ClampToEdge", "RepeatHorizontally", "RepeatVertically", "Repeat"]
+                backendValue: backendValues.layer_wrapMode
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Mipmap")
+            tooltip: qsTr("Generates mipmaps for the texture.")
+        }
+
+        SecondColumnLayout {
+            CheckBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                text: backendValues.layer_mipmap.valueToString
+                backendValue: backendValues.layer_mipmap
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
             text: qsTr("Smooth")
             tooltip: qsTr("Transforms the layer smoothly.")
         }
+
         SecondColumnLayout {
             CheckBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 text: backendValues.layer_smooth.valueToString
                 backendValue: backendValues.layer_smooth
-                Layout.fillWidth: true
             }
 
-            ExpandingSpacer {
+            ExpandingSpacer {}
-            }
         }
-
 /*
-        Label {
+        PropertyLabel {
-            text: qsTr("Source rectangle")
+            text: qsTr("Source Rectangle")
             tooltip: qsTr("TODO.")
         }
+
         SecondColumnLayout {
-            Label {
-                text: "X"
-                width: 12
-            }
             SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.layer_sourceRect_x
                 maximumValue: 0xffff
                 minimumValue: -0xffff
                 decimals: 0
-                realDragRange: 5000
             }
 
-            Item {
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-                width: 4
+
-                height: 4
+            ControlLabel { text: "X" }
-            }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlGap }
 
-            Label {
-                text: "Y"
-                width: 12
-            }
             SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.layer_sourceRect_y
                 maximumValue: 0xffff
                 minimumValue: -0xffff
                 decimals: 0
-                realDragRange: 5000
             }
 
-            ExpandingSpacer {
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-            }
+
+            ControlLabel { text: "Y" }
+
+            ExpandingSpacer {}
         }
 
-        Item {
+        PropertyLabel {}
-            width: 4
+
-            height: 4
-        }
         SecondColumnLayout {
-            Layout.fillWidth: true
-
-            Label {
-                text: "W"
-                width: 12
-            }
             SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.layer_sourceRect_width
                 maximumValue: 0xffff
                 minimumValue: 0
                 decimals: 0
-                realDragRange: 5000
             }
 
-            Item {
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-                width: 4
+
-                height: 4
+            ControlLabel { text: qsTr("W") }
-            }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlGap }
 
-            Label {
-                text: "H"
-                width: 12
-            }
             SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
                 backendValue: backendValues.layer_sourceRect_height
                 maximumValue: 0xffff
                 minimumValue: 0
@@ -244,77 +317,12 @@ Section {
                 realDragRange: 5000
             }
 
-            ExpandingSpacer {
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-            }
+
+            ControlLabel { text: qsTr("H") }
+
+            ExpandingSpacer {}
         }
 */
-
-        Label {
-            text: qsTr("Texture mirroring")
-            tooltip: qsTr("Sets how the generated OpenGL texture should be mirrored.")
-        }
-        SecondColumnLayout {
-            ComboBox {
-                scope: "ShaderEffectSource"
-                model: ["NoMirroring", "MirrorHorizontally", "MirrorVertically"]
-                backendValue: backendValues.layer_textureMirroring
-                Layout.fillWidth: true
-            }
-
-            ExpandingSpacer {
-            }
-        }
-
-        Label {
-            text: qsTr("Texture size")
-            tooltip: qsTr("Requested pixel size of the layer's texture.")
-        }
-        SecondColumnLayout {
-            Label {
-                text: "W"
-                width: 12
-            }
-            SpinBox {
-                backendValue: backendValues.layer_textureSize_width
-                minimumValue: 0
-                maximumValue: 2000
-                decimals: 0
-            }
-
-            Item {
-                width: 4
-                height: 4
-            }
-
-            Label {
-                text: "H"
-                width: 12
-            }
-            SpinBox {
-                backendValue: backendValues.layer_textureSize_height
-                minimumValue: 0
-                maximumValue: 2000
-                decimals: 0
-            }
-
-            ExpandingSpacer {
-            }
-        }
-
-        Label {
-            text: qsTr("Wrap mode")
-            tooltip: qsTr("OpenGL wrap modes associated with the texture.")
-        }
-        SecondColumnLayout {
-            ComboBox {
-                scope: "ShaderEffectSource"
-                model: ["ClampToEdge", "RepeatHorizontally", "RepeatVertically", "Repeat"]
-                backendValue: backendValues.layer_wrapMode
-                Layout.fillWidth: true
-            }
-
-            ExpandingSpacer {
-            }
-        }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutProperties.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,16 +23,19 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
 import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 SectionLayout {
-    property bool isInModel: backendValue.isInModel;
+    id: root
-    property bool isInSubState: backendValue.isInSubState;
+
-    property variant valueFromBackend: backendValue.value
     property variant backendValue: backendValues.Layout_alignment
+    property variant valueFromBackend: backendValue === undefined ? 0 : backendValue.value
+    property bool isInModel: backendValue === undefined ? false : backendValue.isInModel
+    property bool isInSubState: backendValue === undefined ? false : backendValue.isInSubState
     property bool blockAlignment: false
 
     onIsInModelChanged: evaluateAlignment()
@@ -40,66 +43,68 @@ SectionLayout {
     onBackendValueChanged: evaluateAlignment()
     onValueFromBackendChanged: evaluateAlignment()
 
-    property int spinBoxWidth: 82
-
     Connections {
         target: modelNodeBackend
-        onSelectionChanged: {
+        function onSelectionChanged() {
             evaluateAlignment()
         }
     }
 
-    id: root
-
     Component.onCompleted: evaluateAlignment()
 
     function indexOfVerticalAlignment() {
+        if (backendValue === undefined)
+            return 0
+
         if (backendValue.expression === undefined)
-            return 0;
+            return 0
 
         if (backendValue.expression.indexOf("AlignVCenter") !== -1)
-            return 0;
+            return 0
 
         if (backendValue.expression.indexOf("AlignTop") !== -1)
-            return 1;
+            return 1
 
         if (backendValue.expression.indexOf("AlignBottom") !== -1)
-            return 2;
+            return 2
 
         if (backendValue.expression.indexOf("AlignBaseline") !== -1)
-            return 3;
+            return 3
 
-        return 0;
+        return 0
     }
 
     function indexOfHorizontalAlignment() {
+        if (backendValue === undefined)
+            return 0
+
         if (backendValue.expression === undefined)
-            return 0;
+            return 0
 
         if (backendValue.expression.indexOf("AlignLeft") !== -1)
-            return 0;
+            return 0
 
         if (backendValue.expression.indexOf("AlignHCenter") !== -1)
-            return 1;
+            return 1
 
         if (backendValue.expression.indexOf("AlignRight") !== -1)
-            return 2;
+            return 2
 
-        return 0;
+        return 0
     }
 
     function evaluateAlignment() {
         blockAlignment = true
 
-        verticalAlignmentComboBox.currentIndex = indexOfVerticalAlignment();
+        verticalAlignmentComboBox.currentIndex = indexOfVerticalAlignment()
-        horizontalAlignmentComboBox.currentIndex = indexOfHorizontalAlignment();
+        horizontalAlignmentComboBox.currentIndex = indexOfHorizontalAlignment()
 
         blockAlignment = false
     }
 
     function composeExpressionString() {
         if (blockAlignment)
-            return;
+            return
 
         var expressionStr = "";
         if (horizontalAlignmentComboBox.currentIndex !== 0
@@ -112,21 +117,44 @@ SectionLayout {
         } else {
             expressionStr = "Qt.AlignLeft | Qt.AlignVCenter";
             backendValue.expression = expressionStr
-            backendValue.resetValue();
+            backendValue.resetValue()
         }
     }
 
-    Label {
+    PropertyLabel {
         text: qsTr("Alignment")
         tooltip: qsTr("Alignment of a component within the cells it occupies.")
     }
 
     SecondColumnLayout {
         StudioControls.ComboBox {
-            ColorLogic {
+            id: horizontalAlignmentComboBox
-                id: colorLogic
+
+            property bool __isCompleted: false
+
+            implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                           + StudioTheme.Values.actionIndicatorWidth
+            labelColor: horizontalAlignmentComboBox.currentIndex === 0 ? colorLogic.__defaultTextColor
+                                                                       : colorLogic.__changedTextColor
+            model: ["AlignLeft", "AlignHCenter", "AlignRight"]
+
+            actionIndicator.icon.color: extFuncLogic.color
+            actionIndicator.icon.text: extFuncLogic.glyph
+            actionIndicator.onClicked: extFuncLogic.show()
+            actionIndicator.forceVisible: extFuncLogic.menuVisible
+            actionIndicator.visible: true
+
+            onActivated: {
+                if (!horizontalAlignmentComboBox.__isCompleted)
+                    return
+
+                horizontalAlignmentComboBox.currentIndex = index
+                composeExpressionString()
             }
-            Layout.fillWidth: true
+
+            Component.onCompleted: horizontalAlignmentComboBox.__isCompleted = true
+
+            ColorLogic { id: colorLogic }
 
             ExtendedFunctionLogic {
                 id: extFuncLogic
@@ -136,42 +164,22 @@ SectionLayout {
                     verticalAlignmentComboBox.currentIndex = 0
                 }
             }
-
-            actionIndicator.icon.color: extFuncLogic.color
-            actionIndicator.icon.text: extFuncLogic.glyph
-            actionIndicator.onClicked: extFuncLogic.show()
-            actionIndicator.forceVisible: extFuncLogic.menuVisible
-            actionIndicator.visible: true
-
-            labelColor: horizontalAlignmentComboBox.currentIndex === 0 ? colorLogic.__defaultTextColor : colorLogic.__changedTextColor
-
-            id: horizontalAlignmentComboBox
-
-            property bool __isCompleted: false
-
-            model: ["AlignLeft", "AlignHCenter", "AlignRight"]
-
-            onActivated: {
-                if (!horizontalAlignmentComboBox.__isCompleted)
-                    return;
-
-                horizontalAlignmentComboBox.currentIndex = index
-                composeExpressionString();
-            }
-
-            Component.onCompleted: {
-                horizontalAlignmentComboBox.__isCompleted = true;
-            }
         }
     }
 
-    Label {
+    PropertyLabel { text: "" }
-    }
 
     SecondColumnLayout {
         StudioControls.ComboBox {
             id: verticalAlignmentComboBox
-            Layout.fillWidth: true
+
+            property bool __isCompleted: false
+
+            implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                           + StudioTheme.Values.actionIndicatorWidth
+            labelColor: verticalAlignmentComboBox.currentIndex === 0 ? colorLogic.__defaultTextColor
+                                                                     : colorLogic.__changedTextColor
+            model: ["AlignVCenter", "AlignTop", "AlignBottom", "AlignBaseline"]
 
             actionIndicator.icon.color: extFuncLogic.color
             actionIndicator.icon.text: extFuncLogic.glyph
@@ -179,206 +187,187 @@ SectionLayout {
             actionIndicator.forceVisible: extFuncLogic.menuVisible
             actionIndicator.visible: true
 
-            labelColor: verticalAlignmentComboBox.currentIndex === 0 ? colorLogic.__defaultTextColor : colorLogic.__changedTextColor
-
-            property bool __isCompleted: false
-
-            model: ["AlignVCenter", "AlignTop", "AlignBottom", "AlignBaseline"]
-
             onActivated: {
                 if (!verticalAlignmentComboBox.__isCompleted)
-                    return;
+                    return
 
                 verticalAlignmentComboBox.currentIndex = index
-                composeExpressionString();
+                composeExpressionString()
             }
 
-            Component.onCompleted: {
+            Component.onCompleted: verticalAlignmentComboBox.__isCompleted = true
-                verticalAlignmentComboBox.__isCompleted = true;
-            }
         }
     }
 
-    Label {
+    PropertyLabel {
         text: qsTr("Fill layout")
         tooltip: qsTr("Expands the component as much as possible within the given constraints.")
     }
 
     SecondColumnLayout {
         CheckBox {
+            implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                           + StudioTheme.Values.actionIndicatorWidth
             backendValue: backendValues.Layout_fillWidth
-            text: qsTr("Fill width")
+            text: qsTr("Width")
-            Layout.fillWidth: true
+        }
+
+        Spacer {
+            implicitWidth: StudioTheme.Values.twoControlColumnGap
         }
 
         CheckBox {
+            implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                           + StudioTheme.Values.actionIndicatorWidth
             backendValue: backendValues.Layout_fillHeight
-            text: qsTr("Fill height")
+            text: qsTr("Height")
-            Layout.fillWidth: true
         }
     }
 
-    Label {
+    PropertyLabel {
         text: qsTr("Preferred size")
         tooltip: qsTr("Preferred size of a component in a layout. If the preferred height or width is -1, it is ignored.")
     }
 
     SecondColumnLayout {
-        Layout.fillWidth: true
-
-        Label {
-            text: "W"
-            width: 12
-        }
-
         SpinBox {
+            implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                           + StudioTheme.Values.actionIndicatorWidth
             backendValue: backendValues.Layout_preferredWidth
             minimumValue: -1
             maximumValue: 0xffff
-            realDragRange: 5000
             decimals: 0
         }
 
-        Item {
+        Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-            width: 4
-            height: 4
-        }
 
-        Label {
+        ControlLabel { text: qsTr("W") }
-            text: "H"
+
-            width: 12
+        Spacer { implicitWidth: StudioTheme.Values.controlGap }
-        }
 
         SpinBox {
+            implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                           + StudioTheme.Values.actionIndicatorWidth
             backendValue: backendValues.Layout_preferredHeight
             minimumValue: -1
             maximumValue: 0xffff
-            realDragRange: 5000
             decimals: 0
         }
+
+        Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+        ControlLabel { text: qsTr("H") }
+
+        ExpandingSpacer {}
     }
 
-    Label {
+    PropertyLabel {
         text: qsTr("Minimum size")
         tooltip: qsTr("Minimum size of a component in a layout.")
     }
 
     SecondColumnLayout {
-        Layout.fillWidth: true
-
-        Label {
-            text: "W"
-            width: 12
-        }
-
         SpinBox {
+            implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                           + StudioTheme.Values.actionIndicatorWidth
             backendValue: backendValues.Layout_minimumWidth
             minimumValue: 0
             maximumValue: 0xffff
-            realDragRange: 5000
             decimals: 0
         }
 
-        Item {
+        Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-            width: 4
-            height: 4
-        }
 
-        Label {
+        ControlLabel { text: qsTr("W") }
-            text: "H"
+
-            width: 12
+        Spacer { implicitWidth: StudioTheme.Values.controlGap }
-        }
 
         SpinBox {
+            implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                           + StudioTheme.Values.actionIndicatorWidth
             backendValue: backendValues.Layout_minimumHeight
             minimumValue: 0
             maximumValue: 0xffff
-            realDragRange: 5000
             decimals: 0
         }
+
+        Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+        ControlLabel { text: qsTr("H") }
+
+        ExpandingSpacer {}
     }
 
-    Label {
+    PropertyLabel {
         text: qsTr("Maximum size")
         tooltip: qsTr("Maximum size of a component in a layout.")
     }
 
     SecondColumnLayout {
-        Layout.fillWidth: true
-
-        Label {
-            text: "W"
-            width: 12
-        }
-
         SpinBox {
+            implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                           + StudioTheme.Values.actionIndicatorWidth
             backendValue: backendValues.Layout_maximumWidth
             minimumValue: 0
             maximumValue: 0xffff
-            realDragRange: 5000
             decimals: 0
         }
 
-        Item {
+        Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
-            width: 4
-            height: 4
-        }
 
-        Label {
+        ControlLabel { text: qsTr("W") }
-            text: "H"
+
-            width: 12
+        Spacer { implicitWidth: StudioTheme.Values.controlGap }
-        }
 
         SpinBox {
+            implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                           + StudioTheme.Values.actionIndicatorWidth
             backendValue: backendValues.Layout_maximumHeight
             minimumValue: 0
             maximumValue: 0xffff
-            realDragRange: 5000
             decimals: 0
         }
+
+        Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+        ControlLabel { text: qsTr("H") }
+
+        ExpandingSpacer {}
     }
 
-    Label {
+    PropertyLabel {
         text: qsTr("Row span")
         tooltip: qsTr("Row span of a component in a Grid Layout.")
     }
 
     SecondColumnLayout {
-        Layout.fillWidth: true
-
-        Item {
-            height: 4
-            width: 12
-        }
-
         SpinBox {
+            implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                           + StudioTheme.Values.actionIndicatorWidth
             backendValue: backendValues.Layout_rowSpan
             minimumValue: 0
             maximumValue: 0xffff
-            realDragRange: 5000
             decimals: 0
         }
+
+        ExpandingSpacer {}
     }
 
-    Label {
+    PropertyLabel {
         text: qsTr("Column span")
         tooltip: qsTr("Column span of a component in a Grid Layout.")
     }
 
     SecondColumnLayout {
-        Layout.fillWidth: true
-
-        Item {
-            height: 4
-            width: 12
-        }
-
         SpinBox {
+            implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                           + StudioTheme.Values.actionIndicatorWidth
             backendValue: backendValues.Layout_columnSpan
             minimumValue: 0
             maximumValue: 0xffff
-            realDragRange: 5000
             decimals: 0
         }
+
+        ExpandingSpacer {}
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutSection.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,9 +23,9 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 
@@ -33,140 +33,144 @@ Section {
     anchors.left: parent.left
     anchors.right: parent.right
     caption: qsTr("Layout")
+    spacing: StudioTheme.Values.sectionRowSpacing + 6
 
-    LayoutPoperties {
+    LayoutProperties {
         id: layoutPoperties
         visible: anchorBackend.isInLayout
     }
 
-    ColumnLayout {
+    SectionLayout {
         visible: !anchorBackend.isInLayout
-        width: parent.width
+
-        Label {
+        PropertyLabel { text: qsTr("Anchors") }
-            text: qsTr("Anchors")
+
+        SecondColumnLayout {
+            Spacer {
+                implicitWidth: StudioTheme.Values.actionIndicatorWidth
+            }
+
+            AnchorButtons {}
+
+            ExpandingSpacer {}
         }
+    }
 
-        AnchorButtons {
+    AnchorRow {
+        visible: anchorBackend.topAnchored
+        iconSource: StudioTheme.Constants.anchorTop
+        anchorMargin: backendValues.anchors_topMargin
+        targetName: anchorBackend.topTarget
+        relativeTarget: anchorBackend.relativeAnchorTargetTop
+        verticalAnchor: true
+
+        onTargetChanged: {
+            anchorBackend.topTarget = currentText
         }
-
+        onSameEdgeButtonClicked: {
-        AnchorRow {
+            anchorBackend.relativeAnchorTargetTop = AnchorBindingProxy.SameEdge
-            visible: anchorBackend.topAnchored
-            iconSource: StudioTheme.Constants.anchorTop
-            anchorMargin: backendValues.anchors_topMargin
-            targetName: anchorBackend.topTarget
-            onTargetChanged: {
-                anchorBackend.topTarget = currentText
-            }
-            relativeTarget: anchorBackend.relativeAnchorTargetTop
-            verticalAnchor: true
-
-            onSameEdgeButtonClicked: {
-                anchorBackend.relativeAnchorTargetTop = AnchorBindingProxy.SameEdge
-            }
-            onOppositeEdgeButtonClicked: {
-                anchorBackend.relativeAnchorTargetTop = AnchorBindingProxy.OppositeEdge
-            }
-
-            onCenterButtonClicked: {
-                anchorBackend.relativeAnchorTargetTop = AnchorBindingProxy.Center
-            }
         }
-
+        onOppositeEdgeButtonClicked: {
-        AnchorRow {
+            anchorBackend.relativeAnchorTargetTop = AnchorBindingProxy.OppositeEdge
-            visible: anchorBackend.bottomAnchored
-            iconSource: StudioTheme.Constants.anchorBottom
-            anchorMargin: backendValues.anchors_bottomMargin
-            targetName: anchorBackend.bottomTarget
-            onTargetChanged: {
-                anchorBackend.bottomTarget = currentText
-            }
-            relativeTarget: anchorBackend.relativeAnchorTargetBottom
-            verticalAnchor: true
-            invertRelativeTargets: true
-
-            onSameEdgeButtonClicked: {
-                anchorBackend.relativeAnchorTargetBottom = AnchorBindingProxy.SameEdge
-            }
-            onOppositeEdgeButtonClicked: {
-                anchorBackend.relativeAnchorTargetBottom = AnchorBindingProxy.OppositeEdge
-            }
-
-            onCenterButtonClicked: {
-                anchorBackend.relativeAnchorTargetBottom = AnchorBindingProxy.Center
-            }
         }
-
+        onCenterButtonClicked: {
-        AnchorRow {
+            anchorBackend.relativeAnchorTargetTop = AnchorBindingProxy.Center
-            visible: anchorBackend.leftAnchored
-            iconSource: StudioTheme.Constants.anchorLeft
-            anchorMargin: backendValues.anchors_leftMargin
-            targetName: anchorBackend.leftTarget
-            onTargetChanged: {
-                anchorBackend.leftTarget = currentText
-            }
-            relativeTarget: anchorBackend.relativeAnchorTargetLeft
-            verticalAnchor: false
-
-            onSameEdgeButtonClicked: {
-                anchorBackend.relativeAnchorTargetLeft = AnchorBindingProxy.SameEdge
-            }
-            onOppositeEdgeButtonClicked: {
-                anchorBackend.relativeAnchorTargetLeft = AnchorBindingProxy.OppositeEdge
-            }
-
-            onCenterButtonClicked: {
-                anchorBackend.relativeAnchorTargetLeft = AnchorBindingProxy.Center
-            }
         }
+    }
 
-        AnchorRow {
+    AnchorRow {
-            visible: anchorBackend.rightAnchored
+        visible: anchorBackend.bottomAnchored
-            iconSource: StudioTheme.Constants.anchorRight
+        iconSource: StudioTheme.Constants.anchorBottom
-            anchorMargin: backendValues.anchors_rightMargin
+        anchorMargin: backendValues.anchors_bottomMargin
-            targetName: anchorBackend.rightTarget
+        targetName: anchorBackend.bottomTarget
-            onTargetChanged: {
+        relativeTarget: anchorBackend.relativeAnchorTargetBottom
-                anchorBackend.rightTarget = currentText
+        verticalAnchor: true
-            }
+        invertRelativeTargets: true
-            relativeTarget: anchorBackend.relativeAnchorTargetRight
-            verticalAnchor: false
-            invertRelativeTargets: true
 
-            onSameEdgeButtonClicked: {
+        onTargetChanged: {
-                anchorBackend.relativeAnchorTargetRight = AnchorBindingProxy.SameEdge
+            anchorBackend.bottomTarget = currentText
-            }
-            onOppositeEdgeButtonClicked: {
-                anchorBackend.relativeAnchorTargetRight = AnchorBindingProxy.OppositeEdge
-            }
-
-            onCenterButtonClicked: {
-                anchorBackend.relativeAnchorTargetRight = AnchorBindingProxy.Center
-            }
         }
-
+        onSameEdgeButtonClicked: {
-        AnchorRow {
+            anchorBackend.relativeAnchorTargetBottom = AnchorBindingProxy.SameEdge
-            showAlternativeTargets: false
-            visible: anchorBackend.horizontalCentered
-            iconSource: StudioTheme.Constants.centerHorizontal
-            anchorMargin: backendValues.anchors_horizontalCenterOffset
-            targetName: anchorBackend.horizontalTarget
-            onTargetChanged: {
-                anchorBackend.horizontalTarget = currentText
-            }
-            verticalAnchor: false
-            buttonRow.visible: false
         }
+        onOppositeEdgeButtonClicked: {
+            anchorBackend.relativeAnchorTargetBottom = AnchorBindingProxy.OppositeEdge
+        }
+        onCenterButtonClicked: {
+            anchorBackend.relativeAnchorTargetBottom = AnchorBindingProxy.Center
+        }
+    }
 
-        AnchorRow {
+    AnchorRow {
-            showAlternativeTargets: false
+        visible: anchorBackend.leftAnchored
-            visible: anchorBackend.verticalCentered
+        iconSource: StudioTheme.Constants.anchorLeft
-            iconSource: StudioTheme.Constants.centerVertical
+        anchorMargin: backendValues.anchors_leftMargin
-            anchorMargin: backendValues.anchors_verticalCenterOffset
+        targetName: anchorBackend.leftTarget
-            targetName: anchorBackend.verticalTarget
+        relativeTarget: anchorBackend.relativeAnchorTargetLeft
-            onTargetChanged: {
+        verticalAnchor: false
-                 anchorBackend.verticalTarget = currentText
+
-            }
+        onTargetChanged: {
-            verticalAnchor: true
+            anchorBackend.leftTarget = currentText
-            buttonRow.visible: false
+        }
+        onSameEdgeButtonClicked: {
+            anchorBackend.relativeAnchorTargetLeft = AnchorBindingProxy.SameEdge
+        }
+        onOppositeEdgeButtonClicked: {
+            anchorBackend.relativeAnchorTargetLeft = AnchorBindingProxy.OppositeEdge
+        }
+        onCenterButtonClicked: {
+            anchorBackend.relativeAnchorTargetLeft = AnchorBindingProxy.Center
+        }
+    }
+
+    AnchorRow {
+        visible: anchorBackend.rightAnchored
+        iconSource: StudioTheme.Constants.anchorRight
+        anchorMargin: backendValues.anchors_rightMargin
+        targetName: anchorBackend.rightTarget
+        relativeTarget: anchorBackend.relativeAnchorTargetRight
+        verticalAnchor: false
+        invertRelativeTargets: true
+
+        onTargetChanged: {
+            anchorBackend.rightTarget = currentText
+        }
+        onSameEdgeButtonClicked: {
+            anchorBackend.relativeAnchorTargetRight = AnchorBindingProxy.SameEdge
+        }
+        onOppositeEdgeButtonClicked: {
+            anchorBackend.relativeAnchorTargetRight = AnchorBindingProxy.OppositeEdge
+        }
+        onCenterButtonClicked: {
+            anchorBackend.relativeAnchorTargetRight = AnchorBindingProxy.Center
+        }
+    }
+
+    AnchorRow {
+        showAlternativeTargets: false
+        visible: anchorBackend.horizontalCentered
+        iconSource: StudioTheme.Constants.centerHorizontal
+        anchorMargin: backendValues.anchors_horizontalCenterOffset
+        targetName: anchorBackend.horizontalTarget
+        verticalAnchor: false
+        buttonRow.visible: false
+
+        onTargetChanged: {
+            anchorBackend.horizontalTarget = currentText
+        }
+    }
+
+    AnchorRow {
+        showAlternativeTargets: false
+        visible: anchorBackend.verticalCentered
+        iconSource: StudioTheme.Constants.centerVertical
+        anchorMargin: backendValues.anchors_verticalCenterOffset
+        targetName: anchorBackend.verticalTarget
+        verticalAnchor: true
+        buttonRow.visible: false
+
+        onTargetChanged: {
+             anchorBackend.verticalTarget = currentText
         }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ListViewSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,18 +23,17 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import QtQuick.Layouts 1.15
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
-    FlickableSection {
+    FlickableSection {}
-        anchors.left: parent.left
-        anchors.right: parent.right
-    }
 
     Section {
         anchors.left: parent.left
@@ -42,77 +41,44 @@ Column {
         caption: qsTr("List View")
 
         SectionLayout {
-
+            PropertyLabel {
-            Label {
-                text: qsTr("Cache")
-                tooltip: qsTr("Cache buffer")
-                disabledState: !backendValues.cacheBuffer.isAvailable
-            }
-
-            SectionLayout {
-                SpinBox {
-                    backendValue: backendValues.cacheBuffer
-                    minimumValue: 0
-                    maximumValue: 1000
-                    decimals: 0
-                    enabled: backendValue.isAvailable
-                }
-
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
-                text: qsTr("Navigation wraps")
-                tooltip: qsTr("Whether the grid wraps key navigation.")
-                disabledState: !backendValues.keyNavigationWraps.isAvailable
-            }
-
-            SectionLayout {
-                CheckBox {
-                    Layout.fillWidth: true
-                    backendValue: backendValues.keyNavigationWraps
-                    text: backendValues.keyNavigationWraps.valueToString
-                    enabled: backendValue.isAvailable
-                }
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
                 text: qsTr("Orientation")
-                tooltip: qsTr("Orientation of the list.")
+                tooltip: qsTr("Orientation of the list")
             }
 
             SecondColumnLayout {
                 ComboBox {
-                    scope: "ListView"
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
-                    model: ["Horizontal", "Vertical"]
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     backendValue: backendValues.orientation
-                    Layout.fillWidth: true
+                    model: ["Horizontal", "Vertical"]
-                }
+                    scope: "ListView"
-                ExpandingSpacer {
                 }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Layout direction")
                 disabledState: !backendValues.layoutDirection.isAvailable
             }
 
             SecondColumnLayout {
                 ComboBox {
-                    scope: "Qt"
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
-                    model: ["LeftToRight", "RightToLeft"]
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     backendValue: backendValues.layoutDirection
-                    Layout.fillWidth: true
+                    model: ["LeftToRight", "RightToLeft"]
+                    scope: "Qt"
                     enabled: backendValue.isAvailable
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Snap mode")
                 tooltip: qsTr("Determines how the view scrolling will settle following a drag or flick.")
                 disabledState: !backendValues.snapMode.isAvailable
@@ -120,43 +86,84 @@ Column {
 
             SecondColumnLayout {
                 ComboBox {
-                    scope: "ListView"
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
-                    model: ["NoSnap", "SnapToItem", "SnapOneItem"]
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     backendValue: backendValues.snapMode
-                    Layout.fillWidth: true
+                    model: ["NoSnap", "SnapToItem", "SnapOneItem"]
+                    scope: "ListView"
                     enabled: backendValue.isAvailable
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Spacing")
                 tooltip: qsTr("Spacing between components.")
             }
 
-            SectionLayout {
+            SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.spacing
                     minimumValue: -4000
                     maximumValue: 4000
                     decimals: 0
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
+            PropertyLabel {
+                text: qsTr("Cache")
+                tooltip: qsTr("Cache buffer")
+                disabledState: !backendValues.cacheBuffer.isAvailable
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.cacheBuffer
+                    minimumValue: 0
+                    maximumValue: 1000
+                    decimals: 0
+                    enabled: backendValue.isAvailable
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Navigation wraps")
+                tooltip: qsTr("Whether the grid wraps key navigation.")
+                disabledState: !backendValues.keyNavigationWraps.isAvailable
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.keyNavigationWraps.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.keyNavigationWraps
+                    enabled: backendValue.isAvailable
+                }
+
+                ExpandingSpacer {}
+            }
         }
     }
 
     Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
         caption: qsTr("List View Highlight")
 
-        SectionLayout {
+        anchors.left: parent.left
+        anchors.right: parent.right
 
-            Label {
+        SectionLayout {
+            PropertyLabel {
                 text: qsTr("Range")
                 tooltip: qsTr("Highlight range")
                 disabledState: !backendValues.highlightRangeMode.isAvailable
@@ -164,142 +171,155 @@ Column {
 
             SecondColumnLayout {
                 ComboBox {
-                    scope: "ListView"
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
-                    model: ["NoHighlightRange", "ApplyRange", "StrictlyEnforceRange"]
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     backendValue: backendValues.highlightRangeMode
-                    Layout.fillWidth: true
+                    model: ["NoHighlightRange", "ApplyRange", "StrictlyEnforceRange"]
+                    scope: "ListView"
                     enabled: backendValue.isAvailable
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-
+            PropertyLabel {
-            Label {
                 text: qsTr("Move duration")
                 tooltip: qsTr("Move animation duration of the highlight delegate.")
                 disabledState: !backendValues.highlightMoveDuration.isAvailable
             }
 
-            SectionLayout {
+            SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.highlightMoveDuration
                     minimumValue: -1
                     maximumValue: 1000
                     decimals: 0
                     enabled: backendValue.isAvailable
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Move velocity")
                 tooltip: qsTr("Move animation velocity of the highlight delegate.")
                 disabledState: !backendValues.highlightMoveVelocity.isAvailable
             }
 
-            SectionLayout {
+            SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.highlightMoveVelocity
                     minimumValue: -1
                     maximumValue: 1000
                     decimals: 0
                     enabled: backendValue.isAvailable
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Resize duration")
                 tooltip: qsTr("Resize animation duration of the highlight delegate.")
                 disabledState: !backendValues.highlightResizeDuration.isAvailable
             }
 
-            SectionLayout {
+            SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.highlightResizeDuration
                     minimumValue: -1
                     maximumValue: 1000
                     decimals: 0
                     enabled: backendValue.isAvailable
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Resize velocity")
                 tooltip: qsTr("Resize animation velocity of the highlight delegate.")
                 disabledState: !backendValues.highlightResizeVelocity.isAvailable
             }
 
-            SectionLayout {
+            SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.highlightResizeVelocity
                     minimumValue: -1
                     maximumValue: 1000
                     decimals: 0
                     enabled: backendValue.isAvailable
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Preferred begin")
                 tooltip: qsTr("Preferred highlight begin - must be smaller than Preferred end.")
                 disabledState: !backendValues.preferredHighlightBegin.isAvailable
             }
 
-            SectionLayout {
+            SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.preferredHighlightBegin
                     minimumValue: 0
                     maximumValue: 1000
                     decimals: 0
                     enabled: backendValue.isAvailable
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Preferred end")
                 tooltip: qsTr("Preferred highlight end - must be larger than Preferred begin.")
                 disabledState: !backendValues.preferredHighlightEnd.isAvailable
             }
 
-            SectionLayout {
+            SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.preferredHighlightEnd
                     minimumValue: 0
                     maximumValue: 1000
                     decimals: 0
                     enabled: backendValue.isAvailable
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Follows current")
                 tooltip: qsTr("Whether the highlight is managed by the view.")
                 disabledState: !backendValues.highlightFollowsCurrentItem.isAvailable
             }
 
-            SectionLayout {
+            SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
-                    backendValue: backendValues.highlightFollowsCurrentItem
                     text: backendValues.highlightFollowsCurrentItem.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.highlightFollowsCurrentItem
                     enabled: backendValue.isAvailable
                 }
-                ExpandingSpacer {
-                }
-            }
 
+                ExpandingSpacer {}
+            }
         }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/MouseAreaSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,57 +23,52 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
     Section {
+        caption: qsTr("Mouse area")
+
         anchors.left: parent.left
         anchors.right: parent.right
-        caption: qsTr("Mouse Area")
 
         SectionLayout {
-            Label {
+            PropertyLabel {
-                text: qsTr("Enabled")
+                text: qsTr("Enable")
                 tooltip: qsTr("Accepts mouse events.")
                 disabledState: !backendValues.enabled.isAvailable
             }
 
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
+                    text: qsTr("Area")
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.enabled
-                    text: backendValues.enabled.valueToString
                     enabled: backendValue.isAvailable
                 }
 
-                ExpandingSpacer {
+                Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap }
-                }
-            }
 
-            Label {
-                text: qsTr("Hover enabled")
-                tooltip: qsTr("Handles hover events.")
-                disabledState: !backendValues.hoverEnabled.isAvailable
-            }
-
-            SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
+                    text: qsTr("Hover")
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.hoverEnabled
-                    text: backendValues.hoverEnabled.valueToString
                     enabled: backendValue.isAvailable
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-                }
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Accepted buttons")
                 tooltip: qsTr("Mouse buttons that the mouse area reacts to.")
                 disabledState: !backendValues.acceptedButtons.isAvailable
@@ -81,51 +76,19 @@ Column {
 
             SecondColumnLayout {
                 ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     backendValue: backendValues.acceptedButtons
                     model: ["LeftButton", "RightButton", "MiddleButton", "BackButton", "ForwardButton", "AllButtons"]
-                    Layout.fillWidth: true
                     scope: "Qt"
                     enabled: backendValue.isAvailable
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
-                text: qsTr("Press and hold interval")
-                tooltip: qsTr("Overrides the elapsed time in milliseconds before pressAndHold signal is emitted.")
-            }
-
-            SecondColumnLayout {
-                SpinBox {
-                    backendValue: backendValues.pressAndHoldInterval
-                    minimumValue: 0
-                    maximumValue: 2000
-                    decimals: 0
-                }
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
-                text: qsTr("Scroll gesture enabled")
-                tooltip: qsTr("Responds to scroll gestures from non-mouse devices.")
-                disabledState: !backendValues.scrollGestureEnabled.isAvailable
-            }
-
-            SecondColumnLayout {
-                CheckBox {
-                    Layout.fillWidth: true
-                    backendValue: backendValues.scrollGestureEnabled
-                    text: backendValues.scrollGestureEnabled.valueToString
-                    enabled: backendValue.isAvailable
-                }
-
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
                 text: qsTr("Cursor shape")
                 tooltip: qsTr("Cursor shape for this mouse area.")
                 disabledState: !backendValues.cursorShape.isAvailable
@@ -133,6 +96,9 @@ Column {
 
             SecondColumnLayout {
                 ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     backendValue: backendValues.cursorShape
                     model: ["ArrowCursor", "UpArrowCursor", "CrossCursor", "WaitCursor",
                             "IBeamCursor", "SizeVerCursor", "SizeHorCursor", "SizeBDiagCursor",
@@ -140,15 +106,50 @@ Column {
                             "SplitHCursor", "PointingHandCursor", "ForbiddenCursor", "WhatsThisCursor",
                             "BusyCursor", "OpenHandCursor", "ClosedHandCursor", "DragCopyCursor",
                             "DragMoveCursor", "DragLinkCursor"]
-                    Layout.fillWidth: true
                     scope: "Qt"
                     enabled: backendValue.isAvailable
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
+                text: qsTr("Hold interval")
+                tooltip: qsTr("Overrides the elapsed time in milliseconds before pressAndHold signal is emitted.")
+            }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.pressAndHoldInterval
+                    minimumValue: 0
+                    maximumValue: 2000
+                    decimals: 0
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Scroll gesture")
+                tooltip: qsTr("Responds to scroll gestures from non-mouse devices.")
+                disabledState: !backendValues.scrollGestureEnabled.isAvailable
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: qsTr("Enabled")
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.scrollGestureEnabled
+                    enabled: backendValue.isAvailable
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
                 text: qsTr("Prevent stealing")
                 tooltip: qsTr("Stops mouse events from being stolen from this mouse area.")
                 disabledState: !backendValues.preventStealing.isAvailable
@@ -156,109 +157,114 @@ Column {
 
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
-                    backendValue: backendValues.preventStealing
                     text: backendValues.preventStealing.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.preventStealing
                     enabled: backendValue.isAvailable
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-                }
             }
 
-            Label {
+            PropertyLabel {
-                text: qsTr("Propagate composed events")
+                text: qsTr("Propagate events")
                 tooltip: qsTr("Automatically propagates composed mouse events to other mouse areas.")
                 disabledState: !backendValues.propagateComposedEvents.isAvailable
             }
 
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
-                    backendValue: backendValues.propagateComposedEvents
                     text: backendValues.propagateComposedEvents.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.propagateComposedEvents
                     enabled: backendValue.isAvailable
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-                }
             }
         }
     }
 
     Section {
+        caption: qsTr("Drag")
+
         anchors.left: parent.left
         anchors.right: parent.right
-        caption: qsTr("Drag")
         visible: backendValues.drag_target.isAvailable
 
         SectionLayout {
-            Label {
+            PropertyLabel {
                 text: qsTr("Target")
                 tooltip: qsTr("ID of the component to drag.")
             }
+
             SecondColumnLayout {
                 ItemFilterComboBox {
                     typeFilter: "QtQuick.QtObject"
                     validator: RegExpValidator { regExp: /(^$|^[a-z_]\w*)/ }
                     backendValue: backendValues.drag_target
-                    Layout.fillWidth: true
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-                }
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Axis")
                 tooltip: qsTr("Whether dragging can be done horizontally, vertically, or both.")
             }
+
             SecondColumnLayout {
                 ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     scope: "Drag"
                     model: ["XAxis", "YAxis", "XAndYAxis"]
                     backendValue: backendValues.drag_axis
-                    Layout.fillWidth: true
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-                }
             }
 
-            Label {
+            PropertyLabel {
-                text: qsTr("Filter children")
-                tooltip: qsTr("Whether dragging overrides descendant mouse areas.")
-            }
-
-            SecondColumnLayout {
-                CheckBox {
-                    Layout.fillWidth: true
-                    backendValue: backendValues.drag_filterChildren
-                    text: backendValues.drag_filterChildren.valueToString
-                }
-
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
                 text: qsTr("Threshold")
                 tooltip: qsTr("Threshold in pixels of when the drag operation should start.")
             }
 
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.drag_threshold
                     minimumValue: 0
                     maximumValue: 5000
                     decimals: 0
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-                }
             }
 
-            Label {
+            PropertyLabel {
+                text: qsTr("Filter children")
+                tooltip: qsTr("Whether dragging overrides descendant mouse areas.")
+            }
+
+            SecondColumnLayout {
+                CheckBox {
+                    text: backendValues.drag_filterChildren.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.drag_filterChildren
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
                 text: qsTr("Smoothed")
                 tooltip: qsTr("Moves targets only after the drag operation has started.\n"
                               + "When disabled, moves targets straight to the current mouse position.")
@@ -266,13 +272,13 @@ Column {
 
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
-                    backendValue: backendValues.drag_smoothed
                     text: backendValues.drag_smoothed.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.drag_smoothed
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-                }
             }
         }
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/NumberAnimationSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -24,62 +24,59 @@
 ****************************************************************************/
 
 import HelperWidgets 2.0
-import QtQuick 2.1
+import QtQuick 2.15
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
     Section {
         caption: qsTr("Number Animation")
+
         anchors.left: parent.left
         anchors.right: parent.right
 
         SectionLayout {
-            Label {
+            PropertyLabel {
                 text: qsTr("From")
                 tooltip: qsTr("Start value for the animation.")
             }
 
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     maximumValue: 9999999
                     minimumValue: -1
                     backendValue: backendValues.from
-                    Layout.fillWidth: true
-                    Layout.maximumWidth: 100
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-                }
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("To")
                 tooltip: qsTr("End value for the animation.")
             }
 
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     maximumValue: 9999999
                     minimumValue: -1
                     backendValue: backendValues.to
-                    Layout.fillWidth: true
-                    Layout.maximumWidth: 100
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
-                }
             }
         }
     }
 
-    AnimationTargetSection {
+    AnimationTargetSection {}
 
-    }
+    AnimationSection { showEasingCurve: true }
-
-    AnimationSection {
-        showEasingCurve: true
-    }
 }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ParallelAnimationSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -24,14 +24,13 @@
 ****************************************************************************/
 
 import HelperWidgets 2.0
-import QtQuick 2.1
+import QtQuick 2.15
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts 1.15
+
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
-    AnimationSection {
+    AnimationSection { showDuration: false }
-        showDuration: false
-    }
 }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PathViewSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,171 +23,186 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import QtQuick.Layouts 1.15
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
     Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
         caption: qsTr("Path View")
 
+        anchors.left: parent.left
+        anchors.right: parent.right
+
         SectionLayout {
-
+            PropertyLabel {
-            Label {
-                text: qsTr("Drag margin")
-                tooltip: qsTr("Drag margin")
-            }
-
-            SecondColumnLayout {
-                SpinBox {
-                    backendValue: backendValues.dragMargin
-                    minimumValue: 0
-                    maximumValue: 100
-                    decimals: 0
-                }
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
-                text: qsTr("Flick deceleration")
-            }
-
-            SecondColumnLayout {
-                SpinBox {
-                    backendValue: backendValues.flickDeceleration
-                    minimumValue: 0
-                    maximumValue: 1000
-                    decimals: 0
-                }
-                ExpandingSpacer {
-                }
-            }
-
-            Label {
                 text: qsTr("Interactive")
                 tooltip: qsTr("Allows users to drag or flick a path view.")
             }
 
             SecondColumnLayout {
                 CheckBox {
-                    Layout.fillWidth: true
-                    backendValue: backendValues.interactive
                     text: backendValues.interactive.valueToString
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.interactive
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel { text: qsTr("Drag margin") }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.dragMargin
+                    minimumValue: 0
+                    maximumValue: 100
+                    decimals: 0
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel { text: qsTr("Flick deceleration") }
+
+            SecondColumnLayout {
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    backendValue: backendValues.flickDeceleration
+                    minimumValue: 0
+                    maximumValue: 1000
+                    decimals: 0
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
                 text: qsTr("Offset")
                 tooltip: qsTr("Specifies how far along the path the items are from their initial positions. This is a real number that ranges from 0.0 to the count of items in the model.")
             }
 
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.offset
                     minimumValue: 0
                     maximumValue: 1000
                     decimals: 0
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Item count")
                 tooltip: qsTr("Number of items visible on the path at any one time.")
             }
 
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.pathItemCount
                     minimumValue: -1
                     maximumValue: 1000
                     decimals: 0
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
         }
     }
+
     Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
         caption: qsTr("Path View Highlight")
 
-        SectionLayout {
+        anchors.left: parent.left
+        anchors.right: parent.right
 
-            Label {
+        SectionLayout {
+            PropertyLabel {
                 text: qsTr("Range")
                 tooltip: qsTr("Highlight range")
             }
 
             SecondColumnLayout {
                 ComboBox {
-                    scope: "PathView"
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
-                    model: ["NoHighlightRange", "ApplyRange", "StrictlyEnforceRange"]
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     backendValue: backendValues.highlightRangeMode
-                    Layout.fillWidth: true
+                    model: ["NoHighlightRange", "ApplyRange", "StrictlyEnforceRange"]
-                }
+                    scope: "PathView"
-                ExpandingSpacer {
                 }
+
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Move duration")
                 tooltip: qsTr("Move animation duration of the highlight delegate.")
             }
 
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.highlightMoveDuration
                     minimumValue: 0
                     maximumValue: 1000
                     decimals: 0
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Preferred begin")
                 tooltip: qsTr("Preferred highlight begin - must be smaller than Preferred end. Note that the user has to add a highlight component.")
             }
 
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.preferredHighlightBegin
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
                     decimals: 2
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
 
-            Label {
+            PropertyLabel {
                 text: qsTr("Preferred end")
                 tooltip: qsTr("Preferred highlight end - must be larger than Preferred begin. Note that the user has to add a highlight component.")
             }
 
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.preferredHighlightEnd
                     minimumValue: 0
                     maximumValue: 1
                     stepSize: 0.1
                     decimals: 2
                 }
-                ExpandingSpacer {
+
-                }
+                ExpandingSpacer {}
             }
         }
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PauseAnimationSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -24,13 +24,13 @@
 ****************************************************************************/
 
 import HelperWidgets 2.0
-import QtQuick 2.1
+import QtQuick 2.15
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts 1.15
+
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
-    AnimationSection {
+    AnimationSection {}
-    }
 }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PropertyActionSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2020 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -24,8 +24,10 @@
 ****************************************************************************/
 
 import HelperWidgets 2.0
-import QtQuick 2.1
+import QtQuick 2.15
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts 1.15
+import StudioTheme 1.0 as StudioTheme
+
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
@@ -33,28 +35,31 @@ Column {
     Section {
         id: section
         caption: qsTr("Property Action")
+
         anchors.left: parent.left
         anchors.right: parent.right
 
         SectionLayout {
-            Label {
+            PropertyLabel {
                 text: qsTr("Value")
                 tooltip: qsTr("Value of the property.")
             }
-            LineEdit {
+
-                backendValue: backendValues.value
+            SecondColumnLayout {
-                Layout.fillWidth: true
+                LineEdit {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.value
+                }
+
+                ExpandingSpacer {}
             }
         }
     }
 
+    AnimationTargetSection {}
 
-    AnimationTargetSection {
+    AnimationSection { showDuration: false }
-
-    }
-
-    AnimationSection {
-        showDuration: false
-    }
 }
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PropertyAnimationSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -24,18 +24,14 @@
 ****************************************************************************/
 
 import HelperWidgets 2.0
-import QtQuick 2.1
+import QtQuick 2.15
-import QtQuick.Layouts 1.1
+import QtQuick.Layouts 1.15
+
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
-    AnimationTargetSection {
+    AnimationTargetSection {}
 
-    }
+    AnimationSection { showEasingCurve: true }
-
-    AnimationSection {
-        showEasingCurve: true
-    }
 }
-

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -24,7 +24,7 @@
 ****************************************************************************/
 
 import QtQuick 2.15
-import QtQuick.Layouts 1.0
+import QtQuick.Layouts 1.15
 import QtQuickDesignerTheme 1.0
 import HelperWidgets 2.0
 import StudioTheme 1.0 as StudioTheme
@@ -41,164 +41,19 @@ Rectangle {
     }
 
     ScrollView {
+        id: mainScrollView
+        clip: true
         anchors.fill: parent
 
+        onWidthChanged: StudioTheme.Values.responsiveResize(itemPane.width)
+        Component.onCompleted: StudioTheme.Values.responsiveResize(itemPane.width)
+
         Column {
             id: rootColumn
             y: -1
             width: itemPane.width
-            Section {
-                caption: qsTr("Component")
 
-                anchors.left: parent.left
+            ComponentSection {}
-                anchors.right: parent.right
-
-                SectionLayout {
-                    Label {
-                        text: qsTr("Type")
-                    }
-
-                    SecondColumnLayout {
-                        z: 2
-
-                        RoundedPanel {
-                            Layout.fillWidth: true
-                            height: StudioTheme.Values.height
-
-                            Label {
-                                anchors.fill: parent
-                                anchors.leftMargin: StudioTheme.Values.inputHorizontalPadding
-                                anchors.topMargin: StudioTheme.Values.typeLabelVerticalShift
-                                text: backendValues.className.value
-                            }
-                            ToolTipArea {
-                                anchors.fill: parent
-                                onDoubleClicked: {
-                                    typeLineEdit.text = backendValues.className.value
-                                    typeLineEdit.visible = ! typeLineEdit.visible
-                                    typeLineEdit.forceActiveFocus()
-                                }
-                                tooltip: qsTr("Changes the type of this component.")
-                                enabled: !modelNodeBackend.multiSelection
-                            }
-
-                            ExpressionTextField {
-                                z: 2
-                                id: typeLineEdit
-                                completeOnlyTypes: true
-                                replaceCurrentTextByCompletion: true
-                                anchors.fill: parent
-
-                                visible: false
-
-                                showButtons: false
-                                fixedSize: true
-
-                                property bool blockEditingFinished: false
-
-                                onEditingFinished: {
-                                    if (typeLineEdit.blockEditingFinished)
-                                        return
-
-                                    typeLineEdit.blockEditingFinished = true
-
-                                    if (typeLineEdit.visible)
-                                        changeTypeName(typeLineEdit.text.trim())
-                                    typeLineEdit.visible = false
-
-                                    typeLineEdit.blockEditingFinished = false
-
-                                    typeLineEdit.completionList.model = null
-                                }
-
-                                onRejected: {
-                                    typeLineEdit.visible = false
-                                    typeLineEdit.completionList.model = null
-                                }
-                            }
-
-                        }
-                        Item {
-                            Layout.preferredWidth: 20
-                            Layout.preferredHeight: 20
-                        }
-                    }
-
-                    Label {
-                        text: qsTr("ID")
-                    }
-
-                    SecondColumnLayout {
-                        spacing: 2
-                        LineEdit {
-                            id: lineEdit
-
-                            backendValue: backendValues.id
-                            placeholderText: qsTr("ID")
-                            text: backendValues.id.value
-                            Layout.fillWidth: true
-                            width: 240
-                            showTranslateCheckBox: false
-                            showExtendedFunctionButton: false
-                            enabled: !modelNodeBackend.multiSelection
-                        }
-
-                        Rectangle {
-                            id: aliasIndicator
-                            color: "transparent"
-                            border.color: "transparent"
-                            implicitWidth: StudioTheme.Values.height
-                            implicitHeight: StudioTheme.Values.height
-                            z: 10
-
-                            Label {
-                                id: aliasIndicatorIcon
-                                enabled: !modelNodeBackend.multiSelection
-                                anchors.fill: parent
-                                text: {
-                                    if (!aliasIndicatorIcon.enabled)
-                                        return StudioTheme.Constants.idAliasOff
-
-                                    return hasAliasExport ? StudioTheme.Constants.idAliasOn : StudioTheme.Constants.idAliasOff
-                                }
-                                color: {
-                                    if (!aliasIndicatorIcon.enabled)
-                                        return StudioTheme.Values.themeTextColorDisabled
-
-                                    return hasAliasExport ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeTextColor
-                                }
-                                font.family: StudioTheme.Constants.iconFont.family
-                                font.pixelSize: Math.round(16 * StudioTheme.Values.scaleFactor)
-                                verticalAlignment: Text.AlignVCenter
-                                horizontalAlignment: Text.AlignHCenter
-                                states: [
-                                    State {
-                                        name: "hovered"
-                                        when: toolTipArea.containsMouse && aliasIndicatorIcon.enabled
-                                        PropertyChanges {
-                                            target: aliasIndicatorIcon
-                                            scale: 1.2
-                                        }
-                                    }
-                                ]
-                            }
-
-                            ToolTipArea {
-                                id: toolTipArea
-                                enabled: !modelNodeBackend.multiSelection
-                                anchors.fill: parent
-                                onClicked: toogleExportAlias()
-                                tooltip: qsTr("Exports this component as an alias property of the root component.")
-                            }
-                        }
-                    }
-                }
-            }
-
-            Item {
-                height: 4
-                width: 4
-            }
 
             Column {
                 anchors.left: parent.left

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/RectangleSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,79 +23,69 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
-
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Color")
-
-        ColorEditor {
-            caption: qsTr("Color")
-            backendValue: backendValues.color
-            supportGradient: backendValues.gradient.isAvailable
-        }
-
-
-    }
-
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Border Color")
-        visible: backendValues.border_color.isAvailable
-
-        ColorEditor {
-            caption: qsTr("Border Color")
-            backendValue: backendValues.border_color
-            supportGradient: false
-        }
-    }
-
-
     Section {
         anchors.left: parent.left
         anchors.right: parent.right
         caption: qsTr("Rectangle")
 
         SectionLayout {
-            rows: 2
+            PropertyLabel { text: qsTr("Color") }
-            Label {
+
+            ColorEditor {
+                backendValue: backendValues.color
+                supportGradient: backendValues.gradient.isAvailable
+            }
+
+            PropertyLabel {
+                text: qsTr("Border color")
+                visible: backendValues.border_color.isAvailable
+            }
+
+            ColorEditor {
+                visible: backendValues.border_color.isAvailable
+                backendValue: backendValues.border_color
+                supportGradient: false
+            }
+
+            PropertyLabel {
                 text: qsTr("Border")
                 disabledState: !backendValues.border_width.isAvailable
             }
+
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     backendValue: backendValues.border_width
-                    hasSlider: true
-                    Layout.preferredWidth: 120
                     enabled: backendValue.isAvailable
                 }
-                ExpandingSpacer {
 
-                }
+                ExpandingSpacer {}
-            }
-            Label {
-                text: qsTr("Radius")
             }
+
+            PropertyLabel { text: qsTr("Radius") }
+
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
                     backendValue: backendValues.radius
-                    hasSlider: true
-                    Layout.preferredWidth: 120
                     minimumValue: 0
                     maximumValue: Math.min(backendValues.height.value, backendValues.width.value) / 2
                 }
-                ExpandingSpacer {
 
-                }
+                ExpandingSpacer {}
             }
         }
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/RowSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,53 +23,58 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
     Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
         caption: qsTr("Row")
 
+        anchors.left: parent.left
+        anchors.right: parent.right
+
         SectionLayout {
-            Label {
+            PropertyLabel { text: qsTr("Spacing") }
-                text: qsTr("Layout direction")
-                disabledState: !backendValues.layoutDirection.isAvailable
-            }
-
-            SecondColumnLayout {
-                ComboBox {
-                    model: ["LeftToRight", "RightToLeft"]
-                    backendValue: backendValues.layoutDirection
-                    Layout.fillWidth: true
-                    scope: "Qt"
-                    enabled: backendValue.isAvailable
-                }
-            }
-
-            Label {
-                text: qsTr("Spacing")
-            }
 
             SecondColumnLayout {
                 SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
                     backendValue: backendValues.spacing
                     minimumValue: -4000
                     maximumValue: 4000
                     decimals: 0
                 }
 
-                ExpandingSpacer {
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Layout direction")
+                disabledState: !backendValues.layoutDirection.isAvailable
+            }
+
+            SecondColumnLayout {
+                ComboBox {
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    backendValue: backendValues.layoutDirection
+                    model: ["LeftToRight", "RightToLeft"]
+                    scope: "Qt"
+                    enabled: backendValue.isAvailable
                 }
+
+                ExpandingSpacer {}
             }
         }
     }
 
-    PaddingSection {
+    PaddingSection {}
-    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TargetComboBox.qml

@@ -23,33 +23,30 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.0
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
 import StudioControls 1.0 as StudioControls
-import QtQuickDesignerTheme 1.0
+import StudioTheme 1.0 as StudioTheme
 
 StudioControls.ComboBox {
-
-    property string targetName: anchorBackend.topTarget
-    property color textColor: Theme.color(Theme.PanelTextColorLight)
-
-    actionIndicatorVisible: false
-
     id: targetComboBox
 
-    Connections {
+    property string targetName: anchorBackend.topTarget
-        target: anchorBackend
+
-        onInvalidated: {
+    actionIndicatorVisible: false
-            targetComboBox.currentIndex =
+    model: anchorBackend.possibleTargetItems
-                    anchorBackend.indexOfPossibleTargetItem(targetComboBox.targetName)
-        }
-    }
 
     onTargetNameChanged: {
         targetComboBox.currentIndex =
                 anchorBackend.indexOfPossibleTargetItem(targetComboBox.targetName)
     }
 
-    model: anchorBackend.possibleTargetItems
+    Connections {
+        target: anchorBackend
+        function onInvalidated() {
+            targetComboBox.currentIndex =
+                    anchorBackend.indexOfPossibleTargetItem(targetComboBox.targetName)
+        }
+    }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextEditSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,64 +23,30 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
-    StandardTextSection {
+    CharacterSection {
-        showVerticalAlignment: true
-        showFormatProperty: true
         richTextEditorAvailable: true
+        showVerticalAlignment: true
     }
 
-    Section {
+    TextInputSection {}
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Text Color")
-
-        ColorEditor {
-            caption: qsTr("Text Color")
-            backendValue: backendValues.color
-            supportGradient: false
-        }
 
+    TextExtrasSection {
+        showWrapMode: true
+        showFormatProperty: true
     }
 
-    Section {
+    FontExtrasSection {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Selection Color")
-
-        ColorEditor {
-            caption: qsTr("Selection Color")
-            backendValue:  backendValues.selectionColor
-            supportGradient: false
-        }
-    }
-
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Selected Text Color")
-
-        ColorEditor {
-            caption: qsTr("Selected Text Color")
-            backendValue: backendValues.selectedTextColor
-            supportGradient: false
-        }
-    }
-
-    FontSection {
         showStyle: false
     }
 
-    TextInputSection {
-    }
-
     PaddingSection {
         visible: minorQtQuickVersion > 5
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextInputSection.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,166 +23,230 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
+import StudioTheme 1.0 as StudioTheme
 
 Section {
+    id: textInputSection
     anchors.left: parent.left
     anchors.right: parent.right
     caption: qsTr("Text Input")
 
     property bool isTextInput: false
-    id: textInputSection
 
     SectionLayout {
-        rows: 4
+        PropertyLabel { text: qsTr("Selection color") }
-        columns: 2
 
-        Label {
+        ColorEditor {
-            text: qsTr("Mouse selection mode")
+            backendValue: backendValues.selectionColor
-        }
+            supportGradient: false
-        ComboBox {
-            Layout.fillWidth: true
-            backendValue: backendValues.mouseSelectionMode
-            scope: "TextInput"
-            model: ["SelectCharacters", "SelectWords"]
         }
 
-        Label {
+        PropertyLabel { text: qsTr("Selected text color") }
+
+        ColorEditor {
+            backendValue: backendValues.selectedTextColor
+            supportGradient: false
+        }
+
+        PropertyLabel { text: qsTr("Selection mode") }
+
+        SecondColumnLayout {
+            ComboBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                backendValue: backendValues.mouseSelectionMode
+                scope: "TextInput"
+                model: ["SelectCharacters", "SelectWords"]
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
             visible: textInputSection.isTextInput
             text: qsTr("Input mask")
         }
 
-        LineEdit {
+        SecondColumnLayout {
             visible: textInputSection.isTextInput
-            backendValue: backendValues.inputMask
+
-            Layout.fillWidth: true
+            LineEdit {
-            showTranslateCheckBox: false
+                backendValue: backendValues.inputMask
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                showTranslateCheckBox: false
+            }
+
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
             visible: textInputSection.isTextInput
             text: qsTr("Echo mode")
         }
 
-        ComboBox {
+        SecondColumnLayout {
             visible: textInputSection.isTextInput
-            Layout.fillWidth: true
+
-            backendValue: backendValues.echoMode
+            ComboBox {
-            scope: "TextInput"
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
-            model: ["Normal", "Password", "PasswordEchoOnEdit", "NoEcho"]
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                backendValue: backendValues.echoMode
+                scope: "TextInput"
+                model: ["Normal", "Password", "PasswordEchoOnEdit", "NoEcho"]
+            }
+
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
             visible: textInputSection.isTextInput
             text: qsTr("Password character")
             tooltip: qsTr("Character displayed when users enter passwords.")
         }
 
-        LineEdit {
+        SecondColumnLayout {
             visible: textInputSection.isTextInput
-            backendValue: backendValues.passwordCharacter
+
-            Layout.fillWidth: true
+            LineEdit {
-            showTranslateCheckBox: false
+                backendValue: backendValues.passwordCharacter
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                showTranslateCheckBox: false
+            }
+
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
             visible: !textInputSection.isTextInput
             text: qsTr("Tab stop distance")
             tooltip: qsTr("Default distance between tab stops in device units.")
         }
-        SpinBox {
+
+        SecondColumnLayout {
             visible: !textInputSection.isTextInput
-            Layout.fillWidth: true
+
-            backendValue: backendValues.tabStopDistance
+            SpinBox {
-            maximumValue: 200
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
-            minimumValue: 0
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.tabStopDistance
+                maximumValue: 200
+                minimumValue: 0
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+            ControlLabel { text: "px" }
+
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
             visible: !textInputSection.isTextInput
             text: qsTr("Text margin")
             tooltip: qsTr("Margin around the text in the Text Edit in pixels.")
         }
-        SpinBox {
+
+        SecondColumnLayout {
             visible: !textInputSection.isTextInput
-            Layout.fillWidth: true
+
-            backendValue: backendValues.textMargin
+            SpinBox {
-            maximumValue: 200
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
-            minimumValue: -200
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: backendValues.textMargin
+                maximumValue: 200
+                minimumValue: -200
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+            ControlLabel { text: "px" }
+
+            ExpandingSpacer {}
         }
 
-        Label {
+        PropertyLabel {
             visible: textInputSection.isTextInput
             text: qsTr("Maximum length")
             tooltip: qsTr("Maximum permitted length of the text in the Text Input.")
         }
-        SpinBox {
-            visible: textInputSection.isTextInput
-            Layout.fillWidth: true
-            backendValue: backendValues.maximumLength
-            minimumValue: 0
-            maximumValue: 32767
-        }
-
-        Label {
-            text: qsTr("Flags")
-            Layout.alignment: Qt.AlignTop
-        }
 
         SecondColumnLayout {
-            ColumnLayout {
+            visible: textInputSection.isTextInput
-                CheckBox {
-                    Layout.fillWidth: true
-                    text: qsTr("Read only")
-                    backendValue: backendValues.readOnly
-                }
 
-                CheckBox {
+            SpinBox {
-                    Layout.fillWidth: true
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
-                    text: qsTr("Cursor visible")
+                               + StudioTheme.Values.actionIndicatorWidth
-                    backendValue: backendValues.cursorVisible
+                backendValue: backendValues.maximumLength
-                }
+                minimumValue: 0
-
+                maximumValue: 32767
-                CheckBox {
-                    Layout.fillWidth: true
-                    text: qsTr("Active focus on press")
-                    backendValue: backendValues.activeFocusOnPress
-                }
-
-                CheckBox {
-                    visible: textInputSection.isTextInput
-                    Layout.fillWidth: true
-                    text: qsTr("Auto scroll")
-                    backendValue: backendValues.autoScroll
-                }
-
-                CheckBox {
-                    Layout.fillWidth: true
-                    text: qsTr("Overwrite mode")
-                    backendValue: backendValues.overwriteMode
-                }
-
-                CheckBox {
-                    Layout.fillWidth: true
-                    text: qsTr("Persistent selection")
-                    backendValue: backendValues.persistentSelection
-                }
-
-                CheckBox {
-                    Layout.fillWidth: true
-                    text: qsTr("Select by mouse")
-                    backendValue: backendValues.selectByMouse
-                }
-
-                CheckBox {
-                    visible: !textInputSection.isTextInput
-                    Layout.fillWidth: true
-                    text: qsTr("Select by keyboard")
-                    backendValue: backendValues.selectByKeyboard
-                }
             }
+
+            ExpandingSpacer {}
+        }
+
+        component FlagItem : SecondColumnLayout {
+            property alias backendValue: checkBox.backendValue
+            CheckBox {
+                id: checkBox
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                text: backendValue.valueToString
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel { text: qsTr("Read only") }
+
+        FlagItem { backendValue: backendValues.readOnly }
+
+        PropertyLabel { text: qsTr("Cursor visible") }
+
+        FlagItem { backendValue: backendValues.cursorVisible }
+
+        PropertyLabel { text: qsTr("Focus on press") }
+
+        FlagItem { backendValue: backendValues.activeFocusOnPress }
+
+        PropertyLabel {
+            visible: textInputSection.isTextInput
+            text: qsTr("Auto scroll")
+        }
+
+        FlagItem {
+            visible: textInputSection.isTextInput
+            backendValue: backendValues.autoScroll
+        }
+
+        PropertyLabel { text: qsTr("Overwrite mode") }
+
+        FlagItem { backendValue: backendValues.overwriteMode }
+
+        PropertyLabel { text: qsTr("Persistent selection") }
+
+        FlagItem { backendValue: backendValues.persistentSelection }
+
+        PropertyLabel { text: qsTr("Select by mouse") }
+
+        FlagItem { backendValue: backendValues.selectByMouse }
+
+        PropertyLabel {
+            visible: !textInputSection.isTextInput
+            text: qsTr("Select by keyboard")
+        }
+
+        FlagItem {
+            visible: !textInputSection.isTextInput
+            backendValue: backendValues.selectByKeyboard
         }
     }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextInputSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,65 +23,32 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
 
 Column {
     anchors.left: parent.left
     anchors.right: parent.right
 
-    StandardTextSection {
+    CharacterSection {
         showVerticalAlignment: true
     }
 
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Text Color")
-
-        ColorEditor {
-            caption: qsTr("Text Color")
-            backendValue: backendValues.color
-            supportGradient: false
-        }
-
-    }
-
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Selection Color")
-
-        ColorEditor {
-            caption: qsTr("Selection Color")
-            backendValue:  backendValues.selectionColor
-            supportGradient: false
-        }
-    }
-
-    Section {
-        anchors.left: parent.left
-        anchors.right: parent.right
-        caption: qsTr("Selected Text Color")
-
-        ColorEditor {
-            caption: qsTr("Selected Text Color")
-            backendValue: backendValues.selectedTextColor
-            supportGradient: false
-        }
-    }
-
-   FontSection {
-       showStyle: false
-   }
-
    TextInputSection {
        isTextInput: true
    }
 
+   TextExtrasSection {
+       showWrapMode: true
+       showFormatProperty: true
+   }
+
+   FontExtrasSection {
+       showStyle: false
+   }
+
    PaddingSection {
        visible: minorQtQuickVersion > 5
    }
-
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextSpecifics.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,54 +23,33 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
 import HelperWidgets 2.0
-import QtQuick.Layouts 1.0
 
 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 {
+    FontExtrasSection {
-        anchors.left: parent.left
+        showStyle: true
-        anchors.right: parent.right
-        caption: qsTr("Text Color")
-
-        ColorEditor {
-            caption: qsTr("Text Color")
-            backendValue: backendValues.color
-            supportGradient: false
-        }
-
     }
 
-    Section {
+    PaddingSection {
-        anchors.left: parent.left
+        visible: minorQtQuickVersion > 5
-        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
-   }
 }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/emptyPane.qml

@@ -23,7 +23,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
 import HelperWidgets 2.0
 import QtQuickDesignerTheme 1.0
 
@@ -42,8 +42,8 @@ Rectangle {
 
             Label {
                 id: test
-                text: qsTr("None or multiple components selected.");
+                text: qsTr("None or multiple components selected.")
-                anchors.fill: parent
+                anchors.fill: parent // TODO
             }
         }
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick3D/Object3DPane.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -24,10 +24,11 @@
 ****************************************************************************/
 
 import QtQuick 2.15
-import QtQuick.Layouts 1.0
+import QtQuick.Layouts 1.15
 import QtQuickDesignerTheme 1.0
 import HelperWidgets 2.0
 import StudioTheme 1.0 as StudioTheme
+import "../QtQuick" as Q
 
 Rectangle {
     id: itemPane
@@ -47,162 +48,13 @@ Rectangle {
             id: rootColumn
             y: -1
             width: itemPane.width
-            Section {
-                caption: qsTr("Component")
 
-                anchors.left: parent.left
+            Q.ComponentSection {}
-                anchors.right: parent.right
-
-                SectionLayout {
-                    Label {
-                        text: qsTr("Type")
-                    }
-
-                    SecondColumnLayout {
-                        z: 2
-
-                        RoundedPanel {
-                            Layout.fillWidth: true
-                            height: StudioTheme.Values.height
-
-                            Label {
-                                anchors.fill: parent
-                                anchors.leftMargin: StudioTheme.Values.inputHorizontalPadding
-                                anchors.topMargin: StudioTheme.Values.typeLabelVerticalShift
-                                text: backendValues.className.value
-                            }
-                            ToolTipArea {
-                                anchors.fill: parent
-                                onDoubleClicked: {
-                                    typeLineEdit.text = backendValues.className.value
-                                    typeLineEdit.visible = ! typeLineEdit.visible
-                                    typeLineEdit.forceActiveFocus()
-                                }
-                                tooltip: qsTr("Change the type of this component.")
-                                enabled: !modelNodeBackend.multiSelection
-                            }
-
-                            ExpressionTextField {
-                                z: 2
-                                id: typeLineEdit
-                                completeOnlyTypes: true
-                                replaceCurrentTextByCompletion: true
-                                anchors.fill: parent
-
-                                visible: false
-
-                                showButtons: false
-                                fixedSize: true
-
-                                property bool blockEditingFinished: false
-
-                                onEditingFinished: {
-                                    if (typeLineEdit.blockEditingFinished)
-                                        return
-
-                                    typeLineEdit.blockEditingFinished = true
-
-                                    if (typeLineEdit.visible)
-                                        changeTypeName(typeLineEdit.text.trim())
-                                    typeLineEdit.visible = false
-
-                                    typeLineEdit.blockEditingFinished = false
-
-                                    typeLineEdit.completionList.model = null
-                                }
-
-                                onRejected: {
-                                    typeLineEdit.visible = false
-                                    typeLineEdit.completionList.model = null
-                                }
-                            }
-
-                        }
-                        Item {
-                            Layout.preferredWidth: 20
-                            Layout.preferredHeight: 20
-                        }
-                    }
-
-                    Label {
-                        text: qsTr("ID")
-                    }
-
-                    SecondColumnLayout {
-                        spacing: 2
-                        LineEdit {
-                            id: lineEdit
-
-                            backendValue: backendValues.id
-                            placeholderText: qsTr("ID")
-                            text: backendValues.id.value
-                            Layout.fillWidth: true
-                            width: 240
-                            showTranslateCheckBox: false
-                            showExtendedFunctionButton: false
-                            enabled: !modelNodeBackend.multiSelection
-                        }
-
-                        Rectangle {
-                            id: aliasIndicator
-                            color: "transparent"
-                            border.color: "transparent"
-                            implicitWidth: StudioTheme.Values.height
-                            implicitHeight: StudioTheme.Values.height
-                            z: 10
-
-                            Label {
-                                id: aliasIndicatorIcon
-                                enabled: !modelNodeBackend.multiSelection
-                                anchors.fill: parent
-                                text: {
-                                    if (!aliasIndicatorIcon.enabled)
-                                        return StudioTheme.Constants.idAliasOff
-
-                                    return hasAliasExport ? StudioTheme.Constants.idAliasOn : StudioTheme.Constants.idAliasOff
-                                }
-                                color: {
-                                    if (!aliasIndicatorIcon.enabled)
-                                        return StudioTheme.Values.themeTextColorDisabled
-
-                                    return hasAliasExport ? StudioTheme.Values.themeInteraction : StudioTheme.Values.themeTextColor
-                                }
-                                font.family: StudioTheme.Constants.iconFont.family
-                                font.pixelSize: Math.round(16 * StudioTheme.Values.scaleFactor)
-                                verticalAlignment: Text.AlignVCenter
-                                horizontalAlignment: Text.AlignHCenter
-                                states: [
-                                    State {
-                                        name: "hovered"
-                                        when: toolTipArea.containsMouse && aliasIndicatorIcon.enabled
-                                        PropertyChanges {
-                                            target: aliasIndicatorIcon
-                                            scale: 1.2
-                                        }
-                                    }
-                                ]
-                            }
-
-                            ToolTipArea {
-                                id: toolTipArea
-                                enabled: !modelNodeBackend.multiSelection
-                                anchors.fill: parent
-                                onClicked: toogleExportAlias()
-                                tooltip: qsTr("Toggles whether this component is exported as an alias property of the root component.")
-                            }
-                        }
-                    }
-                }
-            }
-
-            Item {
-                height: 4
-                width: 4
-            }
 
             Column {
                 anchors.left: parent.left
                 anchors.right: parent.right
+
                 Loader {
                     id: specificsTwo
                     anchors.left: parent.left

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AbstractButton.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,7 +23,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
 

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AligmentHorizontalButtons.qml

@@ -32,13 +32,9 @@ Row {
     id: alignmentHorizontalButtons
 
     property bool blueHighlight: false
-
     property variant backendValue: backendValues.horizontalAlignment;
-
     property variant value: backendValue.enumeration
-
     property bool baseStateFlag: isBaseState;
-
     property color __currentColor: blueHighlight ? StudioTheme.Values.themeIconColorInteraction
                                                  : StudioTheme.Values.themeIconColor
 
@@ -48,37 +44,32 @@ Row {
         buttonAlignRight.checked = false
 
         if (value !== undefined) {
-            if (value === "AlignLeft") {
+            if (value === "AlignLeft")
                 buttonAlignLeft.checked = true
-            } else if (value === "AlignHCenter") {
+            else if (value === "AlignHCenter")
                 buttonAlignHCenter.checked = true
-            } else if (value === "AlignRight") {
+            else if (value === "AlignRight")
                 buttonAlignRight.checked = true
-            }
         }
         evaluate()
     }
 
-    property bool isInModel: backendValue.isInModel;
+    property bool isInModel: backendValue.isInModel
-    onIsInModelChanged: {
+    onIsInModelChanged: evaluate()
-        evaluate();
+    property bool isInSubState: backendValue.isInSubState
-    }
+    onIsInSubStateChanged: evaluate()
-    property bool isInSubState: backendValue.isInSubState;
-    onIsInSubStateChanged: {
-        evaluate();
-    }
 
     function evaluate() {
         if (baseStateFlag) {
             if (backendValue !== null && backendValue.isInModel)
-                blueHighlight = true;
+                blueHighlight = true
             else
-                blueHighlight = false;
+                blueHighlight = false
         } else {
             if (backendValue !== null && backendValue.isInSubState)
-                blueHighlight = true;
+                blueHighlight = true
             else
-                blueHighlight = false;
+                blueHighlight = false
         }
     }
 
@@ -96,9 +87,7 @@ Row {
         actionIndicator.onClicked: extFuncLogic.show()
         actionIndicator.forceVisible: extFuncLogic.menuVisible
 
-        StudioControls.ButtonGroup {
+        StudioControls.ButtonGroup { id: group }
-            id: group
-        }
 
         StudioControls.AbstractButton {
             id: buttonAlignLeft
@@ -112,6 +101,7 @@ Row {
                     backendValue.setEnumeration("Text", "AlignLeft")
             }
         }
+
         StudioControls.AbstractButton {
             id: buttonAlignHCenter
             buttonIcon: StudioTheme.Constants.textAlignCenter
@@ -124,6 +114,7 @@ Row {
                     backendValue.setEnumeration("Text", "AlignHCenter")
             }
         }
+
         StudioControls.AbstractButton {
             id: buttonAlignRight
             buttonIcon: StudioTheme.Constants.textAlignRight

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml

@@ -1,6 +1,6 @@
 /****************************************************************************
 **
-** Copyright (C) 2016 The Qt Company Ltd.
+** Copyright (C) 2021 The Qt Company Ltd.
 ** Contact: https://www.qt.io/licensing/
 **
 ** This file is part of Qt Creator.
@@ -23,7 +23,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
 import HelperWidgets 2.0
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
@@ -33,168 +33,159 @@ StudioControls.ButtonRow {
 
     enabled: anchorBackend.hasParent && isBaseState
     opacity: enabled ? 1 : 0.5
-
     actionIndicatorVisible: false
 
-    StudioControls.ButtonGroup {
+    StudioControls.ButtonGroup { id: group }
-        id: group
-    }
 
     AbstractButton {
+        property bool topAnchored: anchorBackend.topAnchored
+
         checkable: true
         buttonIcon: StudioTheme.Constants.anchorTop
         tooltip: qsTr("Anchor component to the top.")
 
-        property bool topAnchored: anchorBackend.topAnchored
+        onTopAnchoredChanged: checked = topAnchored
-        onTopAnchoredChanged: {
-            checked = topAnchored
-        }
 
         onClicked: {
             if (checked) {
                 if (anchorBackend.bottomAnchored)
-                    anchorBackend.verticalCentered = false;
+                    anchorBackend.verticalCentered = false
-                anchorBackend.topAnchored = true;
+
+                anchorBackend.topAnchored = true
             } else {
-                anchorBackend.topAnchored = false;
+                anchorBackend.topAnchored = false
             }
         }
     }
 
     AbstractButton {
+        property bool bottomAnchored: anchorBackend.bottomAnchored
+
         checkable: true
         buttonIcon: StudioTheme.Constants.anchorBottom
         tooltip: qsTr("Anchor component to the bottom.")
 
-        property bool bottomAnchored: anchorBackend.bottomAnchored
+        onBottomAnchoredChanged: checked = bottomAnchored
-        onBottomAnchoredChanged: {
-            checked = bottomAnchored
-        }
 
         onClicked: {
             if (checked) {
                 if (anchorBackend.topAnchored)
-                    anchorBackend.verticalCentered = false;
+                    anchorBackend.verticalCentered = false
-                anchorBackend.bottomAnchored = true;
+
+                anchorBackend.bottomAnchored = true
             } else {
-                anchorBackend.bottomAnchored = false;
+                anchorBackend.bottomAnchored = false
             }
         }
     }
 
     AbstractButton {
+        property bool leftAnchored: anchorBackend.leftAnchored
+
         checkable: true
         buttonIcon: StudioTheme.Constants.anchorLeft
         tooltip: qsTr("Anchor component to the left.")
 
-        property bool leftAnchored: anchorBackend.leftAnchored
+        onLeftAnchoredChanged: checked = leftAnchored
-        onLeftAnchoredChanged: {
-            checked = leftAnchored
-        }
 
         onClicked: {
             if (checked) {
                 if (anchorBackend.rightAnchored)
-                    anchorBackend.horizontalCentered = false;
+                    anchorBackend.horizontalCentered = false
-                anchorBackend.leftAnchored = true;
+
+                anchorBackend.leftAnchored = true
             } else {
-                anchorBackend.leftAnchored = false;
+                anchorBackend.leftAnchored = false
             }
         }
     }
 
     AbstractButton {
+        property bool rightAnchored: anchorBackend.rightAnchored
+
         checkable: true
         buttonIcon: StudioTheme.Constants.anchorRight
         tooltip: qsTr("Anchor component to the right.")
 
-        property bool rightAnchored: anchorBackend.rightAnchored
+        onRightAnchoredChanged: checked = rightAnchored
-        onRightAnchoredChanged: {
-            checked = rightAnchored
-        }
 
         onClicked: {
             if (checked) {
                 if (anchorBackend.leftAnchored)
-                    anchorBackend.horizontalCentered = false;
+                    anchorBackend.horizontalCentered = false
-                anchorBackend.rightAnchored = true;
+
+                anchorBackend.rightAnchored = true
             } else {
-                anchorBackend.rightAnchored = false;
+                anchorBackend.rightAnchored = false
             }
         }
     }
 
-    Item {
+    Spacer {
-        width: 16 + 2 * StudioTheme.Values.border
+        implicitWidth: 16 + 2 * StudioTheme.Values.border
-        height: 5
     }
 
     AbstractButton {
+        property bool isFilled: anchorBackend.isFilled
+
         checkable: true
         buttonIcon: StudioTheme.Constants.anchorFill
         tooltip: qsTr("Fill parent component.")
 
-        property bool isFilled: anchorBackend.isFilled
+        onIsFilledChanged: checked = isFilled
-        onIsFilledChanged: {
-            checked = isFilled
-        }
 
         onClicked: {
-            if (checked) {
+            if (checked)
-                anchorBackend.fill();
+                anchorBackend.fill()
-            } else {
+            else
-                anchorBackend.resetLayout();
+                anchorBackend.resetLayout()
-            }
         }
     }
 
-    Item {
+    Spacer {
-        width: 16 + 2 * StudioTheme.Values.border
+        implicitWidth: 16 + 2 * StudioTheme.Values.border
-        height: 5
     }
 
     AbstractButton {
+        property bool verticalCentered: anchorBackend.verticalCentered
+
         checkable: true
         buttonIcon: StudioTheme.Constants.centerVertical
         tooltip: qsTr("Anchor component vertically.")
 
-        property bool verticalCentered: anchorBackend.verticalCentered
+        onVerticalCenteredChanged: checked = verticalCentered
-        onVerticalCenteredChanged: {
-            checked = verticalCentered
-        }
 
         onClicked: {
             if (checked) {
                 if (anchorBackend.topAnchored && anchorBackend.bottomAnchored) {
-                    anchorBackend.topAnchored = false;
+                    anchorBackend.topAnchored = false
-                    anchorBackend.bottomAnchored = false;
+                    anchorBackend.bottomAnchored = false
                 }
-                anchorBackend.verticalCentered = true;
+                anchorBackend.verticalCentered = true
             } else {
-                anchorBackend.verticalCentered = false;
+                anchorBackend.verticalCentered = false
             }
         }
     }
 
     AbstractButton {
+        property bool horizontalCentered: anchorBackend.horizontalCentered
+
         checkable: true
         buttonIcon: StudioTheme.Constants.centerHorizontal
         tooltip: qsTr("Anchor component horizontally.")
 
-        property bool horizontalCentered: anchorBackend.horizontalCentered
+        onHorizontalCenteredChanged: checked = horizontalCentered
-        onHorizontalCenteredChanged: {
-            checked = horizontalCentered
-        }
 
         onClicked: {
             if (checked) {
                 if (anchorBackend.leftAnchored && anchorBackend.rightAnchored) {
-                    anchorBackend.leftAnchored = false;
+                    anchorBackend.leftAnchored = false
-                    anchorBackend.rightAnchored = false;
+                    anchorBackend.rightAnchored = false
                 }
-                anchorBackend.horizontalCentered = true;
+                anchorBackend.horizontalCentered = true
             } else {
-                anchorBackend.horizontalCentered = false;
+                anchorBackend.horizontalCentered = false
             }
         }
     }

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/BoolButtonRowButton.qml

@@ -23,7 +23,7 @@
 **
 ****************************************************************************/
 
-import QtQuick 2.1
+import QtQuick 2.15
 import HelperWidgets 2.0
 import StudioControls 1.0 as StudioControls
 import StudioTheme 1.0 as StudioTheme
@@ -62,23 +62,23 @@ StudioControls.Button {
         property bool baseStateFlag: isBaseState
         onBaseStateFlagChanged: evaluate()
 
-        property bool isInModel: button.backendValue.isInModel
+        property bool isInModel: button.backendValue === undefined ? false
+                                                                   : button.backendValue.isInModel
         onIsInModelChanged: evaluate()
 
 
-        property bool isInSubState: button.backendValue.isInSubState
+        property bool isInSubState: button.backendValue === undefined ? false
+                                                                      : button.backendValue.isInSubState
         onIsInSubStateChanged: evaluate()
 
-        property variant theValue: button.backendValue.value
+        property variant theValue: button.backendValue === undefined ? 0 : button.backendValue.value
         onTheValueChanged: {
             evaluate()
             button.checked = innerObject.theValue
         }
     }
 
-    onCheckedChanged: {
+    onCheckedChanged: button.backendValue.value = button.checked
-        button.backendValue.value = button.checked
-    }
 
     ExtendedFunctionLogic {
         id: extFuncLogic

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/CharacterSection.qml

@@ -0,0 +1,399 @@
+/****************************************************************************
+**
+** Copyright (C) 2021 The Qt Company Ltd.
+** Contact: https://www.qt.io/licensing/
+**
+** This file is part of Qt Creator.
+**
+** Commercial License Usage
+** Licensees holding valid commercial Qt licenses may use this file in
+** accordance with the commercial license agreement provided with the
+** Software or, alternatively, in accordance with the terms contained in
+** a written agreement between you and The Qt Company. For licensing terms
+** and conditions see https://www.qt.io/terms-conditions. For further
+** information use the contact form at https://www.qt.io/contact-us.
+**
+** GNU General Public License Usage
+** Alternatively, this file may be used under the terms of the GNU
+** General Public License version 3 as published by the Free Software
+** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
+** included in the packaging of this file. Please review the following
+** information to ensure the GNU General Public License requirements will
+** be met: https://www.gnu.org/licenses/gpl-3.0.html.
+**
+****************************************************************************/
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtQuick.Templates 2.15 as T
+import HelperWidgets 2.0
+import StudioControls 1.0 as StudioControls
+import StudioTheme 1.0 as StudioTheme
+
+Section {
+    id: root
+    anchors.left: parent.left
+    anchors.right: parent.right
+    caption: qsTr("Character")
+
+    property bool showVerticalAlignment: false
+    property bool showLineHeight: false
+    property bool richTextEditorAvailable: false
+
+    property string fontName: "font"
+    property bool showStyle: false
+
+    function getBackendValue(name) {
+        return backendValues[root.fontName + "_" + name]
+    }
+
+    property variant fontFamily: getBackendValue("family")
+    property variant pointSize: getBackendValue("pointSize")
+    property variant pixelSize: getBackendValue("pixelSize")
+
+    property variant boldStyle: getBackendValue("bold")
+    property variant italicStyle: getBackendValue("italic")
+    property variant underlineStyle: getBackendValue("underline")
+    property variant strikeoutStyle: getBackendValue("strikeout")
+
+    onPointSizeChanged: sizeWidget.setPointPixelSize()
+    onPixelSizeChanged: sizeWidget.setPointPixelSize()
+
+    SectionLayout {
+        PropertyLabel { text: qsTr("Text") }
+
+        SecondColumnLayout {
+            LineEdit {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                backendValue: backendValues.text
+            }
+
+            Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap }
+
+            Rectangle {
+                id: richTextEditorIndicator
+                visible: root.richTextEditorAvailable
+                color: "transparent"
+                border.color: "transparent"
+                implicitWidth: StudioTheme.Values.iconAreaWidth // TODO dedicated value
+                implicitHeight: StudioTheme.Values.height // TODO dedicated value
+
+                T.Label {
+                    id: richTextEditorIcon
+                    anchors.fill: parent
+                    text: StudioTheme.Constants.edit
+                    color: StudioTheme.Values.themeTextColor
+                    font.family: StudioTheme.Constants.iconFont.family
+                    font.pixelSize: StudioTheme.Values.myIconFontSize + 4 // TODO
+                    verticalAlignment: Text.AlignVCenter
+                    horizontalAlignment: Text.AlignHCenter
+                    states: [
+                        State {
+                            name: "default"
+                            when: !richTextEditorMouseArea.containsMouse
+                            PropertyChanges {
+                                target: richTextEditorIcon
+                                color: StudioTheme.Values.themeLinkIndicatorColor
+                            }
+                        },
+                        State {
+                            name: "hover"
+                            when: richTextEditorMouseArea.containsMouse
+                            PropertyChanges {
+                                target: richTextEditorIcon
+                                color: StudioTheme.Values.themeLinkIndicatorColorHover
+                            }
+                        }
+                    ]
+                }
+
+                MouseArea {
+                    id: richTextEditorMouseArea
+                    anchors.fill: parent
+                    hoverEnabled: true
+                    onClicked: richTextDialogLoader.show()
+                }
+            }
+
+            ExpandingSpacer {}
+
+            RichTextEditor {
+                onRejected: hideWidget()
+                onAccepted: hideWidget()
+            }
+        }
+
+        PropertyLabel { text: qsTr("Font") }
+
+        SecondColumnLayout {
+            FontComboBox {
+                id: fontComboBox
+                property string familyName: backendValue.value
+                backendValue: root.fontFamily
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Weight")
+            tooltip: qsTr("Font's weight.")
+        }
+
+        SecondColumnLayout {
+            ComboBox {
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                backendValue: getBackendValue("weight")
+                model: ["Normal", "Light", "ExtraLight", "Thin", "Medium", "DemiBold", "Bold", "ExtraBold", "Black"]
+                scope: "Font"
+                enabled: !styleNameComboBox.styleSet
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Style name")
+            tooltip: qsTr("Font's style.")
+            disabledState: !styleNameComboBox.enabled
+        }
+
+        SecondColumnLayout {
+            ComboBox {
+                id: styleNameComboBox
+                property bool styleSet: backendValue.isInModel
+                implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                backendValue: getBackendValue("styleName")
+                model: styleNamesForFamily(fontComboBox.familyName)
+                valueType: ComboBox.String
+                enabled: backendValue.isAvailable
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel { text: qsTr("Size") }
+
+        SecondColumnLayout {
+            id: sizeWidget
+            property bool selectionFlag: selectionChanged
+
+            property bool pixelSize: sizeType.currentText === "px"
+            property bool isSetup
+
+            function setPointPixelSize() {
+                sizeWidget.isSetup = true
+                sizeType.currentIndex = 1
+
+                if (root.pixelSize.isInModel)
+                    sizeType.currentIndex = 0
+
+                sizeWidget.isSetup = false
+            }
+
+            onSelectionFlagChanged: sizeWidget.setPointPixelSize()
+
+            Item {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                width: implicitWidth
+                height: sizeSpinBox.height
+
+                SpinBox {
+                    id: sizeSpinBox
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    minimumValue: 0
+                    visible: !sizeWidget.pixelSize
+                    z: !sizeWidget.pixelSize ? 1 : 0
+                    maximumValue: 400
+                    backendValue: pointSize
+                }
+
+                SpinBox {
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                    width: implicitWidth
+                    minimumValue: 0
+                    visible: sizeWidget.pixelSize
+                    z: sizeWidget.pixelSize ? 1 : 0
+                    maximumValue: 400
+                    backendValue: pixelSize
+                }
+            }
+
+            Spacer {
+                implicitWidth: StudioTheme.Values.twoControlColumnGap
+                               + StudioTheme.Values.actionIndicatorWidth
+            }
+
+            StudioControls.ComboBox {
+                id: sizeType
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                width: implicitWidth
+                model: ["px", "pt"]
+                actionIndicatorVisible: false
+
+                onActivated: {
+                    if (sizeWidget.isSetup)
+                        return
+
+                    if (sizeType.currentText === "px") {
+                        pointSize.resetValue()
+                        pixelSize.value = 8
+                    } else {
+                        pixelSize.resetValue()
+                    }
+                }
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel { text: qsTr("Text color") }
+
+        ColorEditor {
+            backendValue: backendValues.color
+            supportGradient: false
+        }
+
+        PropertyLabel { text: qsTr("Emphasis") }
+
+        FontStyleButtons {
+            bold: root.boldStyle
+            italic: root.italicStyle
+            underline: root.underlineStyle
+            strikeout: root.strikeoutStyle
+            enabled: !styleNameComboBox.styleSet
+        }
+
+        PropertyLabel { text: qsTr("Alignment") }
+
+        SecondColumnLayout {
+            AligmentHorizontalButtons { id: horizontalAlignmentButtons }
+
+            Spacer {
+                visible: root.showVerticalAlignment
+                implicitWidth: StudioTheme.Values.controlGap
+                               + StudioTheme.Values.controlLabelWidth
+                               + StudioTheme.Values.controlGap
+                               + StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                               - horizontalAlignmentButtons.implicitWidth
+            }
+
+            AligmentVerticalButtons { visible: root.showVerticalAlignment }
+        }
+
+        PropertyLabel {
+            text: qsTr("Letter space")
+            tooltip: qsTr("Letter spacing for the font.")
+        }
+
+        SecondColumnLayout {
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: getBackendValue("letterSpacing")
+                decimals: 2
+                minimumValue: -500
+                maximumValue: 500
+                stepSize: 0.1
+                enabled: backendValue.isAvailable
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            text: qsTr("Word space")
+            tooltip: qsTr("Word spacing for the font.")
+        }
+
+        SecondColumnLayout {
+            SpinBox {
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: getBackendValue("wordSpacing")
+                decimals: 2
+                minimumValue: -500
+                maximumValue: 500
+                stepSize: 0.1
+                enabled: backendValue.isAvailable
+            }
+
+            ExpandingSpacer {}
+        }
+
+        PropertyLabel {
+            visible: root.showLineHeight
+            text: qsTr("Line height")
+            tooltip: qsTr("Line height for the text.")
+            disabledState: !lineHeightSpinBox.enabled
+        }
+
+        SecondColumnLayout {
+            visible: root.showLineHeight
+
+            SpinBox {
+                id: lineHeightSpinBox
+                implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                               + StudioTheme.Values.actionIndicatorWidth
+                backendValue: (backendValues.lineHeight === undefined) ? dummyBackendValue
+                                                                       : backendValues.lineHeight
+                decimals: 2
+                minimumValue: 0
+                maximumValue: 500
+                stepSize: 0.1
+                enabled: backendValue.isAvailable
+            }
+
+            ExpandingSpacer {}
+        }
+    }
+
+    Loader {
+        id: richTextDialogLoader
+
+        visible: false
+        active: visible
+
+        function show() {
+            richTextDialogLoader.visible = true
+        }
+
+        sourceComponent: Item {
+            id: richTextEditorParent
+
+            Component.onCompleted: {
+                richTextEditor.showWidget()
+                richTextEditor.richText = backendValues.text.value
+            }
+
+            RichTextEditor {
+                id: richTextEditor
+
+                onRejected: {
+                    hideWidget()
+                    richTextDialogLoader.visible = false
+                }
+                onAccepted: {
+                    backendValues.text.value = richTextEditor.richText
+                    backendValues.textFormat.setEnumeration("Text", "RichText")
+                    hideWidget()
+                    richTextDialogLoader.visible = false
+                }
+            }
+        }
+    }
+}

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorButton.qml

@@ -1,446 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2016 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Creator.
-**
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 as published by the Free Software
-** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-****************************************************************************/
-
-import QtQuick 2.1
-import StudioTheme 1.0 as StudioTheme
-
-Item {
-    id: colorButton
-    width: 64
-    height: 64
-
-    property color color
-    property real alpha: 1
-
-    property real hue: 0
-    property real saturation: 0
-    property real lightness: 0
-
-    property int sliderMargins: 6
-
-    property bool block: false
-
-    signal updateColor
-    signal rightMouseButtonClicked
-
-    onAlphaChanged: invalidateColor();
-    onSaturationChanged: invalidateColor();
-    onLightnessChanged: invalidateColor();
-    onHueChanged: invalidateColor();
-
-    onColorChanged: {
-        var myAlpha = color.a
-        rgbToHsl(color);
-
-        colorButton.alpha = myAlpha
-    }
-
-    function invalidateColor() {
-        if (block)
-            return;
-
-        block = true
-
-        colorButton.color = Qt.hsla(hue, saturation, lightness, alpha);
-
-        if (saturation > 0.0 && lightness > 0.0) {
-            hueSlider.value = hue
-            hueSlider2.value = hue
-        }
-
-        if (lightness > 0.0)
-            saturationSlider.value = saturation
-        else
-            saturation = saturationSlider.value
-
-        lightnessSlider.value = lightness
-        alphaSlider.value = alpha
-        redSlider.value = (color.r * 255)
-        greenSlider.value = (color.g * 255)
-        blueSlider.value = (color.b * 255)
-
-        block = false
-    }
-
-    function rgbToHsl(color) {
-
-        var r = color.r
-        var g = color.g
-        var b = color.b
-
-        var max = Math.max(r, g, b), min = Math.min(r, g, b)
-        var h, s, l = (max + min) / 2
-
-        if (max === min) {
-            h = 0
-            s = 0
-        } else {
-            var d = max - min;
-            s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
-            switch (max) {
-                case r: h = (g - b) / d + (g < b ? 6 : 0); break;
-                case g: h = (b - r) / d + 2; break;
-                case b: h = (r - g) / d + 4; break;
-            }
-
-            h /= 6
-        }
-
-        block = true
-
-        if (s > 0)
-            colorButton.hue = h
-
-        colorButton.saturation = s
-        colorButton.lightness = l
-
-        block = false
-        invalidateColor()
-    }
-
-    Image {
-        id: surround
-        x: 2
-        y: 2
-        width: height
-        height: parent.height - 4
-
-        source: "images/checkers.png"
-        fillMode: Image.Tile
-
-        // note we smoothscale the shader from a smaller version to improve performance
-        Canvas {
-            id: hubeBox
-            opacity: colorButton.alpha
-            anchors.fill: parent
-            property real hue: colorButton.hue
-            onHueChanged: requestPaint()
-
-            onPaint: {
-                var ctx = hubeBox.getContext('2d')
-                ctx.save()
-                ctx.clearRect(0, 0, hubeBox.width, hubeBox.height);
-
-                for (var row = 0; row < hubeBox.height; row++){
-                    var gradient = ctx.createLinearGradient(0, 0, hubeBox.width,0);
-                    var l = Math.abs(row - hubeBox.height) / hubeBox.height
-
-                    gradient.addColorStop(0, Qt.hsla(hubeBox.hue, 0, l, 1));
-                    gradient.addColorStop(1, Qt.hsla(hubeBox.hue, 1, l, 1));
-
-                    ctx.fillStyle = gradient;
-                    ctx.fillRect(0, row, hubeBox.width, 1);
-                }
-                ctx.restore()
-            }
-        }
-
-        Canvas {
-            id: canvas
-
-            opacity: 0.8
-            anchors.fill: parent
-            antialiasing: true
-
-            property real cavnasSaturation: colorButton.saturation
-            property real canvasLightness: colorButton.lightness
-
-            onCavnasSaturationChanged: requestPaint();
-            onCanvasLightnessChanged: requestPaint();
-
-            property color strokeStyle: "lightGray"
-
-            onPaint: {
-                var ctx = canvas.getContext('2d')
-
-                ctx.save()
-
-                context.clearRect(0, 0, canvas.width, canvas.height);
-
-                var yy = canvas.height -colorButton.lightness * canvas.height
-                var xx = colorButton.saturation * canvas.width
-
-                ctx.strokeStyle = canvas.strokeStyle
-                ctx.lineWidth = 1
-
-                ctx.beginPath()
-                ctx.moveTo(0, yy)
-                ctx.lineTo(canvas.width, yy)
-                ctx.stroke()
-
-                ctx.beginPath()
-                ctx.moveTo(xx, 0)
-                ctx.lineTo(xx, canvas.height)
-                ctx.stroke()
-
-                ctx.restore()
-            }
-        }
-
-        MouseArea {
-            id: mapMouseArea
-            anchors.fill: parent
-            preventStealing: true
-            onPositionChanged: {
-                if (pressed && mouse.buttons === Qt.LeftButton) {
-                    var xx = Math.max(0, Math.min(mouse.x, parent.width))
-                    var yy = Math.max(0, Math.min(mouse.y, parent.height))
-
-                    colorButton.lightness = 1.0 - yy / parent.height;
-                    colorButton.saturation = xx / parent.width;
-                }
-            }
-            onPressed: {
-                if (mouse.button === Qt.LeftButton)
-                    positionChanged(mouse)
-            }
-            onReleased: {
-                if (mouse.button === Qt.LeftButton)
-                    colorButton.updateColor()
-            }
-
-            acceptedButtons: Qt.LeftButton | Qt.RightButton
-
-            onClicked: {
-                if (mouse.button === Qt.RightButton)
-                    colorButton.rightMouseButtonClicked()
-            }
-        }
-        Rectangle {
-            anchors.fill: parent
-            anchors.margins: -StudioTheme.Values.border
-            color: "#00000000"
-            border.color: StudioTheme.Values.themeControlOutline
-            border.width: StudioTheme.Values.border
-        }
-    }
-
-    HueSlider {
-        id: hueSlider
-        anchors.left: surround.right
-        anchors.margins: 6
-        y: 4
-        height: parent.height - 8
-        onValueChanged: {
-            if (colorButton.hue !== value)
-                colorButton.hue = value
-        }
-        onClicked: colorButton.updateColor()
-    }
-
-    Column {
-        anchors.left: hueSlider.right
-        anchors.margins: colorButton.sliderMargins
-        spacing: StudioTheme.Values.sectionRowSpacing
-
-        Row {
-            spacing: 20
-
-            Column {
-                spacing: StudioTheme.Values.sectionRowSpacing
-
-                Row {
-                    z: 3
-                    spacing: 1
-                    Label {
-                        text: "R"
-                        width: 16
-                        color: StudioTheme.Values.themeTextColor
-                        elide: Text.ElideRight
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                    DoubleSpinBox {
-                        id: redSlider
-                        width: 68
-
-                        stepSize: 1
-                        minimumValue: 0
-                        maximumValue: 255
-                        decimals: 0
-
-                        onValueModified: {
-                            var tmp = redSlider.value / 255.0
-                            if (colorButton.color.r !== tmp && !colorButton.block) {
-                                colorButton.color.r = tmp
-                                colorButton.updateColor()
-                            }
-                        }
-                    }
-                }
-
-                Row {
-                    z: 2
-                    spacing: 1
-                    Label {
-                        text: "G"
-                        width: 16
-                        color: StudioTheme.Values.themeTextColor
-                        elide: Text.ElideRight
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                    DoubleSpinBox {
-                        id: greenSlider
-                        width: 68
-
-                        stepSize: 1
-                        minimumValue: 0
-                        maximumValue: 255
-                        decimals: 0
-
-                        onValueModified: {
-                            var tmp = greenSlider.value / 255.0
-                            if (colorButton.color.g !== tmp && !colorButton.block) {
-                                colorButton.color.g = tmp
-                                colorButton.updateColor()
-                            }
-                        }
-                    }
-                }
-
-                Row {
-                    z: 1
-                    spacing: 1
-                    Label {
-                        text: "B"
-                        width: 16
-                        color: StudioTheme.Values.themeTextColor
-                        elide: Text.ElideRight
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                    DoubleSpinBox {
-                        id: blueSlider
-                        width: 68
-
-                        stepSize: 1
-                        minimumValue: 0
-                        maximumValue: 255
-                        decimals: 0
-
-                        onValueModified: {
-                            var tmp = blueSlider.value / 255.0
-                            if (colorButton.color.b !== tmp && !colorButton.block) {
-                                colorButton.color.b = tmp
-                                colorButton.updateColor()
-                            }
-                        }
-                    }
-                }
-            }
-
-            Column {
-                spacing: StudioTheme.Values.sectionRowSpacing
-
-                Row {
-                    z: 3
-                    spacing: 1
-                    Label {
-                        text: "H"
-                        width: 16
-                        color: StudioTheme.Values.themeTextColor
-                        elide: Text.ElideRight
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                    DoubleSpinBox {
-                        id: hueSlider2
-                        width: 64
-                        onValueModified: {
-                            if (colorButton.hue !== hueSlider2.value && !colorButton.block) {
-                                colorButton.hue = hueSlider2.value
-                                colorButton.updateColor()
-                            }
-                        }
-                    }
-                }
-
-                Row {
-                    z: 2
-                    spacing: 1
-                    Label {
-                        text: "S"
-                        width: 16
-                        color: StudioTheme.Values.themeTextColor
-                        elide: Text.ElideRight
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                    DoubleSpinBox {
-                        id: saturationSlider
-                        width: 64
-                        onValueModified: {
-                            if (colorButton.saturation !== saturationSlider.value && !colorButton.block) {
-                                colorButton.saturation = saturationSlider.value
-                                colorButton.updateColor()
-                            }
-                        }
-                    }
-                }
-
-                Row {
-                    z: 1
-                    spacing: 1
-                    Label {
-                        text: "L"
-                        width: 16
-                        color: StudioTheme.Values.themeTextColor
-                        elide: Text.ElideRight
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
-                    DoubleSpinBox {
-                        id: lightnessSlider
-                        width: 64
-                        onValueModified: {
-                            if (colorButton.lightness !== lightnessSlider.value && !colorButton.block) {
-                                colorButton.lightness = lightnessSlider.value
-                                colorButton.updateColor()
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        Row {
-            z: 0
-            spacing: 1
-            Label {
-                text: "A"
-                width: 16
-                color: StudioTheme.Values.themeTextColor
-                elide: Text.ElideRight
-                anchors.verticalCenter: parent.verticalCenter
-            }
-            DoubleSpinBox {
-                id: alphaSlider
-                sliderIndicatorVisible: true
-                width: 169
-                onValueModified: {
-                    if (colorButton.alpha !== alphaSlider.value && !colorButton.block) {
-                        colorButton.alpha = alphaSlider.value
-                        colorButton.updateColor()
-                    }
-                }
-            }
-        }
-    }
-}

share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorCheckButton.qml

@@ -1,87 +0,0 @@
-/****************************************************************************
-**
-** Copyright (C) 2016 The Qt Company Ltd.
-** Contact: https://www.qt.io/licensing/
-**
-** This file is part of Qt Creator.
-**
-** Commercial License Usage
-** Licensees holding valid commercial Qt licenses may use this file in
-** accordance with the commercial license agreement provided with the
-** Software or, alternatively, in accordance with the terms contained in
-** a written agreement between you and The Qt Company. For licensing terms
-** and conditions see https://www.qt.io/terms-conditions. For further
-** information use the contact form at https://www.qt.io/contact-us.
-**
-** GNU General Public License Usage
-** Alternatively, this file may be used under the terms of the GNU
-** General Public License version 3 as published by the Free Software
-** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
-** included in the packaging of this file. Please review the following
-** information to ensure the GNU General Public License requirements will
-** be met: https://www.gnu.org/licenses/gpl-3.0.html.
-**
-****************************************************************************/
-
-import QtQuick 2.1
-import StudioTheme 1.0 as StudioTheme
-
-Item {
-    id: root
-    property bool checked: false
-    property alias buttonColor: checkBox.color
-    width: StudioTheme.Values.height
-    height: StudioTheme.Values.height
-
-    signal rightMouseButtonClicked
-
-    Rectangle {
-        id: backgroundBox
-        width: StudioTheme.Values.height
-        height: StudioTheme.Values.height
-        anchors.right: parent.right
-
-        color: "white"
-        border.color: "white"
-        border.width: StudioTheme.Values.border
-
-        Rectangle {
-            id: checkBox
-            width: StudioTheme.Values.height - 2 * StudioTheme.Values.border
-            height: StudioTheme.Values.height - 2 * StudioTheme.Values.border
-            anchors.centerIn: parent
-
-            border.color: "black"
-            border.width: StudioTheme.Values.border
-        }
-    }
-
-    Image {
-        id: arrowImage
-        width: 8
-        height: 4
-        source: "image://icons/down-arrow"
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.right: backgroundBox.left
-        anchors.rightMargin: 4
-        opacity: colorToolTip.containsMouse ? 1 : 0.8
-        rotation: root.checked ? 0.0 : 270.0
-    }
-
-    ToolTipArea {
-        id: colorToolTip
-
-        acceptedButtons: Qt.LeftButton | Qt.RightButton
-
-        onClicked: {
-            if (mouse.button === Qt.RightButton)
-                root.rightMouseButtonClicked()
-            else
-                root.checked = !root.checked
-        }
-        hoverEnabled: true
-        anchors.fill: parent
-        anchors.leftMargin: -arrowImage.width
-        tooltip: qsTr("Toggle color picker view.")
-    }
-}