QmlDesigner: Effect maker UI tweaks

- Corrected property name font size
- Disabled zoom controls when not needed
- Updated Zoom Fit icon
- Show vec2, 3, and 4 properties in 1 line

Change-Id: I6d5474163b708790b61b6d3462068b138431bd49
Reviewed-by: Amr Elsayed <amr.elsayed@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>

share/qtcreator/qmldesigner/effectMakerQmlSources/EffectCompositionNodeUniform.qml

@@ -45,7 +45,7 @@ Item {
         Text {
             text: uniformName
             color: StudioTheme.Values.themeTextColor
-            font.pointSize: StudioTheme.Values.smallFontSize
+            font.pixelSize: StudioTheme.Values.baseFontSize
             horizontalAlignment: Text.AlignRight
             Layout.maximumWidth: 140
             Layout.minimumWidth: 140

share/qtcreator/qmldesigner/effectMakerQmlSources/EffectMakerPreview.qml

@@ -30,30 +30,31 @@ Column {
             }
 
             HelperWidgets.AbstractButton {
+                enabled: previewImage.scale > .4
                 style: StudioTheme.Values.viewBarButtonStyle
                 buttonIcon: StudioTheme.Constants.zoomOut_medium
                 tooltip: qsTr("Zoom out")
 
                 onClicked: {
-                    if (previewImage.scale > .4)
+                    previewImage.scale -= .2
-                        previewImage.scale -= .2
                 }
             }
 
             HelperWidgets.AbstractButton {
+                enabled: previewImage.scale < 2
                 style: StudioTheme.Values.viewBarButtonStyle
                 buttonIcon: StudioTheme.Constants.zoomIn_medium
                 tooltip: qsTr("Zoom In")
 
                 onClicked: {
-                    if (previewImage.scale < 2)
+                    previewImage.scale += .2
-                        previewImage.scale += .2
                 }
             }
 
             HelperWidgets.AbstractButton {
+                enabled: previewImage.scale !== 1
                 style: StudioTheme.Values.viewBarButtonStyle
-                buttonIcon: StudioTheme.Constants.cornersAll
+                buttonIcon: StudioTheme.Constants.fitAll_medium
                 tooltip: qsTr("Zoom Fit")
 
                 onClicked: {

share/qtcreator/qmldesigner/effectMakerQmlSources/ValueFloat.qml

@@ -14,7 +14,7 @@ Row {
     StudioControls.RealSpinBox {
         id: spinBox
 
-        width: 40
+        width: 60
         actionIndicatorVisible: false
         spinBoxIndicatorVisible: false
         inputHAlignment: Qt.AlignHCenter
@@ -29,7 +29,8 @@ Row {
     StudioControls.Slider {
         id: slider
 
-        width: parent.width - 80
+        width: parent.width - 100
+        visible: width > 20
         labels: false
         decimals: 2
         actionIndicatorVisible: false

share/qtcreator/qmldesigner/effectMakerQmlSources/ValueInt.qml

@@ -14,7 +14,7 @@ Row {
     StudioControls.SpinBox {
         id: spinBox
 
-        width: 40
+        width: 60
         actionIndicatorVisible: false
         spinBoxIndicatorVisible: false
         inputHAlignment: Qt.AlignHCenter
@@ -27,7 +27,8 @@ Row {
     StudioControls.Slider {
         id: slider
 
-        width: parent.width - 80
+        width: parent.width - 100
+        visible: width > 20
         labels: false
         actionIndicatorVisible: false
         from: uniformMinValue

share/qtcreator/qmldesigner/effectMakerQmlSources/ValueVec2.qml

@@ -2,84 +2,87 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
 import QtQuick
+import QtQuick.Layouts
 import QtQuickDesignerTheme
 import StudioControls as StudioControls
 import StudioTheme 1.0 as StudioTheme
 import EffectMakerBackend
 
-Column {
+RowLayout {
     width: parent.width
-    spacing: 1
+    spacing: 0
 
-    Row {
+    StudioControls.RealSpinBox {
-        width: parent.width
+        id: vX
-        spacing: 5
 
-        StudioControls.RealSpinBox {
+        Layout.fillWidth: true
-            id: vX
+        Layout.minimumWidth: 30
+        Layout.maximumWidth: 60
 
-            width: 40
+        actionIndicatorVisible: false
-            actionIndicatorVisible: false
+        spinBoxIndicatorVisible: false
-            spinBoxIndicatorVisible: false
+        inputHAlignment: Qt.AlignHCenter
-            inputHAlignment: Qt.AlignHCenter
+        realFrom: uniformMinValue.x
-            realFrom: uniformMinValue.x
+        realTo: uniformMaxValue.x
-            realTo: uniformMaxValue.x
+        realValue: uniformValue.x
-            realValue: uniformValue.x
+        realStepSize: .01
-            realStepSize: .01
+        decimals: 2
-            decimals: 2
+        onRealValueModified: uniformValue.x = realValue
-            onRealValueModified: uniformValue.x = realValue
-        }
-
-        StudioControls.Slider {
-            id: sliderX
-
-            width: parent.width - 80
-            labels: false
-            decimals: 2
-            actionIndicatorVisible: false
-            from: uniformMinValue.x
-            to: uniformMaxValue.x
-            value: uniformValue.x
-            onMoved: {
-                uniformValue.x = value
-                vX.realValue = value // binding isn't working for this property so update it
-            }
-        }
     }
 
-    Row {
+    Item { // spacer
-        width: parent.width
+        Layout.fillWidth: true
-        spacing: 5
+        Layout.minimumWidth: 2
-
+        Layout.maximumWidth: 10
-        StudioControls.RealSpinBox {
-            id: vY
-
-            width: 40
-            actionIndicatorVisible: false
-            spinBoxIndicatorVisible: false
-            inputHAlignment: Qt.AlignHCenter
-            realFrom: uniformMinValue.y
-            realTo: uniformMaxValue.y
-            realValue: uniformValue.y
-            realStepSize: .01
-            decimals: 2
-            onRealValueModified: uniformValue.y = realValue
-        }
-
-        StudioControls.Slider {
-            id: sliderY
-
-            width: parent.width - 80
-            labels: false
-            decimals: 2
-            actionIndicatorVisible: false
-            from: uniformMinValue.y
-            to: uniformMaxValue.y
-            value: uniformValue.y
-            onMoved: {
-                uniformValue.y = value
-                vY.realValue = value // binding isn't working for this property so update it
-            }
-        }
     }
+
+    Text {
+        text: qsTr("X")
+        color: StudioTheme.Values.themeTextColor
+        font.pixelSize: StudioTheme.Values.baseFontSize
+        Layout.alignment: Qt.AlignVCenter
+    }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 10
+        Layout.maximumWidth: 20
+    }
+
+    StudioControls.RealSpinBox {
+        id: vY
+
+        Layout.fillWidth: true
+        Layout.minimumWidth: 30
+        Layout.maximumWidth: 60
+
+        actionIndicatorVisible: false
+        spinBoxIndicatorVisible: false
+        inputHAlignment: Qt.AlignHCenter
+        realFrom: uniformMinValue.y
+        realTo: uniformMaxValue.y
+        realValue: uniformValue.y
+        realStepSize: .01
+        decimals: 2
+        onRealValueModified: uniformValue.y = realValue
+    }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 2
+        Layout.maximumWidth: 10
+    }
+
+    Text {
+        text: qsTr("Y")
+        color: StudioTheme.Values.themeTextColor
+        font.pixelSize: StudioTheme.Values.baseFontSize
+        Layout.alignment: Qt.AlignVCenter
+    }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 10
+    }
+
 }

share/qtcreator/qmldesigner/effectMakerQmlSources/ValueVec3.qml

@@ -2,121 +2,124 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
 import QtQuick
+import QtQuick.Layouts
 import QtQuickDesignerTheme
 import StudioControls as StudioControls
 import StudioTheme 1.0 as StudioTheme
 import EffectMakerBackend
 
-Column {
+RowLayout {
     width: parent.width
+    spacing: 0
 
-    spacing: 1
+    StudioControls.RealSpinBox {
+        id: vX
 
-    Row {
+        Layout.fillWidth: true
-        width: parent.width
+        Layout.minimumWidth: 30
-        spacing: 5
+        Layout.maximumWidth: 60
 
-        StudioControls.RealSpinBox {
+        actionIndicatorVisible: false
-            id: vX
+        spinBoxIndicatorVisible: false
-
+        inputHAlignment: Qt.AlignHCenter
-            width: 40
+        realFrom: uniformMinValue.x
-            actionIndicatorVisible: false
+        realTo: uniformMaxValue.x
-            spinBoxIndicatorVisible: false
+        realValue: uniformValue.x
-            inputHAlignment: Qt.AlignHCenter
+        realStepSize: .01
-            realFrom: uniformMinValue.x
+        decimals: 2
-            realTo: uniformMaxValue.x
+        onRealValueModified: uniformValue.x = realValue
-            realValue: uniformValue.x
-            realStepSize: .01
-            decimals: 2
-            onRealValueModified: uniformValue.x = realValue
-        }
-
-        StudioControls.Slider {
-            id: sliderX
-
-            width: parent.width - 80
-            labels: false
-            decimals: 2
-            actionIndicatorVisible: false
-            from: uniformMinValue.x
-            to: uniformMaxValue.x
-            value: uniformValue.x
-            onMoved: {
-                uniformValue.x = value
-                vX.realValue = value // binding isn't working for this property so update it
-            }
-        }
     }
 
-    Row {
+    Item { // spacer
-        width: parent.width
+        Layout.fillWidth: true
-        spacing: 5
+        Layout.minimumWidth: 2
-
+        Layout.maximumWidth: 10
-        StudioControls.RealSpinBox {
-            id: vY
-
-            width: 40
-            actionIndicatorVisible: false
-            spinBoxIndicatorVisible: false
-            inputHAlignment: Qt.AlignHCenter
-            realFrom: uniformMinValue.y
-            realTo: uniformMaxValue.y
-            realValue: uniformValue.y
-            realStepSize: .01
-            decimals: 2
-            onRealValueModified: uniformValue.y = realValue
-        }
-
-        StudioControls.Slider {
-            id: sliderY
-
-            width: parent.width - 80
-            labels: false
-            decimals: 2
-            actionIndicatorVisible: false
-            from: uniformMinValue.y
-            to: uniformMaxValue.y
-            value: uniformValue.y
-            onMoved: {
-                uniformValue.y = value
-                vY.realValue = value // binding isn't working for this property so update it
-            }
-        }
     }
 
-    Row {
+    Text {
-        width: parent.width
+        text: qsTr("X")
-        spacing: 5
+        color: StudioTheme.Values.themeTextColor
-
+        font.pixelSize: StudioTheme.Values.baseFontSize
-        StudioControls.RealSpinBox {
+        Layout.alignment: Qt.AlignVCenter
-            id: vZ
-
-            width: 40
-            actionIndicatorVisible: false
-            spinBoxIndicatorVisible: false
-            inputHAlignment: Qt.AlignHCenter
-            realFrom: uniformMinValue.z
-            realTo: uniformMaxValue.z
-            realValue: uniformValue.z
-            realStepSize: .01
-            decimals: 2
-            onRealValueModified: uniformValue.z = realValue
-        }
-
-        StudioControls.Slider {
-            id: sliderZ
-
-            width: parent.width - 80
-            labels: false
-            decimals: 2
-            actionIndicatorVisible: false
-            from: uniformMinValue.z
-            to: uniformMaxValue.z
-            value: uniformValue.z
-            onMoved: {
-                uniformValue.z = value
-                vZ.realValue = value // binding isn't working for this property so update it
-            }
-        }
     }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 10
+        Layout.maximumWidth: 20
+    }
+
+    StudioControls.RealSpinBox {
+        id: vY
+
+        Layout.fillWidth: true
+        Layout.minimumWidth: 30
+        Layout.maximumWidth: 60
+
+        actionIndicatorVisible: false
+        spinBoxIndicatorVisible: false
+        inputHAlignment: Qt.AlignHCenter
+        realFrom: uniformMinValue.y
+        realTo: uniformMaxValue.y
+        realValue: uniformValue.y
+        realStepSize: .01
+        decimals: 2
+        onRealValueModified: uniformValue.y = realValue
+    }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 2
+        Layout.maximumWidth: 10
+    }
+
+    Text {
+        text: qsTr("Y")
+        color: StudioTheme.Values.themeTextColor
+        font.pixelSize: StudioTheme.Values.baseFontSize
+        Layout.alignment: Qt.AlignVCenter
+    }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 10
+        Layout.maximumWidth: 20
+    }
+
+    StudioControls.RealSpinBox {
+        id: vZ
+
+        Layout.fillWidth: true
+        Layout.minimumWidth: 30
+        Layout.maximumWidth: 60
+
+        actionIndicatorVisible: false
+        spinBoxIndicatorVisible: false
+        inputHAlignment: Qt.AlignHCenter
+        realFrom: uniformMinValue.z
+        realTo: uniformMaxValue.z
+        realValue: uniformValue.z
+        realStepSize: .01
+        decimals: 2
+        onRealValueModified: uniformValue.z = realValue
+    }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 2
+        Layout.maximumWidth: 10
+    }
+
+    Text {
+        text: qsTr("Z")
+        color: StudioTheme.Values.themeTextColor
+        font.pixelSize: StudioTheme.Values.baseFontSize
+        Layout.alignment: Qt.AlignVCenter
+    }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 10
+    }
+
 }

share/qtcreator/qmldesigner/effectMakerQmlSources/ValueVec4.qml

@@ -2,157 +2,161 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
 
 import QtQuick
+import QtQuick.Layouts
 import QtQuickDesignerTheme
 import StudioControls as StudioControls
 import StudioTheme 1.0 as StudioTheme
 import EffectMakerBackend
 
-Column {
+RowLayout {
     width: parent.width
+    spacing: 0
 
-    spacing: 1
+    StudioControls.RealSpinBox {
+        id: vX
 
-    Row {
+        Layout.fillWidth: true
-        width: parent.width
+        Layout.minimumWidth: 30
-        spacing: 5
+        Layout.maximumWidth: 60
 
-        StudioControls.RealSpinBox {
+        actionIndicatorVisible: false
-            id: vX
+        spinBoxIndicatorVisible: false
-
+        inputHAlignment: Qt.AlignHCenter
-            width: 40
+        realFrom: uniformMinValue.x
-            actionIndicatorVisible: false
+        realTo: uniformMaxValue.x
-            spinBoxIndicatorVisible: false
+        realValue: uniformValue.x
-            inputHAlignment: Qt.AlignHCenter
+        realStepSize: .01
-            realFrom: uniformMinValue.x
+        decimals: 2
-            realTo: uniformMaxValue.x
+        onRealValueModified: uniformValue.x = realValue
-            realValue: uniformValue.x
-            realStepSize: .01
-            decimals: 2
-            onRealValueModified: uniformValue.x = realValue
-        }
-
-        StudioControls.Slider {
-            id: sliderX
-
-            width: parent.width - 80
-            labels: false
-            decimals: 2
-            actionIndicatorVisible: false
-            from: uniformMinValue.x
-            to: uniformMaxValue.x
-            value: uniformValue.x
-            onMoved: {
-                uniformValue.x = value
-                vX.realValue = value // binding isn't working for this property so update it
-            }
-        }
     }
 
-    Row {
+    Item { // spacer
-        width: parent.width
+        Layout.fillWidth: true
-        spacing: 5
+        Layout.minimumWidth: 2
-
+        Layout.maximumWidth: 10
-        StudioControls.RealSpinBox {
-            id: vY
-
-            width: 40
-            actionIndicatorVisible: false
-            spinBoxIndicatorVisible: false
-            inputHAlignment: Qt.AlignHCenter
-            realFrom: uniformMinValue.y
-            realTo: uniformMaxValue.y
-            realValue: uniformValue.y
-            realStepSize: .01
-            decimals: 2
-            onRealValueModified: uniformValue.y = realValue
-        }
-
-        StudioControls.Slider {
-            id: sliderY
-
-            width: parent.width - 80
-            labels: false
-            decimals: 2
-            actionIndicatorVisible: false
-            from: uniformMinValue.y
-            to: uniformMaxValue.y
-            value: uniformValue.y
-            onMoved: {
-                uniformValue.y = value
-                vY.realValue = value // binding isn't working for this property so update it
-            }
-        }
     }
 
-    Row {
+    Text {
-        width: parent.width
+        text: qsTr("X")
-        spacing: 5
+        color: StudioTheme.Values.themeTextColor
-
+        font.pixelSize: StudioTheme.Values.baseFontSize
-        StudioControls.RealSpinBox {
+        Layout.alignment: Qt.AlignVCenter
-            id: vZ
-
-            width: 40
-            actionIndicatorVisible: false
-            spinBoxIndicatorVisible: false
-            inputHAlignment: Qt.AlignHCenter
-            realFrom: uniformMinValue.z
-            realTo: uniformMaxValue.z
-            realValue: uniformValue.z
-            realStepSize: .01
-            decimals: 2
-            onRealValueModified: uniformValue.z = realValue
-        }
-
-        StudioControls.Slider {
-            id: sliderZ
-
-            width: parent.width - 80
-            labels: false
-            decimals: 2
-            actionIndicatorVisible: false
-            from: uniformMinValue.z
-            to: uniformMaxValue.z
-            value: uniformValue.z
-            onMoved: {
-                uniformValue.z = value
-                vZ.realValue = value // binding isn't working for this property so update it
-            }
-        }
     }
 
-    Row {
+    Item { // spacer
-        width: parent.width
+        Layout.fillWidth: true
-        spacing: 5
+        Layout.minimumWidth: 10
-
+        Layout.maximumWidth: 20
-        StudioControls.RealSpinBox {
-            id: vW
-
-            width: 40
-            actionIndicatorVisible: false
-            spinBoxIndicatorVisible: false
-            inputHAlignment: Qt.AlignHCenter
-            realFrom: uniformMinValue.w
-            realTo: uniformMaxValue.w
-            realValue: uniformValue.w
-            realStepSize: .01
-            decimals: 2
-            onRealValueModified: uniformValue.w = realValue
-        }
-
-        StudioControls.Slider {
-            id: sliderW
-
-            width: parent.width - 80
-            labels: false
-            decimals: 2
-            actionIndicatorVisible: false
-            from: uniformMinValue.w
-            to: uniformMaxValue.w
-            value: uniformValue.w
-            onMoved: {
-                uniformValue.w = value
-                vW.realValue = value // binding isn't working for this property so update it
-            }
-        }
     }
+
+    StudioControls.RealSpinBox {
+        id: vY
+
+        Layout.fillWidth: true
+        Layout.minimumWidth: 30
+        Layout.maximumWidth: 60
+
+        actionIndicatorVisible: false
+        spinBoxIndicatorVisible: false
+        inputHAlignment: Qt.AlignHCenter
+        realFrom: uniformMinValue.y
+        realTo: uniformMaxValue.y
+        realValue: uniformValue.y
+        realStepSize: .01
+        decimals: 2
+        onRealValueModified: uniformValue.y = realValue
+    }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 2
+        Layout.maximumWidth: 10
+    }
+
+    Text {
+        text: qsTr("Y")
+        color: StudioTheme.Values.themeTextColor
+        font.pixelSize: StudioTheme.Values.baseFontSize
+        Layout.alignment: Qt.AlignVCenter
+    }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 10
+        Layout.maximumWidth: 20
+    }
+
+    StudioControls.RealSpinBox {
+        id: vZ
+
+        Layout.fillWidth: true
+        Layout.minimumWidth: 30
+        Layout.maximumWidth: 60
+
+        actionIndicatorVisible: false
+        spinBoxIndicatorVisible: false
+        inputHAlignment: Qt.AlignHCenter
+        realFrom: uniformMinValue.z
+        realTo: uniformMaxValue.z
+        realValue: uniformValue.z
+        realStepSize: .01
+        decimals: 2
+        onRealValueModified: uniformValue.z = realValue
+    }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 2
+        Layout.maximumWidth: 10
+    }
+
+    Text {
+        text: qsTr("Z")
+        color: StudioTheme.Values.themeTextColor
+        font.pixelSize: StudioTheme.Values.baseFontSize
+        Layout.alignment: Qt.AlignVCenter
+    }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 10
+        Layout.maximumWidth: 20
+    }
+
+    StudioControls.RealSpinBox {
+        id: vW
+
+        Layout.fillWidth: true
+        Layout.minimumWidth: 30
+        Layout.maximumWidth: 60
+
+        actionIndicatorVisible: false
+        spinBoxIndicatorVisible: false
+        inputHAlignment: Qt.AlignHCenter
+        realFrom: uniformMinValue.w
+        realTo: uniformMaxValue.w
+        realValue: uniformValue.w
+        realStepSize: .01
+        decimals: 2
+        onRealValueModified: uniformValue.w = realValue
+    }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 2
+        Layout.maximumWidth: 10
+    }
+
+    Text {
+        text: qsTr("W")
+        color: StudioTheme.Values.themeTextColor
+        font.pixelSize: StudioTheme.Values.baseFontSize
+        Layout.alignment: Qt.AlignVCenter
+    }
+
+    Item { // spacer
+        Layout.fillWidth: true
+        Layout.minimumWidth: 10
+    }
+
 }

src/plugins/qmldesigner/components/effectmaker/uniform.cpp

@@ -20,6 +20,10 @@ Uniform::Uniform(const QJsonObject &propObj)
     m_type = Uniform::typeFromString(propObj.value("type").toString());
     defaultValue = propObj.value("defaultValue").toString();
 
+    m_displayName = propObj.value("displayName").toString();
+    if (m_displayName.isEmpty())
+        m_displayName = m_name;
+
     if (m_type == Type::Sampler) {
         if (!defaultValue.isEmpty())
             defaultValue = getResourcePath(defaultValue);

src/plugins/qmldesigner/components/effectmaker/uniform.h

@@ -18,7 +18,7 @@ class Uniform : public QObject
 {
     Q_OBJECT
 
-    Q_PROPERTY(QString uniformName MEMBER m_name CONSTANT)
+    Q_PROPERTY(QString uniformName MEMBER m_displayName CONSTANT)
     Q_PROPERTY(QString uniformType READ typeName CONSTANT)
     Q_PROPERTY(QVariant uniformValue READ value WRITE setValue NOTIFY uniformValueChanged)
     Q_PROPERTY(QVariant uniformBackendValue READ backendValue NOTIFY uniformBackendValueChanged)
@@ -89,6 +89,7 @@ private:
     QVariant m_minValue;
     QVariant m_maxValue;
     QString m_name;
+    QString m_displayName;
     QString m_description;
     QString m_customValue;
     bool m_useCustomValue = false;