Skip to content
GitLab
Commit 890aca82 authored by Thomas Hartmann's avatar Thomas Hartmann
Browse files

QmlDesigner.propertyEditor: new design for color editing of Rectangle 

This adds gradient editing and is a solution for BAUHAUS-445
parent 6e3ffa05
Hide whitespace changes
Inline Side-by-side
share/qtcreator/qmldesigner/propertyeditor/Qt/ColorGroupBox.qml
View file @ 890aca82
......@@ -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
View file @ 890aca82
......@@ -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
View file @ 890aca82
......@@ -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)
}
}
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment