QmlDesigner.propertyEditor: new design for color editing of Rectangle

This adds gradient editing and is a solution for BAUHAUS-445

share/qtcreator/qmldesigner/propertyeditor/Qt/ColorGroupBox.qml

@@ -6,13 +6,41 @@ QExtGroupBox {
 
     property variant finished;
     property variant backendColor
-    property variant color: (backendColor === undefined || backendColor.value  === undefined) ? "#000000" : backendColor.value
+    property bool gradientEditing: gradientButtonChecked
+    property variant singleColor: (backendColor === undefined || backendColor.value  === undefined) ? "#000000" : backendColor.value
+    property variant gradientColor: "#000000"
+    property variant color: "#000000"
     property variant oldMaximumHeight;
 
     property variant startupCollapse: selectionChanged === undefined ? false : selectionChanged;
     property variant firstTime: true;
-	property variant caption: ""
-	smooth: false
+    property variant caption: ""
+    property bool showButtons: false
+    property bool showGradientButton: false
+
+    property bool gradientButtonChecked: buttons.gradient
+    property bool noneButtonChecked: buttons.none
+    property bool solidButtonChecked: buttons.solid
+
+    property alias setGradientButtonChecked: buttons.setGradient
+    property alias setNoneButtonChecked: buttons.setNone
+    property alias setSolidButtonChecked: buttons.setSolid
+
+    property alias collapseBox: colorButton.checked
+
+    property alias alpha: colorControl.alpha
+
+    smooth: false
+
+    onGradientColorChanged: {
+        if (gradientEditing == true)
+            color = gradientColor;
+        colorChanged();
+    }
+    onSingleColorChanged: {
+        if (!gradientEditing == true && color != singleColor)
+            color = singleColor;
+    }
 
     onFinishedChanged: {
         oldMaximumHeight = maximumHeight;
@@ -92,45 +120,94 @@ QExtGroupBox {
 
     QWidget {
         id: colorButtonWidget
-        height: 32
+        height: 28
         width: colorGroupBox.width
         layout: HorizontalLayout {
-            topMargin: 4
-            rightMargin: 10;
+            topMargin: 0
+            rightMargin: 2;
 
             Label {
                 text: colorGroupBox.caption
                 toolTip: colorGroupBox.caption
             }
 
-            LineEdit {
-                backendValue: colorGroupBox.backendColor
-                baseStateFlag: isBaseState
-            }
+            QWidget {
+                layout: HorizontalLayout {
+                    spacing: 6
+
+                    LineEdit {
+                        visible: gradientEditing == false
+                        backendValue: colorGroupBox.backendColor
+                        baseStateFlag: isBaseState
+                    }
 
-            ColorButton {
-                id: colorButton
-                color: colorGroupBox.color;
-                checkable: true;
-                checked: false;
-                minimumHeight: 18;
-                minimumWidth: 18;
-
-                onClicked: {
-				    if (colorGroupBox.animated)
-					    return;
-                    if (checked) {
-                        colorGroupBox.collapsed = false;
-                        colorButtonWidget.visible = true;
-                        } else {
-                        colorGroupBox.collapsed = true;
-                        colorButtonWidget.visible = true;
+                    QWidget {
+                        visible: gradientEditing == true
+                        minimumHeight: 24;
+                        id: lineEditWidget;
+                        QLineEdit {
+                            y: 2
+                            text: color
+                            width: lineEditWidget.width
+                            height: lineEditWidget.height
+
+                            onEditingFinished: {
+                                color = text
+                            }
                         }
-                }
+                    }
 
-            }
-            QWidget {
+                    ColorButton {
+                        id: colorButton
+                        color: colorGroupBox.color;
+                        noColor: noneButtonChecked;
+                        checkable: true;
+                        checked: false;
+                        fixedHeight: 22;
+                        fixedWidth: 22;
+                        width: fixedWidth
+                        height: fixedHeight
 
+                        onClicked: {
+                            if (colorGroupBox.animated)
+                                return;
+                            if (checked) {
+                                colorGroupBox.collapsed = false;
+                                colorButtonWidget.visible = true;
+                            } else {
+                                colorGroupBox.collapsed = true;
+                                colorButtonWidget.visible = true;
+                            }
+                        }
+
+                        onToggled: {
+                            if (colorGroupBox.animated)
+                                return;
+                            if (checked) {
+                                colorGroupBox.collapsed = false;
+                                colorButtonWidget.visible = true;
+                            } else {
+                                colorGroupBox.collapsed = true;
+                                colorButtonWidget.visible = true;
+                            }
+                        }
+
+                    }
+
+                    ColorTypeButtons {
+                        id: buttons;
+                        visible: showButtons && baseStateFlag
+                        showGradientButton: colorGroupBox.showGradientButton
+                    }
+
+                    QWidget {
+                        visible: !(showButtons && baseStateFlag)
+                        fixedHeight: 28
+                        fixedWidth: 93
+                        width: fixedWidth
+                        height: fixedHeight
+                    }
+                }
             }
 
         }
@@ -142,15 +219,23 @@ QExtGroupBox {
 
         QWidget {
             layout: HorizontalLayout {
-			    leftMargin: 12
-			    spacing: 0
+                leftMargin: 12
+                spacing: 0
 
                 ColorBox {
                     id: colorControl;
                     property variant backendColor: colorGroupBox.color;
                     color: colorGroupBox.color;
-                    onColorChanged: if (colorGroupBox.color != color) {
-                        colorGroupBox.backendColor.value = color;
+                    onColorChanged: {
+                        if (colorGroupBox.color != color) {
+                            if (colorGroupBox.gradientEditing == true) {
+                                colorGroupBox.color = color;
+                            } else {
+                                if (colorControl.alpha != 0)
+                                    setSolidButtonChecked = true;
+                                colorGroupBox.backendColor.value = color;
+                            }
+                        }
                     }
                 }
 
@@ -166,7 +251,7 @@ QExtGroupBox {
                         topMargin: 4
                         bottomMargin: 4
                         rightMargin: 0
-						leftMargin: 0
+                        leftMargin: 0
                         spacing: 2
                         QWidget {
                             layout: HorizontalLayout {
@@ -180,11 +265,10 @@ QExtGroupBox {
                                     maximum: 359
                                     value: colorControl.hue;
                                     onValueChanged: if (colorControl.hue != value)
-                                        colorControl.hue=value;
+                                    colorControl.hue=value;
                                 }
 
                             }
-
                         }
                         QWidget {
                             layout: HorizontalLayout {
@@ -202,7 +286,7 @@ QExtGroupBox {
                             }
 
                         }
-                        
+
                         QWidget {
                             layout: HorizontalLayout {
                                 Label {
@@ -218,7 +302,7 @@ QExtGroupBox {
                                 }
                             }
                         }
-                        
+
                         QWidget {
                             layout: HorizontalLayout {
                                 topMargin: 12

share/qtcreator/qmldesigner/propertyeditor/Qt/RectangleColorGroupBox.qml

@@ -6,19 +6,143 @@ GroupBox {
 
     caption: qsTr("Colors")
 
-    layout: VerticalLayout {        
+
+    property bool selectionFlag: selectionChanged
+
+    property bool isSetup;
+
+    property bool hasBorder
+
+
+    onSelectionFlagChanged: {
+        isSetup = true;
+        gradientLine.active = false;
+        colorGroupBox.setSolidButtonChecked = true;
+        if (backendValues.gradient.isInModel) {
+            colorGroupBox.setGradientButtonChecked = true;
+            gradientLine.active = true;
+            gradientLine.setupGradient();
+        }
+        if (colorGroupBox.alpha == 0) {
+            colorGroupBox.setNoneButtonChecked = true;
+            //borderColorBox.collapseBox = true
+        }
+
+        if (backendValues.border_color.isInModel || backendValues.border_width.isInModel) {
+            borderColorBox.setSolidButtonChecked = true;
+            hasBorder = true;
+        } else {
+            borderColorBox.setNoneButtonChecked = true;
+            hasBorder = false
+            //borderColorBox.collapseBox = true
+        }
+
+        isSetup = false
+    }
+
+    layout: VerticalLayout {
+
+        QWidget {
+            layout: HorizontalLayout {
+                spacing: 2
+                Label {
+                    text: qsTr("Stops")
+                    toolTip: qsTr("Gradient Stops")
+                }
+
+                GradientLine {
+                    id: gradientLine;
+                    activeColor: colorGroupBox.color
+                    itemNode: anchorBackend.itemNode
+                    visible: colorGroupBox.gradientButtonChecked
+                    active: visible
+                }
+            }
+        }
 
         ColorGroupBox {
+            id: colorGroupBox
             caption: qsTr("Rectangle")
-            finished: finishedNotify            
+            finished: finishedNotify
             backendColor: backendValues.color
-        }        
+            //gradientEditing: true;
+            gradientColor: gradientLine.activeColor;
+            showButtons: true;
+            showGradientButton: true;
+
+            onGradientButtonCheckedChanged: {
+                if (isSetup)
+                    return;
+                if (gradientButtonChecked) {
+                    gradientLine.active = true
+                    gradientLine.setupGradient();
+                    backendValues.color.resetValue();
+                } else {
+                    gradientLine.active = false
+                    if (backendValues.gradient.isInModel)
+                        gradientLine.deleteGradient();
+
+                }
+            }
+
+            onNoneButtonCheckedChanged: {
+                if (isSetup)
+                    return;
+                if (noneButtonChecked) {
+                    backendValues.color.value = "transparent";
+                    collapseBox = false
+                } else {
+                    alpha = 255;
+                }
+            }
+
+            onSolidButtonCheckedChanged: {
+                if (isSetup)
+                    return;
+                if (solidButtonChecked) {
+                    backendValues.color.resetValue();
+                }
+            }
+        }
 
         ColorGroupBox {
+            id: borderColorBox
             caption: qsTr("Border")
             finished: finishedNotify
+            showButtons: true;
 
             backendColor: backendValues.border_color
+
+            onNoneButtonCheckedChanged: {
+                if (isSetup)
+                    return;
+                if (noneButtonChecked) {
+                    transaction.start();
+                    backendValues.border_color.resetValue();
+                    backendValues.border_width.resetValue();
+                    transaction.end();
+                    hasBorder = false
+                    collapseBox = false
+                } else {
+                    transaction.start();
+                    backendValues.border_color.value = "blue"
+                    backendValues.border_color.value = "#000000";
+                    transaction.end();
+                    hasBorder = true
+                }
+            }
+
+            onSolidButtonCheckedChanged: {
+                if (isSetup)
+                    return;
+                if (solidButtonChecked) {
+                    transaction.start();
+                    backendValues.border_color.value = "blue"
+                    backendValues.border_color.value = "#000000";
+                    transaction.end();
+                    hasBorder = true
+                }
+            }
         }
 
     }

share/qtcreator/qmldesigner/propertyeditor/Qt/RectangleSpecifics.qml

@@ -11,6 +11,7 @@ QWidget {
         spacing: 0
 
         RectangleColorGroupBox {
+            id: colorsBox
             finished: finishedNotify;
         }
 
@@ -20,19 +21,10 @@ QWidget {
             caption: qsTr("Rectangle")
 
             layout: VerticalLayout {
-			    rightMargin: 24
-
-                IntEditor {
-                    backendValue: backendValues.radius
-                    caption: qsTr("Radius")
-                    baseStateFlag: isBaseState;
-                    step: 1;
-                    minimumValue: 0;
-                    maximumValue: Math.max(1,(Math.min(backendValues.width.value,backendValues.height.value)-backendValues.border_width.value)/2)
-                }
-
+                rightMargin: 24
 
                 IntEditor {
+                    visible: colorsBox.hasBorder
                     id: borderWidth;
                     backendValue: backendValues.border_width === undefined ? 0 : backendValues.border_width
 
@@ -43,6 +35,17 @@ QWidget {
                     minimumValue: 0;
                     maximumValue: 100;
                 }
+
+                IntEditor {
+                    property int border: backendValues.border_width.value === undefined ? 0 : backendValues.border_width.value
+                    backendValue: backendValues.radius
+                    caption: qsTr("Radius")
+                    baseStateFlag: isBaseState;
+                    step: 1;
+                    minimumValue: 0;
+                    maximumValue: Math.max(1, (Math.min(backendValues.width.value,backendValues.height.value) - border) / 2)
+                }
+
             }
         }