Улучшен дизайн кнопок SpinBox: добавлены современные стили, улучшена визуальная обратная связь, добавлены SVG иконки, оптимизированы размеры и отступы, улучшена читаемость значени

2025-03-14 19:25:58 +07:00
1 parent 2b9165771b
commit 29dce906c5
@@ -0,0 +1,350 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+
+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("Visibility")
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Visibility")
+                tooltip: qsTr("Sets the local visibility of the node.")
+            }
+
+            SecondColumnLayout {
+                // ### should be a slider
+                CheckBox {
+                    text: qsTr("Visible")
+                    backendValue: backendValues.visible
+                    implicitWidth: StudioTheme.Values.twoControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Opacity")
+                tooltip: qsTr("Sets the local opacity value of the node.")
+            }
+
+            SecondColumnLayout {
+                // ### should be a slider
+                SpinBox {
+                    minimumValue: 0
+                    maximumValue: 1
+                    decimals: 2
+                    stepSize: 0.1
+                    backendValue: backendValues.opacity
+                    sliderIndicatorVisible: true
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+
+    Section {
+        id: transformSection
+        width: parent.width
+        caption: qsTr("Transform")
+
+        ColumnLayout {
+            spacing: StudioTheme.Values.transform3DSectionSpacing
+
+            SectionLayout {
+                PropertyLabel {
+                    text: qsTr("Translation")
+                    tooltip: qsTr("Sets the translation of the node.")
+                }
+
+                SecondColumnLayout {
+                    SpinBox {
+                        minimumValue: -9999999
+                        maximumValue: 9999999
+                        decimals: 2
+                        backendValue: backendValues.x
+                        implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                       + StudioTheme.Values.actionIndicatorWidth
+                    }
+
+                    Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                    ControlLabel {
+                        text: "X"
+                        color: StudioTheme.Values.theme3DAxisXColor
+                    }
+
+                    ExpandingSpacer {}
+                }
+
+                PropertyLabel {}
+
+                SecondColumnLayout {
+                    SpinBox {
+                        minimumValue: -9999999
+                        maximumValue: 9999999
+                        decimals: 2
+                        backendValue: backendValues.y
+                        implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                       + StudioTheme.Values.actionIndicatorWidth
+                    }
+
+                    Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                    ControlLabel {
+                        text: "Y"
+                        color: StudioTheme.Values.theme3DAxisYColor
+                    }
+
+                    ExpandingSpacer {}
+                }
+
+                PropertyLabel {}
+
+                SecondColumnLayout {
+                    SpinBox {
+                        minimumValue: -9999999
+                        maximumValue: 9999999
+                        decimals: 2
+                        backendValue: backendValues.z
+                        implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                       + StudioTheme.Values.actionIndicatorWidth
+                    }
+
+                    Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                    ControlLabel {
+                        text: "Z"
+                        color: StudioTheme.Values.theme3DAxisZColor
+                    }
+
+                    ExpandingSpacer {}
+                }
+            }
+
+            SectionLayout {
+                PropertyLabel {
+                    text: qsTr("Rotation")
+                    tooltip: qsTr("Sets the rotation of the node in degrees.")
+                }
+
+                SecondColumnLayout {
+                    SpinBox {
+                        minimumValue: -9999999
+                        maximumValue: 9999999
+                        decimals: 2
+                        backendValue: backendValues.eulerRotation_x
+                        implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                       + StudioTheme.Values.actionIndicatorWidth
+                    }
+
+                    Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                    ControlLabel {
+                        text: "X"
+                        color: StudioTheme.Values.theme3DAxisXColor
+                    }
+
+                    ExpandingSpacer {}
+                }
+
+                PropertyLabel {}
+
+                SecondColumnLayout {
+                    SpinBox {
+                        minimumValue: -9999999
+                        maximumValue: 9999999
+                        decimals: 2
+                        backendValue: backendValues.eulerRotation_y
+                        implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                       + StudioTheme.Values.actionIndicatorWidth
+                    }
+
+                    Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                    ControlLabel {
+                        text: "Y"
+                        color: StudioTheme.Values.theme3DAxisYColor
+                    }
+
+                    ExpandingSpacer {}
+                }
+
+                PropertyLabel {}
+
+                SecondColumnLayout {
+                    SpinBox {
+                        minimumValue: -9999999
+                        maximumValue: 9999999
+                        decimals: 2
+                        backendValue: backendValues.eulerRotation_z
+                        implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                       + StudioTheme.Values.actionIndicatorWidth
+                    }
+
+                    Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                    ControlLabel {
+                        text: "Z"
+                        color: StudioTheme.Values.theme3DAxisZColor
+                    }
+
+                    ExpandingSpacer {}
+                }
+            }
+
+            SectionLayout {
+                PropertyLabel {
+                    text: qsTr("Scale")
+                    tooltip: qsTr("Sets the scale of the node.")
+                }
+
+                SecondColumnLayout {
+                    SpinBox {
+                        minimumValue: -9999999
+                        maximumValue: 9999999
+                        decimals: 2
+                        backendValue: backendValues.scale_x
+                        implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                       + StudioTheme.Values.actionIndicatorWidth
+                    }
+
+                    Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                    ControlLabel {
+                        text: "X"
+                        color: StudioTheme.Values.theme3DAxisXColor
+                    }
+
+                    ExpandingSpacer {}
+                }
+
+                PropertyLabel {}
+
+                SecondColumnLayout {
+                    SpinBox {
+                        minimumValue: -9999999
+                        maximumValue: 9999999
+                        decimals: 2
+                        backendValue: backendValues.scale_y
+                        implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                       + StudioTheme.Values.actionIndicatorWidth
+                    }
+
+                    Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                    ControlLabel {
+                        text: "Y"
+                        color: StudioTheme.Values.theme3DAxisYColor
+                    }
+
+                    ExpandingSpacer {}
+                }
+
+                PropertyLabel {}
+
+                SecondColumnLayout {
+                    SpinBox {
+                        minimumValue: -9999999
+                        maximumValue: 9999999
+                        decimals: 2
+                        backendValue: backendValues.scale_z
+                        implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                       + StudioTheme.Values.actionIndicatorWidth
+                    }
+
+                    Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                    ControlLabel {
+                        text: "Z"
+                        color: StudioTheme.Values.theme3DAxisZColor
+                    }
+
+                    ExpandingSpacer {}
+                }
+            }
+
+            SectionLayout {
+                PropertyLabel {
+                    text: qsTr("Pivot")
+                    tooltip: qsTr("Sets the pivot of the node.")
+                }
+
+                SecondColumnLayout {
+                    SpinBox {
+                        minimumValue: -9999999
+                        maximumValue: 9999999
+                        decimals: 2
+                        backendValue: backendValues.pivot_x
+                        implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                       + StudioTheme.Values.actionIndicatorWidth
+                    }
+
+                    Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                    ControlLabel {
+                        text: "X"
+                        color: StudioTheme.Values.theme3DAxisXColor
+                    }
+
+                    ExpandingSpacer {}
+                }
+
+                PropertyLabel {}
+
+                SecondColumnLayout {
+                    SpinBox {
+                        minimumValue: -9999999
+                        maximumValue: 9999999
+                        decimals: 2
+                        backendValue: backendValues.pivot_y
+                        implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                       + StudioTheme.Values.actionIndicatorWidth
+                    }
+
+                    Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                    ControlLabel {
+                        text: "Y"
+                        color: StudioTheme.Values.theme3DAxisYColor
+                    }
+
+                    ExpandingSpacer {}
+                }
+
+                PropertyLabel {}
+
+                SecondColumnLayout {
+                    SpinBox {
+                        minimumValue: -9999999
+                        maximumValue: 9999999
+                        decimals: 2
+                        backendValue: backendValues.pivot_z
+                        implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                       + StudioTheme.Values.actionIndicatorWidth
+                    }
+
+                    Spacer { implicitWidth: StudioTheme.Values.controlLabelGap }
+
+                    ControlLabel {
+                        text: "Z"
+                        color: StudioTheme.Values.theme3DAxisZColor
+                    }
+
+                    ExpandingSpacer {}
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,48 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+
+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("Runtime Loader")
+
+        SectionLayout {
+            PropertyLabel {
+                text: qsTr("Source")
+                tooltip: qsTr("Sets the URL of the 3D asset to import at runtime.")
+            }
+
+            SecondColumnLayout {
+                UrlChooser {
+                    backendValue: backendValues.source
+                    filter: "*.*"
+                }
+
+                ExpandingSpacer {}
+            }
+
+            PropertyLabel {
+                text: qsTr("Instancing")
+                tooltip: qsTr("If this property is set, the imported model will not be rendered normally. Instead, a number of instances of the model will be rendered, as defined by the instance table.")
+            }
+
+            SecondColumnLayout {
+                ItemFilterComboBox {
+                    typeFilter: "QtQuick3D.Instancing"
+                    backendValue: backendValues.instancing
+                    implicitWidth: StudioTheme.Values.singleControlColumnWidth
+                                   + StudioTheme.Values.actionIndicatorWidth
+                }
+
+                ExpandingSpacer {}
+            }
+        }
+    }
+}
@@ -0,0 +1,18 @@
+// Copyright (C) 2022 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only
+
+import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import HelperWidgets 2.0
+
+Column {
+    width: parent.width
+
+    RuntimeLoaderSection {
+        width: parent.width
+    }
+
+    NodeSection {
+        width: parent.width
+    }
+}
@@ -0,0 +1,21 @@
+MetaInfo {
+    Type {
+        name: "QtQuick3D.AssetUtils.RuntimeLoader"
+        icon: "images/runtimeloader16.png"
+
+        Hints {
+            visibleInNavigator: true
+            canBeDroppedInNavigator: true
+            canBeDroppedInFormEditor: false
+            canBeDroppedInView3D: true
+        }
+
+        ItemLibraryEntry {
+            name: "Runtime Loader"
+            category: "AssetUtils"
+            libraryIcon: "images/runtimeloader.png"
+            version: "6.2"
+            requiredImport: "QtQuick3D.AssetUtils"
+        }
+    }
+}