diff --git a/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml b/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml index b3335c16873..4dbc8adb009 100644 --- a/share/qtcreator/qmldesigner/itemLibraryQmlSources/Assets.qml +++ b/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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/BooleanEditorTemplate.template b/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/BooleanEditorTemplate.template index bb2328042aa..be7a38b6ebb 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/BooleanEditorTemplate.template +++ b/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 {} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/ColorEditorTemplate.template b/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/ColorEditorTemplate.template index 66e3ece1c91..3e21c10b736 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/ColorEditorTemplate.template +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/ColorEditorTemplate.template @@ -1,14 +1,9 @@ -// Dummy comment to consume the first argument and suppress warnings %1 - -Section { - anchors.left: parent.left - anchors.right: parent.right - caption: qsTr("Color") - expanded: false - level: 2 - - ColorEditor { - backendValue: backendValues.%2 - supportGradient: false - } +PropertyLabel { + text: "%1" + tooltip: "%1" +} + +ColorEditor { + backendValue: backendValues.%2 + supportGradient: false } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/FontEditorTemplate.template b/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/FontEditorTemplate.template index 1f56bfc5a4a..443f9904867 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/FontEditorTemplate.template +++ b/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 } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/ImageEditorTemplate.template b/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/ImageEditorTemplate.template index d1ffbf9dd0f..d7f931566f2 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/ImageEditorTemplate.template +++ b/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 { - text: qsTr("Source") - } + PropertyLabel { text: qsTr("Source") } SecondColumnLayout { UrlChooser { - Layout.fillWidth: true backendValue: backendValues.%2_source } - ExpandingSpacer { - } + ExpandingSpacer {} } - Label { - text: qsTr("Fill mode") - } + PropertyLabel { text: qsTr("Fill mode") } SecondColumnLayout { ComboBox { scope: "Image" model: ["Stretch", "PreserveAspectFit", "PreserveAspectCrop", "Tile", "TileVertically", "TileHorizontally", "Pad"] backendValue: backendValues.%2_fillMode - implicitWidth: 180 - Layout.fillWidth: true + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + 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 { - width: 4 - height: 4 + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { + text: qsTr("W") + //disabledStateSoft: !backendValues.%2_sourceSize_width.isAvailable } - Label { - text: "H" - width: 12 - disabledStateSoft: !backendValues.%2_sourceSize_height.isAvailable - } + Spacer { implicitWidth: StudioTheme.Values.controlGap } 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 { - text: qsTr("Horizontal alignment") - } + PropertyLabel { text: qsTr("Alignment H") } 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 { - text: qsTr("Vertical alignment") - } + PropertyLabel { text: qsTr("Alignment V") } 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 {} } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/IntEditorTemplate.template b/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/IntEditorTemplate.template index 981340e4cd1..9f9e70848a9 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/IntEditorTemplate.template +++ b/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 - Layout.maximumWidth: 100 + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth } - ExpandingSpacer { - } + ExpandingSpacer {} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/RealEditorTemplate.template b/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/RealEditorTemplate.template index fbc24990c87..7f7fc9bcf7d 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/RealEditorTemplate.template +++ b/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 - Layout.maximumWidth: 100 - } - ExpandingSpacer { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth } + + ExpandingSpacer {} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/RectangleEditorTemplate.template b/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/RectangleEditorTemplate.template index 87451c11b1d..a4228b8bf68 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/RectangleEditorTemplate.template +++ b/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 - - 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 + level: 1 SectionLayout { - rows: 2 - Label { - text: qsTr("Border") + PropertyLabel { text: qsTr("Color") } + + 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 { - } - } - Label { - text: qsTr("Radius") + ExpandingSpacer {} } + + 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 {} } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/StringEditorTemplate.template b/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/StringEditorTemplate.template index c53c07288e4..a0a28c2ace7 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/StringEditorTemplate.template +++ b/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 {} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/TemplateTypes.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/TemplateTypes.qml index d5a49232013..9b0a9a44873 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/TemplateTypes.qml +++ b/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 { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/TextEditorTemplate.template b/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/TextEditorTemplate.template index 903e971a835..1a583cc8cdb 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/TextEditorTemplate.template +++ b/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 - rows: 3 - Label { - text: qsTr("Text") - } - LineEdit { - backendValue: backendValues.%2_text - Layout.fillWidth: true + PropertyLabel { text: qsTr("Text") } + + SecondColumnLayout { + LineEdit { + backendValue: backendValues.%2_text + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + } + + ExpandingSpacer {} } - Label { - text: qsTr("Wrap mode") + PropertyLabel { text: qsTr("Text color") } + + ColorEditor { + backendValue: backendValues.%2_color + supportGradient: false } - ComboBox { - Layout.fillWidth: true - backendValue: backendValues.%2_wrapMode - scope: "Text" - model: ["NoWrap", "WordWrap", "WrapAnywhere", "WrapAtWordBoundaryOrAnywhere"] + PropertyLabel { text: qsTr("Wrap mode") } + + SecondColumnLayout { + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + backendValue: backendValues.%2_wrapMode + scope: "Text" + model: ["NoWrap", "WordWrap", "WrapAnywhere", "WrapAtWordBoundaryOrAnywhere"] + } + + ExpandingSpacer {} } - Label { - text: qsTr("Elide") + PropertyLabel { 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 { - Layout.fillWidth: true - backendValue: backendValues.%2_elide - scope: "Text" - model: ["ElideNone", "ElideLeft", "ElideMiddle", "ElideRight"] + PropertyLabel { text: qsTr("Alignment") } + + SecondColumnLayout { + AligmentHorizontalButtons { + 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 { - text: qsTr("Alignment") + PropertyLabel { text: qsTr("Format") } + + SecondColumnLayout { + ComboBox { + scope: "Text" + model: ["PlainText", "RichText", "AutoText"] + backendValue: backendValues.%2_textFormat + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + } + + ExpandingSpacer {} } - AligmentHorizontalButtons { - 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 { + PropertyLabel { text: qsTr("Render type") - toolTip: qsTr("Override the default rendering type for this item.") - } - ComboBox { - scope: "Text" - model: ["QtRendering", "NativeRendering"] - backendValue: backendValues.%2_renderType - Layout.fillWidth: true + tooltip: qsTr("Overrides the default rendering type for this component.") } - Label { - text: qsTr("Font size mode") - toolTip: qsTr("Specifies how the font size of the displayed text is determined.") - } - ComboBox { - scope: "Text" - model: ["FixedSize", "HorizontalFit", "VerticalFit", "Fit"] - backendValue: backendValues.%2_fontSizeMode - Layout.fillWidth: true + SecondColumnLayout { + ComboBox { + scope: "Text" + model: ["QtRendering", "NativeRendering"] + backendValue: backendValues.%2_renderType + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + } + + 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 { - Layout.fillWidth: true - backendValue: (backendValues.%2_lineHeight === undefined) ? dummyBackendValue : backendValues.lineHeight - maximumValue: 500 - minimumValue: 0 - decimals: 2 - stepSize: 0.1 - } + SecondColumnLayout { + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: (backendValues.%2_lineHeight === undefined) ? dummyBackendValue : backendValues.lineHeight + maximumValue: 500 + minimumValue: 0 + decimals: 2 + stepSize: 0.1 + } + ExpandingSpacer {} + } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/UrlEditorTemplate.template b/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/UrlEditorTemplate.template index 1cd24345e28..2573c30b394 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/PropertyTemplates/UrlEditorTemplate.template +++ b/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 {} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AdvancedSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AdvancedSection.qml index a7925fa258c..a29a2716e5b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AdvancedSection.qml +++ b/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 - - 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 { + PropertyLabel { 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") - } - ExpandingSpacer { + text: backendValues.enabled.valueToString } + + 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 { - text: qsTr("Active focus on tab") + PropertyLabel { + 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 { - text: qsTr("Baseline offset") + PropertyLabel { + 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 {} } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AlignDistributeSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AlignDistributeSection.qml index c7282b38c09..0b435c48eab 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AlignDistributeSection.qml +++ b/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("Align") + caption: qsTr("Alignment") SectionLayout { enabled: alignDistribute.multiSelection && @@ -46,16 +52,15 @@ Section { modelNodeBackendProperty: modelNodeBackend } - Label { - text: qsTr("Align objects") - width: 120 - Layout.columnSpan: 2 - } + PropertyLabel { text: qsTr("Alignment") } + + SecondColumnLayout { + 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 { - text: qsTr("Distribute objects") - width: 120 - Layout.columnSpan: 2 - } + PropertyLabel { text: qsTr("Distribute Objects") } + + SecondColumnLayout { + 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 { - text: qsTr("Distribute spacing") - width: 120 - Layout.columnSpan: 2 - } + PropertyLabel { text: qsTr("Distribute Spacing") } + + SecondColumnLayout { + 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 { - id: distanceSpinBox - width: 64 - actionIndicatorVisible: false - realFrom: -1000 - realTo: 1000 - enabled: !buttonNone.checked - } + PropertyLabel { text: qsTr("Pixel Spacing") } + + SecondColumnLayout { + Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth } + + StudioControls.RealSpinBox { + id: distanceSpinBox + implicitWidth: StudioTheme.Values.twoControlColumnWidth + actionIndicatorVisible: false + realFrom: -1000 + realTo: 1000 + enabled: !buttonNone.checked } } @@ -257,14 +296,16 @@ Section { selectionOnly: true } - Label { - text: qsTr("Align to") - } + PropertyLabel { 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 { - text: qsTr("Key object") - } + PropertyLabel { 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 { - columns: 1 - Layout.topMargin: 30 - Layout.columnSpan: 2 - visible: alignDistribute.multiSelection && - (alignDistribute.selectionHasAnchors || - !alignDistribute.selectionExclusivlyItems || - alignDistribute.selectionContainsRootItem) + PropertyLabel { + text: qsTr("Warning") + visible: root.warningVisible + font.weight: Font.Bold + } - Text { - id: warningTitle - font.family: StudioTheme.Constants.font.family - font.pixelSize: StudioTheme.Values.myFontSize - font.weight: Font.Bold - color: StudioTheme.Values.themeTextColor - text: qsTr("Warning") + SecondColumnLayout { + visible: root.warningVisible + + Spacer { + implicitWidth: StudioTheme.Values.actionIndicatorWidth } - Text { - id: warningRoot - visible: alignDistribute.selectionContainsRootItem - Layout.fillWidth: true - font.family: StudioTheme.Constants.font.family - font.pixelSize: StudioTheme.Values.myFontSize - color: StudioTheme.Values.themeTextColor - wrapMode: Text.WordWrap - text: qsTr("- The selection contains the root component.") - } - Text { - id: warningNonVisual - visible: !alignDistribute.selectionExclusivlyItems - Layout.fillWidth: true - font.family: StudioTheme.Constants.font.family - font.pixelSize: StudioTheme.Values.myFontSize - color: StudioTheme.Values.themeTextColor - wrapMode: Text.WordWrap - text: qsTr("- The selection contains a non-visual component.") - } - Text { - id: warningAnchors - visible: alignDistribute.selectionHasAnchors - Layout.fillWidth: true - 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.") + + Column { + Text { + id: warningRoot + visible: alignDistribute.selectionContainsRootItem + Layout.fillWidth: true + font.family: StudioTheme.Constants.font.family + font.pixelSize: StudioTheme.Values.myFontSize + color: StudioTheme.Values.themeTextColor + wrapMode: Text.WordWrap + text: qsTr("- The selection contains the root component.") + } + + Text { + id: warningNonVisual + visible: !alignDistribute.selectionExclusivlyItems + Layout.fillWidth: true + font.family: StudioTheme.Constants.font.family + font.pixelSize: StudioTheme.Values.myFontSize + color: StudioTheme.Values.themeTextColor + wrapMode: Text.WordWrap + text: qsTr("- The selection contains a non-visual component.") + } + + Text { + id: warningAnchors + visible: alignDistribute.selectionHasAnchors + Layout.fillWidth: true + 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.") + } } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml index 406e5af011c..aca846e6b7a 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnchorRow.qml +++ b/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 - - signal targetChanged + property alias buttonRow: buttonRow 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 { - id: iconLabel - Layout.alignment: Qt.AlignTop - Layout.topMargin: 4 - Layout.leftMargin: 4 - } - - 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) + SecondColumnLayout { + IconLabel { + id: iconLabel + implicitWidth: StudioTheme.Values.actionIndicatorWidth + horizontalAlignment: Text.AlignLeft } 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 { - 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(); - } - } - } -*/ - } + ExpandingSpacer {} } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnimatedImageSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnimatedImageSpecifics.qml index 84640f5014a..6c59408a588 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnimatedImageSpecifics.qml +++ b/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 {} } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnimationSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnimationSection.qml index 31ad4081d61..14fc80c971a 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnimationSection.qml +++ b/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.1 +import QtQuick.Layouts 1.15 +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 { - text: backendValues.running.valueToString - backendValue: backendValues.running + SecondColumnLayout { + CheckBox { + 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 { - 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 { + PropertyLabel { 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 { - visible: section.showDuration + PropertyLabel { 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 { - text: backendValues.alwaysRunToEnd.valueToString - backendValue: backendValues.alwaysRunToEnd + SecondColumnLayout { + CheckBox { + text: backendValues.alwaysRunToEnd.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.alwaysRunToEnd + } + + ExpandingSpacer {} } - Label { - visible: section.showEasingCurve + PropertyLabel { 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() } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnimationTargetSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnimationTargetSection.qml index 87801f90509..0d2d687475a 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/AnimationTargetSection.qml +++ b/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.1 +import QtQuick.Layouts 1.15 +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 - Layout.fillWidth: true - showTranslateCheckBox: false + + SecondColumnLayout { + LineEdit { + 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 {} + } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/BorderImageSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/BorderImageSpecifics.qml index 8d5a3e772c1..1a21114083b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/BorderImageSpecifics.qml +++ b/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 { - text: qsTr("Source") - } + PropertyLabel { text: qsTr("Source") } SecondColumnLayout { UrlChooser { backendValue: backendValues.source - implicitWidth: 180 } - ExpandingSpacer { - } + ExpandingSpacer {} } - Label { - text: qsTr("Border left") + PropertyLabel { + 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 { - text: qsTr("Border right") - } + PropertyLabel { 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 { - text: qsTr("Border top") - } + PropertyLabel { 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 { - text: qsTr("Border bottom") - } + PropertyLabel { 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 {} } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ColorAnimationSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ColorAnimationSpecifics.qml index 398515b7e0f..a75c1b0a387 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ColorAnimationSpecifics.qml +++ b/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.1 +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 { + caption: qsTr("Color Animation") + anchors.left: parent.left anchors.right: parent.right - caption: qsTr("To Color") - ColorEditor { - backendValue: backendValues.to - supportGradient: false + SectionLayout { + PropertyLabel { text: qsTr("From color") } + + ColorEditor { + backendValue: backendValues.from + supportGradient: false + } + + PropertyLabel { text: qsTr("To color") } + + ColorEditor { + backendValue: backendValues.to + supportGradient: false + } } } - Section { - anchors.left: parent.left - anchors.right: parent.right - caption: qsTr("From Color") + AnimationTargetSection {} - ColorEditor { - backendValue: backendValues.from - supportGradient: false - } - } - - AnimationTargetSection { - - } - - AnimationSection { - showEasingCurve: true - } + AnimationSection { showEasingCurve: true } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ColumnSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ColumnSpecifics.qml index a613c7c28fd..6791801c654 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ColumnSpecifics.qml +++ b/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 { - text: qsTr("Spacing") - } + anchors.left: parent.left + anchors.right: parent.right - SecondColumnLayout { - SpinBox { - backendValue: backendValues.spacing - minimumValue: -4000 - maximumValue: 4000 - decimals: 0 - } + SectionLayout { + PropertyLabel { text: qsTr("Spacing") } - ExpandingSpacer { + SecondColumnLayout { + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.spacing + minimumValue: -4000 + maximumValue: 4000 + decimals: 0 + } + + ExpandingSpacer {} } } } - PaddingSection { - } + PaddingSection {} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ComponentSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ComponentSection.qml new file mode 100644 index 00000000000..f723adaf567 --- /dev/null +++ b/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() + } + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/AbstractButtonSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/AbstractButtonSection.qml new file mode 100644 index 00000000000..c5b574e18e8 --- /dev/null +++ b/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 {} + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/BusyIndicatorSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/BusyIndicatorSpecifics.qml new file mode 100644 index 00000000000..b9f36804145 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ButtonSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ButtonSection.qml new file mode 100644 index 00000000000..4d9ca7d0e7c --- /dev/null +++ b/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 {} + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ButtonSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ButtonSpecifics.qml new file mode 100644 index 00000000000..6e57108f627 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/CheckBoxSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/CheckBoxSpecifics.qml new file mode 100644 index 00000000000..80b27fabfdb --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/CheckDelegateSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/CheckDelegateSpecifics.qml new file mode 100644 index 00000000000..0f9e81c6969 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/CheckSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/CheckSection.qml new file mode 100644 index 00000000000..1985f3ccffe --- /dev/null +++ b/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 {} + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ComboBoxSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ComboBoxSpecifics.qml new file mode 100644 index 00000000000..12c183560ac --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ContainerSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ContainerSection.qml new file mode 100644 index 00000000000..e5f3fad767e --- /dev/null +++ b/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 {} + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ControlSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ControlSection.qml new file mode 100644 index 00000000000..80faf2f39e2 --- /dev/null +++ b/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 {} + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/DelayButtonSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/DelayButtonSpecifics.qml new file mode 100644 index 00000000000..2a72cb6436f --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/DialSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/DialSpecifics.qml new file mode 100644 index 00000000000..e5ddf049504 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/FrameSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/FrameSpecifics.qml new file mode 100644 index 00000000000..fa746a930e0 --- /dev/null +++ b/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 + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/GroupBoxSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/GroupBoxSpecifics.qml new file mode 100644 index 00000000000..67618f58782 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/InsetSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/InsetSection.qml new file mode 100644 index 00000000000..9f2da824c79 --- /dev/null +++ b/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 {} + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ItemDelegateSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ItemDelegateSection.qml new file mode 100644 index 00000000000..2ad12fd7de1 --- /dev/null +++ b/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 {} + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ItemDelegateSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ItemDelegateSpecifics.qml new file mode 100644 index 00000000000..88f8dbf86b7 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/LabelSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/LabelSpecifics.qml new file mode 100644 index 00000000000..01e53e244c0 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/PageSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/PageSpecifics.qml new file mode 100644 index 00000000000..fab978e0b0d --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/PaneSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/PaneSection.qml new file mode 100644 index 00000000000..dff744b02bc --- /dev/null +++ b/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 {} + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/PaneSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/PaneSpecifics.qml new file mode 100644 index 00000000000..2b1ad460026 --- /dev/null +++ b/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 + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ProgressBarSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ProgressBarSpecifics.qml new file mode 100644 index 00000000000..c53893b861b --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/RadioButtonSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/RadioButtonSpecifics.qml new file mode 100644 index 00000000000..8c54760a8a6 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/RadioDelegateSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/RadioDelegateSpecifics.qml new file mode 100644 index 00000000000..92e814a624f --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/RangeSliderSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/RangeSliderSpecifics.qml new file mode 100644 index 00000000000..d51943cb4b1 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/RoundButtonSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/RoundButtonSpecifics.qml new file mode 100644 index 00000000000..6a7fbda94de --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ScrollViewSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ScrollViewSpecifics.qml new file mode 100644 index 00000000000..7088f08faf2 --- /dev/null +++ b/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 + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SliderSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SliderSpecifics.qml new file mode 100644 index 00000000000..577693824f0 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SpinBoxSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SpinBoxSpecifics.qml new file mode 100644 index 00000000000..c6bb8362a60 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/StackViewSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/StackViewSpecifics.qml new file mode 100644 index 00000000000..37ba9bb66c9 --- /dev/null +++ b/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 + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SwipeDelegateSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SwipeDelegateSpecifics.qml new file mode 100644 index 00000000000..ec3156bd556 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SwipeViewSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SwipeViewSpecifics.qml new file mode 100644 index 00000000000..525b61dc640 --- /dev/null +++ b/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 + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SwitchDelegateSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SwitchDelegateSpecifics.qml new file mode 100644 index 00000000000..b5805ef74c9 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SwitchSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/SwitchSpecifics.qml new file mode 100644 index 00000000000..b8814131f0e --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TabBarSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TabBarSpecifics.qml new file mode 100644 index 00000000000..5c5ff6d4431 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TabButtonSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TabButtonSpecifics.qml new file mode 100644 index 00000000000..8c54760a8a6 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TextAreaSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TextAreaSpecifics.qml new file mode 100644 index 00000000000..2efd3333a03 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TextFieldSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TextFieldSpecifics.qml new file mode 100644 index 00000000000..e5d7edb79fe --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TextSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TextSection.qml new file mode 100644 index 00000000000..7e23e522283 --- /dev/null +++ b/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 {} + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ToolBarSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ToolBarSpecifics.qml new file mode 100644 index 00000000000..582f2120c3a --- /dev/null +++ b/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 + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ToolButtonSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ToolButtonSpecifics.qml new file mode 100644 index 00000000000..923f78e9c37 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ToolSeparatorSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/ToolSeparatorSpecifics.qml new file mode 100644 index 00000000000..0c456d8c76a --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TumblerSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/Controls/TumblerSpecifics.qml new file mode 100644 index 00000000000..d56d529ea48 --- /dev/null +++ b/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 {} +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/FlickableSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/FlickableSpecifics.qml index 9f8b73937fe..9424fdb67fc 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/FlickableSpecifics.qml +++ b/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 { - anchors.left: parent.left - anchors.right: parent.right - } + FlickableSection {} + + FlickableGeometrySection {} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/FlowSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/FlowSpecifics.qml index 54766ce78b5..63ff172fc70 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/FlowSpecifics.qml +++ b/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 { - 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") - } + PropertyLabel { 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 {} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/GeometrySection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/GeometrySection.qml index 166c9631739..8021e9c0e6a 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/GeometrySection.qml +++ b/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 - rows: 2 - - Label { - text: qsTr("Position") - } + PropertyLabel { 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 { - width: 4 - height: 4 - } + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } - Label { - text: "Y" - width: 12 - } + ControlLabel { text: "X" } + + 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 { - } - } - Label { - text: qsTr("Size") + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { text: "Y" } + + 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 { - width: 4 - height: 4 - } + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } - Label { - text: "H" - width: 12 - } + ControlLabel { text: qsTr("W") } + + 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 {} } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/GridSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/GridSpecifics.qml index de1d37c6809..89ebbae788f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/GridSpecifics.qml +++ b/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 { - - Label { - text: qsTr("Columns") - } + PropertyLabel { text: qsTr("Columns") } SecondColumnLayout { SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth backendValue: backendValues.columns minimumValue: 0 maximumValue: 2000 decimals: 0 } - ExpandingSpacer { - } + ExpandingSpacer {} } - Label { - text: qsTr("Rows") - } + PropertyLabel { text: qsTr("Rows") } SecondColumnLayout { SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth backendValue: backendValues.rows minimumValue: 0 maximumValue: 2000 decimals: 0 } - ExpandingSpacer { - } + ExpandingSpacer {} } - Label { - 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") - } + PropertyLabel { 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 {} } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/GridViewSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/GridViewSpecifics.qml index be8628b0f26..70a18787eb9 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/GridViewSpecifics.qml +++ b/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 { - - 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") - } + PropertyLabel { 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 - decimals: 0 + maximumValue: 10000 } - Item { - width: 4 - height: 4 + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + 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 { - text: "H" - width: 12 - } - SpinBox { - backendValue: backendValues.cellHeight - minimumValue: 0 - maximumValue: 1000 - decimals: 0 - } - ExpandingSpacer { - } + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { text: qsTr("H") } + + Spacer { implicitWidth: StudioTheme.Values.controlGap } + + LinkIndicator2D {} + + ExpandingSpacer {} } - Label { - text: qsTr("Flow") - } + PropertyLabel { text: qsTr("Flow") } SecondColumnLayout { ComboBox { - scope: "GridView" - model: ["FlowLeftToRight", "FlowTopToBottom"] + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.flow - Layout.fillWidth: true - } - ExpandingSpacer { + model: ["FlowLeftToRight", "FlowTopToBottom"] + scope: "GridView" } + + ExpandingSpacer {} } - Label { - 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") - } + PropertyLabel { text: qsTr("Layout direction") } SecondColumnLayout { ComboBox { - scope: "Qt" - model: ["LeftToRight", "RightToLeft"] + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.layoutDirection - Layout.fillWidth: true - } - ExpandingSpacer { + model: ["LeftToRight", "RightToLeft"] + scope: "Qt" } + + 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" - model: ["NoSnap", "SnapToRow", "SnapOneRow"] + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.snapMode - Layout.fillWidth: true - } - ExpandingSpacer { + model: ["NoSnap", "SnapToRow", "SnapOneRow"] + scope: "GridView" } + + 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" - model: ["NoHighlightRange", "ApplyRange", "StrictlyEnforceRange"] + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.highlightRangeMode - Layout.fillWidth: true - } - ExpandingSpacer { + model: ["NoHighlightRange", "ApplyRange", "StrictlyEnforceRange"] + scope: "GridView" } + + 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 {} + } } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ImageSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ImageSpecifics.qml index 41637e4b1c6..54f85e25436 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ImageSpecifics.qml +++ b/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 { - 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 {} - } - } - } + ImageSection {} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml index 3c1350ae61d..8ea55455094 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ItemPane.qml +++ b/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 - anchors.right: parent.right + onWidthChanged: StudioTheme.Values.responsiveResize(itemPane.width) + Component.onCompleted: StudioTheme.Values.responsiveResize(itemPane.width) - SectionLayout { - Label { - text: qsTr("Type") - } + ComponentSection {} - 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 { - 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 { - } + GeometrySection {} Section { - anchors.left: parent.left - anchors.right: parent.right - caption: qsTr("Visibility") + anchors.left: parent.left + anchors.right: parent.right SectionLayout { - rows: 2 - Label { - text: qsTr("Visibility") - } + PropertyLabel { text: qsTr("Visibility") } SecondColumnLayout { - CheckBox { - text: qsTr("Is visible") + text: qsTr("Visible") + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth backendValue: backendValues.visible } - Item { - width: 10 - height: 10 - } + Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap } CheckBox { text: qsTr("Clip") + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth backendValue: backendValues.clip } - Item { - Layout.fillWidth: true - } + + ExpandingSpacer {} } - Label { - text: qsTr("Opacity") - } + PropertyLabel { 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 - anchors.right: parent.right + width: parent.width 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 - - id: specificsOne; - source: specificsUrl; - - property int loaderHeight: specificsOne.item.height + tabView.extraHeight + source: specificsUrl + visible: specificsOne.source.toString() !== "" } + + AdvancedSection {} + + LayerSection {} } Column { - anchors.left: parent.left - anchors.right: parent.right + width: parent.width - 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 { - } - } } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayerSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayerSection.qml index 1c1c0efd45f..2afadcf282d 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayerSection.qml +++ b/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 - - 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 { + PropertyLabel { 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 { - text: qsTr("Format") - 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") + PropertyLabel { + 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 { - text: qsTr("Source rectangle") + PropertyLabel { + 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 { - width: 4 - height: 4 - } + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + 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 { - width: 4 - height: 4 - } + PropertyLabel {} + 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 { - width: 4 - height: 4 - } + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + 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 { - } - } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutPoperties.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutProperties.qml similarity index 63% rename from share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutPoperties.qml rename to share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutProperties.qml index 1699f001be8..3e5ddc6fb2f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutPoperties.qml +++ b/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; - property bool isInSubState: backendValue.isInSubState; - property variant valueFromBackend: backendValue.value + id: root + 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(); - horizontalAlignmentComboBox.currentIndex = indexOfHorizontalAlignment(); + verticalAlignmentComboBox.currentIndex = indexOfVerticalAlignment() + 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: colorLogic + id: horizontalAlignmentComboBox + + 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: { - verticalAlignmentComboBox.__isCompleted = true; - } + Component.onCompleted: 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") - Layout.fillWidth: true + text: qsTr("Width") + } + + Spacer { + implicitWidth: StudioTheme.Values.twoControlColumnGap } CheckBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth backendValue: backendValues.Layout_fillHeight - text: qsTr("Fill height") - Layout.fillWidth: true + text: qsTr("Height") } } - 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 { - width: 4 - height: 4 - } + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } - Label { - text: "H" - width: 12 - } + ControlLabel { text: qsTr("W") } + + 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 { - width: 4 - height: 4 - } + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } - Label { - text: "H" - width: 12 - } + ControlLabel { text: qsTr("W") } + + 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 { - width: 4 - height: 4 - } + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } - Label { - text: "H" - width: 12 - } + ControlLabel { text: qsTr("W") } + + 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 {} } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutSection.qml index 458e394fbf4..688b933f9b7 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/LayoutSection.qml +++ b/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 { - text: qsTr("Anchors") + + PropertyLabel { 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 } - - AnchorRow { - 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 - } + onSameEdgeButtonClicked: { + anchorBackend.relativeAnchorTargetTop = AnchorBindingProxy.SameEdge } - - AnchorRow { - 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 - } + onOppositeEdgeButtonClicked: { + anchorBackend.relativeAnchorTargetTop = AnchorBindingProxy.OppositeEdge } - - AnchorRow { - 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 - } + onCenterButtonClicked: { + anchorBackend.relativeAnchorTargetTop = AnchorBindingProxy.Center } + } - AnchorRow { - visible: anchorBackend.rightAnchored - iconSource: StudioTheme.Constants.anchorRight - anchorMargin: backendValues.anchors_rightMargin - targetName: anchorBackend.rightTarget - onTargetChanged: { - anchorBackend.rightTarget = currentText - } - relativeTarget: anchorBackend.relativeAnchorTargetRight - verticalAnchor: false - invertRelativeTargets: true + AnchorRow { + visible: anchorBackend.bottomAnchored + iconSource: StudioTheme.Constants.anchorBottom + anchorMargin: backendValues.anchors_bottomMargin + targetName: anchorBackend.bottomTarget + relativeTarget: anchorBackend.relativeAnchorTargetBottom + verticalAnchor: true + invertRelativeTargets: true - onSameEdgeButtonClicked: { - anchorBackend.relativeAnchorTargetRight = AnchorBindingProxy.SameEdge - } - onOppositeEdgeButtonClicked: { - anchorBackend.relativeAnchorTargetRight = AnchorBindingProxy.OppositeEdge - } - - onCenterButtonClicked: { - anchorBackend.relativeAnchorTargetRight = AnchorBindingProxy.Center - } + onTargetChanged: { + anchorBackend.bottomTarget = currentText } - - AnchorRow { - 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 + onSameEdgeButtonClicked: { + anchorBackend.relativeAnchorTargetBottom = AnchorBindingProxy.SameEdge } + onOppositeEdgeButtonClicked: { + anchorBackend.relativeAnchorTargetBottom = AnchorBindingProxy.OppositeEdge + } + onCenterButtonClicked: { + anchorBackend.relativeAnchorTargetBottom = AnchorBindingProxy.Center + } + } - AnchorRow { - showAlternativeTargets: false - visible: anchorBackend.verticalCentered - iconSource: StudioTheme.Constants.centerVertical - anchorMargin: backendValues.anchors_verticalCenterOffset - targetName: anchorBackend.verticalTarget - onTargetChanged: { - anchorBackend.verticalTarget = currentText - } - verticalAnchor: true - buttonRow.visible: false + AnchorRow { + visible: anchorBackend.leftAnchored + iconSource: StudioTheme.Constants.anchorLeft + anchorMargin: backendValues.anchors_leftMargin + targetName: anchorBackend.leftTarget + relativeTarget: anchorBackend.relativeAnchorTargetLeft + verticalAnchor: false + + onTargetChanged: { + anchorBackend.leftTarget = currentText + } + 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 } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ListViewSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ListViewSpecifics.qml index b251d543da8..40e91577b04 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ListViewSpecifics.qml +++ b/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 { - anchors.left: parent.left - anchors.right: parent.right - } + FlickableSection {} Section { anchors.left: parent.left @@ -42,77 +41,44 @@ Column { caption: qsTr("List View") SectionLayout { - - 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 { + PropertyLabel { text: qsTr("Orientation") - tooltip: qsTr("Orientation of the list.") + tooltip: qsTr("Orientation of the list") } SecondColumnLayout { ComboBox { - scope: "ListView" - model: ["Horizontal", "Vertical"] + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.orientation - Layout.fillWidth: true - } - ExpandingSpacer { + model: ["Horizontal", "Vertical"] + scope: "ListView" } + + ExpandingSpacer {} } - Label { + PropertyLabel { text: qsTr("Layout direction") disabledState: !backendValues.layoutDirection.isAvailable } SecondColumnLayout { ComboBox { - scope: "Qt" - model: ["LeftToRight", "RightToLeft"] + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + 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" - model: ["NoSnap", "SnapToItem", "SnapOneItem"] + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + 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" - model: ["NoHighlightRange", "ApplyRange", "StrictlyEnforceRange"] + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.highlightRangeMode - Layout.fillWidth: true + model: ["NoHighlightRange", "ApplyRange", "StrictlyEnforceRange"] + scope: "ListView" enabled: backendValue.isAvailable } - ExpandingSpacer { - } + + ExpandingSpacer {} } - - Label { + PropertyLabel { 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 {} + } } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/MouseAreaSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/MouseAreaSpecifics.qml index 1fef51c1069..9baf18e690d 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/MouseAreaSpecifics.qml +++ b/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 { - text: qsTr("Enabled") + PropertyLabel { + 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 { - 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 { + PropertyLabel { 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 { - text: qsTr("Propagate composed events") + PropertyLabel { + 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 { - 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 { + PropertyLabel { 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 {} } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/NumberAnimationSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/NumberAnimationSpecifics.qml index fa0029a1676..88573040d0c 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/NumberAnimationSpecifics.qml +++ b/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.Layouts 1.1 +import QtQuick 2.15 +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 } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ParallelAnimationSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ParallelAnimationSpecifics.qml index f78de15475b..1bc3305b208 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/ParallelAnimationSpecifics.qml +++ b/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.Layouts 1.1 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 + Column { anchors.left: parent.left anchors.right: parent.right - AnimationSection { - showDuration: false - } + AnimationSection { showDuration: false } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PathViewSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PathViewSpecifics.qml index 82b2763ece9..7508e9e9f43 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PathViewSpecifics.qml +++ b/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 { - - 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 { + PropertyLabel { 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" - model: ["NoHighlightRange", "ApplyRange", "StrictlyEnforceRange"] + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.highlightRangeMode - Layout.fillWidth: true - } - ExpandingSpacer { + model: ["NoHighlightRange", "ApplyRange", "StrictlyEnforceRange"] + scope: "PathView" } + + 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 {} } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PauseAnimationSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PauseAnimationSpecifics.qml index dd826dfb343..e80a89486c8 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PauseAnimationSpecifics.qml +++ b/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.Layouts 1.1 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 + Column { anchors.left: parent.left anchors.right: parent.right - AnimationSection { - } + AnimationSection {} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PropertyActionSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PropertyActionSpecifics.qml index 44dce1a9b10..81cfebd8c4f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PropertyActionSpecifics.qml +++ b/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.Layouts 1.1 +import QtQuick 2.15 +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 - Layout.fillWidth: true + + SecondColumnLayout { + LineEdit { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + backendValue: backendValues.value + } + + ExpandingSpacer {} } } } + AnimationTargetSection {} - AnimationTargetSection { - - } - - AnimationSection { - showDuration: false - } + AnimationSection { showDuration: false } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PropertyAnimationSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PropertyAnimationSpecifics.qml index ccb48c084f2..13390bed22b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/PropertyAnimationSpecifics.qml +++ b/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.Layouts 1.1 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 + Column { anchors.left: parent.left anchors.right: parent.right - AnimationTargetSection { + AnimationTargetSection {} - } - - AnimationSection { - showEasingCurve: true - } + AnimationSection { showEasingCurve: true } } - diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml index e7ea0e0c5c9..c2a684dd74b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/QtObjectPane.qml +++ b/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 - 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 - } + ComponentSection {} Column { anchors.left: parent.left diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/RectangleSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/RectangleSpecifics.qml index deca79ed00a..2c0bfd95be1 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/RectangleSpecifics.qml +++ b/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 - Label { + PropertyLabel { text: qsTr("Color") } + + 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 { - } - } - Label { - text: qsTr("Radius") + ExpandingSpacer {} } + + 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 {} } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/RowSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/RowSpecifics.qml index c1f927f58ba..6e51b523b27 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/RowSpecifics.qml +++ b/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 { - 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") - } + PropertyLabel { 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 {} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TargetComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TargetComboBox.qml index b500f8c6a7b..d654f53aa7a 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TargetComboBox.qml +++ b/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 { - target: anchorBackend - onInvalidated: { - targetComboBox.currentIndex = - anchorBackend.indexOfPossibleTargetItem(targetComboBox.targetName) - } - } + property string targetName: anchorBackend.topTarget + + actionIndicatorVisible: false + model: anchorBackend.possibleTargetItems onTargetNameChanged: { targetComboBox.currentIndex = anchorBackend.indexOfPossibleTargetItem(targetComboBox.targetName) } - model: anchorBackend.possibleTargetItems + Connections { + target: anchorBackend + function onInvalidated() { + targetComboBox.currentIndex = + anchorBackend.indexOfPossibleTargetItem(targetComboBox.targetName) + } + } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextEditSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextEditSpecifics.qml index 2703191cda0..4f0d59c4cb5 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextEditSpecifics.qml +++ b/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 { - showVerticalAlignment: true - showFormatProperty: true + CharacterSection { richTextEditorAvailable: true + 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 - } + TextInputSection {} + TextExtrasSection { + showWrapMode: true + showFormatProperty: true } - 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 { + FontExtrasSection { showStyle: false } - TextInputSection { - } - PaddingSection { visible: minorQtQuickVersion > 5 } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextInputSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextInputSection.qml index d3b90d56e6f..0deb638a363 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextInputSection.qml +++ b/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 - columns: 2 + PropertyLabel { text: qsTr("Selection color") } - Label { - text: qsTr("Mouse selection mode") - } - ComboBox { - Layout.fillWidth: true - backendValue: backendValues.mouseSelectionMode - scope: "TextInput" - model: ["SelectCharacters", "SelectWords"] + ColorEditor { + backendValue: backendValues.selectionColor + supportGradient: false } - 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 - showTranslateCheckBox: false + + LineEdit { + 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 - scope: "TextInput" - model: ["Normal", "Password", "PasswordEchoOnEdit", "NoEcho"] + + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + 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 - showTranslateCheckBox: false + + LineEdit { + 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 - maximumValue: 200 - minimumValue: 0 + + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + 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 - maximumValue: 200 - minimumValue: -200 + + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + 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 { - CheckBox { - Layout.fillWidth: true - text: qsTr("Read only") - backendValue: backendValues.readOnly - } + visible: textInputSection.isTextInput - CheckBox { - Layout.fillWidth: true - text: qsTr("Cursor visible") - backendValue: backendValues.cursorVisible - } - - 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 - } + SpinBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.maximumLength + minimumValue: 0 + maximumValue: 32767 } + + 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 } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextInputSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextInputSpecifics.qml index 29702303b26..2061081b1f6 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextInputSpecifics.qml +++ b/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 } - } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextSpecifics.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextSpecifics.qml index 96a36c16b18..991b9f8ec4f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/TextSpecifics.qml +++ b/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 { - anchors.left: parent.left - anchors.right: parent.right - caption: qsTr("Text Color") - - ColorEditor { - caption: qsTr("Text Color") - backendValue: backendValues.color - supportGradient: false - } - + FontExtrasSection { + showStyle: true } - Section { - anchors.left: parent.left - anchors.right: parent.right - caption: qsTr("Style Color") - visible: backendValues.styleColor.isAvailable - - ColorEditor { - caption: qsTr("Style Color") - backendValue: backendValues.styleColor - supportGradient: false - } + PaddingSection { + visible: minorQtQuickVersion > 5 } - - FontSection { - showStyle: true - } - - PaddingSection { - visible: minorQtQuickVersion > 5 - } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/emptyPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/emptyPane.qml index e3f4d76ce13..e5f8f49f740 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick/emptyPane.qml +++ b/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."); - anchors.fill: parent + text: qsTr("None or multiple components selected.") + anchors.fill: parent // TODO } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick3D/Object3DPane.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick3D/Object3DPane.qml index cb9132b54d7..8b89baf78d7 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/QtQuick3D/Object3DPane.qml +++ b/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 - 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 - } + Q.ComponentSection {} Column { anchors.left: parent.left anchors.right: parent.right + Loader { id: specificsTwo anchors.left: parent.left diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AbstractButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AbstractButton.qml index 82cd07977a6..53f62be453b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AbstractButton.qml +++ b/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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AligmentHorizontalButtons.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AligmentHorizontalButtons.qml index c57bc44b881..f85b32ca6f8 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AligmentHorizontalButtons.qml +++ b/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; - onIsInModelChanged: { - evaluate(); - } - property bool isInSubState: backendValue.isInSubState; - onIsInSubStateChanged: { - evaluate(); - } + property bool isInModel: backendValue.isInModel + onIsInModelChanged: 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 { - id: group - } + StudioControls.ButtonGroup { 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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml index 79676f0da21..3629ca5ab64 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/AnchorButtons.qml +++ b/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 { - id: group - } + StudioControls.ButtonGroup { 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.topAnchored = true; + anchorBackend.verticalCentered = false + + 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.bottomAnchored = true; + anchorBackend.verticalCentered = false + + 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.leftAnchored = true; + anchorBackend.horizontalCentered = false + + 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.rightAnchored = true; + anchorBackend.horizontalCentered = false + + anchorBackend.rightAnchored = true } else { - anchorBackend.rightAnchored = false; + anchorBackend.rightAnchored = false } } } - Item { - width: 16 + 2 * StudioTheme.Values.border - height: 5 + Spacer { + implicitWidth: 16 + 2 * StudioTheme.Values.border } 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) { - anchorBackend.fill(); - } else { - anchorBackend.resetLayout(); - } + if (checked) + anchorBackend.fill() + else + anchorBackend.resetLayout() } } - Item { - width: 16 + 2 * StudioTheme.Values.border - height: 5 + Spacer { + implicitWidth: 16 + 2 * StudioTheme.Values.border } 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.bottomAnchored = false; + anchorBackend.topAnchored = 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.rightAnchored = false; + anchorBackend.leftAnchored = false + anchorBackend.rightAnchored = false } - anchorBackend.horizontalCentered = true; + anchorBackend.horizontalCentered = true } else { - anchorBackend.horizontalCentered = false; + anchorBackend.horizontalCentered = false } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/BoolButtonRowButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/BoolButtonRowButton.qml index 725014b4efe..7477d0baf58 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/BoolButtonRowButton.qml +++ b/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: { - button.backendValue.value = button.checked - } + onCheckedChanged: button.backendValue.value = button.checked ExtendedFunctionLogic { id: extFuncLogic diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/CharacterSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/CharacterSection.qml new file mode 100644 index 00000000000..8fea7777345 --- /dev/null +++ b/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 + } + } + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorButton.qml deleted file mode 100644 index 520e6f30899..00000000000 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorButton.qml +++ /dev/null @@ -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() - } - } - } - } - } -} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorCheckButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorCheckButton.qml deleted file mode 100644 index a66921a8c4a..00000000000 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorCheckButton.qml +++ /dev/null @@ -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.") - } -} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml index 722338ac1dd..3a8f431df8f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.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,52 +23,171 @@ ** ****************************************************************************/ -import QtQuick 2.1 -import QtQuick.Layouts 1.0 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.15 as Effects +import QtQuick.Shapes 1.15 +import QtQuick.Templates 2.15 as T import QtQuickDesignerTheme 1.0 import StudioTheme 1.0 as StudioTheme import StudioControls 1.0 as StudioControls +import QtQuickDesignerColorPalette 1.0 -Column { +SecondColumnLayout { id: colorEditor - width: parent.width - 8 - property color color - property bool supportGradient: false - - property string caption: qsTr("Color") - property variant backendValue - property variant value: { - if (isVector3D) - return Qt.rgba(backendValue.value.x, backendValue.value.y, backendValue.value.z, 1); + if (colorEditor.isVector3D) + return Qt.rgba(colorEditor.backendValue.value.x, + colorEditor.backendValue.value.y, + colorEditor.backendValue.value.z, + 1) else - return backendValue.value; + return colorEditor.backendValue.value } - property alias gradientPropertyName: gradientLine.gradientPropertyName - property bool shapeGradients: false - - property alias transparent: transparentButton.checked - property color originalColor - property bool isVector3D: false function isNotInGradientMode() { - return (buttonRow.checkedIndex === 0 || transparent) + return ceMode.currentValue === "Solid" + } + + function hasLinearGradient() { + return ceMode.currentValue === "LinearGradient" + } + + function hasConicalGradient() { + return ceMode.currentValue === "ConicalGradient" + } + + function hasRadialGradient() { + return ceMode.currentValue === "RadialGradient" } function resetShapeColor() { colorEditor.backendValue.resetValue() } - onValueChanged: colorEditor.color = colorEditor.value + function updateThumbnail() { + if (!gradientLine.hasGradient) + return + if (!colorEditor.shapeGradients) { + var gradientString = "import QtQuick 2.15; Gradient {" + var orientation = gradientOrientation.currentValue === Gradient.Horizontal ? "Gradient.Horizontal" + : "Gradient.Vertical" + gradientString += "orientation: " + orientation + ";" + + for (var i = 0; i < gradientLine.model.count; i++) + gradientString += "GradientStop {}" + + gradientString += "}" + + var gradientObject = Qt.createQmlObject(gradientString, gradientThumbnail, "test") + + for (i = 0; i < gradientLine.model.count; i++) { + gradientObject.stops[i].color = gradientLine.model.getColor(i) + gradientObject.stops[i].position = gradientLine.model.getPosition(i) + } + + gradientThumbnail.gradient = gradientObject + } else { + var gradientStr = "import QtQuick 2.15; import QtQuick.Shapes 1.15; " + + gradientLine.gradientTypeName + " {" + + if (gradientLine.gradientTypeName === "LinearGradient") { + gradientStr += "x1: 0" + + ";x2: " + shape.width + + ";y1: 0" + + ";y2: " + shape.height + ";" + } else if (gradientLine.gradientTypeName === "RadialGradient") { + gradientStr += "centerX: " + shape.width * 0.5 + + ";centerY: " + shape.height * 0.5 + + ";focalX: " + shape.width * 0.5 + + ";focalY: " + shape.height * 0.5 + + ";centerRadius: " + Math.min(shape.width, shape.height) * 0.5 + + ";focalRadius: 0" + ";" + } else if (gradientLine.gradientTypeName === "ConicalGradient") { + gradientStr += "centerX: " + shape.width * 0.5 + + ";centerY: " + shape.height * 0.5 + + ";angle: 0" + ";" + } + + for (var j = 0; j < gradientLine.model.count; j++) + gradientStr += "GradientStop {}" + + gradientStr += "}" + + var gradientObj = Qt.createQmlObject(gradientStr, shapeGradientThumbnail, "test1") + + for (j = 0; j < gradientLine.model.count; j++) { + gradientObj.stops[j].color = gradientLine.model.getColor(j) + gradientObj.stops[j].position = gradientLine.model.getPosition(j) + } + + shapeGradientThumbnail.fillGradient = gradientObj + } + } + + function createModel() { + // Build the color editor combobox model + ceMode.items.clear() + ceMode.items.append({ + value: "Solid", + text: qsTr("Solid"), + test: true + }) + ceMode.items.append({ + value: "LinearGradient", + text: qsTr("Linear"), + test: colorEditor.supportGradient + }) + ceMode.items.append({ + value: "RadialGradient", + text: qsTr("Radial"), + test: colorEditor.supportGradient && colorEditor.shapeGradients + }) + ceMode.items.append({ + value: "ConicalGradient", + text: qsTr("Conical"), + test: colorEditor.supportGradient && colorEditor.shapeGradients + }) + } + + function determineActiveColorMode() { + if (colorEditor.supportGradient && gradientLine.hasGradient) { + if (colorEditor.shapeGradients) { + switch (gradientLine.gradientTypeName) { + case "LinearGradient": + ceMode.currentIndex = ceMode.indexOfValue("LinearGradient") + break + case "RadialGradient": + ceMode.currentIndex = ceMode.indexOfValue("RadialGradient") + break + case "ConicalGradient": + ceMode.currentIndex = ceMode.indexOfValue("ConicalGradient") + break + default: + ceMode.currentIndex = ceMode.indexOfValue("LinearGradient") + } + } else { + ceMode.currentIndex = ceMode.indexOfValue("LinearGradient") + } + colorEditor.color = gradientLine.currentColor + } else { + ceMode.currentIndex = ceMode.indexOfValue("Solid") + colorEditor.color = colorEditor.value + } + + colorEditor.originalColor = colorEditor.color + } + + onValueChanged: colorEditor.color = colorEditor.value onBackendValueChanged: colorEditor.color = colorEditor.value Timer { @@ -81,9 +200,9 @@ Column { if (isVector3D) { colorEditor.backendValue.value = Qt.vector3d(colorEditor.color.r, colorEditor.color.g, - colorEditor.color.b); + colorEditor.color.b) } else { - colorEditor.backendValue.value = colorEditor.color; + colorEditor.backendValue.value = colorEditor.color } } } @@ -91,638 +210,974 @@ Column { onColorChanged: { if (!gradientLine.isInValidState) - return; + return if (colorEditor.supportGradient && gradientLine.hasGradient) { - textField.text = convertColorToString(color) - gradientLine.currentColor = color + var hexColor = convertColorToString(colorEditor.color) + hexTextField.text = hexColor + popupHexTextField.text = hexColor + gradientLine.currentColor = colorEditor.color } - if (isNotInGradientMode()) { - //Delay setting the color to keep ui responsive - colorEditorTimer.restart() - } + if (isNotInGradientMode()) + colorEditorTimer.restart() // Delay setting the color to keep ui responsive - colorPalette.selectedColor = color + colorPalette.selectedColor = colorEditor.color } - ColorLine { - visible: { - return (colorEditor.supportGradient && isNotInGradientMode()) + Spacer { implicitWidth: StudioTheme.Values.actionIndicatorWidth } + + Rectangle { + id: preview + implicitWidth: StudioTheme.Values.twoControlColumnWidth + implicitHeight: StudioTheme.Values.height + color: colorEditor.color + border.color: StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border + + Effects.LinearGradient { + id: gradientThumbnail + anchors.fill: parent + anchors.margins: StudioTheme.Values.border + visible: !colorEditor.isNotInGradientMode() + && !colorEditor.shapeGradients + && colorEditor.hasLinearGradient() } - currentColor: colorEditor.color - width: parent.width - } - GradientLine { - property bool isInValidState: false - visible: { - return !(isNotInGradientMode()) - } - id: gradientLine + Shape { + id: shape + anchors.fill: parent + anchors.margins: StudioTheme.Values.border + visible: !colorEditor.isNotInGradientMode() + && colorEditor.shapeGradients - width: parent.width + ShapePath { + id: shapeGradientThumbnail + startX: shape.x - 1 + startY: shape.y - 1 + strokeWidth: -1 + strokeColor: "green" - onCurrentColorChanged: { - if (colorEditor.supportGradient && gradientLine.hasGradient) { - colorEditor.color = gradientLine.currentColor + PathLine { x: shape.x - 1; y: shape.height } + PathLine { x: shape.width; y: shape.height } + PathLine { x: shape.width; y: shape.y - 1 } } } - onHasGradientChanged: { - if (!colorEditor.supportGradient) - return - - if (gradientLine.hasGradient) { - if (colorEditor.shapeGradients) { - switch (gradientLine.gradientTypeName) { - case "LinearGradient": - buttonRow.initalChecked = 1 - break; - case "RadialGradient": - buttonRow.initalChecked = 2 - break; - case "ConicalGradient": - buttonRow.initalChecked = 3 - break; - default: - buttonRow.initalChecked = 1 - } - } else { - buttonRow.initalChecked = 1 - } - colorEditor.color = gradientLine.currentColor - } else if (colorEditor.transparent) { - buttonRow.initalChecked = 4 - } else { - buttonRow.initalChecked = 0 - colorEditor.color = colorEditor.value - } - - buttonRow.checkedIndex = buttonRow.initalChecked - colorEditor.originalColor = colorEditor.color + Image { + anchors.fill: parent + source: "images/checkers.png" + fillMode: Image.Tile + z: -1 } - onSelectedNodeChanged: { - if (colorEditor.supportGradient && gradientLine.hasGradient) { - colorEditor.originalColor = gradientLine.currentColor + MouseArea { + anchors.fill: parent + onClicked: { + cePopup.opened ? cePopup.close() : cePopup.open() + forceActiveFocus() } } - Connections { - target: modelNodeBackend - onSelectionToBeChanged: { - colorEditorTimer.stop() - gradientLine.isInValidState = false - if (colorEditor.originalColor !== colorEditor.color) { - if (colorEditor.color != "#ffffff" - && colorEditor.color != "#000000" - && colorEditor.color != "#00000000") { - colorPalette.addColorToPalette(colorEditor.color) - } - } - } - } + T.Popup { + id: cePopup - Connections { - target: modelNodeBackend - onSelectionChanged: { - if (colorEditor.supportGradient && gradientLine.hasGradient) { - colorEditor.color = gradientLine.currentColor - gradientLine.currentColor = color - textField.text = colorEditor.color - } - gradientLine.isInValidState = true - colorEditor.originalColor = colorEditor.color - colorPalette.selectedColor = colorEditor.color - } - } + onOpened: { + if (Controller.mainScrollView === null) + return - } - - SectionLayout { - width: parent.width - columnSpacing: 0 - rowSpacing: checkButton.checked ? 8 : 2 - - rows: 5 - - //spacer 1 - Item { - height: 6 - } - - SecondColumnLayout { - - Item { - width: 6 + var mapped = preview.mapToItem(Controller.mainScrollView.contentItem, cePopup.x, cePopup.y) + Controller.mainScrollView.temporaryHeight = mapped.y + cePopup.height + 20 } - ColorCheckButton { - id: checkButton - buttonColor: colorEditor.color + onHeightChanged: { + if (Controller.mainScrollView === null) + return - onCheckedChanged: { - if (contextMenu.opened) - contextMenu.close() - } - onRightMouseButtonClicked: contextMenu.popup(checkButton) + var mapped = preview.mapToItem(Controller.mainScrollView.contentItem, cePopup.x, cePopup.y) + Controller.mainScrollView.temporaryHeight = mapped.y + cePopup.height + 20 } - LineEdit { - enabled: !colorEditor.transparent - id: textField + onClosed: { + Controller.mainScrollView.temporaryHeight = 0 + } - writeValueManually: true + x: - StudioTheme.Values.colorEditorPopupWidth * 0.5 + + preview.width * 0.5 + y: - StudioTheme.Values.colorEditorPopupMargin + - (StudioTheme.Values.colorEditorPopupSpacing * 2) + - StudioTheme.Values.defaultControlHeight + - StudioTheme.Values.colorEditorPopupLineHeight + - colorPicker.height * 0.5 + + preview.height * 0.5 - validator: RegExpValidator { - regExp: /#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?/g - } + width: StudioTheme.Values.colorEditorPopupWidth + height: colorColumn.height + sectionColumn.height + + StudioTheme.Values.colorEditorPopupMargin + 2 // TODO magic number - showTranslateCheckBox: false + padding: StudioTheme.Values.border + margins: -1 // If not defined margin will be -1 - backendValue: colorEditor.backendValue + closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent - onAccepted: { - colorEditor.color = colorFromString(textField.text) - } + contentItem: Item { + id: todoItem - onCommitData: { - colorEditor.color = colorFromString(textField.text) - if (isNotInGradientMode()) { - if (colorEditor.isVector3D) { - backendValue.value = Qt.vector3d(colorEditor.color.r, - colorEditor.color.g, - colorEditor.color.b); - } else { - backendValue.value = colorEditor.color; + property color color + property bool supportGradient: false + + Column { + id: colorColumn + + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + anchors.margins: StudioTheme.Values.colorEditorPopupMargin + spacing: StudioTheme.Values.colorEditorPopupSpacing + + RowLayout { + width: parent.width + Layout.alignment: Qt.AlignTop + + StudioControls.ComboBox { + id: ceMode + + property ListModel items: ListModel {} + + implicitWidth: StudioTheme.Values.colorEditorPopupCmoboBoxWidth + width: implicitWidth + actionIndicatorVisible: false + textRole: "text" + valueRole: "value" + model: ceMode.items + onActivated: { + switch (ceMode.currentValue) { + case "Solid": + gradientLine.deleteGradient() + hexTextField.text = colorEditor.color + popupHexTextField.text = colorEditor.color + colorEditor.resetShapeColor() + break + case "LinearGradient": + colorEditor.resetShapeColor() + + if (colorEditor.shapeGradients) + gradientLine.gradientTypeName = "LinearGradient" + else + gradientLine.gradientTypeName = "Gradient" + + if (gradientLine.hasGradient) + gradientLine.updateGradient() + else { + gradientLine.deleteGradient() + gradientLine.addGradient() + } + break + case "RadialGradient": + colorEditor.resetShapeColor() + gradientLine.gradientTypeName = "RadialGradient" + + if (gradientLine.hasGradient) + gradientLine.updateGradient() + else { + gradientLine.deleteGradient() + gradientLine.addGradient() + } + break + case "ConicalGradient": + colorEditor.resetShapeColor() + gradientLine.gradientTypeName = "ConicalGradient" + + if (gradientLine.hasGradient) + gradientLine.updateGradient() + else { + gradientLine.deleteGradient() + gradientLine.addGradient() + } + break + default: + console.log("Unknown item selected in color mode ComboBox.") + } + colorEditor.updateThumbnail() + } } - } - } - Layout.fillWidth: true - } + ExpandingSpacer {} - ButtonRow { - id: buttonRow - exclusive: true - - ButtonRowButton { - iconSource: "images/icon_color_solid.png" - - onClicked: { - gradientLine.deleteGradient() - - textField.text = colorEditor.color - colorEditor.resetShapeColor() - } - tooltip: qsTr("Solid Color") - } - ButtonRowButton { - visible: colorEditor.supportGradient - iconSource: "images/icon_color_gradient.png" - onClicked: { - colorEditor.resetShapeColor() - - if (colorEditor.shapeGradients) - gradientLine.gradientTypeName = "LinearGradient" - else - gradientLine.gradientTypeName = "Gradient" - - if (gradientLine.hasGradient) - gradientLine.updateGradient() - else { - gradientLine.deleteGradient() - gradientLine.addGradient() + IconIndicator { + id: transparentIndicator + icon: StudioTheme.Constants.transparent + pixelSize: StudioTheme.Values.myIconFontSize * 1.4 + tooltip: qsTr("Transparent TODO") + onClicked: { + colorPicker.alpha = 0 + colorPicker.updateColor() + } } - } - tooltip: qsTr("Linear Gradient") + IconIndicator { + id: gradientPickerIndicator + icon: StudioTheme.Constants.gradient + pixelSize: StudioTheme.Values.myIconFontSize * 1.4 + tooltip: qsTr("Gradient Picker") + enabled: colorEditor.supportGradient + onClicked: presetList.show() - GradientPopupIndicator { + GradientPresetList { + id: presetList + visible: false - onClicked: gradientDialogPopupLinear.toggle() - - GradientDialogPopup { - id: gradientDialogPopupLinear - - dialogHeight: 110 - content: Column { - spacing: StudioTheme.Values.sectionRowSpacing - - RowLayout { - Label { - text: "X1" - width: 18 - tooltip: qsTr("Defines the start point for color interpolation.") + function applyPreset() { + if (!gradientLine.hasGradient) { + if (colorEditor.shapeGradients) + gradientLine.gradientTypeName = "LinearGradient" + else + gradientLine.gradientTypeName = "Gradient" } - GradientPropertySpinBox { propertyName: "x1" } - - Item { width: StudioTheme.Values.controlLabelGap } - - Label { - text: "X2" - width: 18 - tooltip: qsTr("Defines the end point for color interpolation.") + if (presetList.gradientData.presetType == 0) { + gradientLine.setPresetByID(presetList.gradientData.presetID) + } else if (presetList.gradientData.presetType == 1) { + gradientLine.setPresetByStops( + presetList.gradientData.stops, + presetList.gradientData.colors, + presetList.gradientData.stopsCount) + } else { + console.log("INVALID GRADIENT TYPE: " + + presetList.gradientData.presetType) } - - GradientPropertySpinBox { propertyName: "x2" } } - RowLayout { - Label { - text: "Y1" - width: 18 - tooltip: qsTr("Defines the start point for color interpolation.") - } + onApplied: { + if (presetList.gradientData.stopsCount > 0) + applyPreset() + } - GradientPropertySpinBox { propertyName: "y1" } + onSaved: { + gradientLine.savePreset() + presetList.updatePresets() + } - Item { width: StudioTheme.Values.controlLabelGap } - - Label { - text: "Y2" - width: 18 - tooltip: qsTr("Defines the end point for color interpolation.") - } - - GradientPropertySpinBox { propertyName: "y2" } + onAccepted: { // return key + if (presetList.gradientData.stopsCount > 0) + applyPreset() } } } - } - } - ButtonRowButton { - visible: colorEditor.supportGradient && colorEditor.shapeGradients - iconSource: "images/icon_color_radial_gradient.png" - onClicked: { - colorEditor.resetShapeColor() - gradientLine.gradientTypeName = "RadialGradient" - if (gradientLine.hasGradient) - gradientLine.updateGradient() - else { - gradientLine.deleteGradient() - gradientLine.addGradient() + IconIndicator { + id: eyeDropperIndicator + icon: StudioTheme.Constants.eyeDropper + pixelSize: StudioTheme.Values.myIconFontSize * 1.4 + tooltip: qsTr("Eye Dropper") + onClicked: ColorPaletteSingleton.eyeDropper() + } + + IconIndicator { + id: closeIndicator + icon: StudioTheme.Constants.colorPopupClose + pixelSize: StudioTheme.Values.myIconFontSize * 1.4 + onClicked: cePopup.close() } } - tooltip: qsTr("Radial Gradient") + ColorLine { + id: colorLine + width: parent.width + currentColor: colorEditor.color + visible: isNotInGradientMode() + } - GradientPopupIndicator { - onClicked: gradientDialogPopupRadial.toggle() + GradientLine { + id: gradientLine + property bool isInValidState: false + width: parent.width + visible: !isNotInGradientMode() - GradientDialogPopup { - id: gradientDialogPopupRadial - dialogHeight: 140 - content: Column { - spacing: StudioTheme.Values.sectionRowSpacing + onCurrentColorChanged: { + if (colorEditor.supportGradient && gradientLine.hasGradient) + colorEditor.color = gradientLine.currentColor + } - RowLayout { - Label { - text: "CenterX" - width: 74 - tooltip: qsTr("Defines the center point.") + onHasGradientChanged: { + if (!colorEditor.supportGradient) + return + + colorEditor.determineActiveColorMode() + } + + onSelectedNodeChanged: { + if (colorEditor.supportGradient && gradientLine.hasGradient) { + colorEditor.originalColor = gradientLine.currentColor + } + } + + onInvalidated: colorEditor.updateThumbnail() + + Connections { + target: modelNodeBackend + function onSelectionToBeChanged() { + colorEditorTimer.stop() + gradientLine.isInValidState = false + + var hexOriginalColor = convertColorToString(colorEditor.originalColor) + var hexColor = convertColorToString(colorEditor.color) + + if (hexOriginalColor !== hexColor) { + if (colorEditor.color !== "#ffffff" + && colorEditor.color !== "#000000" + && colorEditor.color !== "#00000000") { + colorPalette.addColorToPalette(colorEditor.color) } - - GradientPropertySpinBox { propertyName: "centerX" } - - Item { width: StudioTheme.Values.controlLabelGap } - - Label { - text: "CenterY" - width: 74 - tooltip: qsTr("Defines the center point.") - } - - GradientPropertySpinBox { propertyName: "centerY" } - } - - RowLayout { - Label { - text: "FocalX" - width: 74 - tooltip: qsTr("Defines the focal point.") - } - - GradientPropertySpinBox { propertyName: "focalX" } - - Item { width: StudioTheme.Values.controlLabelGap } - - Label { - text: "FocalY" - width: 74 - tooltip: qsTr("Defines the focal point.") - } - - GradientPropertySpinBox { propertyName: "focalY" } - } - - RowLayout { - Label { - text: "Center Radius" - width: 74 - tooltip: qsTr("Defines the center point.") - } - - GradientPropertySpinBox { propertyName: "centerRadius" } - - Item { width: StudioTheme.Values.controlLabelGap } - - Label { - text: "Focal Radius" - width: 74 - tooltip: qsTr("Defines the focal radius. Set to 0 for simple radial gradients.") - } - - GradientPropertySpinBox { propertyName: "focalRadius" } } } } - } - } - ButtonRowButton { - visible: colorEditor.supportGradient && colorEditor.shapeGradients - iconSource: "images/icon_color_conical_gradient.png" - onClicked: { - colorEditor.resetShapeColor() - gradientLine.gradientTypeName = "ConicalGradient" - if (gradientLine.hasGradient) - gradientLine.updateGradient() - else { - gradientLine.deleteGradient() - gradientLine.addGradient() - } - } - - tooltip: qsTr("Conical Gradient") - - GradientPopupIndicator { - - onClicked: gradientDialogPopupConical.toggle() - - GradientDialogPopup { - id: gradientDialogPopupConical - dialogHeight: 110 - content: Column { - spacing: StudioTheme.Values.sectionRowSpacing - - RowLayout { - Label { - text: "CenterX" - width: 64 - tooltip: qsTr("Defines the center point.") - } - - GradientPropertySpinBox { propertyName: "centerX" } - - Item { width: StudioTheme.Values.controlLabelGap } - - Label { - text: "CenterY" - width: 64 - tooltip: qsTr("Defines the center point.") - } - - GradientPropertySpinBox { propertyName: "centerY" } + Connections { + target: modelNodeBackend + function onSelectionChanged() { + if (colorEditor.supportGradient && gradientLine.hasGradient) { + colorEditor.color = gradientLine.currentColor + gradientLine.currentColor = color + hexTextField.text = colorEditor.color + popupHexTextField.text = colorEditor.color } + gradientLine.isInValidState = true + colorEditor.originalColor = colorEditor.color + colorPalette.selectedColor = colorEditor.color - RowLayout { - Label { - text: "Angle" - width: 64 - tooltip: qsTr("Defines the start angle for the conical gradient. The value is in degrees (0-360).") - } - - GradientPropertySpinBox { propertyName: "angle" } - } + colorEditor.createModel() + colorEditor.determineActiveColorMode() } } } - } - ButtonRowButton { - id: transparentButton - iconSource: "images/icon_color_none.png" - onClicked: { - gradientLine.deleteGradient() - colorEditor.resetShapeColor() - colorEditor.color = "#00000000" - } - tooltip: qsTr("Transparent") - } - } - Rectangle { - id: gradientPickerButton - width: StudioTheme.Values.height - height: StudioTheme.Values.height - visible: colorEditor.supportGradient + ColorPicker { + id: colorPicker - color: StudioTheme.Values.themeControlBackground - border.color: StudioTheme.Values.themeControlOutline - border.width: StudioTheme.Values.border + property color boundColor: colorEditor.color - ToolTipArea { - anchors.fill: parent - id: toolTipArea - tooltip: qsTr("Gradient Picker Dialog") - } + width: parent.width + sliderMargins: 4 - GradientPresetList { - id: presetList - visible: false + // Prevent the binding to be deleted by assignment + onBoundColorChanged: colorPicker.color = colorPicker.boundColor + onUpdateColor: { + colorEditor.color = colorPicker.color + if (contextMenu.opened) + contextMenu.close() + } + onRightMouseButtonClicked: contextMenu.popup(colorPicker) - function applyPreset() { - if (!gradientLine.hasGradient) - { - if (colorEditor.shapeGradients) - gradientLine.gradientTypeName = "LinearGradient" + onColorInvalidated: { + if (colorPicker.saturation > 0.0 && colorPicker.lightness > 0.0) { + hueSpinBox.value = colorPicker.hue + } + + if (colorPicker.lightness > 0.0) + saturationSpinBox.value = colorPicker.saturation else - gradientLine.gradientTypeName = "Gradient" - } + colorPicker.saturation = saturationSpinBox.value - if (presetList.gradientData.presetType == 0) { - gradientLine.setPresetByID(presetList.gradientData.presetID); - } - else if (presetList.gradientData.presetType == 1) { - gradientLine.setPresetByStops( - presetList.gradientData.stops, - presetList.gradientData.colors, - presetList.gradientData.stopsCount); - } - else { - console.log("INVALID GRADIENT TYPE: " + - presetList.gradientData.presetType); + lightnessSpinBox.value = colorPicker.lightness + hslaAlphaSpinBox.value = colorPicker.alpha + + redSpinBox.value = (colorPicker.color.r * 255) + greenSpinBox.value = (colorPicker.color.g * 255) + blueSpinBox.value = (colorPicker.color.b * 255) + rgbaAlphaSpinBox.value = (colorPicker.alpha * 255) } } - onApplied : { - if (presetList.gradientData.stopsCount > 0) { - applyPreset(); - } - } - - - onSaved: { - gradientLine.savePreset(); - presetList.updatePresets(); - } - - onAccepted: { //return key - if (presetList.gradientData.stopsCount > 0) { - applyPreset(); - } - } - } - - Image { - id: image - width: 16 - height: 16 - smooth: false - anchors.centerIn: parent - source: "images/icon-gradient-list.png" - } - MouseArea { - anchors.fill: parent - onClicked: { - presetList.show() - } - } - } - - ExpandingSpacer { - } - } - - Item { - height: 8 - } - - ColorButton { - property color bindedColor: colorEditor.color - - //prevent the binding to be deleted by assignment - onBindedColorChanged: { - colorButton.color = colorButton.bindedColor - } - - enabled: !colorEditor.transparent - opacity: checkButton.checked ? 1 : 0 - id: colorButton - - Layout.preferredWidth: 124 - Layout.preferredHeight: checkButton.checked ? 124 : 0 - - sliderMargins: 4 - - onUpdateColor: { - colorEditor.color = colorButton.color - if (contextMenu.opened) - contextMenu.close() - } - - onRightMouseButtonClicked: contextMenu.popup(colorButton) - } - - Item { - height: 1 - } - - Item { - height: 2 - visible: checkButton.checked - } - - Item { - height: 1 - } - - Item { - id: colorBoxes - - Layout.preferredWidth: 134 - Layout.preferredHeight: checkButton.checked ? 70 : 0 - visible: checkButton.checked - - - SecondColumnLayout { - spacing: 16 - RowLayout { - spacing: 2 Column { - spacing: 5 - Label { + id: colorCompare + width: parent.width + + RowLayout { width: parent.width - text: qsTr("Original") - color: "#eee" + Layout.alignment: Qt.AlignTop + spacing: StudioTheme.Values.controlGap + + Label { + text: qsTr("Original") + width: 2 * StudioTheme.Values.colorEditorPopupSpinBoxWidth + + StudioTheme.Values.controlGap + } + + Label { + text: qsTr("New") + width: 2 * StudioTheme.Values.colorEditorPopupSpinBoxWidth + + StudioTheme.Values.controlGap + } } - Rectangle { - id: originalColorRectangle - color: colorEditor.originalColor - height: 40 - width: 67 - border.width: 1 - border.color: "#555555" + RowLayout { + width: parent.width + Layout.alignment: Qt.AlignTop + spacing: StudioTheme.Values.controlGap - ToolTipArea { - anchors.fill: parent + Rectangle { + id: originalColorRectangle + color: colorEditor.originalColor + height: StudioTheme.Values.height + width: 2 * StudioTheme.Values.colorEditorPopupSpinBoxWidth + + StudioTheme.Values.controlGap + border.width: StudioTheme.Values.border + border.color: StudioTheme.Values.themeControlOutline - tooltip: originalColorRectangle.color - onClicked: { - if (!colorEditor.transparent) - colorEditor.color = colorEditor.originalColor + Image { + anchors.fill: parent + source: "images/checkers.png" + fillMode: Image.Tile + z: -1 + } + + ToolTipArea { + anchors.fill: parent + tooltip: originalColorRectangle.color + acceptedButtons: Qt.LeftButton | Qt.RightButton + onClicked: { + if (mouse.button === Qt.LeftButton) + colorEditor.color = colorEditor.originalColor + + if (mouse.button === Qt.RightButton) { + contextMenuFavorite.currentColor = colorEditor.originalColor + contextMenuFavorite.popup() + } + } + } + } + + Rectangle { + id: newColorRectangle + color: colorEditor.color + height: StudioTheme.Values.height + width: 2 * StudioTheme.Values.colorEditorPopupSpinBoxWidth + + StudioTheme.Values.controlGap + border.width: StudioTheme.Values.border + border.color: StudioTheme.Values.themeControlOutline + + Image { + anchors.fill: parent + source: "images/checkers.png" + fillMode: Image.Tile + z: -1 + } + + ToolTipArea { + anchors.fill: parent + tooltip: newColorRectangle.color + acceptedButtons: Qt.RightButton + onClicked: { + if (mouse.button === Qt.RightButton) { + contextMenuFavorite.currentColor = colorEditor.color + contextMenuFavorite.popup() + } + } } } } - } - Column { - spacing: 5 - Label { - width: parent.width - text: qsTr("New") - color: "#eee" - } - Rectangle { - id: newColorRectangle - color: colorEditor.color - height: 40 - width: 67 + StudioControls.Menu { + id: contextMenuFavorite - border.width: 1 - border.color: "#555555" + property color currentColor + + StudioControls.MenuItem { + text: qsTr("Add to Favorites") + onTriggered: ColorPaletteSingleton.addFavoriteColor( + contextMenuFavorite.currentColor) + } } } } Column { - spacing: 5 - Label { - width: parent.width - text: qsTr("Recent") - color: "#eee" - elide: Text.ElideRight + id: sectionColumn + anchors.topMargin: StudioTheme.Values.colorEditorPopupMargin + anchors.top: colorColumn.bottom + anchors.left: parent.left + anchors.right: parent.right + + bottomPadding: 10 + + Section { + caption: qsTr("Color Details") + anchors.left: parent.left + anchors.right: parent.right + + leftPadding: 10 + rightPadding: 10 + + Column { + spacing: 10 + + RowLayout { + Layout.fillWidth: true + spacing: 0 + + LineEdit { + id: popupHexTextField + implicitWidth: 2 * StudioTheme.Values.colorEditorPopupSpinBoxWidth + + StudioTheme.Values.controlGap + width: implicitWidth + writeValueManually: true + validator: RegExpValidator { regExp: /#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?/g } + showTranslateCheckBox: false + showExtendedFunctionButton: false + backendValue: colorEditor.backendValue + + onAccepted: colorEditor.color = colorFromString(popupHexTextField.text) + onCommitData: { + colorEditor.color = colorFromString(popupHexTextField.text) + if (isNotInGradientMode()) { + if (colorEditor.isVector3D) { + backendValue.value = Qt.vector3d(colorEditor.color.r, + colorEditor.color.g, + colorEditor.color.b) + } else { + backendValue.value = colorEditor.color + } + } + } + } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { + text: "Hex" + width: StudioTheme.Values.colorEditorPopupHexLabelWidth + } + } + + RowLayout { + Layout.fillWidth: true + spacing: 0 + + StudioControls.ComboBox { + id: colorMode + + implicitWidth: 3 * StudioTheme.Values.controlGap + + 4 * StudioTheme.Values.colorEditorPopupSpinBoxWidth + width: implicitWidth + actionIndicatorVisible: false + model: ["RGBA", "HSLA"] + onActivated: { + switch (colorMode.currentText) { + case "RGBA": + rgbaRow.visible = true + hslaRow.visible = false + break + case "HSLA": + rgbaRow.visible = false + hslaRow.visible = true + break + default: + console.log("Unknown color mode selected.") + rgbaRow.visible = true + hslaRow.visible = false + } + } + } + } + + RowLayout { + id: rgbaRow + + Layout.fillWidth: true + spacing: StudioTheme.Values.controlGap + + DoubleSpinBox { + id: redSpinBox + width: StudioTheme.Values.colorEditorPopupSpinBoxWidth + + stepSize: 1 + minimumValue: 0 + maximumValue: 255 + decimals: 0 + + onValueModified: { + var tmp = redSpinBox.value / 255.0 + if (colorPicker.color.r !== tmp && !colorPicker.block) { + colorPicker.color.r = tmp + colorPicker.updateColor() + } + } + } + + DoubleSpinBox { + id: greenSpinBox + width: StudioTheme.Values.colorEditorPopupSpinBoxWidth + + stepSize: 1 + minimumValue: 0 + maximumValue: 255 + decimals: 0 + + onValueModified: { + var tmp = greenSpinBox.value / 255.0 + if (colorPicker.color.g !== tmp && !colorPicker.block) { + colorPicker.color.g = tmp + colorPicker.updateColor() + } + } + } + + DoubleSpinBox { + id: blueSpinBox + width: StudioTheme.Values.colorEditorPopupSpinBoxWidth + + stepSize: 1 + minimumValue: 0 + maximumValue: 255 + decimals: 0 + + onValueModified: { + var tmp = blueSpinBox.value / 255.0 + if (colorPicker.color.b !== tmp && !colorPicker.block) { + colorPicker.color.b = tmp + colorPicker.updateColor() + } + } + } + + DoubleSpinBox { + id: rgbaAlphaSpinBox + width: StudioTheme.Values.colorEditorPopupSpinBoxWidth + + stepSize: 1 + minimumValue: 0 + maximumValue: 255 + decimals: 0 + + onValueModified: { + var tmp = rgbaAlphaSpinBox.value / 255.0 + if (colorPicker.alpha !== tmp && !colorPicker.block) { + colorPicker.alpha = tmp + colorPicker.updateColor() + } + } + } + } + + RowLayout { + id: hslaRow + + visible: false + Layout.fillWidth: true + spacing: StudioTheme.Values.controlGap + + DoubleSpinBox { + id: hueSpinBox + width: StudioTheme.Values.colorEditorPopupSpinBoxWidth + onValueModified: { + if (colorPicker.hue !== hueSpinBox.value && !colorPicker.block) { + colorPicker.hue = hueSpinBox.value + colorPicker.updateColor() + } + } + } + + DoubleSpinBox { + id: saturationSpinBox + width: StudioTheme.Values.colorEditorPopupSpinBoxWidth + onValueModified: { + if (colorPicker.saturation !== saturationSpinBox.value && !colorPicker.block) { + colorPicker.saturation = saturationSpinBox.value + colorPicker.updateColor() + } + } + } + + DoubleSpinBox { + id: lightnessSpinBox + width: StudioTheme.Values.colorEditorPopupSpinBoxWidth + onValueModified: { + if (colorPicker.lightness !== lightnessSpinBox.value && !colorPicker.block) { + colorPicker.lightness = lightnessSpinBox.value + colorPicker.updateColor() + } + } + } + + DoubleSpinBox { + id: hslaAlphaSpinBox + width: StudioTheme.Values.colorEditorPopupSpinBoxWidth + onValueModified: { + if (colorPicker.alpha !== hslaAlphaSpinBox.value && !colorPicker.block) { + colorPicker.alpha = hslaAlphaSpinBox.value + colorPicker.updateColor() + } + } + } + } + } } - SimpleColorPalette { - id: colorPalette + Section { + caption: qsTr("Palette") + anchors.left: parent.left + anchors.right: parent.right - clickable: !colorEditor.transparent + leftPadding: 10 + rightPadding: 10 + bottomPadding: 5 - onSelectedColorChanged: colorEditor.color = colorPalette.selectedColor - - - onDialogColorChanged: colorEditor.color = colorPalette.selectedColor + ColorPalette { + id: colorPalette + enableSingletonConnection: cePopup.opened + onSelectedColorChanged: colorEditor.color = colorPalette.selectedColor + onDialogColorChanged: colorEditor.color = colorPalette.selectedColor + } } + + Section { + id: gradientControls + caption: qsTr("Gradient Controls") + anchors.left: parent.left + anchors.right: parent.right + visible: !colorEditor.isNotInGradientMode() + + leftPadding: 10 + rightPadding: 10 + + component ControlsRow: RowLayout { + property alias propertyName: spinBox.propertyName + property alias labelText: label.text + property alias labelTooltip: label.tooltip + property alias value: spinBox.value + + Layout.fillWidth: true + spacing: 0 + + GradientPropertySpinBox { + id: spinBox + implicitWidth: StudioTheme.Values.controlGap + + 2 * StudioTheme.Values.colorEditorPopupSpinBoxWidth + width: implicitWidth + } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { + id: label + horizontalAlignment: Text.AlignLeft + width: StudioTheme.Values.controlGap + + 2 * StudioTheme.Values.colorEditorPopupSpinBoxWidth + } + } + + // Default Gradient Controls + Column { + id: defaultGradientControls + spacing: 10 + + visible: colorEditor.hasLinearGradient() && !colorEditor.shapeGradients + + RowLayout { + id: defaultGradientOrientation + + Layout.fillWidth: true + spacing: 0 + + StudioControls.ComboBox { + id: gradientOrientation + implicitWidth: StudioTheme.Values.controlGap + + 3 * StudioTheme.Values.colorEditorPopupSpinBoxWidth + width: implicitWidth + model: [{ value: Gradient.Vertical, text: qsTr("Vertical") }, + { value: Gradient.Horizontal, text: qsTr("Horizontal") }] + + textRole: "text" + valueRole: "value" + onActivated: { + gradientLine.model.setGradientOrientation(gradientOrientation.currentValue) + colorEditor.updateThumbnail() + } + + Component.onCompleted: { + var orientation = gradientLine.model.readGradientOrientation() + + if (orientation === "Horizontal") + gradientOrientation.currentIndex = + gradientOrientation.indexOfValue(Gradient.Horizontal) + else + gradientOrientation.currentIndex = + gradientOrientation.indexOfValue(Gradient.Vertical) + } + } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap + 6 } + + IconLabel { + id: iconLabel + icon: StudioTheme.Constants.orientation + pixelSize: StudioTheme.Values.myIconFontSize * 1.4 + tooltip: qsTr("Defines the direction of the gradient.") + } + } + } + + // Linear Gradient Controls + Column { + id: linearGradientControls + spacing: 10 + + visible: colorEditor.hasLinearGradient() && colorEditor.shapeGradients + + ControlsRow { + id: linearGradientX1 + propertyName: "x1" + labelText: "X1" + labelTooltip: qsTr("Defines the start point for color interpolation.") + } + + ControlsRow { + id: linearGradientX2 + propertyName: "x2" + labelText: "X2" + labelTooltip: qsTr("Defines the end point for color interpolation.") + } + + ControlsRow { + id: linearGradientY1 + propertyName: "y1" + labelText: "Y1" + labelTooltip: qsTr("Defines the start point for color interpolation.") + } + + ControlsRow { + id: linearGradientY2 + propertyName: "y2" + labelText: "Y2" + labelTooltip: qsTr("Defines the end point for color interpolation.") + } + } + + // Radial Gradient Controls + Column { + id: radialGradientControls + spacing: 10 + + visible: colorEditor.hasRadialGradient() + + ControlsRow { + propertyName: "centerX" + labelText: "CenterX" + labelTooltip: qsTr("Defines the center point.") + } + + ControlsRow { + propertyName: "centerY" + labelText: "CenterY" + labelTooltip: qsTr("Defines the center point.") + } + + ControlsRow { + propertyName: "focalX" + labelText: "FocalX" + labelTooltip: qsTr("Defines the focal point.") + } + + ControlsRow { + propertyName: "focalY" + labelText: "FocalY" + labelTooltip: qsTr("Defines the focal point.") + } + + ControlsRow { + propertyName: "centerRadius" + labelText: "Center Radius" + labelTooltip: qsTr("Defines the center radius.") + } + + ControlsRow { + propertyName: "focalRadius" + labelText: "Focal Radius" + labelTooltip: qsTr("Defines the focal radius. Set to 0 for simple radial gradients.") + } + } + + // Conical Gradient Controls + Column { + id: concialGradientControls + spacing: 10 + + visible: colorEditor.hasConicalGradient() + + ControlsRow { + propertyName: "centerX" + labelText: "CenterX" + labelTooltip: qsTr("Defines the center point.") + } + + ControlsRow { + propertyName: "centerY" + labelText: "CenterY" + labelTooltip: qsTr("Defines the center point.") + } + + ControlsRow { + propertyName: "angle" + labelText: "Angle" + labelTooltip: qsTr("Defines the start angle for the conical gradient. The value is in degrees (0-360).") + } + } + } + } + } + + background: Rectangle { + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeInteraction + border.width: StudioTheme.Values.border + } + + enter: Transition {} + exit: Transition {} + } + } + + Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap } + + LineEdit { + id: hexTextField + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + enabled: colorEditor.isNotInGradientMode() + writeValueManually: true + validator: RegExpValidator { regExp: /#[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?/g } + showTranslateCheckBox: false + backendValue: colorEditor.backendValue + + onAccepted: colorEditor.color = colorFromString(hexTextField.text) + onCommitData: { + colorEditor.color = colorFromString(hexTextField.text) + if (isNotInGradientMode()) { + if (colorEditor.isVector3D) { + backendValue.value = Qt.vector3d(colorEditor.color.r, + colorEditor.color.g, + colorEditor.color.b) + } else { + backendValue.value = colorEditor.color } } } } + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { + text: "Hex" + horizontalAlignment: Text.AlignLeft + width: StudioTheme.Values.controlLabelWidth + + StudioTheme.Values.controlGap + + StudioTheme.Values.linkControlWidth + } + + ExpandingSpacer {} + StudioControls.Menu { id: contextMenu @@ -731,4 +1186,6 @@ Column { onTriggered: colorPalette.showColorDialog(colorEditor.color) } } + + Component.onCompleted: colorEditor.determineActiveColorMode() } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLine.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLine.qml index c12642e70f2..139f3dcf38c 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLine.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLine.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,31 +23,30 @@ ** ****************************************************************************/ -import QtQuick 2.1 +import QtQuick 2.15 import HelperWidgets 2.0 import StudioTheme 1.0 as StudioTheme Item { + property alias currentColor: colorLine.color + width: 300 - height: 60 + height: StudioTheme.Values.colorEditorPopupLineHeight - property alias currentColor : colorLine.color + Image { + id: checkerboard + anchors.fill: colorLine + source: "images/checkers.png" + fillMode: Image.Tile + } - Column { - anchors.fill: parent - - Item { - width: 1 - height: 40 - } - Rectangle { - height: 16 - width: parent.width - border.color: StudioTheme.Values.themeControlOutline - border.width: StudioTheme.Values.border - - id: colorLine - color: "white" - } + Rectangle { + id: colorLine + height: StudioTheme.Values.hueSliderHeight + width: parent.width + border.color: StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border + color: "white" + anchors.bottom: parent.bottom } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLogic.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLogic.qml index a39d7fd7886..caec1cdf8f1 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLogic.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorLogic.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 StudioTheme 1.0 as StudioTheme QtObject { @@ -31,16 +31,16 @@ QtObject { property variant backendValue property color textColor: StudioTheme.Values.themeTextColor - property variant valueFromBackend: backendValue.value; - property bool baseStateFlag: isBaseState; - property bool isInModel: backendValue.isInModel; - property bool isInSubState: backendValue.isInSubState; + property variant valueFromBackend: backendValue === undefined ? 0 : backendValue.value + property bool baseStateFlag: isBaseState + property bool isInModel: backendValue === undefined ? false : backendValue.isInModel + property bool isInSubState: backendValue === undefined ? false : backendValue.isInSubState property bool highlight: textColor === __changedTextColor property bool errorState: false readonly property color __defaultTextColor: StudioTheme.Values.themeTextColor readonly property color __changedTextColor: StudioTheme.Values.themeInteraction - readonly property color __errorTextColor: StudioTheme.Values.themeErrorColor + readonly property color __errorTextColor: StudioTheme.Values.themeError onBackendValueChanged: evaluate() onValueFromBackendChanged: evaluate() diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorPalette.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorPalette.qml new file mode 100644 index 00000000000..6d1d9a42faf --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorPalette.qml @@ -0,0 +1,159 @@ +/**************************************************************************** +** +** 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 HelperWidgets 2.0 +import StudioControls 1.0 as StudioControls +import StudioTheme 1.0 as StudioTheme +import QtQuickDesignerColorPalette 1.0 + +Column { + id: root + + property color selectedColor + property color oldColor + + property alias enableSingletonConnection: singletonConnection.enabled + + spacing: 10 + + function addColorToPalette(colorStr) { + ColorPaletteSingleton.addRecentColor(colorStr) + } + + function showColorDialog(color) { + root.oldColor = color + ColorPaletteSingleton.showDialog(color) + } + + signal dialogColorChanged + + Component { + id: colorItemDelegate + + Rectangle { + id: colorRectangle + + width: StudioTheme.Values.colorEditorPopupSpinBoxWidth + height: StudioTheme.Values.defaultControlHeight + color: (modelData !== "") ? modelData : "transparent" + border.color: (modelData !== "") ? StudioTheme.Values.themeControlOutline + : StudioTheme.Values.themeControlOutlineDisabled + border.width: StudioTheme.Values.border + + Image { + visible: modelData !== "" + anchors.fill: parent + source: "images/checkers.png" + fillMode: Image.Tile + z: -1 + } + + ToolTipArea { + anchors.fill: parent + acceptedButtons: Qt.LeftButton | Qt.RightButton + tooltip: modelData + + onClicked: { + if (mouse.button === Qt.LeftButton) + root.selectedColor = colorRectangle.color + + if (mouse.button === Qt.RightButton && modelData !== "") + contextMenu.popup() + } + } + + StudioControls.Menu { + id: contextMenu + + StudioControls.MenuItem { + visible: colorMode.currentText === "Favorite" + text: qsTr("Remove from Favorites") + onTriggered: ColorPaletteSingleton.removeFavoriteColor(index) + height: visible ? implicitHeight : 0 + } + + StudioControls.MenuItem { + visible: colorMode.currentText !== "Favorite" + text: qsTr("Add to Favorites") + onTriggered: ColorPaletteSingleton.addFavoriteColor(modelData) + height: visible ? implicitHeight : 0 + } + } + } + } + + Connections { + id: singletonConnection + target: ColorPaletteSingleton + + function onCurrentColorChanged(color) { + root.selectedColor = color + dialogColorChanged() + } + + function onColorDialogRejected() { + root.selectedColor = root.oldColor + dialogColorChanged() + } + } + + RowLayout { + Layout.fillWidth: true + spacing: 0 + + StudioControls.ComboBox { + id: colorMode + + implicitWidth: 3 * StudioTheme.Values.controlGap + + 4 * StudioTheme.Values.colorEditorPopupSpinBoxWidth + width: implicitWidth + actionIndicatorVisible: false + model: ColorPaletteSingleton.palettes + currentIndex: colorMode.find(ColorPaletteSingleton.currentPalette) + + onActivated: ColorPaletteSingleton.currentPalette = colorMode.currentText + + Component.onCompleted: colorMode.currentIndex = colorMode.find(ColorPaletteSingleton.currentPalette) + } + } + + GridView { + id: colorPaletteView + model: ColorPaletteSingleton.currentPaletteColors + delegate: colorItemDelegate + cellWidth: StudioTheme.Values.colorEditorPopupSpinBoxWidth + + StudioTheme.Values.controlGap + cellHeight: StudioTheme.Values.defaultControlHeight + + StudioTheme.Values.controlGap + width: 4 * (StudioTheme.Values.colorEditorPopupSpinBoxWidth + + StudioTheme.Values.controlGap) + height: 2 * (StudioTheme.Values.defaultControlHeight + + StudioTheme.Values.controlGap) + clip: true + interactive: false + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorPicker.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorPicker.qml new file mode 100644 index 00000000000..e1296123483 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorPicker.qml @@ -0,0 +1,254 @@ +/**************************************************************************** +** +** 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 StudioTheme 1.0 as StudioTheme + +Column { + id: root + + 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 + signal colorInvalidated + + spacing: 10 + + onAlphaChanged: invalidateColor() + onSaturationChanged: invalidateColor() + onLightnessChanged: invalidateColor() + onHueChanged: invalidateColor() + onColorChanged: { + var myAlpha = root.color.a + rgbToHsl(root.color) + root.alpha = myAlpha + } + + function invalidateColor() { + if (root.block) + return + + root.block = true + + root.color = Qt.hsla(root.hue, + root.saturation, + root.lightness, + root.alpha) + + if (root.saturation > 0.0 && root.lightness > 0.0) + hueSlider.value = root.hue + + opacitySlider.value = (1.0 - root.alpha) + + root.colorInvalidated() + + root.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 + } + + root.block = true + + if (s > 0) + root.hue = h + + root.saturation = s + root.lightness = l + + root.block = false + invalidateColor() + } + + Rectangle { + width: parent.width + height: width + color: "#00000000" + border.color: StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border + + Image { + id: checkerboard + x: StudioTheme.Values.border + y: StudioTheme.Values.border + width: parent.width - 2 * StudioTheme.Values.border + height: width + + source: "images/checkers.png" + fillMode: Image.Tile + + // Note: We smoothscale the shader from a smaller version to improve performance + Canvas { + id: gradientOverlay + + property real hue: root.hue + + anchors.fill: parent + opacity: root.alpha + + onHueChanged: requestPaint() + onPaint: { + var ctx = gradientOverlay.getContext('2d') + ctx.save() + ctx.clearRect(0, 0, gradientOverlay.width, gradientOverlay.height) + + for (var row = 0; row < gradientOverlay.height; row++) { + var gradient = ctx.createLinearGradient(0, 0, gradientOverlay.width,0) + var l = Math.abs(row - gradientOverlay.height) / gradientOverlay.height + + gradient.addColorStop(0, Qt.hsla(gradientOverlay.hue, 0, l, 1)) + gradient.addColorStop(1, Qt.hsla(gradientOverlay.hue, 1, l, 1)) + + ctx.fillStyle = gradient + ctx.fillRect(0, row, gradientOverlay.width, 1) + } + + ctx.restore() + } + } + + Canvas { + id: pickerCross + + property real cavnasSaturation: root.saturation + property real canvasLightness: root.lightness + property color strokeStyle: "lightGray" + + opacity: 0.8 + anchors.fill: parent + antialiasing: true + + onCavnasSaturationChanged: requestPaint(); + onCanvasLightnessChanged: requestPaint(); + onPaint: { + var ctx = pickerCross.getContext('2d') + + ctx.save() + + ctx.clearRect(0, 0, pickerCross.width, pickerCross.height) + + var yy = pickerCross.height -root.lightness * pickerCross.height + var xx = root.saturation * pickerCross.width + + ctx.strokeStyle = pickerCross.strokeStyle + ctx.lineWidth = 1 + + ctx.beginPath() + ctx.moveTo(0, yy) + ctx.lineTo(pickerCross.width, yy) + ctx.stroke() + + ctx.beginPath() + ctx.moveTo(xx, 0) + ctx.lineTo(xx, pickerCross.height) + ctx.stroke() + + ctx.restore() + } + } + + MouseArea { + id: mapMouseArea + + anchors.fill: parent + preventStealing: true + acceptedButtons: Qt.LeftButton | Qt.RightButton + + 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)) + + root.lightness = 1.0 - yy / parent.height + root.saturation = xx / parent.width + } + } + onPressed: { + if (mouse.button === Qt.LeftButton) + positionChanged(mouse) + } + onReleased: { + if (mouse.button === Qt.LeftButton) + root.updateColor() + } + onClicked: { + if (mouse.button === Qt.RightButton) + root.rightMouseButtonClicked() + } + } + } + } + + HueSlider { + id: hueSlider + width: parent.width + onValueChanged: { + if (root.hue !== value) + root.hue = value + } + onClicked: root.updateColor() + } + + OpacitySlider { + id: opacitySlider + width: parent.width + color: Qt.rgba(root.color.r, root.color.g, root.color.b, 1) + onValueChanged: { + if (root.alpha !== value) + root.alpha = (1.0 - value) + } + onClicked: root.updateColor() + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ComboBox.qml index 4f8d5d87b06..76ed79fc4da 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ComboBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ComboBox.qml @@ -23,7 +23,7 @@ ** ****************************************************************************/ -import QtQuick 2.1 +import QtQuick 2.15 import StudioControls 1.0 as StudioControls import StudioTheme 1.0 as StudioTheme @@ -118,6 +118,9 @@ StudioControls.ComboBox { break case ComboBox.ValueType.Enum: default: + if (comboBox.backendValue === undefined) + break + var enumString = comboBox.backendValue.enumeration if (enumString === "") @@ -167,6 +170,8 @@ StudioControls.ComboBox { Connections { target: modelNodeBackend - onSelectionToBeChanged: comboBox.popup.close() + function onSelectionToBeChanged() { + comboBox.popup.close() + } } } diff --git a/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettesingleton.h b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ControlLabel.qml similarity index 54% rename from src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettesingleton.h rename to share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ControlLabel.qml index 8a2019a1d76..ed1dc2d8cf9 100644 --- a/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettesingleton.h +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ControlLabel.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,48 +23,30 @@ ** ****************************************************************************/ -#pragma once +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Templates 2.15 as T +import StudioTheme 1.0 as StudioTheme -#include -#include -#include -#include -#include +T.Label { + id: label -namespace QmlDesigner { + property alias tooltip: toolTipArea.tooltip -class SimpleColorPaletteSingleton : public QObject -{ - Q_OBJECT -public: - static SimpleColorPaletteSingleton &getInstance(); + width: StudioTheme.Values.controlLabelWidth + color: StudioTheme.Values.themeTextColor + font.pixelSize: StudioTheme.Values.myFontSize // TODO + elide: Text.ElideRight - bool readPalette(); - void writePalette(); + horizontalAlignment: Text.AlignHCenter - void addItem(const PaletteColor &item); - QList getItems() const; + Layout.preferredWidth: width + Layout.minimumWidth: width + Layout.maximumWidth: width - int getPaletteSize() const; - int getFavoriteOffset() const; - - void sortItems(); - - void toggleFavorite(int id); - - SimpleColorPaletteSingleton(const SimpleColorPaletteSingleton &) = delete; - void operator=(const SimpleColorPaletteSingleton &) = delete; - -signals: - void paletteChanged(); - -private: - SimpleColorPaletteSingleton(); - -private: - QList m_items; - const int m_paletteSize = 6; - int m_favoriteOffset; -}; - -} // namespace QmlDesigner + ToolTipArea { + id: toolTipArea + anchors.fill: parent + tooltip: label.text + } +} diff --git a/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalette.h b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Controller.qml similarity index 52% rename from src/plugins/qmldesigner/components/propertyeditor/simplecolorpalette.h rename to share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Controller.qml index 342c9832e71..d2d169daf2b 100644 --- a/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalette.h +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Controller.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,53 +23,11 @@ ** ****************************************************************************/ -#pragma once +pragma Singleton +import QtQuick 2.15 -#include -#include -#include +QtObject { + id: values -namespace QmlDesigner { - -class PaletteColor -{ - Q_GADGET - - Q_PROPERTY(QColor color READ color FINAL) - Q_PROPERTY(QString colorCode READ colorCode FINAL) - Q_PROPERTY(bool isFavorite READ isFavorite FINAL) -public: - PaletteColor(); - PaletteColor(const QString &colorCode); - PaletteColor(const QColor &value); - ~PaletteColor() = default; - - enum Property { - objectNameRole = 0, - colorRole = 1, - colorCodeRole = 2, - isFavoriteRole = 3 - }; - - QVariant getProperty(Property id) const; - - QColor color() const; - void setColor(const QColor &value); - - QString colorCode() const; - - bool isFavorite() const; - void setFavorite(bool favorite); - bool toggleFavorite(); - - bool operator==(const PaletteColor &other) const; - -private: - QColor m_color; - QString m_colorCode; - bool m_isFavorite; -}; - -} // namespace QmlDesigner - -Q_DECLARE_METATYPE(QmlDesigner::PaletteColor) + property Item mainScrollView +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DoubleSpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DoubleSpinBox.qml index c2abefca439..de0b0de64c1 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DoubleSpinBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/DoubleSpinBox.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,8 +23,7 @@ ** ****************************************************************************/ -import QtQuick 2.1 -import QtQuickDesignerTheme 1.0 +import QtQuick 2.15 import StudioControls 1.0 as StudioControls Item { @@ -32,28 +31,26 @@ Item { property alias decimals: spinBox.decimals property alias hasSlider: spinBox.hasSlider - property alias value: spinBox.realValue - property alias minimumValue: spinBox.realFrom property alias maximumValue: spinBox.realTo property alias stepSize: spinBox.realStepSize - property alias sliderIndicatorVisible: spinBox.sliderIndicatorVisible + property alias hover: spinBox.hover signal valueModified width: 90 implicitHeight: spinBox.height - onFocusChanged: restoreCursor(); + onFocusChanged: restoreCursor() StudioControls.RealSpinBox { id: spinBox - onDragStarted: hideCursor(); - onDragEnded: restoreCursor(); - onDragging: holdCursorInPlace(); + onDragStarted: hideCursor() + onDragEnded: restoreCursor() + onDragging: holdCursorInPlace() property bool hasSlider: spinBox.sliderIndicatorVisible diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/EditableListView.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/EditableListView.qml index 19cbd34da4d..f7273cb5d43 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/EditableListView.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/EditableListView.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,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Layouts 1.12 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 import StudioControls 1.0 as StudioControls import StudioTheme 1.0 as StudioTheme diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExpandingSpacer.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExpandingSpacer.qml index f420b38ef30..c9f6304edf6 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExpandingSpacer.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExpandingSpacer.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,9 @@ ** ****************************************************************************/ -import StudioControls 1.0 as StudioControls +import QtQuick 2.15 +import QtQuick.Layouts 1.15 -StudioControls.ExpandingSpacer { +Item { + Layout.fillWidth: true } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExpressionTextField.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExpressionTextField.qml index 111b369d8ea..982651a11ad 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExpressionTextField.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExpressionTextField.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. @@ -43,7 +43,6 @@ StudioControls.TextField { property bool dotCompletion: false property int dotCursorPos: 0 property string prefix - property alias showButtons: buttonrow.visible property bool fixedSize: false property bool replaceCurrentTextByCompletion: false @@ -151,10 +150,8 @@ StudioControls.TextField { border.width: 0 } - enter: Transition { - } - exit: Transition { - } + enter: Transition {} + exit: Transition {} } verticalAlignment: Text.AlignVCenter @@ -265,66 +262,4 @@ StudioControls.TextField { listView.incrementCurrentIndex() event.accepted = false } - - Row { - id: buttonrow - spacing: 2 - StudioControls.AbstractButton { - width: 16 - height: 16 - - background: Item{ - Image { - width: 16 - height: 16 - source: "image://icons/ok" - opacity: { - if (control.pressed) - return 0.8; - return 1.0; - } - Rectangle { - z: -1 - anchors.fill: parent - color: control.pressed || control.hovered ? Theme.qmlDesignerBackgroundColorDarker() : Theme.qmlDesignerButtonColor() - border.color: Theme.qmlDesignerBorderColor() - radius: 2 - } - } - - } - onClicked: accepted() - } - StudioControls.AbstractButton { - width: 16 - height: 16 - - background: Item { - Image { - width: 16 - height: 16 - source: "image://icons/error" - opacity: { - if (control.pressed) - return 0.8; - return 1.0; - } - Rectangle { - z: -1 - anchors.fill: parent - color: control.pressed || control.hovered ? Theme.qmlDesignerBackgroundColorDarker() : Theme.qmlDesignerButtonColor() - border.color: Theme.qmlDesignerBorderColor() - radius: 2 - } - - } - } - onClicked: { - rejected() - } - } - anchors.right: parent.right - anchors.bottom: parent.bottom - anchors.margins: 4 - } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExtendedFunctionLogic.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExtendedFunctionLogic.qml index d257ccf0cca..3cd452b1db4 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExtendedFunctionLogic.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ExtendedFunctionLogic.qml @@ -33,8 +33,8 @@ Item { id: extendedFunctionButton property variant backendValue - property bool isBoundBackend: backendValue.isBound - property string backendExpression: backendValue.expression + property bool isBoundBackend: backendValue === undefined ? false : backendValue.isBound + property string backendExpression: backendValue === undefined ? "" : backendValue.expression property string glyph: StudioTheme.Constants.actionIcon property string color: StudioTheme.Values.themeTextColor @@ -50,7 +50,7 @@ Item { function setIcon() { extendedFunctionButton.color = StudioTheme.Values.themeTextColor - if (backendValue === null) { + if (backendValue === undefined) { extendedFunctionButton.glyph = StudioTheme.Constants.actionIcon } else if (backendValue.isBound) { if (backendValue.isTranslated) { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FlickableGeometrySection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FlickableGeometrySection.qml new file mode 100644 index 00000000000..e95d38d42f5 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FlickableGeometrySection.qml @@ -0,0 +1,235 @@ +/**************************************************************************** +** +** 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 HelperWidgets 2.0 +import QtQuick.Layouts 1.15 +import StudioControls 1.0 as StudioControls +import StudioTheme 1.0 as StudioTheme + +Section { + id: root + caption: qsTr("Flickable Geometry") + + anchors.left: parent.left + anchors.right: parent.right + + 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 {} + } + + PropertyLabel { text: qsTr("Content") } + + SecondColumnLayout { + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.contentX + minimumValue: -8000 + maximumValue: 8000 + } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { text: "X" } + + Spacer { implicitWidth: StudioTheme.Values.controlGap } + + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.contentY + minimumValue: -8000 + maximumValue: 8000 + } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { text: "Y" } + + Spacer { implicitWidth: StudioTheme.Values.controlGap } + + LinkIndicator2D {} + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Origin") + disabledState: (!backendValues.originX.isAvailable + && !backendValues.originY.isAvailable) + } + + SecondColumnLayout { + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.originX + minimumValue: -8000 + maximumValue: 8000 + enabled: backendValue.isAvailable + } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { text: "X" } + + Spacer { implicitWidth: StudioTheme.Values.controlGap } + + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.originY + minimumValue: -8000 + maximumValue: 8000 + enabled: backendValue.isAvailable + } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { text: "Y" } + + Spacer { implicitWidth: StudioTheme.Values.controlGap } + + LinkIndicator2D {} + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Left margin") + disabledState: !backendValues.leftMargin.isAvailable + } + + SecondColumnLayout { + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.leftMargin + minimumValue: -10000 + maximumValue: 10000 + decimals: 0 + enabled: backendValue.isAvailable + } + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Right margin") + disabledState: !backendValues.rightMargin.isAvailable + } + + SecondColumnLayout { + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.rightMargin + minimumValue: -10000 + maximumValue: 10000 + decimals: 0 + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Top margin") + disabledState: !backendValues.topMargin.isAvailable + } + + SecondColumnLayout { + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.topMargin + minimumValue: -10000 + maximumValue: 10000 + decimals: 0 + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Bottom margin") + disabledState: !backendValues.bottomMargin.isAvailable + } + + SecondColumnLayout { + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.bottomMargin + minimumValue: -10000 + maximumValue: 10000 + decimals: 0 + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FlickableSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FlickableSection.qml index ffaf99e2568..a2ccf7209a3 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FlickableSection.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FlickableSection.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,41 +23,55 @@ ** ****************************************************************************/ -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 Section { + id: root + caption: qsTr("Flickable") anchors.left: parent.left anchors.right: parent.right - caption: qsTr("Flickable") - - id: root - - property int labelWidth: 42 - property int spinBoxWidth: 96 SectionLayout { + PropertyLabel { + text: qsTr("Interactive") + tooltip: qsTr("Allows users to drag or flick a flickable component.") + } + SecondColumnLayout { + CheckBox { + text: backendValues.interactive.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.interactive + } - Label { + ExpandingSpacer {} + } + + PropertyLabel { text: qsTr("Flick direction") disabledState: !backendValues.flickableDirection.isAvailable } SecondColumnLayout { ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.flickableDirection model: ["AutoFlickDirection", "AutoFlickIfNeeded", "HorizontalFlick", "VerticalFlick", "HorizontalAndVerticalFlick"] - Layout.fillWidth: true scope: "Flickable" enabled: backendValue.isAvailable } - ExpandingSpacer { - } + + ExpandingSpacer {} } - Label { + PropertyLabel { text: qsTr("Behavior") tooltip: qsTr("Whether the surface may be dragged beyond the Flickable's boundaries, or overshoot the Flickable's boundaries when flicked.") disabledState: !backendValues.boundsBehavior.isAvailable @@ -65,18 +79,19 @@ Section { SecondColumnLayout { ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.boundsBehavior model: ["StopAtBounds", "DragOverBounds", "OvershootBounds", "DragAndOvershootBounds"] - Layout.fillWidth: true scope: "Flickable" enabled: backendValue.isAvailable } - ExpandingSpacer { - } + + ExpandingSpacer {} } - - Label { + PropertyLabel { text: qsTr("Movement") tooltip: qsTr("Whether the Flickable will give a feeling that the edges of the view are soft, rather than a hard physical boundary.") disabledState: !backendValues.boundsMovement.isAvailable @@ -84,66 +99,57 @@ Section { SecondColumnLayout { ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.boundsMovement model: ["FollowBoundsBehavior", "StopAtBounds"] - Layout.fillWidth: true scope: "Flickable" enabled: backendValue.isAvailable } - ExpandingSpacer { - } + + ExpandingSpacer {} } - Label { - text: qsTr("Interactive") - tooltip: qsTr("Allows users to drag or flick a flickable component.") - } - - SecondColumnLayout { - CheckBox { - Layout.fillWidth: true - backendValue: backendValues.interactive - text: backendValues.interactive.valueToString - } - ExpandingSpacer { - } - } - - Label { + PropertyLabel { text: qsTr("Max. velocity") - tooltip: qsTr("Maximum flick velocity.") + tooltip: qsTr("Maximum flick velocity") } SecondColumnLayout { SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth backendValue: backendValues.maximumFlickVelocity minimumValue: 0 maximumValue: 8000 decimals: 0 } - ExpandingSpacer { - } + + ExpandingSpacer {} } - Label { + PropertyLabel { text: qsTr("Deceleration") - tooltip: qsTr("Flick deceleration.") + tooltip: qsTr("Flick deceleration") disabledState: !backendValues.flickDeceleration.isAvailable } SecondColumnLayout { SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth backendValue: backendValues.flickDeceleration minimumValue: 0 maximumValue: 8000 decimals: 0 enabled: backendValue.isAvailable } - ExpandingSpacer { - } + + ExpandingSpacer {} } - Label { + PropertyLabel { text: qsTr("Press delay") tooltip: qsTr("Time to delay delivering a press to children of the Flickable in milliseconds.") disabledState: !backendValues.pressDelay.isAvailable @@ -151,17 +157,19 @@ Section { SecondColumnLayout { SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth backendValue: backendValues.pressDelay minimumValue: 0 maximumValue: 2000 decimals: 0 enabled: backendValue.isAvailable } - ExpandingSpacer { - } + + ExpandingSpacer {} } - Label { + PropertyLabel { text: qsTr("Pixel aligned") tooltip: qsTr("Sets the alignment of contentX and contentY to pixels (true) or subpixels (false).") disabledState: !backendValues.pixelAligned.isAvailable @@ -169,16 +177,17 @@ Section { SecondColumnLayout { CheckBox { - Layout.fillWidth: true - backendValue: backendValues.pixelAligned text: backendValues.pixelAligned.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.pixelAligned enabled: backendValue.isAvailable } - ExpandingSpacer { - } + + ExpandingSpacer {} } - Label { + PropertyLabel { text: qsTr("Synchronous drag") tooltip: qsTr("If set to true, then when the mouse or touchpoint moves far enough to begin dragging\n" + "the content, the content will jump, such that the content pixel which was under the\n" @@ -188,236 +197,15 @@ Section { SecondColumnLayout { CheckBox { - Layout.fillWidth: true - backendValue: backendValues.synchronousDrag text: backendValues.synchronousDrag.valueToString - enabled: backendValue.isAvailable - } - ExpandingSpacer { - } - } - - Label { - text: qsTr("Content size") - } - - SecondColumnLayout { - - Label { - text: "W" - width: root.labelWidth - } - - SpinBox { - backendValue: backendValues.contentWidth - minimumValue: 0 - maximumValue: 10000 - implicitWidth: root.spinBoxWidth - Layout.fillWidth: true - } - - Item { - width: 4 - height: 4 - } - - Label { - text: "H" - width: root.labelWidth - } - - SpinBox { - backendValue: backendValues.contentHeight - minimumValue: 0 - maximumValue: 10000 - implicitWidth: root.spinBoxWidth - Layout.fillWidth: true - } - ExpandingSpacer { - } - } - - Label { - text: qsTr("Content") - } - - SecondColumnLayout { - - Label { - text: "X" - width: root.labelWidth - } - - SpinBox { - backendValue: backendValues.contentX - minimumValue: -8000 - maximumValue: 8000 - implicitWidth: root.spinBoxWidth - Layout.fillWidth: true - } - - Item { - width: 4 - height: 4 - } - - Label { - text: "Y" - width: root.labelWidth - } - - SpinBox { - backendValue: backendValues.contentY - minimumValue: -8000 - maximumValue: 8000 - implicitWidth: root.spinBoxWidth - Layout.fillWidth: true - } - ExpandingSpacer { - } - } - - Label { - text: qsTr("Origin") - disabledState: (!backendValues.originX.isAvailable - && !backendValues.originY.isAvailable) - } - - SecondColumnLayout { - Label { - text: "X" - width: root.labelWidth - disabledStateSoft: !backendValues.originX.isAvailable - } - - SpinBox { - backendValue: backendValues.originX - minimumValue: -8000 - maximumValue: 8000 - implicitWidth: root.spinBoxWidth - Layout.fillWidth: true + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.synchronousDrag enabled: backendValue.isAvailable } - Item { - width: 4 - height: 4 - } - - Label { - text: "Y" - width: root.labelWidth - disabledStateSoft: !backendValues.originY.isAvailable - } - - SpinBox { - backendValue: backendValues.originY - minimumValue: -8000 - maximumValue: 8000 - implicitWidth: root.spinBoxWidth - Layout.fillWidth: true - enabled: backendValue.isAvailable - } - ExpandingSpacer { - } + ExpandingSpacer {} } - Label { - text: qsTr("Margins") - disabledState: (!backendValues.topMargin.isAvailable - && !backendValues.bottomMargin.isAvailable - && !backendValues.leftMargin.isAvailable - && !backendValues.rightMargin.isAvailable) - } - - SecondColumnLayout { - Layout.fillWidth: true - - Label { - text: "Top" - width: root.labelWidth - disabledStateSoft: !backendValues.topMargin.isAvailable - } - - SpinBox { - backendValue: backendValues.topMargin - minimumValue: -10000 - maximumValue: 10000 - decimals: 0 - implicitWidth: root.spinBoxWidth - Layout.fillWidth: true - enabled: backendValue.isAvailable - } - - Item { - width: 4 - height: 4 - } - - Label { - text: "Bottom" - width: root.labelWidth - disabledStateSoft: !backendValues.bottomMargin.isAvailable - } - - SpinBox { - backendValue: backendValues.bottomMargin - minimumValue: -10000 - maximumValue: 10000 - decimals: 0 - implicitWidth: root.spinBoxWidth - Layout.fillWidth: true - enabled: backendValue.isAvailable - } - ExpandingSpacer { - } - } - - Label { - text: ("") - } - - SecondColumnLayout { - Layout.fillWidth: true - - Label { - text: "Left" - width: root.labelWidth - disabledStateSoft: !backendValues.leftMargin.isAvailable - } - - SpinBox { - backendValue: backendValues.leftMargin - minimumValue: -10000 - maximumValue: 10000 - decimals: 0 - implicitWidth: root.spinBoxWidth - Layout.fillWidth: true - enabled: backendValue.isAvailable - } - - Item { - width: 4 - height: 4 - } - - Label { - text: "Right" - width: root.labelWidth - disabledStateSoft: !backendValues.rightMargin.isAvailable - } - - SpinBox { - backendValue: backendValues.rightMargin - minimumValue: -10000 - maximumValue: 10000 - decimals: 0 - implicitWidth: root.spinBoxWidth - Layout.fillWidth: true - enabled: backendValue.isAvailable - } - ExpandingSpacer { - } - } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontComboBox.qml index 4fce3153d2e..8221c57b2f7 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontComboBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontComboBox.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.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 StudioControls.ComboBox { @@ -33,35 +33,30 @@ StudioControls.ComboBox { property variant backendValue property color textColor: colorLogic.textColor + property string fontFilter: "*.ttf *.otf" labelColor: colorLogic.textColor + editable: true onTextColorChanged: setColor() - editable: true - - property string fontFilter: "*.ttf *.otf" - - FileResourcesModel { + id: fileModel modelNodeBackendProperty: modelNodeBackend filter: comboBox.fontFilter - id: fileModel } - function createFontLoader(fontUrl) - { + function createFontLoader(fontUrl) { return Qt.createQmlObject('import QtQuick 2.0; FontLoader { source: "' + fontUrl + '"; }', - comboBox, "dynamicFontLoader"); + comboBox, "dynamicFontLoader") } - function setupModel() - { + function setupModel() { var familyNames = ["Arial", "Times New Roman", "Courier", "Verdana", "Tahoma"] // default fonts for (var i = 0; i < fileModel.fullPathModel.length; ++i) { // add custom fonts - var fontLoader = createFontLoader(fileModel.docPath + "/" + fileModel.fullPathModel[i]); - familyNames.push(fontLoader.name); + var fontLoader = createFontLoader(fileModel.docPath + "/" + fileModel.fullPathModel[i]) + familyNames.push(fontLoader.name) } familyNames.sort() @@ -95,11 +90,9 @@ StudioControls.ComboBox { } } - Layout.fillWidth: true - onAccepted: { if (backendValue === undefined) - return; + return if (editText === "") return @@ -110,7 +103,7 @@ StudioControls.ComboBox { onActivated: { if (backendValue === undefined) - return; + return if (editText === "") return @@ -118,12 +111,12 @@ StudioControls.ComboBox { var indexText = comboBox.textAt(index) if (backendValue.value !== indexText) - backendValue.value = indexText; + backendValue.value = indexText } Connections { target: modelNodeBackend - onSelectionChanged: { + function onSelectionChanged() { comboBox.editText = backendValue.value setupModel() } @@ -140,6 +133,7 @@ StudioControls.ComboBox { } } } + function setColor() { //Hack to style the text input for (var i = 0; i < comboBox.children.length; i++) { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontExtrasSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontExtrasSection.qml new file mode 100644 index 00000000000..61f209c57f4 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontExtrasSection.qml @@ -0,0 +1,164 @@ +/**************************************************************************** +** +** 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 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("Font Extras") + + property string fontName: "font" + property bool showStyle: false + + function getBackendValue(name) { + return backendValues[root.fontName + "_" + name] + } + + SectionLayout { + PropertyLabel { + text: qsTr("Capitalization") + tooltip: qsTr("Capitalization for the text.") + disabledState: !getBackendValue("capitalization").isAvailable + } + + SecondColumnLayout { + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + backendValue: getBackendValue("capitalization") + scope: "Font" + model: ["MixedCase", "AllUppercase", "AllLowercase", "SmallCaps", "Capitalize"] + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + visible: root.showStyle + text: qsTr("Style") + disabledState: !styleComboBox.enabled + } + + SecondColumnLayout { + visible: root.showStyle + + ComboBox { + id: styleComboBox + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + backendValue: (backendValues.style === undefined) ? dummyBackendValue + : backendValues.style + scope: "Text" + model: ["Normal", "Outline", "Raised", "Sunken"] + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Style color") + visible: backendValues.styleColor.isAvailable + } + + ColorEditor { + visible: backendValues.styleColor.isAvailable + backendValue: backendValues.styleColor + supportGradient: false + } + + PropertyLabel { + text: qsTr("Hinting") + tooltip: qsTr("Preferred hinting on the text.") + disabledState: !getBackendValue("hintingPreference").isAvailable + } + + SecondColumnLayout { + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + backendValue: getBackendValue("hintingPreference") + scope: "Font" + model: ["PreferDefaultHinting", "PreferNoHinting", "PreferVerticalHinting", "PreferFullHinting"] + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Auto kerning") + tooltip: qsTr("Enables or disables the kerning OpenType feature when shaping the text. Disabling this may " + + "improve performance when creating or changing the text, at the expense of some cosmetic features.") + disabledState: !getBackendValue("kerning").isAvailable + visible: minorQtQuickVersion > 9 + } + + SecondColumnLayout { + CheckBox { + visible: minorQtQuickVersion > 9 + text: backendValue.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: getBackendValue("kerning") + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Prefer shaping") + tooltip: qsTr("Sometimes, a font will apply complex rules to a set of characters in order to display them correctly.\n" + + "In some writing systems, such as Brahmic scripts, this is required in order for the text to be legible, whereas in " + + "Latin script,\n it is merely a cosmetic feature. Setting the preferShaping property to false will disable all such features\nwhen they are not required, which will improve performance in most cases.") + disabledState: !getBackendValue("preferShaping").isAvailable + visible: minorQtQuickVersion > 9 + } + + SecondColumnLayout { + CheckBox { + visible: minorQtQuickVersion > 9 + text: backendValue.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: getBackendValue("preferShaping") + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml index 1a44ee198a5..a89f88989c5 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontSection.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,11 +23,11 @@ ** ****************************************************************************/ -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 QtQuickDesignerTheme 1.0 +import StudioTheme 1.0 as StudioTheme Section { id: fontSection @@ -39,8 +39,7 @@ Section { property bool showStyle: false - function getBackendValue(name) - { + function getBackendValue(name) { return backendValues[fontSection.fontName + "_" + name] } @@ -53,66 +52,67 @@ Section { property variant underlineStyle: getBackendValue("underline") property variant strikeoutStyle: getBackendValue("strikeout") - onPointSizeChanged: { - sizeWidget.setPointPixelSize(); - } - - onPixelSizeChanged: { - sizeWidget.setPointPixelSize(); - } - + onPointSizeChanged: sizeWidget.setPointPixelSize() + onPixelSizeChanged: sizeWidget.setPointPixelSize() SectionLayout { - columns: 2 - Label { - text: qsTr("Font") - } - FontComboBox { - id: fontComboBox - backendValue: fontSection.fontFamily - Layout.fillWidth: true - width: 160 - property string familyName: backendValue.value + PropertyLabel { text: qsTr("Font") } + + SecondColumnLayout { + FontComboBox { + id: fontComboBox + property string familyName: backendValue.value + backendValue: fontSection.fontFamily + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + } + + ExpandingSpacer {} } - Label { - text: qsTr("Size") - } + PropertyLabel { text: qsTr("Size") } - RowLayout { + SecondColumnLayout { id: sizeWidget property bool selectionFlag: selectionChanged - property bool pixelSize: sizeType.currentText === "pixels" - property bool isSetup; - + property bool pixelSize: sizeType.currentText === "px" + property bool isSetup function setPointPixelSize() { - sizeWidget.isSetup = true; + sizeWidget.isSetup = true sizeType.currentIndex = 1 + if (fontSection.pixelSize.isInModel) sizeType.currentIndex = 0 - sizeWidget.isSetup = false; + + sizeWidget.isSetup = false } - onSelectionFlagChanged: { - sizeWidget.setPointPixelSize(); - } + onSelectionFlagChanged: sizeWidget.setPointPixelSize() Item { - width: sizeSpinBox.width + 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 @@ -121,31 +121,36 @@ Section { } } + Spacer { + implicitWidth: StudioTheme.Values.twoControlColumnGap + + StudioTheme.Values.actionIndicatorWidth + } + StudioControls.ComboBox { id: sizeType - model: ["pixels", "points"] + implicitWidth: StudioTheme.Values.twoControlColumnWidth + width: implicitWidth + model: ["px", "pt"] actionIndicatorVisible: false onActivated: { if (sizeWidget.isSetup) - return; - if (currentText == "pixels") { - pointSize.resetValue(); - pixelSize.value = 8; + return + + if (sizeType.currentText === "px") { + pointSize.resetValue() + pixelSize.value = 8 } else { - pixelSize.resetValue(); + pixelSize.resetValue() } - } - - Layout.fillWidth: true } + ExpandingSpacer {} } - Label { - text: qsTr("Font style") - } + PropertyLabel { text: qsTr("Emphasis") } + FontStyleButtons { bold: fontSection.boldStyle italic: fontSection.italicStyle @@ -154,154 +159,202 @@ Section { enabled: !styleNameComboBox.styleSet } - Label { - text: qsTr("Font capitalization") - toolTip: qsTr("Capitalization for the text.") + PropertyLabel { + text: qsTr("Capitalization") + tooltip: qsTr("Capitalization for the text.") disabledState: !getBackendValue("capitalization").isAvailable } - ComboBox { - Layout.fillWidth: true - backendValue: getBackendValue("capitalization") - model: ["MixedCase", "AllUppercase", "AllLowercase", "SmallCaps", "Capitalize"] - scope: "Font" - enabled: backendValue.isAvailable + SecondColumnLayout { + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + backendValue: getBackendValue("capitalization") + scope: "Font" + model: ["MixedCase", "AllUppercase", "AllLowercase", "SmallCaps", "Capitalize"] + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} } - Label { - text: qsTr("Font weight") - toolTip: qsTr("Font's weight.") + PropertyLabel { + text: qsTr("Weight") + tooltip: qsTr("Font's weight.") } - ComboBox { - Layout.fillWidth: true - backendValue: getBackendValue("weight") - model: ["Normal", "Light", "ExtraLight", "Thin", "Medium", "DemiBold", "Bold", "ExtraBold", "Black"] - scope: "Font" - enabled: !styleNameComboBox.styleSet + 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 {} } - Label { + PropertyLabel { text: qsTr("Style name") - toolTip: qsTr("Font's style.") + tooltip: qsTr("Font's style.") disabledState: !styleNameComboBox.enabled } - ComboBox { - id: styleNameComboBox - property bool styleSet: backendValue.isInModel - Layout.fillWidth: true - backendValue: getBackendValue("styleName") - model: styleNamesForFamily(fontComboBox.familyName) - valueType: ComboBox.String - enabled: backendValue.isAvailable + 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 {} } - Label { - visible: showStyle + PropertyLabel { + visible: fontSection.showStyle text: qsTr("Style") disabledState: !styleComboBox.enabled } - ComboBox { - id: styleComboBox - visible: showStyle - Layout.fillWidth: true - backendValue: (backendValues.style === undefined) ? dummyBackendValue : backendValues.style - model: ["Normal", "Outline", "Raised", "Sunken"] - scope: "Text" - enabled: backendValue.isAvailable - } - - Label { - text: qsTr("Spacing") - disabledState: (!getBackendValue("wordSpacing").isAvailable && - !getBackendValue("letterSpacing").isAvailable) - } - SecondColumnLayout { - - SpinBox { - maximumValue: 500 - minimumValue: -500 - decimals: 2 - backendValue: getBackendValue("wordSpacing") - Layout.fillWidth: true - Layout.minimumWidth: 60 - stepSize: 0.1 + visible: fontSection.showStyle + ComboBox { + id: styleComboBox + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + backendValue: (backendValues.style === undefined) ? dummyBackendValue + : backendValues.style + scope: "Text" + model: ["Normal", "Outline", "Raised", "Sunken"] enabled: backendValue.isAvailable } - Label { - text: qsTr("Word") - tooltip: qsTr("Word spacing for the font.") - width: 42 - disabledStateSoft: !getBackendValue("wordSpacing").isAvailable - } - Item { - width: 4 - height: 4 - } - SpinBox { - maximumValue: 500 - minimumValue: -500 - decimals: 2 - backendValue: getBackendValue("letterSpacing") - Layout.fillWidth: true - Layout.minimumWidth: 60 - stepSize: 0.1 - enabled: backendValue.isAvailable - } - Label { - text: qsTr("Letter") - tooltip: qsTr("Letter spacing for the font.") - width: 42 - disabledStateSoft: !getBackendValue("letterSpacing").isAvailable - } + ExpandingSpacer {} } - Label { - visible: minorQtQuickVersion > 9 - text: qsTr("Performance") - disabledState: (!getBackendValue("kerning").isAvailable && - !getBackendValue("preferShaping").isAvailable) + PropertyLabel { + text: qsTr("Style color") + visible: fontSection.showStyle && backendValues.styleColor.isAvailable } - SecondColumnLayout { - visible: minorQtQuickVersion > 9 - - CheckBox { - text: qsTr("Kerning") - Layout.fillWidth: true - backendValue: getBackendValue("kerning") - tooltip: qsTr("Enables or disables the kerning OpenType feature when shaping the text. Disabling this may " + - "improve performance when creating or changing the text, at the expense of some cosmetic features.") - enabled: backendValue.isAvailable - } - - CheckBox { - text: qsTr("Prefer shaping") - Layout.fillWidth: true - backendValue: getBackendValue("preferShaping") - tooltip: qsTr("Sometimes, a font will apply complex rules to a set of characters in order to display them correctly.\n" + - "In some writing systems, such as Brahmic scripts, this is required in order for the text to be legible, whereas in " + - "Latin script,\n it is merely a cosmetic feature. Setting the preferShaping property to false will disable all such features\nwhen they are not required, which will improve performance in most cases.") - enabled: backendValue.isAvailable - } + ColorEditor { + visible: fontSection.showStyle && backendValues.styleColor.isAvailable + backendValue: backendValues.styleColor + supportGradient: false } - Label { - text: qsTr("Hinting preference") - toolTip: qsTr("Preferred hinting on the text.") + PropertyLabel { + text: qsTr("Hinting") + tooltip: qsTr("Preferred hinting on the text.") disabledState: !getBackendValue("hintingPreference").isAvailable } - ComboBox { - Layout.fillWidth: true - backendValue: getBackendValue("hintingPreference") - model: ["PreferDefaultHinting", "PreferNoHinting", "PreferVerticalHinting", "PreferFullHinting"] - scope: "Font" - enabled: backendValue.isAvailable + SecondColumnLayout { + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + backendValue: getBackendValue("hintingPreference") + scope: "Font" + model: ["PreferDefaultHinting", "PreferNoHinting", "PreferVerticalHinting", "PreferFullHinting"] + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + 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 { + text: qsTr("Auto kerning") + tooltip: qsTr("Enables or disables the kerning OpenType feature when shaping the text. Disabling this may " + + "improve performance when creating or changing the text, at the expense of some cosmetic features.") + disabledState: !getBackendValue("kerning").isAvailable + visible: minorQtQuickVersion > 9 + } + + SecondColumnLayout { + CheckBox { + visible: minorQtQuickVersion > 9 + text: backendValue.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: getBackendValue("kerning") + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Prefer shaping") + tooltip: qsTr("Sometimes, a font will apply complex rules to a set of characters in order to display them correctly.\n" + + "In some writing systems, such as Brahmic scripts, this is required in order for the text to be legible, whereas in " + + "Latin script,\n it is merely a cosmetic feature. Setting the preferShaping property to false will disable all such features\nwhen they are not required, which will improve performance in most cases.") + disabledState: !getBackendValue("preferShaping").isAvailable + visible: minorQtQuickVersion > 9 + } + + SecondColumnLayout { + CheckBox { + visible: minorQtQuickVersion > 9 + text: backendValue.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: getBackendValue("preferShaping") + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontStyleButtons.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontStyleButtons.qml index 29803aa9665..d6e98e79984 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontStyleButtons.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/FontStyleButtons.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,47 +23,57 @@ ** ****************************************************************************/ -import QtQuick 2.1 +import QtQuick 2.15 import HelperWidgets 2.0 import StudioTheme 1.0 as StudioTheme -ButtonRow { - +SecondColumnLayout { property variant bold: backendValues.font_bold property variant italic: backendValues.font_italic property variant underline: backendValues.font_underline property variant strikeout: backendValues.font_strikeout BoolButtonRowButton { + id: boldButton buttonIcon: StudioTheme.Constants.fontStyleBold backendValue: bold enabled: backendValue.isAvailable } - Item { - width: 4 - height: 4 + + Spacer { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + - (boldButton.implicitWidth + italicButton.implicitWidth) } + BoolButtonRowButton { + id: italicButton buttonIcon: StudioTheme.Constants.fontStyleItalic backendValue: italic enabled: backendValue.isAvailable } - Item { - width: 4 - height: 4 - } + + Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap } + BoolButtonRowButton { + id: underlineButton buttonIcon: StudioTheme.Constants.fontStyleUnderline backendValue: underline enabled: backendValue.isAvailable } - Item { - width: 4 - height: 4 + + Spacer { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + - (underlineButton.implicitWidth + strikethroughButton.implicitWidth) } + BoolButtonRowButton { + id: strikethroughButton buttonIcon: StudioTheme.Constants.fontStyleStrikethrough backendValue: strikeout enabled: backendValue.isAvailable } + + ExpandingSpacer {} } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml index 27885c2b2fb..8e32e3bce0e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.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,30 +23,33 @@ ** ****************************************************************************/ -import QtQuick 2.1 +import QtQuick 2.15 import HelperWidgets 2.0 +import StudioTheme 1.0 as StudioTheme Item { + id: root + width: 300 - height: 60 + height: StudioTheme.Values.colorEditorPopupLineHeight property color currentColor property alias model: repeater.model property bool hasGradient: gradientModel.hasGradient - property alias gradientPropertyName: gradientModel.gradientPropertyName property alias gradientTypeName: gradientModel.gradientTypeName signal selectedNodeChanged + signal invalidated onHasGradientChanged: { colorLine.invalidate() } onCurrentColorChanged: { - gradientModel.setColor(colorLine.selectedIndex, currentColor) + gradientModel.setColor(colorLine.selectedIndex, root.currentColor) colorLine.invalidate() } @@ -82,7 +85,7 @@ Item { Connections { target: modelNodeBackend - onSelectionChanged: { + function onSelectionChanged() { colorLine.invalidate() colorLine.select(0) } @@ -102,40 +105,43 @@ Item { } if (repeater.model.count < index + 1) - return; + return repeater.itemAt(index).item.highlighted = true colorLine.selectedIndex = index gradientModel.lock() - currentColor = repeater.itemAt(index).item.color + root.currentColor = repeater.itemAt(index).item.color gradientModel.unlock() - selectedNodeChanged() + root.selectedNodeChanged() } function invalidate() { - var gradientString = "import QtQuick 2.0; Gradient {" + var gradientString = "import QtQuick 2.15; Gradient {" for (var i = 0; i < gradientModel.count; i++) { gradientString += "GradientStop {}" } gradientString += "}" - var gradientObject = Qt.createQmlObject(gradientString, gradientRectangle, "test"); + var gradientObject = Qt.createQmlObject(gradientString, gradientRectangle, "test") for (i = 0; i < gradientModel.count; i++) { if (repeater.itemAt(i) !== null) - repeater.itemAt(i).item.y = 20 //fixes corner case for dragging overlapped items + repeater.itemAt(i).item.y = 20 // fixes corner case for dragging overlapped items - gradientObject.stops[i].color = gradientModel.getColor(i) + gradientObject.stops[i].color = gradientModel.getColor(i) gradientObject.stops[i].position = gradientModel.getPosition(i) } - gradientRectangle.gradient = gradientObject; + gradientRectangle.gradient = gradientObject + + root.invalidated() } Column { anchors.fill: parent + MouseArea { height: 40 anchors.left: parent.left @@ -144,14 +150,14 @@ Item { onClicked: { var currentPosition = mouseX / colorLine.effectiveWidth - - var newIndex = gradientModel.addStop(currentPosition, currentColor) + var newIndex = gradientModel.addStop(currentPosition, root.currentColor) if (newIndex > 0) colorLine.select(newIndex) colorLine.invalidate() } + Item { id: stack anchors.fill: parent @@ -160,10 +166,9 @@ Item { Repeater { id: repeater model: GradientModel { + id: gradientModel anchorBackendProperty: anchorBackend gradientPropertyName: "gradient" - id: gradientModel - } delegate: Loader { @@ -195,15 +200,17 @@ Item { } Component.onCompleted: { - colorLine.select(0); - colorLine.invalidate(); + colorLine.select(0) + colorLine.invalidate() } Item { height: 16 anchors.left: parent.left anchors.right: parent.right + Rectangle { + id: gradientRectangle smooth: true x: 0 y: 16 @@ -212,7 +219,6 @@ Item { border.width: 1 width: parent.height height: parent.width - id: gradientRectangle gradient: Gradient { id: gradient } @@ -229,34 +235,40 @@ Item { Component { id: component + Item { id: gradientStopHandle - y: 20 - width: 10 - height: 20 property alias color: rectangle.color property alias highlighted: canvas.highlighted - property bool toolTipVisible: false + property bool readOnly: false + property int index: 0 + + y: 20 + width: 10 + height: 20 + opacity: y < 20 ? y / 10 : 1 function refreshToolTip(showToolTip) { - toolTipVisible = showToolTip; + gradientStopHandle.toolTipVisible = showToolTip if (showToolTip) { - var currentPoint = Qt.point(gradientStopHandleMouseArea.mouseX, gradientStopHandleMouseArea.mouseY); - var fixedGradiantStopPosition = currentGradiantStopPosition(); - myTooltip.showText(gradientStopHandleMouseArea, currentPoint, fixedGradiantStopPosition.toFixed(3)); + var currentPoint = Qt.point(gradientStopHandleMouseArea.mouseX, + gradientStopHandleMouseArea.mouseY) + var fixedGradiantStopPosition = currentGradiantStopPosition() + myTooltip.showText(gradientStopHandleMouseArea, + currentPoint, + fixedGradiantStopPosition.toFixed(3)) } else { myTooltip.hideText() } } + function currentGradiantStopPosition() { - return x / colorLine.effectiveWidth; + return gradientStopHandle.x / colorLine.effectiveWidth; } - onXChanged: { - refreshToolTip(toolTipVisible) - } + onXChanged: gradientStopHandle.refreshToolTip(gradientStopHandle.toolTipVisible) Rectangle { id: rectangle @@ -266,7 +278,6 @@ Item { border.color: "gray" border.width: 1 radius: 1 - } Canvas { @@ -279,7 +290,7 @@ Item { property bool highlighted: false - property color strokeStyle: Qt.darker(fillStyle, 1.6) + property color strokeStyle: Qt.darker(fillStyle, 1.6) property color fillStyle: highlighted ? "lightGray" : "gray" onHighlightedChanged: requestPaint() @@ -305,14 +316,8 @@ Item { ctx.restore() } - } - property bool readOnly: false - property int index: 0 - - opacity: y < 20 ? y / 10 : 1 - Behavior on y { PropertyAnimation { duration: 100 @@ -324,45 +329,41 @@ Item { duration: 100 } } + MouseArea { id: gradientStopHandleMouseArea anchors.fill: parent drag.target: parent drag.minimumX: 0 drag.maximumX: colorLine.effectiveWidth - drag.minimumY: !readOnly ? 0 : 20 + drag.minimumY: !gradientStopHandle.readOnly ? 0 : 20 drag.maximumY: 20 cursorShape: Qt.PointingHandCursor + hoverEnabled: true // using pressed property instead of drag.active which was not working - onExited: { - gradientStopHandle.refreshToolTip(pressed); - } - onCanceled: { - gradientStopHandle.refreshToolTip(pressed); - } - hoverEnabled: true + onExited: gradientStopHandle.refreshToolTip(pressed) + onCanceled: gradientStopHandle.refreshToolTip(pressed) Timer { interval: 1000 running: gradientStopHandleMouseArea.containsMouse - onTriggered: { - gradientStopHandle.refreshToolTip(true); - } + onTriggered: gradientStopHandle.refreshToolTip(true) } onPressed: { - colorLine.select(index); - gradientStopHandle.refreshToolTip(true); + colorLine.select(index) + gradientStopHandle.refreshToolTip(true) } onReleased: { if (drag.active) { - gradientModel.setPosition(colorLine.selectedIndex, gradientStopHandle.currentGradiantStopPosition()) - gradientStopHandle.refreshToolTip(false); + gradientModel.setPosition(colorLine.selectedIndex, + gradientStopHandle.currentGradiantStopPosition()) + gradientStopHandle.refreshToolTip(false) if (parent.y < 10) { - if (!readOnly) { + if (!gradientStopHandle.readOnly) { colorLine.select(index - 1) gradientModel.removeStop(index) } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml index fb2ca5e41d2..f997329b036 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetList.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. @@ -91,8 +91,7 @@ HelperWindow { } StackLayout { - anchors.left: parent.left - anchors.right: parent.right + width: parent.width currentIndex: presetTabBar.currentIndex GradientPresetTabContent { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml index c987e616fe3..569b168697c 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPresetTabContent.qml @@ -133,7 +133,7 @@ Rectangle { !backgroundCard.isSelected PropertyChanges { target: backgroundCard - color: StudioTheme.Values.themeControlBackgroundPressed + color: StudioTheme.Values.themeControlBackgroundHover border.width: StudioTheme.Values.border border.color: StudioTheme.Values.themeInteraction } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPropertySpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPropertySpinBox.qml index e316ef80b18..a1c3251335c 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPropertySpinBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPropertySpinBox.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,23 +23,48 @@ ** ****************************************************************************/ -import QtQuick 2.1 -import QtQuick.Layouts 1.0 -import QtQuickDesignerTheme 1.0 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 import StudioControls 1.0 as StudioControls -StudioControls.RealSpinBox { - id: spinBox - width: 82 - Layout.minimumWidth: 82 +Item { + id: wrapper property string propertyName - actionIndicatorVisible: false - realFrom: -9999 - realTo: 9999 - realStepSize: 1 + property alias decimals: spinBox.decimals - Component.onCompleted: spinBox.realValue = gradientLine.model.readGradientProperty(propertyName) - onCompressedRealValueModified: gradientLine.model.setGradientProperty(propertyName, spinBox.realValue) + property alias value: spinBox.realValue + + property alias minimumValue: spinBox.realFrom + property alias maximumValue: spinBox.realTo + property alias stepSize: spinBox.realStepSize + + width: 90 + implicitHeight: spinBox.height + + onFocusChanged: restoreCursor() + + StudioControls.RealSpinBox { + id: spinBox + + width: wrapper.width + actionIndicatorVisible: false + + realFrom: -9999 + realTo: 9999 + realStepSize: 1 + decimals: 0 + + Component.onCompleted: { + spinBox.realValue = gradientLine.model.readGradientProperty(wrapper.propertyName) + } + onCompressedRealValueModified: { + gradientLine.model.setGradientProperty(wrapper.propertyName, spinBox.realValue) + } + + onDragStarted: hideCursor() + onDragEnded: restoreCursor() + onDragging: holdCursorInPlace() + } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/HueSlider.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/HueSlider.qml index 66e657e10a3..de73742af0e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/HueSlider.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/HueSlider.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,113 +23,93 @@ ** ****************************************************************************/ -import QtQuick 2.1 +import QtQuick 2.12 import StudioTheme 1.0 as StudioTheme Item { - id: colorSlider + id: root property real value: 1 - property real maximum: 1 property real minimum: 0 + property real maximum: 1 property bool pressed: mouseArea.pressed property bool integer: false - property Component trackDelegate - property string handleSource: "images/slider_handle.png" signal clicked - width: 20 - height: 100 + height: StudioTheme.Values.hueSliderHeight function updatePos() { - if (maximum > minimum) { - var pos = (track.height - 8) * (value - minimum) / (maximum - minimum) - return Math.min(Math.max(pos, 0), track.height - 8); + if (root.maximum > root.minimum) { + var pos = (track.width - handle.width) * (root.value - root.minimum) / (root.maximum - root.minimum) + return Math.min(Math.max(pos, 0), track.width - 8) } else { - return 0; + return 0 } } - Row { + Item { + id: track + + width: parent.width height: parent.height - spacing: 12 - Item { - id: track - width: 6 - anchors.top: parent.top - anchors.bottom: parent.bottom + Rectangle { + anchors.fill: parent + border.color: StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border - Rectangle { - anchors.fill: track - anchors.margins: -1 - color: StudioTheme.Values.themeControlOutline + gradient: Gradient { + orientation: Gradient.Horizontal + GradientStop { position: 0.000; color: Qt.rgba(1, 0, 0, 1) } + GradientStop { position: 0.167; color: Qt.rgba(1, 1, 0, 1) } + GradientStop { position: 0.333; color: Qt.rgba(0, 1, 0, 1) } + GradientStop { position: 0.500; color: Qt.rgba(0, 1, 1, 1) } + GradientStop { position: 0.667; color: Qt.rgba(0, 0, 1, 1) } + GradientStop { position: 0.833; color: Qt.rgba(1, 0, 1, 1) } + GradientStop { position: 1.000; color: Qt.rgba(1, 0, 0, 1) } + } + } + + Rectangle { + id: handle + width: StudioTheme.Values.hueSliderHandleWidth + height: track.height + anchors.verticalCenter: parent.verticalCenter + smooth: true + opacity: 0.9 + radius: 2 + border.color: "black" + border.width: 1 + x: root.updatePos() + z: 1 + + gradient: Gradient { + GradientStop {color: "#2c2c2c" ; position: 0} + GradientStop {color: "#343434" ; position: 0.15} + GradientStop {color: "#373737" ; position: 1.0} + } + } + + MouseArea { + id: mouseArea + anchors.fill: parent + preventStealing: true + + function calculateValue() { + var handleX = Math.max(0, Math.min(mouseArea.mouseX, mouseArea.width)) + var realValue = (root.maximum - root.minimum) * handleX / mouseArea.width + root.minimum + root.value = root.integer ? Math.round(realValue) : realValue } - Rectangle { - gradient: Gradient { - GradientStop {position: 0.000; color: Qt.rgba(1, 0, 0, 1)} - GradientStop {position: 0.167; color: Qt.rgba(1, 1, 0, 1)} - GradientStop {position: 0.333; color: Qt.rgba(0, 1, 0, 1)} - GradientStop {position: 0.500; color: Qt.rgba(0, 1, 1, 1)} - GradientStop {position: 0.667; color: Qt.rgba(0, 0, 1, 1)} - GradientStop {position: 0.833; color: Qt.rgba(1, 0, 1, 1)} - GradientStop {position: 1.000; color: Qt.rgba(1, 0, 0, 1)} - } - - width: parent.width - height: parent.height - } - - Rectangle { - id: handle - width: 14 - height: 10 - - opacity: 0.9 - - anchors.horizontalCenter: parent.horizontalCenter - smooth: true - - radius: 2 - border.color: "black" - border.width: 1 - - gradient: Gradient { - GradientStop {color: "#2c2c2c" ; position: 0} - GradientStop {color: "#343434" ; position: 0.15} - GradientStop {color: "#373737" ; position: 1.0} - } - - - y: updatePos() - z: 1 - } - - MouseArea { - id: mouseArea - anchors {top: parent.top; bottom: parent.bottom; horizontalCenter: parent.horizontalCenter} - - width: handle.width - preventStealing: true - - onPressed: { - var handleY = Math.max(0, Math.min(mouseY, mouseArea.height)) - var realValue = (maximum - minimum) * handleY / mouseArea.height + minimum; - value = colorSlider.integer ? Math.round(realValue) : realValue; - } - - onReleased: colorSlider.clicked() - - onPositionChanged: { - if (pressed) { - var handleY = Math.max(0, Math.min(mouseY, mouseArea.height)) - var realValue = (maximum - minimum) * handleY / mouseArea.height + minimum; - value = colorSlider.integer ? Math.round(realValue) : realValue; - } + onPressed: calculateValue() + onReleased: root.clicked() + onPositionChanged: { + if (pressed) { + calculateValue() } } } + } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconIndicator.qml new file mode 100644 index 00000000000..ee1fccdaa0d --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconIndicator.qml @@ -0,0 +1,86 @@ +/**************************************************************************** +** +** 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.Templates 2.15 as T +import HelperWidgets 2.0 +import StudioTheme 1.0 as StudioTheme + +Rectangle { + id: root + + property Item myControl + property alias icon: indicatorIcon.text + property alias iconColor: indicatorIcon.color + property alias pixelSize: indicatorIcon.font.pixelSize + property alias tooltip: toolTipArea.tooltip + + signal clicked() + + color: "transparent" + border.color: "transparent" + + implicitWidth: StudioTheme.Values.linkControlWidth + implicitHeight: StudioTheme.Values.linkControlHeight + + z: 10 + + T.Label { + id: indicatorIcon + anchors.fill: parent + text: "?" + visible: true + color: StudioTheme.Values.themeTextColor + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: StudioTheme.Values.myIconFontSize + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + + ToolTipArea { + id: toolTipArea + anchors.fill: parent + onClicked: root.clicked() + } + + states: [ + State { + name: "default" + when: !toolTipArea.containsMouse + PropertyChanges { + target: indicatorIcon + color: StudioTheme.Values.themeLinkIndicatorColor + } + }, + State { + name: "hover" + when: toolTipArea.containsMouse + PropertyChanges { + target: indicatorIcon + color: StudioTheme.Values.themeLinkIndicatorColorHover + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconLabel.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconLabel.qml index 85ed936a6b0..f11582e0e0a 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconLabel.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/IconLabel.qml @@ -24,15 +24,35 @@ ****************************************************************************/ import QtQuick 2.15 -import HelperWidgets 2.0 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme -Label { - id: myLabel +Rectangle { + property alias tooltip: toolTipArea.tooltip + property alias icon: icon.text + property alias iconColor: icon.color + property alias pixelSize: icon.font.pixelSize + property alias horizontalAlignment: icon.horizontalAlignment - property alias icon: myLabel.text + implicitWidth: StudioTheme.Values.controlLabelWidth + implicitHeight: StudioTheme.Values.controlLabelWidth - text: StudioTheme.Constants.actionIcon - font.family: StudioTheme.Constants.iconFont.family - font.pixelSize: StudioTheme.Values.myIconFontSize + color: "transparent" + border.color: "transparent" + + T.Label { + id: icon + anchors.fill: parent + color: StudioTheme.Values.themeIconColor + text: "" + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: StudioTheme.Values.myIconFontSize + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + + ToolTipArea { + id: toolTipArea + anchors.fill: parent + } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ImageSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ImageSection.qml new file mode 100644 index 00000000000..f3fe8885497 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ImageSection.qml @@ -0,0 +1,246 @@ +/**************************************************************************** +** +** 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 HelperWidgets 2.0 +import StudioControls 1.0 as StudioControls +import StudioTheme 1.0 as StudioTheme + +Section { + caption: qsTr("Image") + + anchors.left: parent.left + anchors.right: parent.right + + SectionLayout { + PropertyLabel { text: qsTr("Source") } + + SecondColumnLayout { + UrlChooser { + backendValue: backendValues.source + } + + ExpandingSpacer {} + } + + PropertyLabel { text: qsTr("Fill mode") } + + SecondColumnLayout { + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + scope: "Image" + model: ["Stretch", "PreserveAspectFit", "PreserveAspectCrop", "Tile", "TileVertically", "TileHorizontally", "Pad"] + backendValue: backendValues.fillMode + } + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Source size") + disabledState: !backendValues.sourceSize.isAvailable + } + + SecondColumnLayout { + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.sourceSize_width + minimumValue: 0 + maximumValue: 8192 + 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: 0 + maximumValue: 8192 + decimals: 0 + enabled: backendValue.isAvailable + } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { text: qsTr("H") } + + Spacer { implicitWidth: StudioTheme.Values.controlGap } + + LinkIndicator2D {} + + ExpandingSpacer {} + } + + + PropertyLabel { text: qsTr("Alignment H") } + + SecondColumnLayout { + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + scope: "Image" + model: ["AlignLeft", "AlignRight", "AlignHCenter"] + backendValue: backendValues.horizontalAlignment + } + + ExpandingSpacer {} + } + + PropertyLabel { text: qsTr("Alignment V") } + + SecondColumnLayout { + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + scope: "Image" + model: ["AlignTop", "AlignBottom", "AlignVCenter"] + backendValue: backendValues.verticalAlignment + } + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Asynchronous") + tooltip: qsTr("Loads images on the local filesystem asynchronously in a separate thread.") + disabledState: !backendValues.asynchronous.isAvailable + } + + SecondColumnLayout { + CheckBox { + text: backendValues.asynchronous.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.asynchronous + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Auto transform") + tooltip: qsTr("Automatically applies image transformation metadata such as EXIF orientation.") + disabledState: !backendValues.autoTransform.isAvailable + } + + SecondColumnLayout { + CheckBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + text: backendValues.autoTransform.valueToString + backendValue: backendValues.autoTransform + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Cache") + tooltip: qsTr("Caches the image.") + disabledState: !backendValues.cache.isAvailable + } + + SecondColumnLayout { + CheckBox { + text: backendValues.cache.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.cache + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Mipmap") + tooltip: qsTr("Uses mipmap filtering when the image is scaled or transformed.") + disabledState: !backendValues.mipmap.isAvailable + } + + SecondColumnLayout { + CheckBox { + text: backendValues.mipmap.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.mipmap + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Mirror") + tooltip: qsTr("Inverts the image horizontally.") + 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("Smoothly filters the image when it is scaled or transformed.") + disabledState: !backendValues.smooth.isAvailable + } + + SecondColumnLayout { + CheckBox { + text: backendValues.smooth.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.smooth + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Label.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Label.qml index 06f75a3425e..34ab253dbff 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Label.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Label.qml @@ -23,10 +23,9 @@ ** ****************************************************************************/ -import QtQuick 2.1 -import QtQuick.Layouts 1.0 -import QtQuick.Controls 2.12 -import QtQuickDesignerTheme 1.0 +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 import StudioTheme 1.0 as StudioTheme Label { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/LineEdit.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/LineEdit.qml index 423a1aa1097..aa7ba8c97db 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/LineEdit.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/LineEdit.qml @@ -23,7 +23,7 @@ ** ****************************************************************************/ -import QtQuick 2.2 +import QtQuick 2.15 import StudioControls 1.0 as StudioControls import StudioTheme 1.0 as StudioTheme import QtQuickDesignerTheme 1.0 @@ -52,8 +52,7 @@ StudioControls.TextField { property string context - function setTranslateExpression() - { + function setTranslateExpression() { if (translateFunction() === "qsTranslate") { backendValue.expression = translateFunction() + "(\"" + backendValue.getTranslationContext() @@ -77,10 +76,13 @@ StudioControls.TextField { id: colorLogic backendValue: lineEdit.backendValue onValueFromBackendChanged: { + if (colorLogic.valueFromBackend === undefined) + return + if (writeValueManually) { - lineEdit.text = convertColorToString(valueFromBackend) + lineEdit.text = convertColorToString(colorLogic.valueFromBackend) } else { - lineEdit.text = valueFromBackend + lineEdit.text = colorLogic.valueFromBackend } __dirty = false } @@ -92,7 +94,7 @@ StudioControls.TextField { Connections { target: modelNodeBackend - onSelectionToBeChanged: { + function onSelectionToBeChanged() { if (__dirty && !writeValueManually) { if (writeAsExpression) lineEdit.backendValue.expression = text @@ -126,7 +128,8 @@ StudioControls.TextField { __dirty = false } - property bool isTranslated: colorLogic.backendValue.isTranslated + property bool isTranslated: colorLogic.backendValue === undefined ? false + : colorLogic.backendValue.isTranslated translationIndicator.onClicked: { if (translationIndicator.checked) { @@ -138,13 +141,19 @@ StudioControls.TextField { colorLogic.evaluate(); } - property variant backendValueValueInternal: backendValue.value + property variant backendValueValueInternal: backendValue === undefined ? 0 : backendValue.value onBackendValueValueInternalChanged: { - lineEdit.translationIndicator.checked = lineEdit.backendValue.isTranslated + if (lineEdit.backendValue === undefined) + lineEdit.translationIndicator.checked = false + else + lineEdit.translationIndicator.checked = lineEdit.backendValue.isTranslated } onIsTranslatedChanged: { - lineEdit.translationIndicator.checked = lineEdit.backendValue.isTranslated + if (lineEdit.backendValue === undefined) + lineEdit.translationIndicator.checked = false + else + lineEdit.translationIndicator.checked = lineEdit.backendValue.isTranslated } function escapeString(string) { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/LinkIndicator2D.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/LinkIndicator2D.qml new file mode 100644 index 00000000000..94987d02d54 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/LinkIndicator2D.qml @@ -0,0 +1,28 @@ +/**************************************************************************** +** +** 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 StudioControls 1.0 as StudioControls + +StudioControls.LinkIndicator2D {} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/MarginSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/MarginSection.qml index fb761d6e20b..5ed21628f54 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/MarginSection.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/MarginSection.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.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 { caption: qsTr("Margin") @@ -40,98 +41,118 @@ Section { property alias backendValueMargins: spinBoxMargins.backendValue SectionLayout { - Label { - text: qsTr("Vertical") - } + PropertyLabel { text: qsTr("Vertical") } + SecondColumnLayout { - Label { - text: qsTr("Top") - tooltip: qsTr("The margin above the item.") - width: 42 - } SpinBox { id: spinBoxTopMargin + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth minimumValue: -10000 maximumValue: 10000 - realDragRange: 5000 decimals: 0 backendValue: backendValues.topMargin - Layout.fillWidth: true - } - Item { - width: 4 - height: 4 } - Label { - text: qsTr("Bottom") - tooltip: qsTr("The margin below the item.") - width: 42 + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + MultiIconLabel { + icon0: StudioTheme.Constants.paddingFrame + icon1: StudioTheme.Constants.paddingEdge + iconColor: StudioTheme.Values.themeTextColor + tooltip: qsTr("The margin above the item.") } + + Spacer { implicitWidth: StudioTheme.Values.controlGap } + SpinBox { id: spinBoxBottomMargin + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth minimumValue: -10000 maximumValue: 10000 - realDragRange: 5000 decimals: 0 backendValue: backendValues.bottomMargin - Layout.fillWidth: true } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + MultiIconLabel { + icon0: StudioTheme.Constants.paddingFrame + icon1: StudioTheme.Constants.paddingEdge + iconColor: StudioTheme.Values.themeTextColor + rotation: 180 + tooltip: qsTr("The margin below the item.") + } + + ExpandingSpacer {} } - Label { - text: qsTr("Horizontal") - } + PropertyLabel { text: qsTr("Horizontal") } + SecondColumnLayout { - Label { - text: qsTr("Left") - tooltip: qsTr("The margin left of the item.") - width: 42 - } SpinBox { id: spinBoxLeftMargin + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth minimumValue: -10000 maximumValue: 10000 - realDragRange: 5000 decimals: 0 backendValue: backendValues.leftMargin - Layout.fillWidth: true - } - Item { - width: 4 - height: 4 } - Label { - text: qsTr("Right") - tooltip: qsTr("The margin right of the item.") - width: 42 + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + MultiIconLabel { + icon0: StudioTheme.Constants.paddingFrame + icon1: StudioTheme.Constants.paddingEdge + iconColor: StudioTheme.Values.themeTextColor + rotation: 270 + tooltip: qsTr("The margin left of the item.") } + + Spacer { implicitWidth: StudioTheme.Values.controlGap } + SpinBox { id: spinBoxRightMargin + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth minimumValue: -10000 maximumValue: 10000 - realDragRange: 5000 decimals: 0 backendValue: backendValues.rightMargin - Layout.fillWidth: true } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + MultiIconLabel { + icon0: StudioTheme.Constants.paddingFrame + icon1: StudioTheme.Constants.paddingEdge + iconColor: StudioTheme.Values.themeTextColor + rotation: 90 + tooltip: qsTr("The margin right of the item.") + } + + ExpandingSpacer {} } - Label { + PropertyLabel { text: qsTr("Margins") tooltip: qsTr("The margins around the item.") } + SecondColumnLayout { SpinBox { id: spinBoxMargins + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth minimumValue: -10000 maximumValue: 10000 - realDragRange: 5000 decimals: 0 backendValue: backendValues.margins - Layout.fillWidth: true } + + ExpandingSpacer {} } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/MultiIconLabel.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/MultiIconLabel.qml new file mode 100644 index 00000000000..ffc3d0daf45 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/MultiIconLabel.qml @@ -0,0 +1,72 @@ +/**************************************************************************** +** +** 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.Templates 2.15 as T +import StudioTheme 1.0 as StudioTheme + +Rectangle { + property alias tooltip: toolTipArea.tooltip + property alias icon0: icon0.text + property alias icon1: icon1.text + // TODO second alias + property alias iconColor: icon1.color + + implicitWidth: StudioTheme.Values.controlLabelWidth + implicitHeight: StudioTheme.Values.controlLabelWidth + + color: "transparent" + border.color: "transparent" + + T.Label { + id: icon0 + anchors.fill: parent + text: "" + color: Qt.rgba(icon1.color.r, + icon1.color.g, + icon1.color.b, + 0.5) + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: StudioTheme.Values.myIconFontSize + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + + T.Label { + id: icon1 + anchors.fill: parent + text: "" + color: StudioTheme.Values.themeIconColor + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: StudioTheme.Values.myIconFontSize + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + + ToolTipArea { + id: toolTipArea + anchors.fill: parent + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OpacitySlider.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OpacitySlider.qml new file mode 100644 index 00000000000..68d0c225cd9 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OpacitySlider.qml @@ -0,0 +1,118 @@ +/**************************************************************************** +** +** 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 StudioTheme 1.0 as StudioTheme + +Item { + id: root + + property real value: 1 + property real minimum: 0 + property real maximum: 1 + property bool pressed: mouseArea.pressed + property bool integer: false + property color color + + signal clicked + + height: StudioTheme.Values.hueSliderHeight + + function updatePos() { + if (root.maximum > root.minimum) { + var pos = (track.width - handle.width) * (root.value - root.minimum) / (root.maximum - root.minimum) + return Math.min(Math.max(pos, 0), track.width - 8) + } else { + return 0 + } + } + + Item { + id: track + + width: parent.width + height: parent.height + + Image { + id: checkerboard + anchors.fill: parent + source: "images/checkers.png" + fillMode: Image.Tile + } + + Rectangle { + anchors.fill: parent + border.color: StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border + + gradient: Gradient { + orientation: Gradient.Horizontal + GradientStop { position: 0.000; color: root.color } + GradientStop { position: 1.000; color: "transparent" } + } + } + + Rectangle { + id: handle + width: StudioTheme.Values.hueSliderHandleWidth + height: track.height + anchors.verticalCenter: parent.verticalCenter + smooth: true + opacity: 0.9 + radius: 2 + border.color: "black" + border.width: 1 + x: root.updatePos() + z: 1 + + gradient: Gradient { + GradientStop {color: "#2c2c2c" ; position: 0} + GradientStop {color: "#343434" ; position: 0.15} + GradientStop {color: "#373737" ; position: 1.0} + } + } + + MouseArea { + id: mouseArea + anchors.fill: parent + preventStealing: true + + function calculateValue() { + var handleX = Math.max(0, Math.min(mouseArea.mouseX, mouseArea.width)) + var realValue = (root.maximum - root.minimum) * handleX / mouseArea.width + root.minimum + root.value = root.integer ? Math.round(realValue) : realValue + } + + onPressed: calculateValue() + onReleased: root.clicked() + onPositionChanged: { + if (pressed) { + calculateValue() + } + } + } + + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginControl.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginControl.qml index 1e97df3e115..cc0b93660a7 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginControl.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginControl.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,230 +23,206 @@ ** ****************************************************************************/ -import QtQuick 2.1 -import QtQuickDesignerTheme 1.0 +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme -Item { - width: grid.width - height: grid.height - id: originControl - +Row { + id: root + signal originSelectorClicked(string value) + property alias origin: myButton.origin property variant backendValue - property color borderColorSelected: colorLogic.textColor - property color borderColor: StudioTheme.Values.themeControlOutline - property bool showTranslateCheckBox: true - - readonly property color selectedColor: StudioTheme.Values.themeControlBackgroundInteraction - readonly property color unselectedColor: StudioTheme.Values.themeControlBackground - - property bool enabled: true + onOriginSelectorClicked: { + if (root.enabled) + root.backendValue.setEnumeration("Item", value) + } ExtendedFunctionLogic { id: extFuncLogic - backendValue: originControl.backendValue - } - - ActionIndicator { - anchors.right: grid.left - anchors.leftMargin: grid.spacing - - visible: originControl.enabled - icon.color: extFuncLogic.color - icon.text: extFuncLogic.glyph - onClicked: extFuncLogic.show() - forceVisible: true + backendValue: root.backendValue } ColorLogic { id: colorLogic - backendValue: originControl.backendValue + backendValue: root.backendValue onValueFromBackendChanged: { - var enumString = originControl.backendValue.enumeration; + var enumString = root.backendValue.enumeration if (enumString === "") - enumString = originControl.backendValue.value - grid.select(enumString); + enumString = root.backendValue.value + + root.origin = enumString } } - Grid { - x: StudioTheme.Values.squareComponentWidth - opacity: originControl.enabled ? 1 : 0.5 - rows: 3 - columns: 3 - spacing: 5 + ActionIndicator { + id: actionIndicator + myControl: myButton + x: 0 + y: 0 + width: actionIndicator.visible ? myButton.__actionIndicatorWidth : 0 + height: actionIndicator.visible ? myButton.__actionIndicatorHeight : 0 - id: grid + icon.color: extFuncLogic.color + icon.text: extFuncLogic.glyph + onClicked: extFuncLogic.show() + forceVisible: extFuncLogic.menuVisible + } - function setValue(myValue) { - if (originControl.enabled) - originControl.backendValue.setEnumeration("Item", myValue) + T.AbstractButton { + id: myButton + + function originSelectorClicked(value) { root.originSelectorClicked(value) } + + property string origin: "Center" + + // This property is used to indicate the global hover state + property bool hover: myButton.hovered + + property alias backgroundVisible: buttonBackground.visible + property alias backgroundRadius: buttonBackground.radius + + property alias actionIndicator: actionIndicator + + property alias actionIndicatorVisible: actionIndicator.visible + property real __actionIndicatorWidth: StudioTheme.Values.actionIndicatorWidth + property real __actionIndicatorHeight: StudioTheme.Values.actionIndicatorHeight + + implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, + implicitContentWidth + leftPadding + rightPadding) + implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, + implicitContentHeight + topPadding + bottomPadding) + height: StudioTheme.Values.height + width: StudioTheme.Values.height + z: myButton.checked ? 10 : 3 + activeFocusOnTab: false + + onClicked: originPopup.opened ? originPopup.close() : originPopup.open() + + background: Rectangle { + id: buttonBackground + color: myButton.checked ? StudioTheme.Values.themeControlBackgroundInteraction + : StudioTheme.Values.themeControlBackground + border.color: myButton.checked ? StudioTheme.Values.themeInteraction + : StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border } - function select(myValue) { - - for (var i = 0; i < grid.children.length; i++) { - grid.children[i].selected = false - } - - if (myValue === "TopLeft") { - grid.children[0].selected = true - } else if (myValue === "Top") { - grid.children[1].selected = true - } else if (myValue === "TopRight") { - grid.children[2].selected = true - } else if (myValue === "Left") { - grid.children[3].selected = true - } else if (myValue === "Center") { - grid.children[4].selected = true - } else if (myValue === "Right") { - grid.children[5].selected = true - } else if (myValue === "BottomLeft") { - grid.children[6].selected = true - } else if (myValue === "Bottom") { - grid.children[7].selected = true - } else if (myValue === "BottomRight") { - grid.children[8].selected = true - } + indicator: OriginIndicator { + myControl: myButton + x: 0 + y: 0 + implicitWidth: myButton.width + implicitHeight: myButton.height } + T.Popup { + id: originPopup - Rectangle { - property bool selected: false - id: topLeft - width: StudioTheme.Values.height - height: StudioTheme.Values.height - color: selected ? selectedColor : unselectedColor - border.width: selected ? 2 : 1 - border.color: selected ? originControl.borderColorSelected : originControl.borderColor - MouseArea { - anchors.fill: parent - onClicked: { - grid.setValue("TopLeft") + x: 50 + y: 0 + + width: (4 * grid.spacing) + (3 * StudioTheme.Values.height) + height: (4 * grid.spacing) + (3 * StudioTheme.Values.height) + + padding: StudioTheme.Values.border + margins: 0 // If not defined margin will be -1 + + closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent + | T.Popup.CloseOnEscape | T.Popup.CloseOnReleaseOutside + | T.Popup.CloseOnReleaseOutsideParent + + contentItem: Item { + Grid { + id: grid + + x: 5 + y: 5 + + rows: 3 + columns: 3 + spacing: 5 // TODO spacingvalue in Values.qml + + OriginSelector { myControl: myButton; value: "TopLeft" } + OriginSelector { myControl: myButton; value: "Top" } + OriginSelector { myControl: myButton; value: "TopRight" } + OriginSelector { myControl: myButton; value: "Left" } + OriginSelector { myControl: myButton; value: "Center" } + OriginSelector { myControl: myButton; value: "Right" } + OriginSelector { myControl: myButton; value: "BottomLeft" } + OriginSelector { myControl: myButton; value: "Bottom" } + OriginSelector { myControl: myButton; value: "BottomRight" } } } - } - Rectangle { - property bool selected: false - width: topLeft.width - height: topLeft.height - color: selected ? selectedColor : unselectedColor - border.width: selected ? 2 : 1 - border.color: selected ? originControl.borderColorSelected : originControl.borderColor - MouseArea { - anchors.fill: parent - onClicked: { - grid.setValue("Top") - } + background: Rectangle { + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeInteraction + border.width: StudioTheme.Values.border + } + + enter: Transition { + } + exit: Transition { } } - Rectangle { - property bool selected: false - width: topLeft.width - height: topLeft.height - color: selected ? selectedColor : unselectedColor - border.width: selected ? 2 : 1 - border.color: selected ? originControl.borderColorSelected : originControl.borderColor - MouseArea { - anchors.fill: parent - onClicked: { - grid.setValue("TopRight") + states: [ + State { + name: "default" + when: myButton.enabled && !myButton.hover && !actionIndicator.hover + && !myButton.pressed && !originPopup.opened + PropertyChanges { + target: buttonBackground + color: StudioTheme.Values.themeControlBackground + } + PropertyChanges { + target: myButton + z: 3 + } + }, + State { + name: "globalHover" + when: actionIndicator.hover && !myButton.pressed && !originPopup.opened + PropertyChanges { + target: buttonBackground + color: StudioTheme.Values.themeControlBackgroundGlobalHover + border.color: StudioTheme.Values.themeControlOutline + } + }, + State { + name: "hover" + when: myButton.hover && !actionIndicator.hover && !myButton.pressed + && !originPopup.opened + PropertyChanges { + target: buttonBackground + color: StudioTheme.Values.themeControlBackgroundHover + border.color: StudioTheme.Values.themeControlOutline + } + }, + State { + name: "press" + when: myButton.hover && myButton.pressed && !originPopup.opened + PropertyChanges { + target: buttonBackground + color: StudioTheme.Values.themeControlBackgroundInteraction + border.color: StudioTheme.Values.themeInteraction + } + PropertyChanges { + target: myButton + z: 10 + } + }, + State { + name: "disable" + when: !myButton.enabled + PropertyChanges { + target: buttonBackground + color: StudioTheme.Values.themeControlBackgroundDisabled + border.color: StudioTheme.Values.themeControlOutlineDisabled } } - } - - Rectangle { - property bool selected: false - width: topLeft.width - height: topLeft.height - color: selected ? selectedColor : unselectedColor - border.width: selected ? 2 : 1 - border.color: selected ? originControl.borderColorSelected : originControl.borderColor - MouseArea { - anchors.fill: parent - onClicked: { - grid.setValue("Left") - } - } - } - - Rectangle { - property bool selected: false - width: topLeft.width - height: topLeft.height - color: selected ? selectedColor : unselectedColor - border.width: selected ? 2 : 1 - border.color: selected ? originControl.borderColorSelected : originControl.borderColor - MouseArea { - anchors.fill: parent - onClicked: { - grid.setValue("Center") - } - } - } - - Rectangle { - property bool selected: false - width: topLeft.width - height: topLeft.height - color: selected ? selectedColor : unselectedColor - border.width: selected ? 2 : 1 - border.color: selected ? originControl.borderColorSelected : originControl.borderColor - MouseArea { - anchors.fill: parent - onClicked: { - grid.setValue("Right") - } - } - } - - Rectangle { - property bool selected: false - width: topLeft.width - height: topLeft.height - color: selected ? selectedColor : unselectedColor - border.width: selected ? 2 : 1 - border.color: selected ? originControl.borderColorSelected : originControl.borderColor - MouseArea { - anchors.fill: parent - onClicked: { - grid.setValue("BottomLeft") - } - } - } - - Rectangle { - property bool selected: false - width: topLeft.width - height: topLeft.height - color: selected ? selectedColor : unselectedColor - border.width: selected ? 2 : 1 - border.color: selected ? originControl.borderColorSelected : originControl.borderColor - MouseArea { - anchors.fill: parent - onClicked: { - grid.setValue("Bottom") - } - } - } - - Rectangle { - property bool selected: false - width: topLeft.width - height: topLeft.height - color: selected ? selectedColor : unselectedColor - border.width: selected ? 2 : 1 - border.color: selected ? originControl.borderColorSelected : originControl.borderColor - MouseArea { - anchors.fill: parent - onClicked: { - grid.setValue("BottomRight") - } - } - } + ] } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginIndicator.qml new file mode 100644 index 00000000000..ad7ce53b216 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginIndicator.qml @@ -0,0 +1,154 @@ +/**************************************************************************** +** +** 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 StudioTheme 1.0 as StudioTheme + +Item { + id: root + + property Item myControl + + property real iWidth: (root.width - (2 * StudioTheme.Values.border)) / 3.0 + property real iHeight: (root.height - (2 * StudioTheme.Values.border)) / 3.0 + + Rectangle { + id: indicator + width: root.iWidth + height: root.iHeight + color: StudioTheme.Values.themeInteraction + + states: [ + State { + name: "default" + when: myControl.enabled && !myControl.pressed + PropertyChanges { + target: indicator + color: StudioTheme.Values.themeInteraction + } + }, + State { + name: "press" + when: myControl.enabled && myControl.pressed + PropertyChanges { + target: indicator + color: StudioTheme.Values.themeIconColorInteraction + } + }, + State { + name: "disable" + when: !myControl.enabled + PropertyChanges { + target: indicator + color: StudioTheme.Values.themeTextColorDisabled + } + } + ] + } + + states: [ + State { + name: "center" + when: root.myControl.origin === "Center" + PropertyChanges { + target: indicator + x: StudioTheme.Values.border + root.iWidth + y: StudioTheme.Values.border + root.iHeight + } + }, + State { + name: "topLeft" + when: root.myControl.origin === "TopLeft" + PropertyChanges { + target: indicator + x: StudioTheme.Values.border + y: StudioTheme.Values.border + } + }, + State { + name: "top" + when: root.myControl.origin === "Top" + PropertyChanges { + target: indicator + x: StudioTheme.Values.border + root.iWidth + y: StudioTheme.Values.border + } + }, + State { + name: "topRight" + when: root.myControl.origin === "TopRight" + PropertyChanges { + target: indicator + x: StudioTheme.Values.border + (2 * root.iWidth) + y: StudioTheme.Values.border + } + }, + State { + name: "right" + when: root.myControl.origin === "Right" + PropertyChanges { + target: indicator + x: StudioTheme.Values.border + (2 * root.iWidth) + y: StudioTheme.Values.border + root.iHeight + } + }, + State { + name: "bottomRight" + when: root.myControl.origin === "BottomRight" + PropertyChanges { + target: indicator + x: StudioTheme.Values.border + (2 * root.iWidth) + y: StudioTheme.Values.border + (2 * root.iHeight) + } + }, + State { + name: "bottom" + when: root.myControl.origin === "Bottom" + PropertyChanges { + target: indicator + x: StudioTheme.Values.border + root.iWidth + y: StudioTheme.Values.border + (2 * root.iHeight) + } + }, + State { + name: "bottomLeft" + when: root.myControl.origin === "BottomLeft" + PropertyChanges { + target: indicator + x: StudioTheme.Values.border + y: StudioTheme.Values.border + (2 * root.iHeight) + } + }, + State { + name: "left" + when: root.myControl.origin === "Left" + PropertyChanges { + target: indicator + x: StudioTheme.Values.border + y: StudioTheme.Values.border + root.iHeight + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginSelector.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginSelector.qml new file mode 100644 index 00000000000..e5f8cd8372e --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/OriginSelector.qml @@ -0,0 +1,83 @@ +/**************************************************************************** +** +** 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 StudioTheme 1.0 as StudioTheme + +Rectangle { + id: root + + property Item myControl + property string value + + width: StudioTheme.Values.height + height: StudioTheme.Values.height + + border.width: StudioTheme.Values.border + border.color: "transparent" + + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + onClicked: myControl.originSelectorClicked(value) + } + + states: [ + State { + name: "default" + when: !mouseArea.containsMouse && !mouseArea.pressed && myControl.origin !== value + PropertyChanges { + target: root + color: StudioTheme.Values.themeTextColorDisabled // TODO + } + }, + State { + name: "hover" + when: mouseArea.containsMouse && !mouseArea.pressed && myControl.origin !== value + PropertyChanges { + target: root + color: StudioTheme.Values.themeControlBackgroundInteraction // TODO + } + }, + State { + name: "press" + when: mouseArea.containsPress && myControl.origin !== enumValue + PropertyChanges { + target: root + color: StudioTheme.Values.themeControlBackgroundInteraction // TODO + border.color: StudioTheme.Values.themeInteraction + } + }, + State { + name: "active" + when: myControl.origin === value + PropertyChanges { + target: root + color: StudioTheme.Values.themeInteraction + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PaddingSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PaddingSection.qml index 98fb5def41b..d44c5a51799 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PaddingSection.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PaddingSection.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.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 { caption: qsTr("Padding") @@ -34,105 +35,125 @@ Section { anchors.right: parent.right SectionLayout { - Label { + PropertyLabel { text: qsTr("Vertical") disabledState: (!backendValues.topPadding.isAvailable && !backendValues.bottomPadding.isAvailable) } + SecondColumnLayout { - Label { - text: qsTr("Top") - tooltip: qsTr("Padding between the content and the top edge of the item.") - width: 42 - disabledStateSoft: !backendValues.topPadding.isAvailable - } SpinBox { - maximumValue: 10000 + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth minimumValue: -10000 - realDragRange: 5000 + maximumValue: 10000 decimals: 0 backendValue: backendValues.topPadding - Layout.fillWidth: true enabled: backendValue.isAvailable } - Item { - width: 4 - height: 4 + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + MultiIconLabel { + icon0: StudioTheme.Constants.paddingFrame + icon1: StudioTheme.Constants.paddingEdge + tooltip: qsTr("Padding between the content and the top edge of the item.") + //disabledStateSoft: !backendValues.topPadding.isAvailable } - Label { - text: qsTr("Bottom") - tooltip: qsTr("Padding between the content and the bottom edge of the item.") - width: 42 - disabledStateSoft: !backendValues.bottomPadding.isAvailable - } + Spacer { implicitWidth: StudioTheme.Values.controlGap } + SpinBox { - maximumValue: 10000 + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth minimumValue: -10000 - realDragRange: 5000 + maximumValue: 10000 decimals: 0 backendValue: backendValues.bottomPadding - Layout.fillWidth: true enabled: backendValue.isAvailable } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + MultiIconLabel { + icon0: StudioTheme.Constants.paddingFrame + icon1: StudioTheme.Constants.paddingEdge + rotation: 180 + tooltip: qsTr("Padding between the content and the bottom edge of the item.") + //disabledStateSoft: !backendValues.bottomPadding.isAvailable + } + + ExpandingSpacer {} } - Label { + PropertyLabel { text: qsTr("Horizontal") disabledState: (!backendValues.leftPadding.isAvailable && !backendValues.rightPadding.isAvailable) } + SecondColumnLayout { - Label { - text: qsTr("Left") - tooltip: qsTr("Padding between the content and the left edge of the item.") - width: 42 - disabledStateSoft: !backendValues.leftPadding.isAvailable - } SpinBox { - maximumValue: 10000 + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth minimumValue: -10000 - realDragRange: 5000 + maximumValue: 10000 decimals: 0 backendValue: backendValues.leftPadding - Layout.fillWidth: true enabled: backendValue.isAvailable } - Item { - width: 4 - height: 4 + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + MultiIconLabel { + icon0: StudioTheme.Constants.paddingFrame + icon1: StudioTheme.Constants.paddingEdge + rotation: 270 + tooltip: qsTr("Padding between the content and the left edge of the item.") + //disabledStateSoft: !backendValues.leftPadding.isAvailable } - Label { - text: qsTr("Right") - tooltip: qsTr("Padding between the content and the right edge of the item.") - width: 42 - disabledStateSoft: !backendValues.rightPadding.isAvailable - } + Spacer { implicitWidth: StudioTheme.Values.controlGap } + SpinBox { - maximumValue: 10000 + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth minimumValue: -10000 - realDragRange: 5000 + maximumValue: 10000 decimals: 0 backendValue: backendValues.rightPadding - Layout.fillWidth: true enabled: backendValue.isAvailable } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + MultiIconLabel { + icon0: StudioTheme.Constants.paddingFrame + icon1: StudioTheme.Constants.paddingEdge + rotation: 90 + tooltip: qsTr("Padding between the content and the right edge of the item.") + //disabledStateSoft: !backendValues.rightPadding.isAvailable + } + + ExpandingSpacer {} } - Label { - text: qsTr("Padding") + PropertyLabel { + text: qsTr("Global") tooltip: qsTr("Padding between the content and the edges of the items.") disabledState: !backendValues.padding.isAvailable } + SecondColumnLayout { SpinBox { - maximumValue: 10000 + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth minimumValue: -10000 - realDragRange: 5000 + maximumValue: 10000 decimals: 0 backendValue: backendValues.padding - Layout.fillWidth: true enabled: backendValue.isAvailable } + + ExpandingSpacer {} } } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyLabel.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyLabel.qml new file mode 100644 index 00000000000..723b06a58b3 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/PropertyLabel.qml @@ -0,0 +1,76 @@ +/**************************************************************************** +** +** 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 StudioTheme 1.0 as StudioTheme + +T.Label { + id: label + + property alias tooltip: toolTipArea.tooltip + + property bool disabledState: false + property bool disabledStateSoft: false + + width: StudioTheme.Values.propertyLabelWidth + color: StudioTheme.Values.themeTextColor + font.pixelSize: StudioTheme.Values.myFontSize // TODO + elide: Text.ElideRight + + horizontalAlignment: Text.AlignRight + + Layout.preferredWidth: width + Layout.minimumWidth: width + Layout.maximumWidth: width + + ToolTipArea { + id: toolTipArea + anchors.fill: parent + tooltip: ((label.disabledState || label.disabledStateSoft) + ? qsTr("This property is not available in this configuration.") + : label.text) + } + + states: [ + State { + name: "disabled" + when: label.disabledState + PropertyChanges { + target: label + color: StudioTheme.Values.themeTextColorDisabled + } + }, + State { + name: "disabledSoft" + when: label.disabledStateSoft + PropertyChanges { + target: label + color: "red"//StudioTheme.Values.themeTextColorDisabled + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ScrollView.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ScrollView.qml index e9ef50386ed..7ddc82ebd5f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ScrollView.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ScrollView.qml @@ -32,12 +32,14 @@ Flickable { property alias horizontalThickness: horizontalScrollBar.height property alias verticalThickness: verticalScrollBar.width - property bool verticalScrollBarVisible: verticalScrollBar.scrollBarVisible - property bool horizontalScrollBarVisible: horizontalScrollBar.scrollBarVisible - property bool bothVisible: verticalScrollBarVisible && horizontalScrollBarVisible + readonly property bool verticalScrollBarVisible: verticalScrollBar.scrollBarVisible + readonly property bool horizontalScrollBarVisible: horizontalScrollBar.scrollBarVisible + readonly property bool bothVisible: verticalScrollBarVisible && horizontalScrollBarVisible + + property real temporaryHeight: 0 contentWidth: areaItem.childrenRect.width - contentHeight: areaItem.childrenRect.height + contentHeight: Math.max(areaItem.childrenRect.height, flickable.temporaryHeight) boundsBehavior: Flickable.StopAtBounds default property alias content: areaItem.children @@ -49,12 +51,12 @@ Flickable { ScrollBar.horizontal: HorizontalScrollBar { id: horizontalScrollBar parent: flickable - scrollBarVisible: areaItem.childrenRect.width > flickable.width + scrollBarVisible: flickable.contentWidth > flickable.width } ScrollBar.vertical: VerticalScrollBar { id: verticalScrollBar parent: flickable - scrollBarVisible: areaItem.childrenRect.height > flickable.height + scrollBarVisible: flickable.contentHeight > flickable.height } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SecondColumnLayout.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SecondColumnLayout.qml index 3001b6fde19..e0e6b20c3ae 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SecondColumnLayout.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SecondColumnLayout.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,10 +23,10 @@ ** ****************************************************************************/ -import QtQuick 2.1 -import QtQuick.Layouts 1.0 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 RowLayout { Layout.fillWidth: true - spacing: 4 + spacing: 0 } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Section.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Section.qml index 458c5d3150c..25216142e75 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Section.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Section.qml @@ -24,7 +24,7 @@ ****************************************************************************/ import QtQuick 2.15 -import QtQuick.Controls 2.12 as Controls +import QtQuick.Controls 2.15 as Controls import QtQuick.Layouts 1.15 import QtQuickDesignerTheme 1.0 import StudioTheme 1.0 as StudioTheme @@ -39,21 +39,22 @@ Item { property alias showTopSeparator: topSeparator.visible property alias showArrow: arrow.visible property alias showLeftBorder: leftBorder.visible + property alias spacing: column.spacing - property int leftPadding: 8 + property int leftPadding: StudioTheme.Values.sectionLeftPadding property int rightPadding: 0 + property int topPadding: StudioTheme.Values.sectionHeadSpacerHeight + property int bottomPadding: StudioTheme.Values.sectionHeadSpacerHeight property bool expanded: true - property int level: 0 // affects arrow and title - property int contentLevel: 0 // affects whole section + property int level: 0 property int levelShift: 10 property bool hideHeader: false property bool expandOnClick: true // if false, toggleExpand signal will be emitted instead property bool addTopPadding: true property bool addBottomPadding: true - onHideHeaderChanged: - { + onHideHeaderChanged: { header.visible = !hideHeader header.height = hideHeader ? 0 : 20 } @@ -118,21 +119,20 @@ Item { color: StudioTheme.Values.themeControlOutline } - default property alias __content: row.children + default property alias __content: column.children - readonly property alias contentItem: row - - implicitHeight: Math.round(row.height + header.height + topSpacer.height + bottomSpacer.height) + readonly property alias contentItem: column + implicitHeight: Math.round(column.height + header.height + topSpacer.height + bottomSpacer.height) Item { id: topSpacer - height: addTopPadding && row.height > 0 ? StudioTheme.Values.sectionHeadSpacerHeight : 0 + height: section.addTopPadding && column.height > 0 ? section.topPadding : 0 anchors.top: header.bottom } - Row { - id: row + Column { + id: column anchors.left: parent.left anchors.leftMargin: section.leftPadding anchors.right: parent.right @@ -150,8 +150,8 @@ Item { Item { id: bottomSpacer - height: addBottomPadding && row.height > 0 ? StudioTheme.Values.sectionHeadSpacerHeight : 0 - anchors.top: row.bottom + height: section.addBottomPadding && column.height > 0 ? section.bottomPadding : 0 + anchors.top: column.bottom } states: [ @@ -173,8 +173,8 @@ Item { id: trans enabled: false NumberAnimation { - properties: "implicitHeight,rotation"; - duration: 120; + properties: "implicitHeight,rotation" + duration: 120 easing.type: Easing.OutCubic } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SectionLayout.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SectionLayout.qml index dd557d235f3..c513f7bedcd 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SectionLayout.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SectionLayout.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,12 +23,13 @@ ** ****************************************************************************/ -import QtQuick 2.1 -import QtQuick.Layouts 1.0 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import StudioTheme 1.0 as StudioTheme GridLayout { columns: 2 - columnSpacing: 12 - rowSpacing: 4 - width: parent.width - 16 + columnSpacing: StudioTheme.Values.sectionColumnSpacing + rowSpacing: StudioTheme.Values.sectionRowSpacing + width: parent.width - StudioTheme.Values.sectionLayoutRightPadding } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SimpleColorPalette.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SimpleColorPalette.qml index 8f3460c9e19..33473c6eb44 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SimpleColorPalette.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SimpleColorPalette.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,42 +23,45 @@ ** ****************************************************************************/ -import QtQuick 2.1 -import StudioControls 1.0 as StudioControls +import QtQuick 2.15 import HelperWidgets 2.0 +import StudioControls 1.0 as StudioControls +import StudioTheme 1.0 as StudioTheme Item { - property color selectedColor - property bool clickable : true - property color oldColor + id: root - function showColorDialog(color) { - oldColor = color - paletteModel.showDialog(color) - } + property color selectedColor + property bool clickable: true + property color oldColor width: 200 height: 40 enabled: clickable - function addColorToPalette(colorCode) - { + function addColorToPalette(colorCode) { paletteModel.addItem(colorCode) } + function showColorDialog(color) { + root.oldColor = color + paletteModel.showDialog(color) + } + signal dialogColorChanged Component { id: colorItemDelegate - Rectangle { id: backgroundColor - property var favorite : isFavorite + + property var favorite: isFavorite + height: 27 width: 27 - border.color: (backgroundColor.favorite ? "#ffd700" : "#555555") - border.width: (backgroundColor.favorite ? 2 : 1) + border.color: backgroundColor.favorite ? "#ffd700" : "#555555" + border.width: backgroundColor.favorite ? 2 : 1 color: "white" radius: 0 @@ -68,9 +71,8 @@ Item { height: 25 anchors.centerIn: parent color: colorCode - - border.color: "black" - border.width: 1 + border.color: StudioTheme.Values.themeControlOutline + border.width: StudioTheme.Values.border } ToolTipArea { @@ -80,8 +82,8 @@ Item { tooltip: colorCode onClicked: { - if ((mouse.button === Qt.LeftButton) && clickable) - selectedColor = colorRectangle.color + if (mouse.button === Qt.LeftButton && clickable) + root.selectedColor = colorRectangle.color } onPressed: { if (mouse.button === Qt.RightButton) @@ -91,32 +93,30 @@ Item { StudioControls.Menu { id: contextMenu + StudioControls.MenuItem { - text: (backgroundColor.favorite - ? qsTr("Remove from Favorites") - : qsTr("Add to Favorites")) - onTriggered: { - paletteModel.toggleFavorite(index) - } + text: backgroundColor.favorite ? qsTr("Remove from Favorites") + : qsTr("Add to Favorites") + onTriggered: paletteModel.toggleFavorite(index) } } } } SimpleColorPaletteModel { - id: paletteModel onCurrentColorChanged: { - selectedColor = color + root.selectedColor = color dialogColorChanged() - } + onColorDialogRejected: { - selectedColor = oldColor + root.selectedColor = root.oldColor dialogColorChanged() } } + ListView { id: colorPaletteView model: paletteModel diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ExpandingSpacer.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Spacer.qml similarity index 97% rename from share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ExpandingSpacer.qml rename to share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Spacer.qml index fdfd86ce277..21f84a86fce 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ExpandingSpacer.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/Spacer.qml @@ -27,5 +27,5 @@ import QtQuick 2.12 import QtQuick.Layouts 1.12 Item { - Layout.fillWidth: true + height: 4 } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml index ca8f075fee4..b0ffe3fe6cb 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/SpinBox.qml @@ -23,7 +23,7 @@ ** ****************************************************************************/ -import QtQuick 2.1 +import QtQuick 2.15 import StudioControls 1.0 as StudioControls import StudioTheme 1.0 as StudioTheme @@ -99,7 +99,6 @@ Item { actionIndicator.icon.color: extFuncLogic.color actionIndicator.icon.text: extFuncLogic.glyph actionIndicator.onClicked: extFuncLogic.show() - actionIndicator.forceVisible: extFuncLogic.menuVisible ColorLogic { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/StandardTextSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/StandardTextSection.qml index 28b4a01d7f1..c739382f199 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/StandardTextSection.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/StandardTextSection.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,173 +23,255 @@ ** ****************************************************************************/ -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 { - anchors.left: parent.left - anchors.right: parent.right - caption: qsTr("Text") + id: root - property bool showIsWrapping: false + property bool showIsWrapping: false // TODO not used property bool showElide: false property bool showVerticalAlignment: false property bool showFormatProperty: false property bool showFontSizeMode: false property bool showLineHeight: false property bool richTextEditorAvailable: false - id: root + anchors.left: parent.left + anchors.right: parent.right + caption: qsTr("Text") SectionLayout { - columns: 2 - rows: 3 - Label { - text: qsTr("Text") - } + PropertyLabel { text: qsTr("Text") } - RowLayout { + SecondColumnLayout { LineEdit { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.text - Layout.fillWidth: true } - StudioControls.AbstractButton { - id: richTextEditorButton - buttonIcon: StudioTheme.Constants.edit - onClicked: { - richTextDialogLoader.show() - } + 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() - } + onRejected: hideWidget() + onAccepted: hideWidget() } } - Label { - visible: showVerticalAlignment + PropertyLabel { text: qsTr("Text color") } + + ColorEditor { + backendValue: backendValues.color + supportGradient: false + } + + PropertyLabel { + visible: root.showVerticalAlignment text: qsTr("Wrap mode") disabledState: !backendValues.wrapMode.isAvailable } - ComboBox { - visible: showVerticalAlignment - Layout.fillWidth: true - backendValue: backendValues.wrapMode - scope: "Text" - model: ["NoWrap", "WordWrap", "WrapAnywhere", "Wrap"] - enabled: backendValue.isAvailable + SecondColumnLayout { + ComboBox { + visible: root.showVerticalAlignment + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + backendValue: backendValues.wrapMode + scope: "Text" + model: ["NoWrap", "WordWrap", "WrapAnywhere", "Wrap"] + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} } - Label { - visible: showElide + PropertyLabel { + visible: root.showElide text: qsTr("Elide") disabledState: !backendValues.elide.isAvailable } - ComboBox { - visible: showElide - Layout.fillWidth: true - backendValue: backendValues.elide - scope: "Text" - model: ["ElideNone", "ElideLeft", "ElideMiddle", "ElideRight"] - enabled: backendValue.isAvailable + SecondColumnLayout { + ComboBox { + visible: root.showElide + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + backendValue: backendValues.elide + scope: "Text" + model: ["ElideNone", "ElideLeft", "ElideMiddle", "ElideRight"] + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} } - Label { - visible: showElide - text: qsTr("Maximum line count") + PropertyLabel { + visible: root.showElide + text: qsTr("Max line count") tooltip: qsTr("Limits the number of lines that the text component will show.") disabledState: !backendValues.maximumLineCount.isAvailable } - SpinBox { - visible: showElide - Layout.fillWidth: true - backendValue: backendValues.maximumLineCount - minimumValue: 0 - maximumValue: 10000 - decimals: 0 - enabled: backendValue.isAvailable - } - - Label { - text: qsTr("Alignment") - } - - Row { - AligmentHorizontalButtons {} - - Item { - visible: showVerticalAlignment - width: 20 - height: 2 + SecondColumnLayout { + SpinBox { + visible: root.showElide + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.maximumLineCount + minimumValue: 0 + maximumValue: 10000 + decimals: 0 + enabled: backendValue.isAvailable } - AligmentVerticalButtons { visible: showVerticalAlignment } + ExpandingSpacer {} } - Label { - visible: showFormatProperty + 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 { + visible: root.showFormatProperty text: qsTr("Format") disabledState: !backendValues.textFormat.isAvailable } - ComboBox { - scope: "Text" - visible: showFormatProperty - model: ["PlainText", "RichText", "AutoText"] - backendValue: backendValues.textFormat - Layout.fillWidth: true - enabled: backendValue.isAvailable + + SecondColumnLayout { + ComboBox { + visible: root.showFormatProperty + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + scope: "Text" + model: ["PlainText", "RichText", "AutoText"] + backendValue: backendValues.textFormat + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} } - Label { + PropertyLabel { text: qsTr("Render type") - toolTip: qsTr("Overrides the default rendering type for this component.") + tooltip: qsTr("Overrides the default rendering type for this component.") disabledState: !backendValues.renderType.isAvailable } - ComboBox { - scope: "Text" - model: ["QtRendering", "NativeRendering"] - backendValue: backendValues.renderType - Layout.fillWidth: true - enabled: backendValue.isAvailable + + SecondColumnLayout { + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + scope: "Text" + model: ["QtRendering", "NativeRendering"] + backendValue: backendValues.renderType + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} } - Label { - visible: showFontSizeMode - text: qsTr("Font size mode") - toolTip: qsTr("Specifies how the font size of the displayed text is determined.") + PropertyLabel { + visible: root.showFontSizeMode + text: qsTr("Size mode") + tooltip: qsTr("Specifies how the font size of the displayed text is determined.") disabledState: !backendValues.fontSizeMode.isAvailable } - ComboBox { - id: fontSizeMode - visible: showFontSizeMode - scope: "Text" - model: ["FixedSize", "HorizontalFit", "VerticalFit", "Fit"] - backendValue: backendValues.fontSizeMode - Layout.fillWidth: true - enabled: backendValue.isAvailable + + SecondColumnLayout { + ComboBox { + id: fontSizeMode + visible: root.showFontSizeMode + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + scope: "Text" + model: ["FixedSize", "HorizontalFit", "VerticalFit", "Fit"] + backendValue: backendValues.fontSizeMode + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} } - Label { - visible: showFontSizeMode - text: qsTr("Minimum size") + PropertyLabel { + visible: root.showFontSizeMode + text: qsTr("Min size") disabledState: !backendValues.minimumPixelSize.isAvailable && !backendValues.minimumPointSize.isAvailable } + SecondColumnLayout { - visible: showFontSizeMode + visible: root.showFontSizeMode SpinBox { enabled: (fontSizeMode.currentIndex !== 0) || backendValue.isAvailable @@ -197,70 +279,87 @@ Section { maximumValue: 500 decimals: 0 backendValue: backendValues.minimumPixelSize - Layout.fillWidth: true - Layout.minimumWidth: 60 - } - Label { - text: qsTr("Pixel") - tooltip: qsTr("Minimum font pixel size of scaled text.") - width: 42 - disabledStateSoft: !backendValues.minimumPixelSize.isAvailable + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth } - Item { - width: 4 - height: 4 + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { + text: "px" + tooltip: qsTr("Minimum font pixel size of scaled text.") + //disabledStateSoft: !backendValues.minimumPixelSize.isAvailable } + Spacer { implicitWidth: StudioTheme.Values.controlGap } + SpinBox { enabled: (fontSizeMode.currentIndex !== 0) || backendValue.isAvailable minimumValue: 0 maximumValue: 500 decimals: 0 backendValue: backendValues.minimumPointSize - Layout.fillWidth: true - Layout.minimumWidth: 60 + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth } - Label { - text: qsTr("Point") + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { + text: "pt" tooltip: qsTr("Minimum font point size of scaled text.") - width: 42 - disabledStateSoft: !backendValues.minimumPointSize.isAvailable + //disabledStateSoft: !backendValues.minimumPointSize.isAvailable } + + ExpandingSpacer {} } - Label { - visible: showLineHeight + PropertyLabel { + visible: root.showLineHeight text: qsTr("Line height") tooltip: qsTr("Line height for the text.") disabledState: !lineHeightSpinBox.enabled } - SpinBox { - id: lineHeightSpinBox - visible: showLineHeight - Layout.fillWidth: true - backendValue: (backendValues.lineHeight === undefined) ? dummyBackendValue : backendValues.lineHeight - maximumValue: 500 - minimumValue: 0 - decimals: 2 - stepSize: 0.1 - enabled: backendValue.isAvailable + 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 {} } - Label { - visible: showLineHeight + PropertyLabel { + visible: root.showLineHeight text: qsTr("Line height mode") - toolTip: qsTr("Determines how the line height is specified.") + tooltip: qsTr("Determines how the line height is specified.") disabledState: !backendValues.lineHeightMode.isAvailable } - ComboBox { - visible: showLineHeight - scope: "Text" - model: ["ProportionalHeight", "FixedHeight"] - backendValue: backendValues.lineHeightMode - Layout.fillWidth: true - enabled: backendValue.isAvailable + + SecondColumnLayout { + ComboBox { + visible: root.showLineHeight + scope: "Text" + model: ["ProportionalHeight", "FixedHeight"] + backendValue: backendValues.lineHeightMode + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/TextExtrasSection.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/TextExtrasSection.qml new file mode 100644 index 00000000000..ce10809261d --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/TextExtrasSection.qml @@ -0,0 +1,252 @@ +/**************************************************************************** +** +** 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 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("Text Extras") + + property bool showElide: false + property bool showWrapMode: false + property bool showFormatProperty: false + property bool showFontSizeMode: false + property bool showLineHeight: false + + SectionLayout { + PropertyLabel { + visible: root.showWrapMode + text: qsTr("Wrap mode") + disabledState: !backendValues.wrapMode.isAvailable + } + + SecondColumnLayout { + visible: root.showWrapMode + + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + backendValue: backendValues.wrapMode + scope: "Text" + model: ["NoWrap", "WordWrap", "WrapAnywhere", "Wrap"] + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + visible: root.showElide + text: qsTr("Elide") + disabledState: !backendValues.elide.isAvailable + } + + SecondColumnLayout { + visible: root.showElide + + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + backendValue: backendValues.elide + scope: "Text" + model: ["ElideNone", "ElideLeft", "ElideMiddle", "ElideRight"] + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + visible: root.showFormatProperty + text: qsTr("Format") + disabledState: !backendValues.textFormat.isAvailable + } + + SecondColumnLayout { + visible: root.showFormatProperty + + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + scope: "Text" + model: ["PlainText", "RichText", "AutoText"] + backendValue: backendValues.textFormat + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + text: qsTr("Render type") + tooltip: qsTr("Overrides the default rendering type for this component.") + disabledState: !backendValues.renderType.isAvailable + } + + SecondColumnLayout { + ComboBox { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + scope: "Text" + model: ["QtRendering", "NativeRendering"] + backendValue: backendValues.renderType + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + visible: root.showLineHeight + text: qsTr("Line height mode") + tooltip: qsTr("Determines how the line height is specified.") + disabledState: !backendValues.lineHeightMode.isAvailable + } + + SecondColumnLayout { + visible: root.showLineHeight + + ComboBox { + scope: "Text" + model: ["ProportionalHeight", "FixedHeight"] + backendValue: backendValues.lineHeightMode + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + visible: root.showFontSizeMode + text: qsTr("Size mode") + tooltip: qsTr("Specifies how the font size of the displayed text is determined.") + disabledState: !backendValues.fontSizeMode.isAvailable + } + + SecondColumnLayout { + visible: root.showFontSizeMode + + ComboBox { + id: fontSizeMode + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth + scope: "Text" + model: ["FixedSize", "HorizontalFit", "VerticalFit", "Fit"] + backendValue: backendValues.fontSizeMode + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + visible: root.showFontSizeMode + text: qsTr("Min size") + disabledState: !backendValues.minimumPixelSize.isAvailable + && !backendValues.minimumPointSize.isAvailable + } + + SecondColumnLayout { + visible: root.showFontSizeMode + + SpinBox { + enabled: (fontSizeMode.currentIndex !== 0) || backendValue.isAvailable + minimumValue: 0 + maximumValue: 500 + decimals: 0 + backendValue: backendValues.minimumPixelSize + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { + text: "px" + tooltip: qsTr("Minimum font pixel size of scaled text.") + //disabledStateSoft: !backendValues.minimumPixelSize.isAvailable + } + + Spacer { implicitWidth: StudioTheme.Values.controlGap } + + SpinBox { + enabled: (fontSizeMode.currentIndex !== 0) || backendValue.isAvailable + minimumValue: 0 + maximumValue: 500 + decimals: 0 + backendValue: backendValues.minimumPointSize + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + } + + Spacer { implicitWidth: StudioTheme.Values.controlLabelGap } + + ControlLabel { + text: "pt" + tooltip: qsTr("Minimum font point size of scaled text.") + //disabledStateSoft: !backendValues.minimumPointSize.isAvailable + } + + ExpandingSpacer {} + } + + PropertyLabel { + visible: root.showElide + text: qsTr("Max line count") + tooltip: qsTr("Limits the number of lines that the text component will show.") + disabledState: !backendValues.maximumLineCount.isAvailable + } + + SecondColumnLayout { + visible: root.showElide + + SpinBox { + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + backendValue: backendValues.maximumLineCount + minimumValue: 0 + maximumValue: 10000 + decimals: 0 + enabled: backendValue.isAvailable + } + + ExpandingSpacer {} + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml index 38b7f4557fe..b7bc955873f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/UrlChooser.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. @@ -31,7 +31,7 @@ import QtQuickDesignerTheme 1.0 import QtQuick.Layouts 1.0 import QtQuick.Controls 2.5 -RowLayout { +Row { id: urlChooser property variant backendValue @@ -53,6 +53,9 @@ RowLayout { StudioControls.ComboBox { id: comboBox + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth // Note: highlightedIndex property isn't used because it has no setter and it doesn't reset // when the combobox is closed by focusing on some other control. property int hoverIndex: -1 @@ -175,8 +178,6 @@ RowLayout { onTextValueChanged: comboBox.setCurrentText(comboBox.textValue) - Layout.fillWidth: true - editable: true model: fileModel.fileNameModel @@ -205,8 +206,7 @@ RowLayout { onCompressedActivated: comboBox.handleActivate(index) - function handleActivate(index) - { + function handleActivate(index) { if (urlChooser.backendValue === undefined) return @@ -237,8 +237,7 @@ RowLayout { Connections { target: comboBox - function onStateChanged(state) - { + function onStateChanged(state) { // update currentIndex when the popup opens to override the default behavior in super classes // that selects currentIndex based on values in the combo box. if (comboBox.popup.opened) { @@ -251,8 +250,10 @@ RowLayout { } } - StudioControls.AbstractButton { - buttonIcon: StudioTheme.Constants.addFile + Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap } + + IconIndicator { + icon: StudioTheme.Constants.addFile iconColor: urlChooser.textColor onClicked: { fileModel.openFileDialog() diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir index 459d40da0d6..9d7c2cae5d6 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/qmldir @@ -7,45 +7,63 @@ BoolButtonRowButton 2.0 BoolButtonRowButton.qml Button 2.0 Button.qml ButtonRow 2.0 ButtonRow.qml ButtonRowButton 2.0 ButtonRowButton.qml +CharacterSection 2.0 CharacterSection.qml CheckBox 2.0 CheckBox.qml -ColorButton 2.0 ColorButton.qml -ColorCheckButton 2.0 ColorCheckButton.qml ColorEditor 2.0 ColorEditor.qml ColorLine 2.0 ColorLine.qml ColorLogic 2.0 ColorLogic.qml +ColorPalette 2.0 ColorPalette.qml +ColorPicker 2.0 ColorPicker.qml ComboBox 2.0 ComboBox.qml ComponentButton 2.0 ComponentButton.qml +ControlLabel 2.0 ControlLabel.qml +singleton Controller 2.0 Controller.qml +DoubleSpinBox 2.0 DoubleSpinBox.qml EditableListView 2.0 EditableListView.qml ExpandingSpacer 2.0 ExpandingSpacer.qml +ExpressionTextField 2.0 ExpressionTextField.qml ExtendedFunctionLogic 2.0 ExtendedFunctionLogic.qml +FlickableGeometrySection 2.0 FlickableGeometrySection.qml FlickableSection 2.0 FlickableSection.qml FontComboBox 2.0 FontComboBox.qml +FontExtrasSection 2.0 FontExtrasSection.qml FontSection 2.0 FontSection.qml FontStyleButtons 2.0 FontStyleButtons.qml +GradientDialogPopup 2.0 GradientDialogPopup.qml GradientLine 2.0 GradientLine.qml +GradientPopupIndicator 2.0 GradientPopupIndicator.qml GradientPresetList 2.0 GradientPresetList.qml GradientPresetTabContent 2.0 GradientPresetTabContent.qml +GradientPropertySpinBox 2.0 GradientPropertySpinBox.qml +HorizontalScrollBar 2.0 HorizontalScrollBar.qml HueSlider 2.0 HueSlider.qml +IconIndicator 2.0 IconIndicator.qml IconLabel 2.0 IconLabel.qml +ImagePreviewTooltipArea 2.0 ImagePreviewTooltipArea.qml +ImageSection 2.0 ImageSection.qml ItemFilterComboBox 2.0 ItemFilterComboBox.qml -ListViewComboBox 2.0 ListViewComboBox.qml Label 2.0 Label.qml LineEdit 2.0 LineEdit.qml +LinkIndicator2D 2.0 LinkIndicator2D.qml +ListViewComboBox 2.0 ListViewComboBox.qml +MarginSection 2.0 MarginSection.qml +MultiIconLabel 2.0 MultiIconLabel.qml +OpacitySlider 2.0 OpacitySlider.qml OriginControl 2.0 OriginControl.qml +OriginIndicator 2.0 OriginIndicator.qml +OriginSelector 2.0 OriginSelector.qml +PropertyLabel 2.0 PropertyLabel.qml +PaddingSection 2.0 PaddingSection.qml +RoundedPanel 2.0 RoundedPanel.qml ScrollView 2.0 ScrollView.qml SecondColumnLayout 2.0 SecondColumnLayout.qml Section 2.0 Section.qml SectionLayout 2.0 SectionLayout.qml SimpleColorPalette 2.0 SimpleColorPalette.qml -DoubleSpinBox 2.0 DoubleSpinBox.qml +Spacer 2.0 Spacer.qml SpinBox 2.0 SpinBox.qml StandardTextSection 2.0 StandardTextSection.qml +TextExtrasSection 2.0 TextExtrasSection.qml ToolTipArea 2.0 ToolTipArea.qml UrlChooser 2.0 UrlChooser.qml -PaddingSection 2.0 PaddingSection.qml -RoundedPanel 2.0 RoundedPanel.qml -ExpressionTextField 2.0 ExpressionTextField.qml -MarginSection 2.0 MarginSection.qml -HorizontalScrollBar 2.0 HorizontalScrollBar.qml VerticalScrollBar 2.0 VerticalScrollBar.qml -ImagePreviewTooltipArea 2.0 ImagePreviewTooltipArea.qml diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml index 759a3b01a10..1a60dac1cd7 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/AbstractButton.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.AbstractButton { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml index 8d68e467b5f..cabd4d2e68a 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ActionIndicator.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme Rectangle { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Button.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Button.qml index f707288cb56..7b3a5efb2ed 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Button.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Button.qml @@ -23,9 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T -import StudioTheme 1.0 as StudioTheme +import QtQuick 2.15 +import StudioControls 1.0 ButtonRow { id: myButtonRow diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonGroup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonGroup.qml index 2b8f2d67ac6..7d5f40f3c70 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonGroup.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonGroup.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T T.ButtonGroup { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml index edc60655d37..71fc2ec9016 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ButtonRow.qml @@ -23,9 +23,9 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Layouts 1.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme Row { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml index ab834856ad6..bc5f23f905b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckBox.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.CheckBox { @@ -43,6 +43,9 @@ T.CheckBox { property alias labelVisible: checkBoxLabel.visible property alias labelColor: checkBoxLabel.color + property alias fontFamily: checkBoxLabel.font.family + property alias fontPixelSize: checkBoxLabel.font.pixelSize + font.pixelSize: StudioTheme.Values.myFontSize implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml index 049942acf86..57dbc5e8f4f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/CheckIndicator.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme Rectangle { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml index 625c262799b..071772d0f1b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBox.qml @@ -22,9 +22,10 @@ ** be met: https://www.gnu.org/licenses/gpl-3.0.html. ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Window 2.12 -import QtQuick.Templates 2.12 as T + +import QtQuick 2.15 +import QtQuick.Window 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.ComboBox { @@ -132,12 +133,19 @@ T.ComboBox { + 2 : 0) // TODO Magic number height: StudioTheme.Values.height - 2 * StudioTheme.Values.border padding: 0 + enabled: model.test === "undefined" ? true : model.test // TODO modelData contentItem: Text { leftPadding: itemDelegateIconArea.width - text: myComboBox.textRole ? (Array.isArray(myComboBox.model) ? modelData[myComboBox.textRole] : model[myComboBox.textRole]) : modelData - color: myItemDelegate.highlighted ? StudioTheme.Values.themeTextSelectedTextColor - : StudioTheme.Values.themeTextColor + text: myComboBox.textRole ? (Array.isArray(myComboBox.model) ? modelData[myComboBox.textRole] + : model[myComboBox.textRole]) : modelData + color: { + if (!myItemDelegate.enabled) + return StudioTheme.Values.themeTextColorDisabled + + return myItemDelegate.highlighted ? StudioTheme.Values.themeTextSelectedTextColor + : StudioTheme.Values.themeTextColor + } font: myComboBox.font elide: Text.ElideRight verticalAlignment: Text.AlignVCenter diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml index 5945837ebf7..ae995e6dbcd 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ComboBoxInput.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme TextInput { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ContextMenu.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ContextMenu.qml index 3b122e78b67..1a34178b086 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ContextMenu.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ContextMenu.qml @@ -23,7 +23,7 @@ ** ****************************************************************************/ -import QtQuick 2.12 +import QtQuick 2.15 Menu { id: contextMenu diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/InfinityLoopIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/InfinityLoopIndicator.qml new file mode 100644 index 00000000000..9a7e7be6b08 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/InfinityLoopIndicator.qml @@ -0,0 +1,92 @@ +/**************************************************************************** +** +** 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.Templates 2.15 as T +import StudioTheme 1.0 as StudioTheme + +Rectangle { + id: infinityLoopIndicator + + property Item myControl + + property bool infinite: false + + color: "transparent" + border.color: "transparent" + + implicitWidth: StudioTheme.Values.infinityControlWidth + implicitHeight: StudioTheme.Values.infinityControlHeight + + z: 10 + + T.Label { + id: infinityLoopIndicatorIcon + anchors.fill: parent + text: StudioTheme.Constants.infinity + visible: true + color: StudioTheme.Values.themeTextColor + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: StudioTheme.Values.myIconFontSize + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + onPressed: { + infinityLoopIndicator.infinite = !infinityLoopIndicator.infinite + } + } + + states: [ + State { + name: "active" + when: infinityLoopIndicator.infinite && !mouseArea.containsMouse + PropertyChanges { + target: infinityLoopIndicatorIcon + color: StudioTheme.Values.themeInfiniteLoopIndicatorColorInteraction + } + }, + State { + name: "default" + when: !mouseArea.containsMouse + PropertyChanges { + target: infinityLoopIndicatorIcon + color: StudioTheme.Values.themeInfiniteLoopIndicatorColor + } + }, + State { + name: "hover" + when: mouseArea.containsMouse + PropertyChanges { + target: infinityLoopIndicatorIcon + color: StudioTheme.Values.themeInfiniteLoopIndicatorColorHover + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ItemDelegate.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ItemDelegate.qml index 1a08091c315..8a9dfbf7066 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ItemDelegate.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ItemDelegate.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T T.ItemDelegate { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator2D.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator2D.qml new file mode 100644 index 00000000000..688fdfe7322 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator2D.qml @@ -0,0 +1,83 @@ +/**************************************************************************** +** +** 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.Templates 2.15 as T +import StudioTheme 1.0 as StudioTheme + +Rectangle { + id: linkIndicator + + property Item myControl + + property bool linked: false + + color: "transparent" + border.color: "transparent" + + implicitWidth: StudioTheme.Values.linkControlWidth + implicitHeight: StudioTheme.Values.linkControlHeight + + z: 10 + + T.Label { + id: linkIndicatorIcon + anchors.fill: parent + text: linkIndicator.linked ? StudioTheme.Constants.linked + : StudioTheme.Constants.unLinked + visible: true + color: StudioTheme.Values.themeTextColor + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: StudioTheme.Values.myIconFontSize + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + onPressed: linkIndicator.linked = !linkIndicator.linked + } + + states: [ + State { + name: "default" + when: !mouseArea.containsMouse + PropertyChanges { + target: linkIndicatorIcon + color: StudioTheme.Values.themeLinkIndicatorColor + } + }, + State { + name: "hover" + when: mouseArea.containsMouse + PropertyChanges { + target: linkIndicatorIcon + color: StudioTheme.Values.themeLinkIndicatorColorHover + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3D.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3D.qml new file mode 100644 index 00000000000..1c9b8162267 --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3D.qml @@ -0,0 +1,304 @@ +/**************************************************************************** +** +** 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.Shapes 1.15 +import QtQuick.Templates 2.15 as T +import StudioTheme 1.0 as StudioTheme + +Rectangle { + id: linkIndicator + + property Item myControl + + property bool linked: linkXZ.linked || linkYZ.linked || linkXY.linked + + color: "transparent" + border.color: "transparent" + + implicitWidth: StudioTheme.Values.height + implicitHeight: StudioTheme.Values.height + + z: 10 + + function linkAll() { + linkXY.linked = linkYZ.linked = linkXZ.linked = true + } + + function unlinkAll() { + linkXY.linked = linkYZ.linked = linkXZ.linked = false + } + + T.Label { + id: linkIndicatorIcon + anchors.fill: parent + text: linkIndicator.linked ? StudioTheme.Constants.linked + : StudioTheme.Constants.unLinked + visible: true + color: StudioTheme.Values.themeTextColor + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: StudioTheme.Values.myIconFontSize + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + + MouseArea { + id: mouseArea + anchors.fill: parent + hoverEnabled: true + onPressed: linkPopup.opened ? linkPopup.close() : linkPopup.open() + } + + T.Popup { + id: linkPopup + + x: 50 + y: 0 + + // TODO proper size + width: 20 + (3 * StudioTheme.Values.height) + height: 20 + (3 * StudioTheme.Values.height) + + padding: StudioTheme.Values.border + margins: 0 // If not defined margin will be -1 + + closePolicy: T.Popup.CloseOnPressOutside | T.Popup.CloseOnPressOutsideParent + | T.Popup.CloseOnEscape | T.Popup.CloseOnReleaseOutside + | T.Popup.CloseOnReleaseOutsideParent + + contentItem: Item { + id: content + anchors.fill: parent + + Rectangle { + width: triangle.diameter + height: triangle.diameter + anchors.centerIn: parent + color: "transparent" + + Shape { + // Kept for debugging purposes + id: triangle + + visible: false + + property real diameter: 30 * StudioTheme.Values.scaleFactor + property real radius: triangle.diameter * 0.5 + + width: triangle.diameter + height: triangle.diameter + + ShapePath { + id: path + + property real height: triangle.diameter * Math.cos(Math.PI / 6) + + property vector2d pX: Qt.vector2d(triangle.radius, 0) + property vector2d pY: Qt.vector2d(0, path.height) + property vector2d pZ: Qt.vector2d(triangle.diameter, path.height) + + property vector2d center: Qt.vector2d(triangle.radius, triangle.radius) + + strokeWidth: StudioTheme.Values.border + strokeColor: triangleMouseArea.containsMouse ? "white" : "gray" + strokeStyle: ShapePath.SolidLine + fillColor: "transparent" + + startX: path.pX.x + startY: path.pX.y + + PathLine { x: path.pY.x; y: path.pY.y } + PathLine { x: path.pZ.x; y: path.pZ.y } + PathLine { x: path.pX.x; y: path.pX.y } + } + } + + Item { + id: triangleMouseArea + + anchors.fill: parent + + property alias mouseX: tmpMouseArea.mouseX + property alias mouseY: tmpMouseArea.mouseY + + signal clicked + + function sign(p1, p2, p3) { + return (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y) + } + + function pointInTriangle(pt, v1, v2, v3) { + var d1 = sign(pt, v1, v2) + var d2 = sign(pt, v2, v3) + var d3 = sign(pt, v3, v1) + + var has_neg = (d1 < 0) || (d2 < 0) || (d3 < 0) + var has_pos = (d1 > 0) || (d2 > 0) || (d3 > 0) + + return !(has_neg && has_pos) + } + + property bool containsMouse: { + if (!tmpMouseArea.containsMouse) + return false + + var point = Qt.vector2d(triangleMouseArea.mouseX, triangleMouseArea.mouseY) + return pointInTriangle(point, path.pX, path.pZ, path.pY) + } + + + onClicked: { + if (linkXZ.linked && linkYZ.linked && linkXY.linked) + linkIndicator.unlinkAll() + else + linkIndicator.linkAll() + } + + MouseArea { + id: tmpMouseArea + anchors.fill: parent + hoverEnabled: true + acceptedButtons: Qt.LeftButton | Qt.RightButton + onClicked: { + if (triangleMouseArea.containsMouse) + triangleMouseArea.clicked() + } + } + } + + // https://stackoverflow.com/questions/38164074/how-to-create-a-round-mouse-area-in-qml + // https://stackoverflow.com/questions/2049582/how-to-determine-if-a-point-is-in-a-2d-triangle + + T.Label { + id: triangleIcon + anchors.fill: parent + anchors.bottomMargin: 3 * StudioTheme.Values.scaleFactor + text: StudioTheme.Constants.linkTriangle + visible: true + color: triangleMouseArea.containsMouse ? "white" : "gray" + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: StudioTheme.Values.myIconFontSize * 3 + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + + LinkIndicator3DComponent { + id: linkXZ + pointA: path.pX + pointB: path.pZ + rotation: 105 // 60 + } + + LinkIndicator3DComponent { + id: linkYZ + pointA: path.pZ + pointB: path.pY + rotation: 45 // -180 + } + + LinkIndicator3DComponent { + id: linkXY + pointA: path.pY + pointB: path.pX + rotation: -15 // -60 + } + + T.Label { + id: xIcon + x: path.pX.x - (xIcon.width * 0.5) + y: path.pX.y - xIcon.height + text: "X" + color: StudioTheme.Values.theme3DAxisXColor + + font.family: StudioTheme.Constants.font.family + font.pixelSize: StudioTheme.Values.myFontSize + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + T.Label { + id: yIcon + x: path.pY.x - yIcon.width - (4.0 * StudioTheme.Values.scaleFactor) + y: path.pY.y - (yIcon.height * 0.5) + text: "Y" + color: StudioTheme.Values.theme3DAxisYColor + + font.family: StudioTheme.Constants.font.family + font.pixelSize: StudioTheme.Values.myFontSize + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + T.Label { + id: zIcon + x: path.pZ.x + (4.0 * StudioTheme.Values.scaleFactor) + y: path.pZ.y - (zIcon.height * 0.5) + text: "Z" + color: StudioTheme.Values.theme3DAxisZColor + + font.family: StudioTheme.Constants.font.family + font.pixelSize: StudioTheme.Values.myFontSize + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + + } + } + + background: Rectangle { + color: StudioTheme.Values.themeControlBackground + border.color: StudioTheme.Values.themeInteraction + border.width: StudioTheme.Values.border + } + + enter: Transition {} + exit: Transition {} + } + + states: [ + State { + name: "default" + when: !mouseArea.containsMouse && !linkPopup.opened + PropertyChanges { + target: linkIndicatorIcon + color: StudioTheme.Values.themeLinkIndicatorColor + } + }, + State { + name: "hover" + when: mouseArea.containsMouse && !linkPopup.opened + PropertyChanges { + target: linkIndicatorIcon + color: StudioTheme.Values.themeLinkIndicatorColorHover + } + }, + State { + name: "active" + when: linkPopup.opened + PropertyChanges { + target: linkIndicatorIcon + color: StudioTheme.Values.themeLinkIndicatorColorInteraction + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3DComponent.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3DComponent.qml new file mode 100644 index 00000000000..a6a5173206b --- /dev/null +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/LinkIndicator3DComponent.qml @@ -0,0 +1,101 @@ +/**************************************************************************** +** +** 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.Templates 2.15 as T +import StudioTheme 1.0 as StudioTheme + +Rectangle { + id: root + + property var pointA: Qt.vector2d() + property var pointB: Qt.vector2d() + + property bool linked: false + + property var middle: { + var ab = root.pointB.minus(root.pointA) // B - A + return root.pointA.plus(ab.normalized().times(ab.length() * 0.5)) + } + + property var position: { + // Calculate the middle point between A and B + var ab = root.pointB.minus(root.pointA) // B - A + var midAB = root.pointA.plus(ab.normalized().times(ab.length() * 0.5)) + var perpendicularAB = Qt.vector2d(ab.y, -ab.x) + return midAB.plus(perpendicularAB.normalized().times(8.0 * StudioTheme.Values.scaleFactor)) + } + + color: "transparent" + border.color: "transparent" + + x: root.position.x - (StudioTheme.Values.height * 0.5) + y: root.position.y - (StudioTheme.Values.height * 0.5) + + implicitWidth: StudioTheme.Values.height + implicitHeight: StudioTheme.Values.height + + transformOrigin: Item.Center + + T.Label { + id: icon + anchors.fill: parent + text: root.linked ? StudioTheme.Constants.linked + : StudioTheme.Constants.unLinked + visible: true + color: "grey" + font.family: StudioTheme.Constants.iconFont.family + font.pixelSize: StudioTheme.Values.myIconFontSize + verticalAlignment: Text.AlignVCenter + horizontalAlignment: Text.AlignHCenter + } + + MouseArea { + id: mouseArea + anchors.fill: parent + anchors.margins: 4.0 * StudioTheme.Values.scaleFactor + hoverEnabled: true + onPressed: root.linked = !root.linked + } + + states: [ + State { + name: "default" + when: !mouseArea.containsMouse + PropertyChanges { + target: icon + color: "grey"//StudioTheme.Values.themeControlBackground + } + }, + State { + name: "hover" + when: mouseArea.containsMouse + PropertyChanges { + target: icon + color: "white"//StudioTheme.Values.themeHoverHighlight + } + } + ] +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml index 327eafcf08f..9a008c7fd9a 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Menu.qml @@ -23,9 +23,9 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Window 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Window 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.Menu { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItem.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItem.qml index 0b3f0685b29..c4bbcd7cb9f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItem.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItem.qml @@ -23,10 +23,10 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme -import QtQuick.Controls 2.12 T.MenuItem { id: control diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItemWithIcon.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItemWithIcon.qml index d8493d2c022..650f34199f5 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItemWithIcon.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuItemWithIcon.qml @@ -23,10 +23,10 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme -import QtQuick.Controls 2.12 T.MenuItem { id: control diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuSeparator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuSeparator.qml index 634d2e6e737..3ffbf6d80f5 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuSeparator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/MenuSeparator.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.MenuSeparator { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSliderPopup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSliderPopup.qml index 96027373ee1..bff449a686b 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSliderPopup.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSliderPopup.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.Popup { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml index a1f10d318d1..9f11b0d972c 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBox.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.SpinBox { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml index 30233272967..a721b8271ae 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxIndicator.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme Rectangle { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxInput.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxInput.qml index aa2603273c5..a47f1f708a7 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxInput.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/RealSpinBoxInput.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme TextInput { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollBar.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollBar.qml index 094a54e7283..fed032a4653 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollBar.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollBar.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.ScrollBar { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml index 3cb222a50eb..56ec9d8543c 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/ScrollView.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.ScrollView { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SecondColumnLayout.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SecondColumnLayout.qml index 0214ae46ddf..e0e6b20c3ae 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SecondColumnLayout.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SecondColumnLayout.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Layouts 1.12 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 RowLayout { Layout.fillWidth: true diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Section.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Section.qml index e115b13eded..2178baddf69 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Section.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Section.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Layouts 1.12 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 import StudioTheme 1.0 as StudioTheme Item { @@ -62,7 +62,7 @@ Item { id: arrow width: StudioTheme.Values.spinControlIconSizeMulti height: StudioTheme.Values.spinControlIconSizeMulti - text: StudioTheme.Constants.startNode + text: StudioTheme.Constants.sectionToggle color: StudioTheme.Values.themeTextColor renderType: Text.NativeRendering anchors.left: parent.left @@ -88,11 +88,11 @@ Item { } } - default property alias __content: row.children + default property alias __content: column.children - readonly property alias contentItem: row + readonly property alias contentItem: column - implicitHeight: Math.round(row.height + header.height + topRow.height + bottomRow.height) + implicitHeight: Math.round(column.height + header.height + topRow.height + bottomRow.height) Row { id: topRow @@ -100,8 +100,8 @@ Item { anchors.top: header.bottom } - Row { - id: row + Column { + id: column anchors.left: parent.left anchors.leftMargin: leftPadding anchors.right: parent.right @@ -112,7 +112,7 @@ Item { Row { id: bottomRow height: StudioTheme.Values.sectionHeadSpacerHeight - anchors.top: row.bottom + anchors.top: column.bottom } Behavior on implicitHeight { @@ -128,7 +128,7 @@ Item { when: section.expanded PropertyChanges { target: arrow - rotation: 90 + rotation: 0 } }, State { @@ -140,7 +140,7 @@ Item { } PropertyChanges { target: arrow - rotation: 0 + rotation: -90 } } ] diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLabel.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLabel.qml index a05f3b673ab..d457c3baf9f 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLabel.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLabel.qml @@ -23,18 +23,14 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Layouts 1.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.Label { id: label - //property alias tooltip: toolTipArea.tooltip - // workaround because PictureSpecifics.qml still use this - //property alias toolTip: toolTipArea.tooltip - width: Math.max(Math.min(240, parent.width - 220), 90) color: StudioTheme.Values.themeTextColor font.pixelSize: StudioTheme.Values.myFontSize // TODO @@ -43,11 +39,4 @@ T.Label { Layout.preferredWidth: width Layout.minimumWidth: width Layout.maximumWidth: width -/* - ToolTipArea { - id: toolTipArea - anchors.fill: parent - tooltip: label.text - } -*/ } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLayout.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLayout.qml index cf1561862d2..4dabcf4b8a9 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLayout.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SectionLayout.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Layouts 1.12 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 import StudioTheme 1.0 as StudioTheme GridLayout { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml index 0a260618be7..ddb6c165c61 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/Slider.qml @@ -23,9 +23,9 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Shapes 1.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Shapes 1.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.Slider { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml index 7077de4eaad..6dd4de84f8c 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SliderPopup.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.Popup { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml index 673515fdedd..98f20c303a5 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBox.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.SpinBox { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml index e65fe117a68..17d7ac7eb34 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxIndicator.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme Rectangle { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml index 9776f407215..4d0432d3f38 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/SpinBoxInput.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme TextInput { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabBar.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabBar.qml index c8a55ca74d4..95a092f9fac 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabBar.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabBar.qml @@ -34,14 +34,11 @@ T.TabBar { implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) - spacing: 0 - bottomPadding: 2 contentItem: ListView { model: myButton.contentModel currentIndex: myButton.currentIndex - spacing: myButton.spacing orientation: ListView.Horizontal boundsBehavior: Flickable.StopAtBounds @@ -50,6 +47,6 @@ T.TabBar { } background: Rectangle { - color: StudioTheme.Values.themeTabActiveBackground + color: StudioTheme.Values.themePanelBackground } } diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabButton.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabButton.qml index 9e73544cbc7..fe34a886a8d 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabButton.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TabButton.qml @@ -35,20 +35,21 @@ T.TabButton { implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) - padding: 1 + padding: 4 background: Rectangle { id: buttonBackground - color: myButton.checked ? StudioTheme.Values.themeTabActiveBackground - : StudioTheme.Values.themeTabInactiveBackground - border.width: 0 + color: myButton.checked ? StudioTheme.Values.themeInteraction + : "transparent" + border.width: StudioTheme.Values.border + border.color: StudioTheme.Values.themeInteraction } contentItem: T.Label { id: buttonIcon - color: myButton.checked ? StudioTheme.Values.themeTabActiveText - : StudioTheme.Values.themeTabInactiveText - font.weight: Font.Bold + color: myButton.checked ? StudioTheme.Values.themeControlBackground + : StudioTheme.Values.themeInteraction + //font.weight: Font.Bold //font.family: StudioTheme.Constants.font.family font.pixelSize: StudioTheme.Values.myFontSize verticalAlignment: Text.AlignVCenter diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml index ec155136b04..62881454189 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextArea.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme TextField { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml index 5351514731b..17fbe899c42 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TextField.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme T.TextField { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TranslationIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TranslationIndicator.qml index 6c20f933d02..2d7ca74f16c 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TranslationIndicator.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/TranslationIndicator.qml @@ -23,8 +23,8 @@ ** ****************************************************************************/ -import QtQuick 2.12 -import QtQuick.Templates 2.12 as T +import QtQuick 2.15 +import QtQuick.Templates 2.15 as T import StudioTheme 1.0 as StudioTheme Item { diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir index e59dd1f3d79..59ce7044af1 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioControls/qmldir @@ -8,8 +8,11 @@ CheckIndicator 1.0 CheckIndicator.qml ComboBox 1.0 ComboBox.qml ComboBoxInput 1.0 ComboBoxInput.qml ContextMenu 1.0 ContextMenu.qml -ExpandingSpacer 1.0 ExpandingSpacer.qml +InfinityLoopIndicator 1.0 InfinityLoopIndicator.qml ItemDelegate 1.0 ItemDelegate.qml +LinkIndicator2D 1.0 LinkIndicator2D.qml +LinkIndicator3D 1.0 LinkIndicator3D.qml +LinkIndicator3DComponent 1.0 LinkIndicator3DComponent.qml Menu 1.0 Menu.qml MenuItem 1.0 MenuItem.qml MenuItemWithIcon 1.0 MenuItemWithIcon.qml diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml index bdbc8d95fc7..3555e73099e 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/InternalConstants.qml @@ -70,88 +70,99 @@ QtObject { readonly property string centerHorizontal: "\u0041" readonly property string centerVertical: "\u0042" readonly property string closeCross: "\u0043" - readonly property string copyStyle: "\u0044" - readonly property string cornerA: "\u0045" - readonly property string cornerB: "\u0046" - readonly property string cornersAll: "\u0047" - readonly property string curveDesigner: "\u0048" - readonly property string curveEditor: "\u0049" - readonly property string decisionNode: "\u004A" - readonly property string deleteColumn: "\u004B" - readonly property string deleteRow: "\u004C" - readonly property string deleteTable: "\u004D" - readonly property string detach: "\u004E" - readonly property string distributeBottom: "\u004F" - readonly property string distributeCenterHorizontal: "\u0050" - readonly property string distributeCenterVertical: "\u0051" - readonly property string distributeLeft: "\u0052" - readonly property string distributeOriginBottomRight: "\u0053" - readonly property string distributeOriginCenter: "\u0054" - readonly property string distributeOriginNone: "\u0055" - readonly property string distributeOriginTopLeft: "\u0056" - readonly property string distributeRight: "\u0057" - readonly property string distributeSpacingHorizontal: "\u0058" - readonly property string distributeSpacingVertical: "\u0059" - readonly property string distributeTop: "\u005A" - readonly property string edit: "\u005B" - readonly property string eyeDropper: "\u005C" - readonly property string flowAction: "\u005D" - readonly property string flowTransition: "\u005E" - readonly property string fontStyleBold: "\u005F" - readonly property string fontStyleItalic: "\u0060" - readonly property string fontStyleStrikethrough: "\u0061" - readonly property string fontStyleUnderline: "\u0062" - readonly property string gradient: "\u0063" - readonly property string gridView: "\u0064" - readonly property string idAliasOff: "\u0065" - readonly property string idAliasOn: "\u0066" - readonly property string keyframe: "\u0067" - readonly property string linkTriangle: "\u0068" - readonly property string linked: "\u0069" - readonly property string listView: "\u006A" - readonly property string lockOff: "\u006B" - readonly property string lockOn: "\u006C" - readonly property string mergeCells: "\u006D" - readonly property string minus: "\u006E" - readonly property string mirror: "\u006F" - readonly property string paddingEdge: "\u0070" - readonly property string paddingFrame: "\u0071" - readonly property string pasteStyle: "\u0072" - readonly property string pin: "\u0073" - readonly property string plus: "\u0074" - readonly property string promote: "\u0075" - readonly property string redo: "\u0076" - readonly property string rotationFill: "\u0077" - readonly property string rotationOutline: "\u0078" - readonly property string search: "\u0079" - readonly property string splitColumns: "\u007A" - readonly property string splitRows: "\u007B" - readonly property string startNode: "\u007C" - readonly property string testIcon: "\u007D" - readonly property string textAlignBottom: "\u007E" - readonly property string textAlignCenter: "\u007F" - readonly property string textAlignLeft: "\u0080" - readonly property string textAlignMiddle: "\u0081" - readonly property string textAlignRight: "\u0082" - readonly property string textAlignTop: "\u0083" - readonly property string textBulletList: "\u0084" - readonly property string textFullJustification: "\u0085" - readonly property string textNumberedList: "\u0086" - readonly property string tickIcon: "\u0087" - readonly property string transparent: "\u0088" - readonly property string triState: "\u0089" - readonly property string unLinked: "\u008A" - readonly property string undo: "\u008B" - readonly property string unpin: "\u008C" - readonly property string upDownIcon: "\u008D" - readonly property string upDownSquare2: "\u008E" - readonly property string visibilityOff: "\u008F" - readonly property string visibilityOn: "\u0090" - readonly property string wildcard: "\u0091" - readonly property string zoomAll: "\u0092" - readonly property string zoomIn: "\u0093" - readonly property string zoomOut: "\u0094" - readonly property string zoomSelection: "\u0095" + readonly property string colorPopupClose: "\u0044" + readonly property string columnsAndRows: "\u0045" + readonly property string copyStyle: "\u0046" + readonly property string cornerA: "\u0047" + readonly property string cornerB: "\u0048" + readonly property string cornersAll: "\u0049" + readonly property string curveDesigner: "\u004A" + readonly property string curveEditor: "\u004B" + readonly property string decisionNode: "\u004C" + readonly property string deleteColumn: "\u004D" + readonly property string deleteRow: "\u004E" + readonly property string deleteTable: "\u004F" + readonly property string detach: "\u0050" + readonly property string distributeBottom: "\u0051" + readonly property string distributeCenterHorizontal: "\u0052" + readonly property string distributeCenterVertical: "\u0053" + readonly property string distributeLeft: "\u0054" + readonly property string distributeOriginBottomRight: "\u0055" + readonly property string distributeOriginCenter: "\u0056" + readonly property string distributeOriginNone: "\u0057" + readonly property string distributeOriginTopLeft: "\u0058" + readonly property string distributeRight: "\u0059" + readonly property string distributeSpacingHorizontal: "\u005A" + readonly property string distributeSpacingVertical: "\u005B" + readonly property string distributeTop: "\u005C" + readonly property string edit: "\u005D" + readonly property string eyeDropper: "\u005E" + readonly property string flowAction: "\u005F" + readonly property string flowTransition: "\u0060" + readonly property string fontStyleBold: "\u0061" + readonly property string fontStyleItalic: "\u0062" + readonly property string fontStyleStrikethrough: "\u0063" + readonly property string fontStyleUnderline: "\u0064" + readonly property string gradient: "\u0065" + readonly property string gridView: "\u0066" + readonly property string idAliasOff: "\u0067" + readonly property string idAliasOn: "\u0068" + readonly property string infinity: "\u0069" + readonly property string keyframe: "\u006A" + readonly property string linkTriangle: "\u006B" + readonly property string linked: "\u006C" + readonly property string listView: "\u006D" + readonly property string lockOff: "\u006E" + readonly property string lockOn: "\u006F" + readonly property string mergeCells: "\u0070" + readonly property string minus: "\u0071" + readonly property string mirror: "\u0072" + readonly property string orientation: "\u0073" + readonly property string paddingEdge: "\u0074" + readonly property string paddingFrame: "\u0075" + readonly property string pasteStyle: "\u0076" + readonly property string pause: "\u0077" + readonly property string pin: "\u0078" + readonly property string play: "\u0079" + readonly property string plus: "\u007A" + readonly property string promote: "\u007B" + readonly property string redo: "\u007C" + readonly property string rotationFill: "\u007D" + readonly property string rotationOutline: "\u007E" + readonly property string search: "\u007F" + readonly property string sectionToggle: "\u0080" + readonly property string splitColumns: "\u0081" + readonly property string splitRows: "\u0082" + readonly property string startNode: "\u0083" + readonly property string testIcon: "\u0084" + readonly property string textAlignBottom: "\u0085" + readonly property string textAlignCenter: "\u0086" + readonly property string textAlignLeft: "\u0087" + readonly property string textAlignMiddle: "\u0088" + readonly property string textAlignRight: "\u0089" + readonly property string textAlignTop: "\u008A" + readonly property string textBulletList: "\u008B" + readonly property string textFullJustification: "\u008C" + readonly property string textNumberedList: "\u008D" + readonly property string tickIcon: "\u008E" + readonly property string transparent: "\u008F" + readonly property string triState: "\u0090" + readonly property string triangleArcA: "\u0091" + readonly property string triangleArcB: "\u0092" + readonly property string triangleCornerA: "\u0093" + readonly property string triangleCornerB: "\u0094" + readonly property string unLinked: "\u0095" + readonly property string undo: "\u0096" + readonly property string unpin: "\u0097" + readonly property string upDownIcon: "\u0098" + readonly property string upDownSquare2: "\u0099" + readonly property string visibilityOff: "\u009A" + readonly property string visibilityOn: "\u009B" + readonly property string wildcard: "\u009C" + readonly property string zoomAll: "\u009D" + readonly property string zoomIn: "\u009E" + readonly property string zoomOut: "\u009F" + readonly property string zoomSelection: "\u00A0" readonly property font iconFont: Qt.font({ "family": controlIcons.name, diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml index 4fd5c23c6c8..cbba4a8f3ab 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml @@ -24,7 +24,7 @@ ****************************************************************************/ pragma Singleton -import QtQuick 2.12 +import QtQuick 2.15 import QtQuickDesignerTheme 1.0 QtObject { @@ -86,21 +86,30 @@ QtObject { property int toolTipDelay: 1000 // Layout sizes - property real sectionColumnSpacing: 30 // distance between label and sliderControlSize + property real sectionColumnSpacing: 20 // distance between label and sliderControlSize property real sectionRowSpacing: 5 property real sectionHeadGap: 15 property real sectionHeadHeight: 21 // tab and section - property real sectionHeadSpacerHeight: 15 + property real sectionHeadSpacerHeight: 10 property real controlLabelWidth: 15 property real controlLabelGap: 5 - property real controlGap: 5 // TODO different name + property real controlGap: 5 // TODO different name + property real twoControlColumnGap: values.controlLabelGap + + values.controlLabelWidth + + values.controlGap property real columnGap: 10 property real iconAreaWidth: Math.round(21 * values.scaleFactor) + property real linkControlWidth: values.iconAreaWidth + property real linkControlHeight: values.height + + property real infinityControlWidth: values.iconAreaWidth + property real infinityControlHeight: values.height + // Control sizes property real defaultControlWidth: values.squareComponentWidth * 5 @@ -121,6 +130,68 @@ QtObject { property real checkIndicatorWidth: values.squareComponentWidth property real checkIndicatorHeight: values.height + property real singleControlColumnWidth: 2 * values.twoControlColumnWidth + + values.twoControlColumnGap + + values.actionIndicatorWidth + + property real twoControlColumnWidthMin: 3 * values.height - 2 * values.border + property real twoControlColumnWidthMax: 3 * values.twoControlColumnWidthMin + property real twoControlColumnWidth: values.twoControlColumnWidthMin + + property real controlColumnWithoutControlsWidth: 2 * (values.actionIndicatorWidth + + values.twoControlColumnGap) + + values.linkControlWidth + + property real controlColumnWidth: values.controlColumnWithoutControlsWidth + + 2 * values.twoControlColumnWidth + + property real controlColumnWidthMin: values.controlColumnWithoutControlsWidth + + 2 * values.twoControlColumnWidthMin + + property real propertyLabelWidthMin: 80 + property real propertyLabelWidthMax: 120 + property real propertyLabelWidth: values.propertyLabelWidthMin + + property real sectionLeftPadding: 8 + property real sectionLayoutRightPadding: values.scrollBarThickness + 6 + + property real columnFactor: values.propertyLabelWidthMin + / (values.propertyLabelWidthMin + values.controlColumnWidthMin) + + function responsiveResize(width) { + var tmpWidth = width - values.sectionColumnSpacing + - values.sectionLeftPadding - values.sectionLayoutRightPadding + var labelColumnWidth = Math.round(tmpWidth * values.columnFactor) + labelColumnWidth = Math.max(Math.min(values.propertyLabelWidthMax, labelColumnWidth), + values.propertyLabelWidthMin) + + var controlColumnWidth = tmpWidth - labelColumnWidth + var controlWidth = Math.round((controlColumnWidth - values.controlColumnWithoutControlsWidth) * 0.5) + controlWidth = Math.max(Math.min(values.twoControlColumnWidthMax, controlWidth), + values.twoControlColumnWidthMin) + + values.propertyLabelWidth = labelColumnWidth + values.twoControlColumnWidth = controlWidth + } + + // Color Editor Popup + property real colorEditorPopupWidth: 4 * values.colorEditorPopupSpinBoxWidth + + 3 * values.controlGap + + 2 * values.colorEditorPopupMargin + property real colorEditorPopupHeight: 800 + property real colorEditorPopupMargin: 10 + + property real colorEditorPopupSpacing: 10 + property real colorEditorPopupLineHeight: 60 + + property real hueSliderHeight: 20 + property real hueSliderHandleWidth: 10 + + property real colorEditorPopupCmoboBoxWidth: 110 + property real colorEditorPopupSpinBoxWidth: 54 + + property real colorEditorPopupHexLabelWidth: 20 + // Theme Colors property string themePanelBackground: Theme.color(Theme.DSpanelBackground) @@ -161,6 +232,10 @@ QtObject { property string themeLinkIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction) property string themeLinkIndicatorColorDisabled: Theme.color(Theme.DSlinkIndicatorColorDisabled) + property string themeInfiniteLoopIndicatorColor: Theme.color(Theme.DSlinkIndicatorColor) + property string themeInfiniteLoopIndicatorColorHover: Theme.color(Theme.DSlinkIndicatorColorHover) + property string themeInfiniteLoopIndicatorColorInteraction: Theme.color(Theme.DSlinkIndicatorColorInteraction) + // Popup background color (ComboBox, SpinBox, TextArea) property string themePopupBackground: Theme.color(Theme.DSpopupBackground) // GradientPopupDialog modal overly color diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/icons.ttf b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/icons.ttf index fb3e387077f..ac03fccb50c 100644 Binary files a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/icons.ttf and b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/icons.ttf differ diff --git a/src/plugins/qmldesigner/CMakeLists.txt b/src/plugins/qmldesigner/CMakeLists.txt index d4d498d503b..109368c0e5e 100644 --- a/src/plugins/qmldesigner/CMakeLists.txt +++ b/src/plugins/qmldesigner/CMakeLists.txt @@ -353,6 +353,7 @@ extend_qtc_plugin(QmlDesigner SOURCES_PREFIX components/propertyeditor SOURCES aligndistribute.cpp aligndistribute.h + colorpalettesingleton.cpp colorpalettesingleton.h designerpropertymap.cpp designerpropertymap.h fileresourcesmodel.cpp fileresourcesmodel.h itemfiltermodel.cpp itemfiltermodel.h @@ -367,9 +368,6 @@ extend_qtc_plugin(QmlDesigner propertyeditorvalue.cpp propertyeditorvalue.h propertyeditorview.cpp propertyeditorview.h propertyeditorwidget.cpp propertyeditorwidget.h - simplecolorpalette.cpp simplecolorpalette.h - simplecolorpalettemodel.cpp simplecolorpalettemodel.h - simplecolorpalettesingleton.cpp simplecolorpalettesingleton.h tooltip.cpp tooltip.h qmlanchorbindingproxy.cpp qmlanchorbindingproxy.h qmlmodelnodeproxy.cpp qmlmodelnodeproxy.h diff --git a/src/plugins/qmldesigner/components/componentcore/theme.h b/src/plugins/qmldesigner/components/componentcore/theme.h index 3d7ed9cd327..9f21d8476da 100644 --- a/src/plugins/qmldesigner/components/componentcore/theme.h +++ b/src/plugins/qmldesigner/components/componentcore/theme.h @@ -78,6 +78,8 @@ public: centerHorizontal, centerVertical, closeCross, + colorPopupClose, + columnsAndRows, copyStyle, cornerA, cornerB, @@ -113,6 +115,7 @@ public: gridView, idAliasOff, idAliasOn, + infinity, keyframe, linkTriangle, linked, @@ -122,16 +125,20 @@ public: mergeCells, minus, mirror, + orientation, paddingEdge, paddingFrame, pasteStyle, + pause, pin, + play, plus, promote, redo, rotationFill, rotationOutline, search, + sectionToggle, splitColumns, splitRows, startNode, @@ -148,6 +155,10 @@ public: tickIcon, transparent, triState, + triangleArcA, + triangleArcB, + triangleCornerA, + triangleCornerB, unLinked, undo, unpin, diff --git a/src/plugins/qmldesigner/components/propertyeditor/colorpalettesingleton.cpp b/src/plugins/qmldesigner/components/propertyeditor/colorpalettesingleton.cpp new file mode 100644 index 00000000000..65d78aa1d4f --- /dev/null +++ b/src/plugins/qmldesigner/components/propertyeditor/colorpalettesingleton.cpp @@ -0,0 +1,408 @@ +/**************************************************************************** +** +** 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. +** +****************************************************************************/ + +#include "colorpalettesingleton.h" + +#include +#include +#include +#include + +#include +#include +#include + +namespace QmlDesigner { + +QPointer ColorPaletteSingleton::m_instance = nullptr; + +ColorPaletteSingleton::ColorPaletteSingleton() + : m_currentPalette() + , m_data() + , m_colorPickingEventFilter(nullptr) +#ifdef Q_OS_WIN32 + , updateTimer(0) +#endif +{ + m_data.insert(g_recent, Palette(QmlDesigner::DesignerSettingsKey::COLOR_PALETTE_RECENT)); + m_data.insert(g_favorite, Palette(QmlDesigner::DesignerSettingsKey::COLOR_PALETTE_FAVORITE)); + + readPalettes(); + + // Set recent color palette by default + setCurrentPalette(g_recent); + +#ifdef Q_OS_WIN32 + dummyTransparentWindow.resize(1, 1); + dummyTransparentWindow.setFlags(Qt::Tool | Qt::FramelessWindowHint); + updateTimer = new QTimer(this); + connect(updateTimer, &QTimer::timeout, this, &ColorPaletteSingleton::updateEyeDropper); +#endif +} + +ColorPaletteSingleton::~ColorPaletteSingleton() +{ + //writePalettes(); // TODO crash on QtDS close +} + +ColorPaletteSingleton *ColorPaletteSingleton::instance() +{ + if (m_instance == nullptr) + m_instance = new ColorPaletteSingleton(); + + return m_instance; +} + +void ColorPaletteSingleton::readPalettes() +{ + QHash::iterator i = m_data.begin(); + while (i != m_data.end()) { + i.value().read(); + ++i; + } +} + +void ColorPaletteSingleton::writePalettes() +{ + QHash::iterator i = m_data.begin(); + while (i != m_data.end()) { + i.value().write(); + ++i; + } +} + +void ColorPaletteSingleton::addColor(const QString &color, const QString &palette) +{ + if (!m_data.contains(palette)) { + qWarning() << "TODO"; + return; + } + + // If palette is currently active palette also add it to the local color list + if (palette == m_currentPalette) { + if (m_currentPaletteColors.size() + 1 > g_maxPaletteSize) + m_currentPaletteColors.removeLast(); + + m_currentPaletteColors.prepend(color); + emit currentPaletteColorsChanged(); + } + + if (m_data[palette].m_colors.size() + 1 > g_maxPaletteSize) + m_data[palette].m_colors.removeLast(); + + m_data[palette].m_colors.prepend(color); + m_data[palette].write(); +} + +void ColorPaletteSingleton::removeColor(int id, const QString &palette) +{ + if (!m_data.contains(palette)) { + qWarning() << "TODO"; + return; + } + + if (id >= m_data[palette].m_colors.size()) { + qWarning() << "TODO"; + return; + } + + // If palette is currently active palette also add it to the local color list + if (palette == m_currentPalette) { + m_currentPaletteColors.removeAt(id); + + // Fill up with empty strings + while (m_currentPaletteColors.size() < g_maxPaletteSize) + m_currentPaletteColors.append(""); + + emit currentPaletteColorsChanged(); + } + + m_data[palette].m_colors.removeAt(id); + m_data[palette].write(); +} + +void ColorPaletteSingleton::addRecentColor(const QString &item) +{ + if (m_data[g_recent].m_colors.isEmpty()) { + addColor(item, g_recent); + return; + } + + // Don't add recent color if the first one is the same + if (m_data[g_recent].m_colors.constFirst() != item) + addColor(item, g_recent); +} + +void ColorPaletteSingleton::addFavoriteColor(const QString &item) +{ + addColor(item, g_favorite); +} + +void ColorPaletteSingleton::removeFavoriteColor(int id) +{ + removeColor(id, g_favorite); +} + +QStringList ColorPaletteSingleton::palettes() const +{ + return m_data.keys(); +} + +const QString &ColorPaletteSingleton::currentPalette() const +{ + return m_currentPalette; +} + +void ColorPaletteSingleton::setCurrentPalette(const QString &palette) +{ + if (!m_data.contains(palette)) { + qWarning() << "TODO"; + return; + } + + if (m_currentPalette == palette) + return; + + // Store the current palette in settings + if (!m_currentPalette.isEmpty() && m_currentPalette != palette) + m_data[m_currentPalette].write(); + + m_currentPalette = palette; + m_currentPaletteColors.clear(); + + for (const QString &color : m_data[m_currentPalette].m_colors) + m_currentPaletteColors.append(color); + + // Prune to max palette size + while (m_currentPaletteColors.size() > g_maxPaletteSize) + m_currentPaletteColors.removeLast(); + + // Fill up with empty strings + while (m_currentPaletteColors.size() < g_maxPaletteSize) + m_currentPaletteColors.append(""); + + emit currentPaletteChanged(m_currentPalette); + emit currentPaletteColorsChanged(); +} + +const QStringList &ColorPaletteSingleton::currentPaletteColors() const +{ + return m_currentPaletteColors; +} + +void ColorPaletteSingleton::registerDeclarativeType() +{ + static const int typeIndex = qmlRegisterSingletonType( + "QtQuickDesignerColorPalette", 1, 0, "ColorPaletteSingleton", [](QQmlEngine *, QJSEngine *) { + return ColorPaletteSingleton::instance(); + }); + Q_UNUSED(typeIndex) +} + +void ColorPaletteSingleton::showDialog(QColor color) +{ + auto colorDialog = new QColorDialog(Core::ICore::dialogParent()); + colorDialog->setCurrentColor(color); + colorDialog->setAttribute(Qt::WA_DeleteOnClose); + + connect(colorDialog, &QDialog::rejected, + this, &ColorPaletteSingleton::colorDialogRejected); + connect(colorDialog, &QColorDialog::currentColorChanged, + this, &ColorPaletteSingleton::currentColorChanged); + + QTimer::singleShot(0, [colorDialog](){ colorDialog->exec(); }); +} + +void ColorPaletteSingleton::eyeDropper() +{ + QWidget *widget = QApplication::activeWindow(); + if (!widget) + return; + + if (!m_colorPickingEventFilter) + m_colorPickingEventFilter = new QColorPickingEventFilter(this); + + widget->installEventFilter(m_colorPickingEventFilter); + +#ifndef QT_NO_CURSOR + widget->grabMouse(/*Qt::CrossCursor*/); +#else + w->grabMouse(); +#endif +#ifdef Q_OS_WIN32 // excludes WinRT + // On Windows mouse tracking doesn't work over other processes's windows + updateTimer->start(30); + // HACK: Because mouse grabbing doesn't work across processes, we have to have a dummy, + // invisible window to catch the mouse click, otherwise we will click whatever we clicked + // and loose focus. + dummyTransparentWindow.show(); +#endif + widget->grabKeyboard(); + /* With setMouseTracking(true) the desired color can be more precisely picked up, + * and continuously pushing the mouse button is not necessary. + */ + widget->setMouseTracking(true); + updateEyeDropperPosition(QCursor::pos()); +} + +const int g_cursorWidth = 64; +const int g_cursorHeight = 64; +const int g_screenGrabWidth = 7; +const int g_screenGrabHeight = 7; +const int g_pixelX = 3; +const int g_pixelY = 3; + +QColor ColorPaletteSingleton::grabScreenColor(const QPoint &p) +{ + return grabScreenRect(p).pixel(g_pixelX, g_pixelY); +} + +QImage ColorPaletteSingleton::grabScreenRect(const QPoint &p) +{ + QScreen *screen = QGuiApplication::screenAt(p); + if (!screen) + screen = QGuiApplication::primaryScreen(); + + const QPixmap pixmap = screen->grabWindow(0, p.x(), p.y(), g_screenGrabWidth, g_screenGrabHeight); + return pixmap.toImage(); +} + +void ColorPaletteSingleton::updateEyeDropper() +{ +#ifndef QT_NO_CURSOR + static QPoint lastGlobalPos; + QPoint newGlobalPos = QCursor::pos(); + if (lastGlobalPos == newGlobalPos) + return; + + lastGlobalPos = newGlobalPos; + + updateEyeDropperPosition(newGlobalPos); +#ifdef Q_OS_WIN32 + dummyTransparentWindow.setPosition(newGlobalPos); +#endif +#endif // ! QT_NO_CURSOR +} + +void ColorPaletteSingleton::updateEyeDropperPosition(const QPoint &globalPos) +{ + updateCursor(grabScreenRect(globalPos)); +} + +void ColorPaletteSingleton::updateCursor(const QImage &image) +{ + QWidget *widget = QApplication::activeWindow(); + if (!widget) + return; + + QPixmap pixmap(QSize(g_cursorWidth, g_cursorHeight)); + QPainter painter(&pixmap); + // Draw the magnified image/screen grab + QRect r(QPoint(), pixmap.size()); + painter.drawImage(r, image, QRect(0, 0, g_screenGrabWidth, g_screenGrabHeight)); + + const int pixelWidth = (g_cursorWidth - 1) / g_screenGrabWidth; + const int pixelHeight = (g_cursorHeight - 1) / g_screenGrabHeight; + // Draw the pixel lines + painter.setPen(QPen(QColor(192, 192, 192, 150), 1.0, Qt::SolidLine)); + for (int i = 1; i != g_screenGrabWidth; ++i) { + int x = pixelWidth * i; + painter.drawLine(x, 0, x, g_cursorHeight); + } + + for (int i = 1; i != g_screenGrabHeight; ++i) { + int y = pixelHeight * i; + painter.drawLine(0, y, g_cursorWidth, y); + } + // Draw the sorounding border + painter.setPen(QPen(Qt::black, 1.0, Qt::SolidLine)); + painter.drawRect(r.adjusted(0, 0, -1, -1)); + + const QColor color = image.pixel(g_pixelX, g_pixelY); + QRect centerRect = QRect(2 * pixelWidth, 2 * pixelHeight, 3 * pixelWidth, 3 * pixelHeight); + // Draw the center rectangle with the current eye dropper color + painter.setBrush(QBrush(color, Qt::SolidPattern)); + painter.drawRect(centerRect); + + painter.end(); + QCursor cursor(pixmap); + widget->setCursor(cursor); +} + +void ColorPaletteSingleton::releaseEyeDropper() +{ + QWidget *widget = QApplication::activeWindow(); + if (!widget) + return; + + widget->removeEventFilter(m_colorPickingEventFilter); + widget->releaseMouse(); +#ifdef Q_OS_WIN32 + updateTimer->stop(); + dummyTransparentWindow.setVisible(false); +#endif + widget->releaseKeyboard(); + widget->setMouseTracking(false); + + widget->unsetCursor(); +} + +bool ColorPaletteSingleton::handleEyeDropperMouseMove(QMouseEvent *e) +{ + updateEyeDropperPosition(e->globalPos()); + return true; +} + +bool ColorPaletteSingleton::handleEyeDropperMouseButtonRelease(QMouseEvent *e) +{ + if (e->button() == Qt::LeftButton) + emit currentColorChanged(grabScreenColor(e->globalPos())); + else + emit eyeDropperRejected(); + + releaseEyeDropper(); + return true; +} + +bool ColorPaletteSingleton::handleEyeDropperKeyPress(QKeyEvent *e) +{ +#if QT_CONFIG(shortcut) + if (e->matches(QKeySequence::Cancel)) { + emit eyeDropperRejected(); + releaseEyeDropper(); + } //else +#endif + //if (e->key() == Qt::Key_Return || e->key() == Qt::Key_Enter) { + // emit currentColorChanged(grabScreenColor(e->globalPos())); + // releaseEyeDropper(); + //} + e->accept(); + return true; +} + +/// EYE DROPPER + + +} // namespace QmlDesigner diff --git a/src/plugins/qmldesigner/components/propertyeditor/colorpalettesingleton.h b/src/plugins/qmldesigner/components/propertyeditor/colorpalettesingleton.h new file mode 100644 index 00000000000..153cc52f9ef --- /dev/null +++ b/src/plugins/qmldesigner/components/propertyeditor/colorpalettesingleton.h @@ -0,0 +1,199 @@ +/**************************************************************************** +** +** 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. +** +****************************************************************************/ + +#pragma once + +#include +#include +#include +#include +#include +#include + +#include + +#include "designersettings.h" +#include + +namespace QmlDesigner { + +class QColorPickingEventFilter; + +const int g_maxPaletteSize = 8; +const QString g_recent = "Recent"; +const QString g_favorite = "Favorite"; + +struct Palette +{ + Palette() + : m_settingsKey() + , m_colors() + {} + + Palette(const QByteArray &key) + : m_settingsKey(key) + , m_colors() + {} + + bool read() + { + QStringList data = QmlDesigner::DesignerSettings::getValue(m_settingsKey).toStringList(); + if (data.isEmpty()) + return false; + + m_colors.clear(); + m_colors = data; + + return true; + } + + void write() const + { + QmlDesigner::DesignerSettings::setValue(m_settingsKey, m_colors); + } + + QByteArray m_settingsKey; + QStringList m_colors; +}; + +class ColorPaletteSingleton : public QObject +{ + Q_OBJECT + + Q_PROPERTY(QStringList currentPaletteColors + READ currentPaletteColors + NOTIFY currentPaletteColorsChanged) + Q_PROPERTY(QString currentPalette + READ currentPalette + WRITE setCurrentPalette + NOTIFY currentPaletteChanged) + Q_PROPERTY(QStringList palettes + READ palettes + NOTIFY palettesChanged) + +public: + static ColorPaletteSingleton *instance(); + + ~ColorPaletteSingleton(); + + void readPalettes(); + void writePalettes(); + + void addColor(const QString &color, const QString &palette); + void removeColor(int id, const QString &palette); + + Q_INVOKABLE void addRecentColor(const QString &color); + + Q_INVOKABLE void addFavoriteColor(const QString &color); + Q_INVOKABLE void removeFavoriteColor(int id); + + // Returns list of palette names + QStringList palettes() const; + + // Get/Set currently active palette + const QString ¤tPalette() const; + void setCurrentPalette(const QString &palette); + + // Returns the colors of the currently active palette as a list + const QStringList ¤tPaletteColors() const; + + static void registerDeclarativeType(); + + Q_INVOKABLE void showDialog(QColor color); + + + Q_INVOKABLE void eyeDropper(); + + QColor grabScreenColor(const QPoint &p); + QImage grabScreenRect(const QPoint &p); + void updateEyeDropper(); + void updateEyeDropperPosition(const QPoint &globalPos); + + void updateCursor(const QImage &image); + + void releaseEyeDropper(); + + bool handleEyeDropperMouseMove(QMouseEvent *e); + bool handleEyeDropperMouseButtonRelease(QMouseEvent *e); + bool handleEyeDropperKeyPress(QKeyEvent *e); + + + ColorPaletteSingleton(const ColorPaletteSingleton &) = delete; + void operator=(const ColorPaletteSingleton &) = delete; + +signals: + void currentPaletteChanged(const QString &palette); + void currentPaletteColorsChanged(); + void palettesChanged(); + + void colorDialogRejected(); + void currentColorChanged(const QColor &color); + + void eyeDropperRejected(); + +private: + ColorPaletteSingleton(); + +private: + static QPointer m_instance; + QString m_currentPalette; + QStringList m_currentPaletteColors; + QHash m_data; + + QColorPickingEventFilter *m_colorPickingEventFilter; +#ifdef Q_OS_WIN32 + QTimer *updateTimer; + QWindow dummyTransparentWindow; +#endif +}; + +class QColorPickingEventFilter : public QObject { +public: + explicit QColorPickingEventFilter(QObject *parent = 0) + : QObject(parent) + {} + + bool eventFilter(QObject *, QEvent *event) override + { + switch (event->type()) { + case QEvent::MouseMove: + return ColorPaletteSingleton::instance()->handleEyeDropperMouseMove( + static_cast(event)); + case QEvent::MouseButtonRelease: + return ColorPaletteSingleton::instance()->handleEyeDropperMouseButtonRelease( + static_cast(event)); + case QEvent::KeyPress: + return ColorPaletteSingleton::instance()->handleEyeDropperKeyPress( + static_cast(event)); + default: + break; + } + return false; + } +}; + +} // namespace QmlDesigner + +QML_DECLARE_TYPE(QmlDesigner::ColorPaletteSingleton) diff --git a/src/plugins/qmldesigner/components/propertyeditor/gradientmodel.cpp b/src/plugins/qmldesigner/components/propertyeditor/gradientmodel.cpp index c59e3d7e93b..4c2bd68c98a 100644 --- a/src/plugins/qmldesigner/components/propertyeditor/gradientmodel.cpp +++ b/src/plugins/qmldesigner/components/propertyeditor/gradientmodel.cpp @@ -297,7 +297,7 @@ void GradientModel::registerDeclarativeType() qreal GradientModel::readGradientProperty(const QString &propertyName) const { if (!m_itemNode.isValid()) - return 0; + return 0; QmlDesigner::QmlObjectNode gradient; @@ -305,11 +305,27 @@ qreal GradientModel::readGradientProperty(const QString &propertyName) const gradient = m_itemNode.modelNode().nodeProperty(gradientPropertyName().toUtf8()).modelNode(); if (!gradient.isValid()) - return 0; + return 0; return gradient.modelValue(propertyName.toUtf8()).toReal(); } +QString GradientModel::readGradientOrientation() const +{ + if (!m_itemNode.isValid()) + return QString(); + + QmlDesigner::QmlObjectNode gradient; + + if (m_itemNode.modelNode().hasProperty(gradientPropertyName().toUtf8())) + gradient = m_itemNode.modelNode().nodeProperty(gradientPropertyName().toUtf8()).modelNode(); + + if (!gradient.isValid()) + return QString(); + + return gradient.modelValue("orientation").value().nameToString(); +} + void GradientModel::setupModel() { m_locked = true; @@ -360,7 +376,7 @@ QString GradientModel::gradientTypeName() const void GradientModel::setGradientTypeName(const QString &name) { - m_gradientTypeName = name; + m_gradientTypeName = name; } bool GradientModel::hasGradient() const @@ -408,6 +424,7 @@ void GradientModel::setupGradientProperties(const QmlDesigner::ModelNode &gradie QTC_ASSERT(gradient.isValid(), return); if (m_gradientTypeName == "Gradient") { + gradient.variantProperty("orientation").setEnumeration("Gradient.Vertical"); } else if (m_gradientTypeName == "LinearGradient") { gradient.variantProperty("x1").setValue(0); gradient.variantProperty("x2").setValue(m_itemNode.instanceValue("width")); @@ -523,6 +540,26 @@ void GradientModel::setGradientProperty(const QString &propertyName, qreal value } } +void GradientModel::setGradientOrientation(Qt::Orientation value) +{ + QTC_ASSERT(m_itemNode.isValid(), return); + + QmlDesigner::QmlObjectNode gradient; + + if (m_itemNode.modelNode().hasProperty(gradientPropertyName().toUtf8())) + gradient = m_itemNode.modelNode().nodeProperty(gradientPropertyName().toUtf8()).modelNode(); + + QTC_ASSERT(gradient.isValid(), return); + + try { + QmlDesigner::EnumerationName name = value == Qt::Horizontal ? "Gradient.Horizontal" + : "Gradient.Vertical"; + gradient.modelNode().variantProperty("orientation").setEnumeration(name); + } catch (const QmlDesigner::Exception &e) { + e.showException(); + } +} + void GradientModel::setPresetByID(int presetID) { const QGradient gradient(GradientPresetItem::createGradientFromPreset( diff --git a/src/plugins/qmldesigner/components/propertyeditor/gradientmodel.h b/src/plugins/qmldesigner/components/propertyeditor/gradientmodel.h index d2ce8bb7157..8ff0a0fc362 100644 --- a/src/plugins/qmldesigner/components/propertyeditor/gradientmodel.h +++ b/src/plugins/qmldesigner/components/propertyeditor/gradientmodel.h @@ -30,6 +30,7 @@ #include #include #include +#include class GradientModel : public QAbstractListModel { @@ -67,8 +68,10 @@ public: static void registerDeclarativeType(); Q_INVOKABLE qreal readGradientProperty(const QString &property) const; + Q_INVOKABLE QString readGradientOrientation() const; Q_INVOKABLE void setGradientProperty(const QString &propertyName, qreal value); + Q_INVOKABLE void setGradientOrientation(Qt::Orientation value); Q_INVOKABLE void setPresetByID(int presetID); Q_INVOKABLE void setPresetByStops(const QList &stopsPositions, diff --git a/src/plugins/qmldesigner/components/propertyeditor/propertyeditor.pri b/src/plugins/qmldesigner/components/propertyeditor/propertyeditor.pri index 7516c45c2ba..0360652fbf0 100644 --- a/src/plugins/qmldesigner/components/propertyeditor/propertyeditor.pri +++ b/src/plugins/qmldesigner/components/propertyeditor/propertyeditor.pri @@ -16,9 +16,7 @@ SOURCES += propertyeditorview.cpp \ gradientpresetlistmodel.cpp \ gradientpresetdefaultlistmodel.cpp \ gradientpresetcustomlistmodel.cpp \ - simplecolorpalette.cpp \ - simplecolorpalettemodel.cpp \ - simplecolorpalettesingleton.cpp \ + colorpalettesingleton.cpp \ itemfiltermodel.cpp \ aligndistribute.cpp \ tooltip.cpp @@ -39,9 +37,7 @@ HEADERS += propertyeditorview.h \ gradientpresetlistmodel.h \ gradientpresetdefaultlistmodel.h \ gradientpresetcustomlistmodel.h \ - simplecolorpalette.h \ - simplecolorpalettemodel.h \ - simplecolorpalettesingleton.h \ + colorpalettesingleton.h \ itemfiltermodel.h \ aligndistribute.h \ tooltip.h diff --git a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.cpp b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.cpp index 09a2d2b0584..f72439c6748 100644 --- a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.cpp +++ b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.cpp @@ -90,16 +90,14 @@ QColor convertColorFromString(const QString &s) namespace QmlDesigner { -PropertyEditorContextObject::PropertyEditorContextObject(QObject *parent) : - QObject(parent), - m_isBaseState(false), - m_selectionChanged(false), - m_backendValues(nullptr), - m_qmlComponent(nullptr), - m_qmlContext(nullptr) -{ - -} +PropertyEditorContextObject::PropertyEditorContextObject(QObject *parent) + : QObject(parent) + , m_isBaseState(false) + , m_selectionChanged(false) + , m_backendValues(nullptr) + , m_qmlComponent(nullptr) + , m_qmlContext(nullptr) +{} QString PropertyEditorContextObject::convertColorToString(const QVariant &color) { @@ -477,7 +475,7 @@ void PropertyEditorContextObject::setIsBaseState(bool newIsBaseState) void PropertyEditorContextObject::setSelectionChanged(bool newSelectionChanged) { - if (newSelectionChanged == m_selectionChanged) + if (newSelectionChanged == m_selectionChanged) return; m_selectionChanged = newSelectionChanged; @@ -486,7 +484,7 @@ void PropertyEditorContextObject::setSelectionChanged(bool newSelectionChanged) void PropertyEditorContextObject::setBackendValues(QQmlPropertyMap *newBackendValues) { - if (newBackendValues == m_backendValues) + if (newBackendValues == m_backendValues) return; m_backendValues = newBackendValues; diff --git a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.h b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.h index 8b7947bd527..0fff1129357 100644 --- a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.h +++ b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorcontextobject.h @@ -34,6 +34,7 @@ #include #include #include +#include namespace QmlDesigner { @@ -211,5 +212,4 @@ private: QmlDesigner::ModelNode m_modelNode; }; - } //QmlDesigner { diff --git a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.cpp b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.cpp index ebaf1da7b64..611006a3510 100644 --- a/src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.cpp +++ b/src/plugins/qmldesigner/components/propertyeditor/propertyeditorqmlbackend.cpp @@ -672,34 +672,37 @@ QString PropertyEditorQmlBackend::templateGeneration(const NodeMetaInfo &type, const QString anchorLeftRight = "anchors.left: parent.left\nanchors.right: parent.right\n"; qmlTemplate += "Column {\n"; - qmlTemplate += anchorLeftRight; + qmlTemplate += "width: parent.width\n"; if (node.modelNode().isComponent()) qmlTemplate += "ComponentButton {}\n"; - qmlTemplate += "Section {\n"; - qmlTemplate += "caption: \"User added properties\"\n"; - qmlTemplate += anchorLeftRight; - qmlTemplate += "Column {\n"; - qmlTemplate += "width: parent.width\n"; + QString qmlInnerTemplate = ""; + + qmlInnerTemplate += "Section {\n"; + qmlInnerTemplate += "caption: \""+ QObject::tr("User added properties") + "\"\n"; + qmlInnerTemplate += anchorLeftRight; + qmlInnerTemplate += "leftPadding: 0\n"; + qmlInnerTemplate += "rightPadding: 0\n"; + qmlInnerTemplate += "bottomPadding: 0\n"; + qmlInnerTemplate += "Column {\n"; + qmlInnerTemplate += "width: parent.width\n"; // First the section containing properties of basic type e.g. int, string, bool if (!basicProperties.empty()) { emptyTemplate = false; - qmlTemplate += "Column {\n"; - qmlTemplate += "width: parent.width\n"; - qmlTemplate += "leftPadding: 8\n"; - qmlTemplate += "rightPadding: 0\n"; - qmlTemplate += "topPadding: 4\n"; - qmlTemplate += "bottomPadding: 4\n"; - qmlTemplate += "SectionLayout {\n"; + qmlInnerTemplate += "Column {\n"; + qmlInnerTemplate += "width: parent.width\n"; + qmlInnerTemplate += "leftPadding: 8\n"; + qmlInnerTemplate += "bottomPadding: 10\n"; + qmlInnerTemplate += "SectionLayout {\n"; for (const auto &p : qAsConst(basicProperties)) - qmlTemplate += findAndFillTemplate(p, p); + qmlInnerTemplate += findAndFillTemplate(p, p); - qmlTemplate += "}\n"; // SectionLayout - qmlTemplate += "}\n"; // Column + qmlInnerTemplate += "}\n"; // SectionLayout + qmlInnerTemplate += "}\n"; // Column } // Second the section containing properties of complex type for which no specific template exists e.g. Button @@ -712,24 +715,26 @@ QString PropertyEditorQmlBackend::templateGeneration(const NodeMetaInfo &type, if (parentTypeName == "alias" && node.isValid()) parentTypeName = node.instanceType(key); - qmlTemplate += "Section {\n"; - qmlTemplate += QStringLiteral("caption: \"%1 - %2\"\n") + qmlInnerTemplate += "Section {\n"; + qmlInnerTemplate += QStringLiteral("caption: \"%1 - %2\"\n") .arg(QString::fromUtf8(key), QString::fromUtf8(parentTypeName)); - qmlTemplate += anchorLeftRight; - qmlTemplate += "expanded: false\n"; - qmlTemplate += "level: 1\n"; - qmlTemplate += "SectionLayout {\n"; + qmlInnerTemplate += anchorLeftRight; + qmlInnerTemplate += "leftPadding: 8\n"; + qmlInnerTemplate += "rightPadding: 0\n"; + qmlInnerTemplate += "expanded: false\n"; + qmlInnerTemplate += "level: 1\n"; + qmlInnerTemplate += "SectionLayout {\n"; auto properties = it.value(); Utils::sort(properties); for (const auto &p : qAsConst(properties)) { const PropertyName shortName = p.contains('.') ? p.split('.').last() : p; - qmlTemplate += findAndFillTemplate(shortName, p); + qmlInnerTemplate += findAndFillTemplate(shortName, p); } - qmlTemplate += "}\n"; // SectionLayout - qmlTemplate += "}\n"; // Section + qmlInnerTemplate += "}\n"; // SectionLayout + qmlInnerTemplate += "}\n"; // Section } } @@ -737,32 +742,17 @@ QString PropertyEditorQmlBackend::templateGeneration(const NodeMetaInfo &type, if (!separateSectionProperties.empty()) { emptyTemplate = false; Utils::sort(separateSectionProperties); - for (const auto &p : qAsConst(separateSectionProperties)) { - TypeName parentTypeName = type.propertyTypeName(p); - // alias resolution only possible with instance - if (parentTypeName == "alias" && node.isValid()) - parentTypeName = node.instanceType(p); - - qmlTemplate += "Section {\n"; - qmlTemplate += QStringLiteral("caption: \"%1 - %2\"\n").arg(QString::fromUtf8(p)).arg(QString::fromUtf8(parentTypeName)); - qmlTemplate += anchorLeftRight; - qmlTemplate += "level: 1\n"; - qmlTemplate += "Column {\n"; - qmlTemplate += "width: parent.width\n"; - - qmlTemplate += findAndFillTemplate(p, p); - - qmlTemplate += "}\n"; // Column - qmlTemplate += "}\n"; // Section - } + for (const auto &p : qAsConst(separateSectionProperties)) + qmlInnerTemplate += findAndFillTemplate(p, p); } - qmlTemplate += "}\n"; // Column - qmlTemplate += "}\n"; // Section - qmlTemplate += "}\n"; // Column + qmlInnerTemplate += "}\n"; // Column + qmlInnerTemplate += "}\n"; // Section - if (emptyTemplate) - return QString(); + if (!emptyTemplate) + qmlTemplate += qmlInnerTemplate; + + qmlTemplate += "}\n"; // Column return qmlTemplate; } @@ -910,7 +900,10 @@ QString PropertyEditorQmlBackend::locateQmlFile(const NodeMetaInfo &info, const const QString withoutDir = relativePath.split(QStringLiteral("/")).constLast(); - if (importDirVersion.exists(withoutDir)) + int lastSlash = importDirVersion.absoluteFilePath(withoutDir).lastIndexOf("/"); + QString dirPath = importDirVersion.absoluteFilePath(withoutDir).left(lastSlash); + + if (importDirVersion.exists(withoutDir) && !dirPath.endsWith("QtQuick/Controls.2/designer") && !dirPath.endsWith("QtQuick/Controls/designer")) return importDirVersion.absoluteFilePath(withoutDir); const QString withoutDirWithVersion = relativePathWithVersion.split(QStringLiteral("/")).constLast(); diff --git a/src/plugins/qmldesigner/components/propertyeditor/quick2propertyeditorview.cpp b/src/plugins/qmldesigner/components/propertyeditor/quick2propertyeditorview.cpp index 70b7ce76df4..6298448bbc3 100644 --- a/src/plugins/qmldesigner/components/propertyeditor/quick2propertyeditorview.cpp +++ b/src/plugins/qmldesigner/components/propertyeditor/quick2propertyeditorview.cpp @@ -29,6 +29,7 @@ #include "annotationeditor/annotationeditor.h" #include "bindingeditor/actioneditor.h" #include "bindingeditor/bindingeditor.h" +#include "colorpalettesingleton.h" #include "fileresourcesmodel.h" #include "gradientmodel.h" #include "gradientpresetcustomlistmodel.h" @@ -39,7 +40,6 @@ #include "propertyeditorvalue.h" #include "qmlanchorbindingproxy.h" #include "richtexteditor/richtexteditorproxy.h" -#include "simplecolorpalettemodel.h" #include "theme.h" #include "tooltip.h" @@ -63,7 +63,7 @@ void Quick2PropertyEditorView::registerQmlTypes() GradientPresetDefaultListModel::registerDeclarativeType(); GradientPresetCustomListModel::registerDeclarativeType(); ItemFilterModel::registerDeclarativeType(); - SimpleColorPaletteModel::registerDeclarativeType(); + ColorPaletteSingleton::registerDeclarativeType(); Internal::QmlAnchorBindingProxy::registerDeclarativeType(); BindingEditor::registerDeclarativeType(); ActionEditor::registerDeclarativeType(); diff --git a/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalette.cpp b/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalette.cpp deleted file mode 100644 index c88d83aa0a5..00000000000 --- a/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalette.cpp +++ /dev/null @@ -1,113 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2019 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. -** -****************************************************************************/ - -#include "simplecolorpalette.h" - -#include "designersettings.h" - -#include - -namespace QmlDesigner { - -PaletteColor::PaletteColor() - : m_color(QColor()) - , m_colorCode(QColor().name()) - , m_isFavorite(false) -{} - -PaletteColor::PaletteColor(const QString &colorCode) - : m_color(colorCode) - , m_colorCode(colorCode) - , m_isFavorite(false) -{} - -PaletteColor::PaletteColor(const QColor &color) - : m_color(color) - , m_colorCode(color.name(QColor::HexArgb)) - , m_isFavorite(false) -{} - -QVariant PaletteColor::getProperty(Property id) const -{ - QVariant out; - - switch (id) { - case objectNameRole: - out.setValue(QString()); - break; - case colorRole: - out.setValue(color()); - break; - case colorCodeRole: - out.setValue(colorCode()); - break; - case isFavoriteRole: - out.setValue(isFavorite()); - break; - default: - qWarning() << "PaletteColor Property switch default case"; - break; //replace with assert before switch? - } - - return out; -} - -QColor PaletteColor::color() const -{ - return m_color; -} - -void PaletteColor::setColor(const QColor &value) -{ - m_color = value; - m_colorCode = m_color.name(QColor::HexArgb); -} - -QString PaletteColor::colorCode() const -{ - return m_colorCode; -} - -bool PaletteColor::isFavorite() const -{ - return m_isFavorite; -} - -void PaletteColor::setFavorite(bool favorite) -{ - m_isFavorite = favorite; -} - -bool PaletteColor::toggleFavorite() -{ - return m_isFavorite = !m_isFavorite; -} - -bool PaletteColor::operator==(const PaletteColor &other) const -{ - return (m_color == other.m_color); -} - -} // namespace QmlDesigner diff --git a/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettemodel.cpp b/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettemodel.cpp deleted file mode 100644 index a67a2fc91f6..00000000000 --- a/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettemodel.cpp +++ /dev/null @@ -1,162 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2019 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. -** -****************************************************************************/ - -#include "simplecolorpalettemodel.h" -#include "simplecolorpalette.h" -#include "simplecolorpalettesingleton.h" - -#include "designersettings.h" - -#include - -#include -#include -#include -#include -#include -#include - -namespace QmlDesigner { - -SimpleColorPaletteModel::SimpleColorPaletteModel(QObject *parent) - : QAbstractListModel(parent) -{ - connect(&SimpleColorPaletteSingleton::getInstance(), - &SimpleColorPaletteSingleton::paletteChanged, - this, - &SimpleColorPaletteModel::setPalette); - m_roleNames = {{static_cast(PaletteColor::Property::objectNameRole), "objectName"}, - {static_cast(PaletteColor::Property::colorRole), "color"}, - {static_cast(PaletteColor::Property::colorCodeRole), "colorCode"}, - {static_cast(PaletteColor::Property::isFavoriteRole), "isFavorite"}}; - - setPalette(); -} - -SimpleColorPaletteModel::~SimpleColorPaletteModel() -{ - clearItems(); -} - -int SimpleColorPaletteModel::rowCount(const QModelIndex & /*parent*/) const -{ - return m_items.count(); -} - -QVariant SimpleColorPaletteModel::data(const QModelIndex &index, int role) const -{ - if (index.isValid() && (index.row() >= 0) && (index.row() < m_items.count())) { - if (m_roleNames.contains(role)) { - QVariant value = m_items.at(index.row()) - .getProperty(static_cast(role)); - if (auto model = qobject_cast(value.value())) - return QVariant::fromValue(model); - - return value; - } - - qWarning() << Q_FUNC_INFO << "invalid role requested"; - return QVariant(); - } - - qWarning() << Q_FUNC_INFO << "invalid index requested"; - return QVariant(); -} - -QHash SimpleColorPaletteModel::roleNames() const -{ - return m_roleNames; -} - -void SimpleColorPaletteModel::clearItems() -{ - beginResetModel(); - m_items.clear(); - endResetModel(); -} - -void SimpleColorPaletteModel::addItem(const QString &item) -{ - PaletteColor palette(item); - addItem(palette); -} - -void SimpleColorPaletteModel::addItem(const PaletteColor &item) -{ - SimpleColorPaletteSingleton::getInstance().addItem(item); -} - -const QList &SimpleColorPaletteModel::items() const -{ - return m_items; -} - -void SimpleColorPaletteModel::sortItems() -{ - SimpleColorPaletteSingleton::getInstance().sortItems(); -} - -void SimpleColorPaletteModel::registerDeclarativeType() -{ - qmlRegisterType("HelperWidgets", 2, 0, "SimpleColorPaletteModel"); -} - -void SimpleColorPaletteModel::toggleFavorite(int id) -{ - SimpleColorPaletteSingleton::getInstance().toggleFavorite(id); -} - -void SimpleColorPaletteModel::setPalette() -{ - beginResetModel(); - m_items = SimpleColorPaletteSingleton::getInstance().getItems(); - m_favoriteOffset = SimpleColorPaletteSingleton::getInstance().getFavoriteOffset(); - m_paletteSize = SimpleColorPaletteSingleton::getInstance().getPaletteSize(); - endResetModel(); -} - -bool SimpleColorPaletteModel::read() -{ - return SimpleColorPaletteSingleton::getInstance().readPalette(); -} - -void SimpleColorPaletteModel::write() -{ - SimpleColorPaletteSingleton::getInstance().writePalette(); -} - -void SimpleColorPaletteModel::showDialog(QColor color) -{ - auto colorDialog = new QColorDialog(Core::ICore::dialogParent()); - colorDialog->setCurrentColor(color); - colorDialog->setAttribute(Qt::WA_DeleteOnClose); - - connect(colorDialog, &QDialog::rejected, this, &SimpleColorPaletteModel::colorDialogRejected); - connect(colorDialog, &QColorDialog::currentColorChanged, this, &SimpleColorPaletteModel::currentColorChanged); - - QTimer::singleShot(0, [colorDialog](){ colorDialog->exec(); }); -} - -} // namespace QmlDesigner diff --git a/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettemodel.h b/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettemodel.h deleted file mode 100644 index c1babf263e3..00000000000 --- a/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettemodel.h +++ /dev/null @@ -1,84 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2019 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. -** -****************************************************************************/ - -#pragma once - -#include -#include -#include -#include - -namespace QmlDesigner { - -class PaletteColor; - -class SimpleColorPaletteModel : public QAbstractListModel -{ - Q_OBJECT -public: - explicit SimpleColorPaletteModel(QObject *parent = nullptr); - ~SimpleColorPaletteModel() override; - - int rowCount(const QModelIndex &parent = QModelIndex()) const override; - QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override; - QHash roleNames() const override; - - void clearItems(); - Q_INVOKABLE void addItem(const QString &item); - void addItem(const PaletteColor &item); - - const QList &items() const; - - void sortItems(); - - static void registerDeclarativeType(); - - Q_INVOKABLE void toggleFavorite(int id); - - bool read(); - void write(); - - Q_INVOKABLE void showDialog(QColor color); - -signals: - void colorDialogRejected(); - void currentColorChanged(const QColor &color); - -private slots: - void setPalette(); - -private: - void enqueue(const PaletteColor &item); - -private: - int m_paletteSize; - int m_favoriteOffset; - QList m_items; - QHash m_roleNames; -}; - -} // namespace QmlDesigner - -QML_DECLARE_TYPE(QmlDesigner::SimpleColorPaletteModel) diff --git a/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettesingleton.cpp b/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettesingleton.cpp deleted file mode 100644 index ccea50bbf25..00000000000 --- a/src/plugins/qmldesigner/components/propertyeditor/simplecolorpalettesingleton.cpp +++ /dev/null @@ -1,185 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2019 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. -** -****************************************************************************/ - -#include "simplecolorpalettesingleton.h" -#include "simplecolorpalette.h" - -#include "designersettings.h" - -#include -#include - -namespace QmlDesigner { - -SimpleColorPaletteSingleton::SimpleColorPaletteSingleton() - : m_items() - , m_favoriteOffset(0) -{ - if (!readPalette()) { - for (int i = 0; i < m_paletteSize; i++) - m_items.append(PaletteColor()); - } -} - -SimpleColorPaletteSingleton &SimpleColorPaletteSingleton::getInstance() -{ - static SimpleColorPaletteSingleton singleton; - - return singleton; -} - -void SimpleColorPaletteSingleton::addItem(const PaletteColor &item) -{ - if (m_favoriteOffset >= m_paletteSize) - return; - - if (item.isFavorite()) { - int contains = m_items.indexOf(item); - if (contains != -1) { - if (m_items.at(contains).isFavorite()) - return; - else - m_items.removeAt(contains); - } - m_items.insert(0, item); - m_favoriteOffset++; - } else if (m_items.contains(item)) - return; - else - m_items.insert(m_favoriteOffset, item); - - while (m_items.size() > m_paletteSize) { - m_items.removeLast(); - } - - writePalette(); - - emit paletteChanged(); -} - -QList SimpleColorPaletteSingleton::getItems() const -{ - return m_items; -} - -int SimpleColorPaletteSingleton::getPaletteSize() const -{ - return m_paletteSize; -} - -int SimpleColorPaletteSingleton::getFavoriteOffset() const -{ - return m_favoriteOffset; -} - -void SimpleColorPaletteSingleton::sortItems() -{ - auto itemSort = [](const PaletteColor &first, const PaletteColor &second) { - return (static_cast(first.isFavorite()) < static_cast(second.isFavorite())); - }; - - std::sort(m_items.begin(), m_items.end(), itemSort); - - emit paletteChanged(); -} - -void SimpleColorPaletteSingleton::toggleFavorite(int id) -{ - bool toggleResult = m_items[id].toggleFavorite(); - - if (toggleResult) { - m_favoriteOffset++; - m_items.move(id, 0); - } else { - m_favoriteOffset--; - m_items.move(id, m_favoriteOffset); - } - - if (m_favoriteOffset < 0) - m_favoriteOffset = 0; - else if (m_favoriteOffset > m_paletteSize) - m_favoriteOffset = m_paletteSize; - - emit paletteChanged(); -} - -bool SimpleColorPaletteSingleton::readPalette() -{ - QList proxy; - const QStringList stringData = QmlDesigner::DesignerSettings::getValue( - QmlDesigner::DesignerSettingsKey::SIMPLE_COLOR_PALETTE_CONTENT) - .toStringList(); - - int favCounter = 0; - - for (int i = 0; i < stringData.size(); i++) { - const QStringList strsep = stringData.at(i).split(";"); - if (strsep.size() != 2) { - continue; - } - PaletteColor colorItem(strsep.at(0)); - bool isFav = static_cast(strsep.at(1).toInt()); - colorItem.setFavorite(isFav); - if (isFav) - favCounter++; - proxy.append(colorItem); - } - - if (proxy.size() == 0) { - return false; - } - - while (proxy.size() > m_paletteSize) { - proxy.removeLast(); - } - while (proxy.size() < m_paletteSize) { - proxy.append(PaletteColor()); - } - - m_items.clear(); - m_items = proxy; - m_favoriteOffset = favCounter; - - return true; -} - -void SimpleColorPaletteSingleton::writePalette() -{ - QStringList output; - QString subres; - - for (int i = 0; i < m_items.size(); i++) { - subres = m_items.at(i).color().name(QColor::HexArgb); - subres += ";"; - subres += QString::number(static_cast(m_items.at(i).isFavorite())); - output.push_back(subres); - subres.clear(); - } - - QmlDesigner::DesignerSettings::setValue( - QmlDesigner::DesignerSettingsKey::SIMPLE_COLOR_PALETTE_CONTENT, output); -} - -} // namespace QmlDesigner diff --git a/src/plugins/qmldesigner/componentsplugin/Controls/ButtonSpecifics.qml b/src/plugins/qmldesigner/componentsplugin/Controls/ButtonSpecifics.qml index 6556a36aef5..45b7e5379af 100644 --- a/src/plugins/qmldesigner/componentsplugin/Controls/ButtonSpecifics.qml +++ b/src/plugins/qmldesigner/componentsplugin/Controls/ButtonSpecifics.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,51 +23,57 @@ ** ****************************************************************************/ -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("Button") - SectionLayout { + anchors.left: parent.left + anchors.right: parent.right - Label { + SectionLayout { + PropertyLabel { text: qsTr("Text") tooltip: qsTr("Text displayed on the button.") } SecondColumnLayout { LineEdit { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.text - Layout.fillWidth: true } + + ExpandingSpacer {} } - Label { + PropertyLabel { text: qsTr("Checked") tooltip: qsTr("State of the button.") } SecondColumnLayout { CheckBox { - enabled: backendValues.checkable.value text: backendValues.checked.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth backendValue: backendValues.checked - implicitWidth: 180 + enabled: backendValues.checkable.value } - ExpandingSpacer { - } + ExpandingSpacer {} } - Label { + PropertyLabel { text: qsTr("Checkable") tooltip: qsTr("Determines whether the button is checkable or not.") } @@ -75,6 +81,8 @@ Column { SecondColumnLayout { CheckBox { text: backendValues.checkable.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth backendValue: backendValues.checkable property bool backEndValueValue: backendValues.checkable.value onTextChanged: { @@ -82,15 +90,12 @@ Column { backendValues.checked.resetValue() } } - - implicitWidth: 180 } - ExpandingSpacer { - } + ExpandingSpacer {} } - Label { + PropertyLabel { text: qsTr("Enabled") tooltip: qsTr("Determines whether the button is enabled or not.") } @@ -98,16 +103,15 @@ Column { SecondColumnLayout { CheckBox { text: backendValues.enabled.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth backendValue: backendValues.enabled - implicitWidth: 180 } - ExpandingSpacer { - } + ExpandingSpacer {} } - - Label { + PropertyLabel { text: qsTr("Default button") tooltip: qsTr("Sets the button as the default button in a dialog.") } @@ -115,27 +119,31 @@ Column { SecondColumnLayout { CheckBox { text: backendValues.isDefault.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth backendValue: backendValues.isDefault - implicitWidth: 180 } - ExpandingSpacer { - } + ExpandingSpacer {} } - Label { + PropertyLabel { text: qsTr("Tool tip") tooltip: qsTr("The tool tip shown for the button.") } SecondColumnLayout { LineEdit { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.tooltip - Layout.fillWidth: true } + + } - Label { + PropertyLabel { text: qsTr("Focus on press") tooltip: qsTr("Determines whether the button gets focus if pressed.") } @@ -143,28 +151,27 @@ Column { SecondColumnLayout { CheckBox { text: backendValues.activeFocusOnPress.valueToString + implicitWidth: StudioTheme.Values.twoControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth backendValue: backendValues.activeFocusOnPress - implicitWidth: 180 } - ExpandingSpacer { - } + ExpandingSpacer {} } - - Label { + PropertyLabel { text: qsTr("Icon source") tooltip: qsTr("The URL of an icon resource.") } SecondColumnLayout { LineEdit { + implicitWidth: StudioTheme.Values.singleControlColumnWidth + + StudioTheme.Values.actionIndicatorWidth + width: implicitWidth backendValue: backendValues.iconSource - Layout.fillWidth: true } } - - } } } diff --git a/src/plugins/qmldesigner/designersettings.cpp b/src/plugins/qmldesigner/designersettings.cpp index a08f5cae62f..28d25afb6b2 100644 --- a/src/plugins/qmldesigner/designersettings.cpp +++ b/src/plugins/qmldesigner/designersettings.cpp @@ -77,7 +77,8 @@ void DesignerSettings::fromSettings(QSettings *settings) restoreValue(settings, DesignerSettingsKey::NAVIGATOR_REVERSE_ITEM_ORDER, false); restoreValue(settings, DesignerSettingsKey::STANDALONE_MODE, false); restoreValue(settings, DesignerSettingsKey::ENABLE_TIMELINEVIEW, true); - restoreValue(settings, DesignerSettingsKey::SIMPLE_COLOR_PALETTE_CONTENT, QStringList()); + restoreValue(settings, DesignerSettingsKey::COLOR_PALETTE_RECENT, QStringList()); + restoreValue(settings, DesignerSettingsKey::COLOR_PALETTE_FAVORITE, QStringList()); restoreValue(settings, DesignerSettingsKey::ALWAYS_DESIGN_MODE, true); restoreValue(settings, DesignerSettingsKey::DISABLE_ITEM_LIBRARY_UPDATE_TIMER, true); diff --git a/src/plugins/qmldesigner/designersettings.h b/src/plugins/qmldesigner/designersettings.h index 7667b784824..5fc30ef2a9c 100644 --- a/src/plugins/qmldesigner/designersettings.h +++ b/src/plugins/qmldesigner/designersettings.h @@ -1,4 +1,4 @@ -/**************************************************************************** +/**************************************************************************** ** ** Copyright (C) 2016 The Qt Company Ltd. ** Contact: https://www.qt.io/licensing/ @@ -67,7 +67,8 @@ const char REFORMAT_UI_QML_FILES[] = "ReformatUiQmlFiles"; /* These setti const char IGNORE_DEVICE_PIXEL_RATIO[] = "IgnoreDevicePixelRaio"; /* The settings can be used to turn off the feature, if there are serious issues */ const char STANDALONE_MODE[] = "StandAloneMode"; const char ENABLE_TIMELINEVIEW[] = "EnableTimelineView"; -const char SIMPLE_COLOR_PALETTE_CONTENT[] = "SimpleColorPaletteContent"; +const char COLOR_PALETTE_RECENT[] = "ColorPaletteRecent"; +const char COLOR_PALETTE_FAVORITE[] = "ColorPaletteFavorite"; const char ALWAYS_DESIGN_MODE[] = "AlwaysDesignMode"; const char DISABLE_ITEM_LIBRARY_UPDATE_TIMER[] = "DisableItemLibraryUpdateTimer"; } diff --git a/src/plugins/qmldesigner/qmldesignerplugin.qbs b/src/plugins/qmldesigner/qmldesignerplugin.qbs index eb91d363797..37d8bf84bea 100644 --- a/src/plugins/qmldesigner/qmldesignerplugin.qbs +++ b/src/plugins/qmldesigner/qmldesignerplugin.qbs @@ -677,6 +677,8 @@ Project { "navigator/previewtooltip.ui", "propertyeditor/aligndistribute.cpp", "propertyeditor/aligndistribute.h", + "propertyeditor/colorpalettesingleton.cpp", + "propertyeditor/colorpalettesingleton.h", "propertyeditor/designerpropertymap.cpp", "propertyeditor/designerpropertymap.h", "propertyeditor/fileresourcesmodel.cpp", @@ -711,12 +713,6 @@ Project { "propertyeditor/qmlanchorbindingproxy.h", "propertyeditor/qmlmodelnodeproxy.cpp", "propertyeditor/qmlmodelnodeproxy.h", - "propertyeditor/simplecolorpalette.cpp", - "propertyeditor/simplecolorpalette.h", - "propertyeditor/simplecolorpalettemodel.cpp", - "propertyeditor/simplecolorpalettemodel.h", - "propertyeditor/simplecolorpalettesingleton.cpp", - "propertyeditor/simplecolorpalettesingleton.h", "propertyeditor/tooltip.cpp", "propertyeditor/tooltip.h", "resources/resources.qrc",