Commit ccf04023 authored by Thomas Hartmann's avatar Thomas Hartmann

QmlDesigner.PropertyEditor: Improve binding editor


The binding editor now behaves like a modal dialog in the
property editor.

Change-Id: I9b1a0635dbe5cc0b055225411af653dd8bf6b735
Reviewed-by: Riitta-Leena Miettinen's avatarLeena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Tim Jenssen's avatarTim Jenssen <tim.jenssen@qt.io>
parent 14428c15
......@@ -125,123 +125,140 @@ Item {
}
}
Rectangle {
parent: itemPane
visible: false
x: 6
Item {
id: expressionDialog
Rectangle {
anchors.fill: parent
color: creatorTheme.QmlDesignerBackgroundColorDarker
opacity: 0.6
}
onVisibleChanged: {
var pos = itemPane.mapFromItem(extendedFunctionButton.parent, 0, 0);
y = pos.y + 2;
MouseArea {
anchors.fill: parent
}
width: parent.width - 12
height: 120
radius: 2
color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
//border.color: creatorTheme.QmlDesignerBackgroundColorDarker
border.color: creatorTheme.QmlDesignerTabLight
Controls.TextField {
id: textField
anchors.fill: parent
anchors.leftMargin: 4
anchors.rightMargin: 4
anchors.topMargin: 4
anchors.bottomMargin: 20
onAccepted: {
backendValue.expression = textField.text
expressionDialog.visible = false
id: expressionDialog
visible: false
parent: itemPane
anchors.fill: parent
Rectangle {
x: 4
onVisibleChanged: {
var pos = itemPane.mapFromItem(extendedFunctionButton.parent, 0, 0);
y = pos.y + 2;
}
style: TextFieldStyle {
textColor: creatorTheme.PanelTextColorLight
padding.top: 3
padding.bottom: 1
padding.left: 16
placeholderTextColor: creatorTheme.PanelTextColorMid
background: Rectangle {
implicitWidth: 100
implicitHeight: 23
radius: 2
color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
width: parent.width - 8
height: 160
radius: 2
color: creatorTheme.QmlDesignerBackgroundColorDarkAlternate
border.color: creatorTheme.QmlDesignerBorderColor
Label {
x: 8
y: 6
font.bold: true
text: qsTr("Binding Editor")
}
Controls.TextField {
verticalAlignment: Text.AlignTop
id: textField
anchors.fill: parent
anchors.leftMargin: 8
anchors.rightMargin: 8
anchors.topMargin: 24
anchors.bottomMargin: 32
onAccepted: {
backendValue.expression = textField.text
expressionDialog.visible = false
}
style: TextFieldStyle {
textColor: creatorTheme.PanelTextColorLight
padding.top: 6
padding.bottom: 2
padding.left: 6
placeholderTextColor: creatorTheme.PanelTextColorMid
background: Rectangle {
implicitWidth: 100
implicitHeight: 23
radius: 2
color: creatorTheme.QmlDesignerBackgroundColorDarker
border.color: creatorTheme.QmlDesignerBorderColor
}
}
}
}
Row {
spacing: 0
Button {
width: 16
height: 16
style: ButtonStyle {
background: Item{
Image {
width: 16
height: 16
source: "image://icons/error"
opacity: {
if (control.pressed)
return 0.5;
if (control.hovered)
Row {
spacing: 2
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;
return 0.9;
}
Rectangle {
z: -1
anchors.fill: parent
color: control.hovered? creatorTheme.FancyToolButtonSelectedColor : creatorTheme.BackgroundColorDark
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
radius: 2
}
Rectangle {
z: -1
anchors.fill: parent
color: control.pressed || control.hovered ? creatorTheme.QmlDesignerBackgroundColorDarker : creatorTheme.QmlDesignerButtonColor
border.color: creatorTheme.QmlDesignerBorderColor
radius: 2
}
}
}
}
onClicked: {
backendValue.expression = textField.text
expressionDialog.visible = false
}
}
onClicked: {
backendValue.expression = textField.text
expressionDialog.visible = false
}
}
Button {
width: 16
height: 16
style: ButtonStyle {
background: Item {
Image {
width: 16
height: 16
source: "image://icons/ok"
opacity: {
if (control.pressed)
return 0.5;
if (control.hovered)
Button {
width: 16
height: 16
style: ButtonStyle {
background: Item {
Image {
width: 16
height: 16
source: "image://icons/ok"
opacity: {
if (control.pressed)
return 0.8;
return 1.0;
return 0.9;
}
Rectangle {
z: -1
anchors.fill: parent
color: control.hovered? creatorTheme.FancyToolButtonSelectedColor : creatorTheme.BackgroundColorDark
border.color: creatorTheme.QmlDesignerBackgroundColorDarker
radius: 2
}
Rectangle {
z: -1
anchors.fill: parent
color: control.pressed || control.hovered ? creatorTheme.QmlDesignerBackgroundColorDarker : creatorTheme.QmlDesignerButtonColor
border.color: creatorTheme.QmlDesignerBorderColor
radius: 2
}
}
}
}
onClicked: {
expressionDialog.visible = false
}
}
onClicked: {
expressionDialog.visible = false
}
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.margins: 4
}
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.margins: 2
}
}
......
Markdown is supported
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