diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml index 583c324ac23..d10f302f6ab 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml +++ b/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: { - colorEditor.color = colorEditor.value - } + onValueChanged: colorEditor.color = colorEditor.value - onBackendValueChanged: { - colorEditor.color = colorEditor.value - } + onBackendValueChanged: 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) - return + if (!supportGradient) + 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 diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientDialogPopup.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientDialogPopup.qml new file mode 100644 index 00000000000..e0a12de911e --- /dev/null +++ b/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 + } + } + } + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml index dd00c9d0a1d..0f0c8b85864 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml +++ b/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() diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPopupIndicator.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPopupIndicator.qml new file mode 100644 index 00000000000..f39486c78fa --- /dev/null +++ b/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") + } +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPropertySpinBox.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPropertySpinBox.qml new file mode 100644 index 00000000000..fc4f2db38f1 --- /dev/null +++ b/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 +} diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/images/icon_color_conical_gradient.png b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/images/icon_color_conical_gradient.png new file mode 100644 index 00000000000..160ca12db88 Binary files /dev/null and b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/images/icon_color_conical_gradient.png differ diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/images/icon_color_radial_gradient.png b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/images/icon_color_radial_gradient.png new file mode 100644 index 00000000000..d3d95e5766a Binary files /dev/null and b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/images/icon_color_radial_gradient.png differ