From 890aca82aeaab8e76f094a80ef40842c348b3dbe Mon Sep 17 00:00:00 2001
From: Thomas Hartmann <Thomas.Hartmann@nokia.com>
Date: Mon, 19 Apr 2010 12:03:18 +0200
Subject: [PATCH] QmlDesigner.propertyEditor: new design for color editing of
Rectangle
This adds gradient editing and is a solution for BAUHAUS-445
---
.../propertyeditor/Qt/ColorGroupBox.qml | 162 +++++++++++++-----
.../Qt/RectangleColorGroupBox.qml | 130 +++++++++++++-
.../propertyeditor/Qt/RectangleSpecifics.qml | 25 +--
3 files changed, 264 insertions(+), 53 deletions(-)
diff --git a/share/qtcreator/qmldesigner/propertyeditor/Qt/ColorGroupBox.qml b/share/qtcreator/qmldesigner/propertyeditor/Qt/ColorGroupBox.qml
index 568a4594fda..cd936538b82 100644
--- a/share/qtcreator/qmldesigner/propertyeditor/Qt/ColorGroupBox.qml
+++ b/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
diff --git a/share/qtcreator/qmldesigner/propertyeditor/Qt/RectangleColorGroupBox.qml b/share/qtcreator/qmldesigner/propertyeditor/Qt/RectangleColorGroupBox.qml
index e803b709434..574a206a66b 100644
--- a/share/qtcreator/qmldesigner/propertyeditor/Qt/RectangleColorGroupBox.qml
+++ b/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
+ }
+ }
}
}
diff --git a/share/qtcreator/qmldesigner/propertyeditor/Qt/RectangleSpecifics.qml b/share/qtcreator/qmldesigner/propertyeditor/Qt/RectangleSpecifics.qml
index c3afd1243bf..66e2ddcfe80 100644
--- a/share/qtcreator/qmldesigner/propertyeditor/Qt/RectangleSpecifics.qml
+++ b/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)
+ }
+
}
}
--
GitLab