QmlDesigner: Add missing QML files

This adds support for ShapeGradient in the property editor.

* LinearGradient
* RadialGradient
* ConicalGradient

Change-Id: I6a9cad3674b21174a12ac399cac88cb9dd972bd5
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

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

@@ -26,7 +26,8 @@
 import QtQuick 2.1
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 1.0 as Controls
-
+import QtQuickDesignerTheme 1.0
+import QtQuick.Controls.Styles 1.1
 
 Column {
     id: colorEditor
@@ -45,19 +46,17 @@ Column {
 
     property alias gradientPropertyName: gradientLine.gradientPropertyName
 
+    property bool shapeGradients: false
+
     property alias transparent: transparentButton.checked
 
     function isNotInGradientMode() {
-         return (buttonRow.checkedIndex !== 1)
+        return (buttonRow.checkedIndex !== 1)
     }
 
-    onValueChanged: {
+    onValueChanged: colorEditor.color = colorEditor.value
-        colorEditor.color = colorEditor.value
-    }
 
-    onBackendValueChanged: {
+    onBackendValueChanged: colorEditor.color = colorEditor.value
-        colorEditor.color = colorEditor.value
-    }
 
     Timer {
         id: colorEditorTimer
@@ -87,7 +86,13 @@ Column {
 
     GradientLine {
         property bool isInValidState: false
-        visible: buttonRow.checkedIndex === 1
+        visible: {
+            if (colorEditor.shapeGradients) {
+                return buttonRow.checkedIndex > 0 && buttonRow.checkedIndex < 4
+            } else {
+                return buttonRow.checkedIndex === 1
+            }
+        }
         id: gradientLine
 
         width: parent.width
@@ -98,11 +103,26 @@ Column {
         }
 
         onHasGradientChanged: {
-             if (!supportGradient)
+            if (!supportGradient)
-                 return
+                return
 
             if (gradientLine.hasGradient) {
-                buttonRow.initalChecked = 1
+                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
+                    }
+                }
+
                 colorEditor.color = gradientLine.currentColor
             } else {
                 buttonRow.initalChecked = 0
@@ -155,6 +175,11 @@ Column {
 
         SecondColumnLayout {
 
+            ColorCheckButton {
+                id: checkButton
+                color: colorEditor.color
+            }
+
             LineEdit {
                 enabled: !colorEditor.transparent
                 id: textField
@@ -181,10 +206,6 @@ Column {
 
                 Layout.fillWidth: true
             }
-            ColorCheckButton {
-                id: checkButton
-                color: colorEditor.color
-            }
 
             ButtonRow {
 
@@ -193,6 +214,7 @@ Column {
 
                 ButtonRowButton {
                     iconSource: "images/icon_color_solid.png"
+
                     onClicked: {
                         gradientLine.deleteGradient()
                         textField.text = colorEditor.color
@@ -205,10 +227,245 @@ Column {
                     iconSource: "images/icon_color_gradient.png"
                     onClicked: {
                         colorEditor.backendValue.resetValue()
+                        if (colorEditor.shapeGradients) {
+                            gradientLine.deleteGradient()
+                            gradientLine.gradientTypeName = "LinearGradient"
+                        }
                         gradientLine.addGradient()
                     }
 
-                    tooltip: qsTr("Gradient")
+                    tooltip: qsTr("Linear Gradient")
+
+                    GradientPopupIndicator {
+
+                        onClicked: gradientDialogPopupLinear.toggle()
+
+                        GradientDialogPopup {
+                            id: gradientDialogPopupLinear
+
+                            dialogHeight: 80
+                            content: GridLayout {
+                                rowSpacing: 4
+                                anchors.fill: parent
+                                height: 40
+
+                                columns: 4
+                                rows: 2
+
+                                anchors.leftMargin: 12
+                                anchors.rightMargin: 6
+
+                                anchors.topMargin: 24
+                                anchors.bottomMargin: 6
+
+                                Label {
+                                    text: "X1"
+                                    width: 16
+                                    tooltip: qsTr("Defines the start point for color interpolation.")
+                                }
+
+                                GradientPropertySpinBox {
+                                    propertyName: "x1"
+                                }
+
+                                Label {
+                                    text: "X2"
+                                    width: 16
+                                    tooltip: qsTr("Defines the end point for color interpolation.")
+                                }
+
+                                GradientPropertySpinBox {
+                                    propertyName: "x2"
+                                }
+
+                                Label {
+                                    text: "y1"
+                                    width: 16
+                                    tooltip: qsTr("Defines the start point for color interpolation.")
+                                }
+
+                                GradientPropertySpinBox {
+                                    propertyName: "y1"
+                                }
+
+                                Label {
+                                    text: "Y2"
+                                    width: 16
+                                    tooltip: qsTr("Defines the end point for color interpolation.")
+                                }
+
+                                GradientPropertySpinBox {
+                                    propertyName: "y2"
+                                }
+                            }
+                        }
+                    }
+                }
+                ButtonRowButton {
+                    visible: supportGradient && colorEditor.shapeGradients
+                    iconSource: "images/icon_color_radial_gradient.png"
+                    onClicked: {
+                        colorEditor.backendValue.resetValue()
+                        if (colorEditor.shapeGradients) {
+                            gradientLine.deleteGradient()
+                            gradientLine.gradientTypeName = "RadialGradient"
+                        }
+                        gradientLine.addGradient()
+                    }
+
+                    tooltip: qsTr("Radial Gradient")
+
+                    GradientPopupIndicator {
+                        onClicked: gradientDialogPopupRadial.toggle()
+
+                        GradientDialogPopup {
+                            id: gradientDialogPopupRadial
+                            dialogHeight: 140
+                            dialogWidth: 340
+                            content: GridLayout {
+                                rowSpacing: 4
+                                anchors.fill: parent
+                                height: 40
+
+                                columns: 4
+                                rows: 3
+
+                                anchors.leftMargin: 12
+                                anchors.rightMargin: 6
+
+                                anchors.topMargin: 24
+                                anchors.bottomMargin: 6
+
+                                Label {
+                                    text: "CenterX"
+                                    width: 54
+                                    tooltip: qsTr("Defines the center point.")
+                                }
+
+                                GradientPropertySpinBox {
+                                    propertyName: "centerX"
+                                }
+
+                                Label {
+                                    text: "CenterY"
+                                    width: 54
+                                    tooltip: qsTr("Defines the center point.")
+                                }
+
+                                GradientPropertySpinBox {
+                                    propertyName: "centerY"
+                                }
+
+                                Label {
+                                    text: "FocalX"
+                                    width: 54
+                                    tooltip: qsTr("Defines the focal point.")
+                                }
+
+                                GradientPropertySpinBox {
+                                    propertyName: "focalX"
+                                }
+
+                                Label {
+                                    text: "FocalY"
+                                    width: 54
+                                    tooltip: qsTr("Defines the focal point.")
+                                }
+
+                                GradientPropertySpinBox {
+                                    propertyName: "focalY"
+                                }
+
+                                Label {
+                                    text: "Center Radius"
+                                    width: 54
+                                    tooltip: qsTr("Defines the center point.")
+                                }
+
+                                GradientPropertySpinBox {
+                                    propertyName: "centerRadius"
+                                }
+
+                                Label {
+                                    text: "Focal Radius"
+                                    width: 54
+                                    tooltip: qsTr("Defines the focal radius. Set to 0 for simple radial gradients.")
+                                }
+
+                                GradientPropertySpinBox {
+                                    propertyName: "focalRadius"
+                                }
+                            }
+                        }
+                    }
+                }
+                ButtonRowButton {
+                    visible: supportGradient && colorEditor.shapeGradients
+                    iconSource: "images/icon_color_conical_gradient.png"
+                    onClicked: {
+                        colorEditor.backendValue.resetValue()
+                        if (colorEditor.shapeGradients) {
+                            gradientLine.deleteGradient()
+                            gradientLine.gradientTypeName = "ConicalGradient"
+                        }
+                        gradientLine.addGradient()
+                    }
+
+                    tooltip: qsTr("Concial Gradient")
+
+                    GradientPopupIndicator {
+
+                        onClicked: gradientDialogPopupConical.toggle()
+
+                        GradientDialogPopup {
+                            id: gradientDialogPopupConical
+                            dialogHeight: 80
+                            content: GridLayout {
+                                rowSpacing: 4
+                                anchors.fill: parent
+                                height: 40
+
+                                columns: 4
+                                rows: 2
+
+                                anchors.leftMargin: 12
+                                anchors.rightMargin: 6
+
+                                anchors.topMargin: 24
+                                anchors.bottomMargin: 6
+
+                                Label {
+                                    text: "CenterX"
+                                    width: 32
+                                    tooltip: qsTr("Defines the center point.")
+                                }
+
+                                GradientPropertySpinBox {
+                                    propertyName: "centerX"
+                                }
+
+                                Label {
+                                    text: "CenterY"
+                                    width: 32
+                                    tooltip: qsTr("Defines the center point.")
+                                }
+
+                                GradientPropertySpinBox {
+                                    propertyName: "centerY"
+                                }
+
+                                Label {
+                                    text: "Angle"
+                                    width: 32
+                                    tooltip: qsTr("Defines the start angle for the conical gradient. The value is in degrees (0-360).")
+                                }
+
+                                GradientPropertySpinBox {
+                                    propertyName: "angle"
+                                }
+                            }
+                        }
+                    }
                 }
                 ButtonRowButton {
                     id: transparentButton

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

@@ -0,0 +1,135 @@
+/****************************************************************************
+**
+** 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.
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 1.0 as Controls
+import QtQuickDesignerTheme 1.0
+import QtQuick.Controls.Styles 1.1
+
+Loader {
+    id: gradientDialogLoader
+    parent: itemPane
+    anchors.fill: parent
+
+    visible: false
+    active: visible
+
+    function toggle() {
+        gradientDialogLoader.visible = !gradientDialogLoader.visible
+    }
+
+    property Component content
+
+    property int dialogHeight: 240
+    property int dialogWidth: 280
+
+    sourceComponent: Component {
+        FocusScope {
+            id: popup
+
+            Keys.onEscapePressed: {
+                event.accepted = true
+                gradientDialogLoader.visible = false
+            }
+
+            Component.onCompleted: {
+                popup.forceActiveFocus()
+            }
+
+            Rectangle {
+                anchors.fill: parent
+                color: Theme.qmlDesignerBackgroundColorDarker()
+                opacity: 0.6
+            }
+
+            MouseArea {
+                anchors.fill: parent
+                onClicked: gradientDialogLoader.visible = false
+            }
+            Rectangle {
+                id: background
+
+                property int xOffset: itemPane.width - gradientDialogLoader.dialogWidth
+                x: 4 + xOffset
+                Component.onCompleted: {
+                    var pos = itemPane.mapFromItem(buttonRow.parent, 0, 0)
+                    y = pos.y + 32
+                }
+
+                width: parent.width - 8 - xOffset
+                height: gradientDialogLoader.dialogHeight
+
+                radius: 2
+                color: Theme.qmlDesignerBackgroundColorDarkAlternate()
+                border.color: Theme.qmlDesignerBorderColor()
+
+                Label {
+                    x: 8
+                    y: 6
+                    font.bold: true
+                    text: qsTr("Gradient Properties")
+                }
+
+                Button {
+                    width: 16
+                    height: 16
+                    style: ButtonStyle {
+                        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: gradientDialogLoader.visible = false
+
+                    anchors.right: parent.right
+                    anchors.top: parent.top
+                    anchors.margins: 4
+                }
+
+                Loader {
+                    anchors.fill: parent
+                    sourceComponent: gradientDialogLoader.content
+                }
+            }
+        }
+    }
+}

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

@@ -38,6 +38,7 @@ Item {
 
 
     property alias gradientPropertyName: gradientModel.gradientPropertyName
+    property alias gradientTypeName: gradientModel.gradientTypeName
 
     onHasGradientChanged: {
         colorLine.invalidate()

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

@@ -0,0 +1,51 @@
+/****************************************************************************
+**
+** 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.
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 1.0 as Controls
+
+Image {
+    id: root
+    signal clicked
+    visible: colorEditor.shapeGradients && parent.checked
+    width: 8
+    height: 4
+    source: "image://icons/down-arrow"
+    anchors.horizontalCenter: parent.horizontalCenter
+    anchors.top: parent.bottom
+    anchors.topMargin: 2
+    opacity: popupRegion.containsMouse ? 1 : 0.8
+
+    ToolTipArea {
+        id: popupRegion
+
+        onClicked: root.clicked()
+        hoverEnabled: true
+        anchors.fill: parent
+        anchors.margins: -2
+        tooltip: qsTr("Edit Gradient Properties")
+    }
+}

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

@@ -0,0 +1,42 @@
+/****************************************************************************
+**
+** 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.
+**
+****************************************************************************/
+
+import QtQuick 2.1
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 1.0 as Controls
+import QtQuickDesignerTheme 1.0
+import QtQuick.Controls.Styles 1.1
+
+DoubleSpinBox {
+    id: spinBox
+
+    property string propertyName
+
+    minimumValue: -9999
+    maximumValue: 9999
+    Component.onCompleted: spinBox.value = gradientLine.model.readGradientProperty(propertyName)
+    onValueChanged:  gradientLine.model.setGradientProperty(propertyName, spinBox.value)
+    stepSize: 1
+}