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

QmlDesigner.PropertyEditor: Improve binding editor

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

Change-Id: I9b1a0635dbe5cc0b055225411af653dd8bf6b735
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>
Reviewed-by: Tim Jenssen <tim.jenssen@qt.io>
This commit is contained in:
Thomas Hartmann
2016-07-28 15:02:45 +02:00
parent 14428c1586
commit ccf040239f
1 changed files with 112 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
share/qtcreator/qmldesigner/propertyEditorQmlSources/HelperWidgets/ExtendedFunctionButton.qml
+112 -95
View File
@@ -125,123 +125,140 @@ Item {
}
}
Rectangle {
parent: itemPane
visible: false
x: 6
Item {
Rectangle {
anchors.fill: parent
color: creatorTheme.QmlDesignerBackgroundColorDarker
opacity: 0.6
}
MouseArea {
anchors.fill: parent
}
id: expressionDialog
visible: false
parent: itemPane
onVisibleChanged: {
var pos = itemPane.mapFromItem(extendedFunctionButton.parent, 0, 0);
y = pos.y + 2;
}
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
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")
}
}
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)
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
}
}
}
}
onClicked: {
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
}
}
}
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)
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: {
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.8;
return 1.0;
}
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
}
}
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.margins: 4
}
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.margins: 2
}
}