feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

QmlDesigner: Add missing QML files

Browse Source 
This adds support for ShapeGradient in the property editor.

* LinearGradient
* RadialGradient
* ConicalGradient

Change-Id: I6a9cad3674b21174a12ac399cac88cb9dd972bd5
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>
This commit is contained in:
Thomas Hartmann
2019-03-21 15:31:43 +01:00
parent 6ff0f94768
commit 58cb148d26
7 changed files with 503 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

283
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/ColorEditor.qml
View File

@@ -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)
}
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
@@ -102,7 +107,22 @@ Column {
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
}
}
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

135
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientDialogPopup.qml Normal file
View File

@@ -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
}
}
}
}
}

1
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientLine.qml
View File

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

51
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPopupIndicator.qml Normal file
View File

@@ -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")
}
}

42
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/GradientPropertySpinBox.qml Normal file
View File

@@ -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
}

BIN
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/images/icon_color_conical_gradient.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 670 B

BIN
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/images/icon_color_radial_gradient.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 677 B