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

QmlDesigner: Update QML for ConnectionEditor

Browse Source 
* Style PropertiesList
* Style BindingsList
* Add PoupLabel for reuse
* Take screen height into account
* Minor tweaks no forms

Change-Id: I70b141732f38a9534447586fb00cd736949e56e5
Reviewed-by: Qt CI Patch Build Bot <ci_patchbuild_bot@qt.io>
Reviewed-by: Henning Gründl <henning.gruendl@qt.io>
This commit is contained in:
Thomas Hartmann
2023-08-31 16:24:18 +02:00
parent d9d89ef6cb
commit c00eb87c96
9 changed files with 206 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
share/qtcreator/qmldesigner/connectionseditor/BindingsDialogForm.qml
View File

@@ -5,27 +5,22 @@ import QtQuick
import QtQuick.Controls
import StudioControls
Rectangle {
Item {
width: 400
height: 800
color: "#1b1b1b"
property var backend
Text {
id: text1
PopupLabel {
x: 10
y: 25
color: "#ffffff"
text: qsTr("Target")
font.pixelSize: 15
}
Text {
PopupLabel {
id: text111
x: 80
y: 25
color: "red"
text: backend.targetNode
font.pixelSize: 15
}
@@ -44,13 +39,10 @@ Rectangle {
onCurrentTypeIndexChanged: target.currentIndex = target.currentTypeIndex
}
Text {
id: text2
PopupLabel {
x: 13
y: 111
color: "#ffffff"
text: qsTr("Source Propety")
font.pixelSize: 15
}
TopLevelComboBox {
@@ -68,12 +60,10 @@ Rectangle {
onCurrentTypeIndexChanged: sourceNode.currentIndex = sourceNode.currentTypeIndex
}
Text {
PopupLabel {
x: 13
y: 88
color: "#ffffff"
text: qsTr("Source Node")
font.pixelSize: 15
}
TopLevelComboBox {
@@ -90,12 +80,9 @@ Rectangle {
onCurrentTypeIndexChanged: sourceProperty.currentIndex = sourceProperty.currentTypeIndex
}
Text {
id: text3
PopupLabel {
x: 10
y: 55
color: "#ffffff"
text: qsTr("Property")
font.pixelSize: 15
}
}

99
share/qtcreator/qmldesigner/connectionseditor/BindingsListView.qml
View File

@@ -12,13 +12,17 @@ ListView {
id: listView
width: 606
height: 160
interactive: false
clip: true
interactive: true
highlightMoveDuration: 0
highlightResizeDuration: 0
onVisibleChanged: {
dialog.hide()
}
property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle
property int modelCurrentIndex: listView.model.currentIndex ?? 0
// Something weird with currentIndex happens when items are removed added.
@@ -33,6 +37,12 @@ ListView {
dialog.backend.currentRow = listView.currentIndex
}
readonly property int rowSpacing: StudioTheme.Values.toolbarHorizontalMargin
readonly property int rowSpace: listView.width - (listView.rowSpacing * 4)
- listView.style.squareControlSize.width
property int rowWidth: listView.rowSpace / 4
property int rowRest: listView.rowSpace % 4
data: [
BindingsDialog {
id: dialog
@@ -40,10 +50,16 @@ ListView {
backend: listView.model.delegate
}
]
delegate: Item {
delegate: Rectangle {
width: 600
height: 18
id: itemDelegate
width: ListView.view.width
height: listView.style.squareControlSize.height
color: mouseArea.containsMouse ?
itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover
: listView.style.background.hover
: "transparent"
MouseArea {
id: mouseArea
@@ -59,64 +75,91 @@ ListView {
}
Row {
id: row1
x: 0
y: 0
width: 600
height: 16
spacing: 10
id: row
height: itemDelegate.height
spacing: listView.rowSpacing
property color textColor: itemDelegate.ListView.isCurrentItem ? listView.style.text.selectedText
: listView.style.icon.idle
Text {
width: 120
color: "#ffffff"
width: listView.rowWidth + listView.rowRest
height: itemDelegate.height
color: row.textColor
text: target ?? ""
anchors.verticalCenter: parent.verticalCenter
font.bold: false
elide: Text.ElideMiddle
leftPadding: listView.rowSpacing
}
Text {
width: 120
width: listView.rowWidth
height: itemDelegate.height
text: targetProperty ?? ""
color: "#ffffff"
color: row.textColor
anchors.verticalCenter: parent.verticalCenter
font.bold: false
elide: Text.ElideMiddle
}
Text {
width: 120
width: listView.rowWidth
height: itemDelegate.height
text: source ?? ""
anchors.verticalCenter: parent.verticalCenter
color: "#ffffff"
color: row.textColor
font.bold: false
elide: Text.ElideMiddle
}
Text {
width: 120
width: listView.rowWidth
height: itemDelegate.height
text: sourceProperty ?? ""
anchors.verticalCenter: parent.verticalCenter
color: "#ffffff"
color: row.textColor
font.bold: false
elide: Text.ElideMiddle
}
Text {
width: 120
Rectangle {
width: listView.style.squareControlSize.width
height: listView.style.squareControlSize.height
text: "-"
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
font.pointSize: 14
color: "#ffffff"
font.bold: true
MouseArea {
color: toolTipArea.containsMouse ?
itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover
: listView.style.background.hover
: "transparent"
Text {
anchors.fill: parent
text: StudioTheme.Constants.remove_medium
font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: listView.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
color: row.textColor
renderType: Text.QtRendering
}
HelperWidgets.ToolTipArea {
id: toolTipArea
tooltip: qsTr("This is a test.")
anchors.fill: parent
onClicked: listView.model.remove(index)
}
}
}
}
highlight: Rectangle {
color: "#2a5593"
color: listView.style.interaction
width: 600
}
}

4
share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialog.qml
View File

@@ -18,6 +18,10 @@ PopupDialog {
text: qsTr("Target")
font.pixelSize: StudioTheme.Values.myFontSize
anchors.verticalCenter: parent.verticalCenter
ToolTipArea {
anchors.fill: parent
tooltip: qsTr("Choose the target for the signal.")
}
}
StudioControls.TopLevelComboBox {

28
share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml
View File

@@ -16,11 +16,6 @@ Column {
property var backend
component PopupLabel : Text {
width: root.columnWidth
color: StudioTheme.Values.themeTextColor
font.pixelSize: StudioTheme.Values.myFontSize
}
/* replaced by ConnectionModelStatementDelegate defined in C++
enum ActionType {
@@ -39,8 +34,8 @@ Column {
Row {
spacing: root.horizontalSpacing
PopupLabel { text: qsTr("Signal") }
PopupLabel { text: qsTr("Action") }
PopupLabel { text: qsTr("Signal"); tooltip: qsTr("The name of the signal.") }
PopupLabel { text: qsTr("Action"); tooltip: qsTr("The type of the action.") }
}
Row {
@@ -75,7 +70,7 @@ Column {
{ value: ConnectionModelStatementDelegate.ChangeState, text: qsTr("Change State") },
{ value: ConnectionModelStatementDelegate.SetProperty, text: qsTr("Set Property") },
{ value: ConnectionModelStatementDelegate.PrintMessage, text: qsTr("Print Message") },
{ value: ConnectionModelStatementDelegate.Custom, text: qsTr("Custom") }
{ value: ConnectionModelStatementDelegate.Custom, text: qsTr("Unknown") }
]
}
}
@@ -85,8 +80,8 @@ Column {
visible: action.currentValue === ConnectionModelStatementDelegate.CallFunction
spacing: root.horizontalSpacing
PopupLabel { text: qsTr("Item") }
PopupLabel { text: qsTr("Method") }
PopupLabel { text: qsTr("Item") ; tooltip: qsTr("The target item of the function.")}
PopupLabel { text: qsTr("Method") ; tooltip: qsTr("The name of the function.")}
}
Row {
@@ -122,8 +117,8 @@ Column {
visible: action.currentValue === ConnectionModelStatementDelegate.Assign
spacing: root.horizontalSpacing
PopupLabel { text: qsTr("From") }
PopupLabel { text: qsTr("To") }
PopupLabel { text: qsTr("From") ; tooltip: qsTr("The Property to assign from.")}
PopupLabel { text: qsTr("To"); tooltip: qsTr("The Property to assign to.") }
}
Row {
@@ -191,8 +186,8 @@ Column {
visible: action.currentValue === ConnectionModelStatementDelegate.ChangeState
spacing: root.horizontalSpacing
PopupLabel { text: qsTr("State Group") }
PopupLabel { text: qsTr("State") }
PopupLabel { text: qsTr("State Group"); tooltip: qsTr("The State Group.") }
PopupLabel { text: qsTr("State"); tooltip: qsTr("The State .") }
}
Row {
@@ -228,8 +223,8 @@ Column {
visible: action.currentValue === ConnectionModelStatementDelegate.SetProperty
spacing: root.horizontalSpacing
PopupLabel { text: qsTr("Item") }
PopupLabel { text: qsTr("Property") }
PopupLabel { text: qsTr("Item"); tooltip: qsTr("The Item.")}
PopupLabel { text: qsTr("Property"); tooltip: qsTr("The property of the item.")}
}
Row {
@@ -283,6 +278,7 @@ Column {
PopupLabel {
visible: action.currentValue === ConnectionModelStatementDelegate.PrintMessage
text: qsTr("Message")
tooltip: qsTr("The message that is printed.")
}
StudioControls.TextField {

3
share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml
View File

@@ -104,6 +104,7 @@ ListView {
verticalAlignment: Text.AlignVCenter
font.bold: false
leftPadding: root.rowSpacing
elide: Text.ElideMiddle
}
Text {
@@ -113,6 +114,7 @@ ListView {
color: row.textColor
verticalAlignment: Text.AlignVCenter
font.bold: false
elide: Text.ElideMiddle
}
Text {
@@ -122,6 +124,7 @@ ListView {
verticalAlignment: Text.AlignVCenter
color: row.textColor
font.bold: false
elide: Text.ElideMiddle
}
Rectangle {

14
share/qtcreator/qmldesigner/connectionseditor/PopupDialog.qml
View File

@@ -12,6 +12,7 @@ Window {
property alias titleBar: titleBarContent.children
default property alias content: mainContent.children
property StudioTheme.ControlStyle style: StudioTheme.Values.controlStyle
width: 320
height: column.implicitHeight
@@ -19,6 +20,16 @@ Window {
flags: Qt.FramelessWindowHint | Qt.Dialog
color: StudioTheme.Values.themePopoutBackground
function ensureVerticalPosition()
{
if ((window.y + window.height) > (Screen.height - window.style.dialogScreenMargin)) {
window.y = (Screen.height - window.height - window.style.dialogScreenMargin)
}
}
onHeightChanged: window.ensureVerticalPosition()
function popup(item) {
print("popup " + item)
var padding = 12
@@ -27,6 +38,9 @@ Window {
if (window.x < 0)
window.x = p.x + item.width + padding
window.y = p.y
window.ensureVerticalPosition()
window.show()
window.raise()
}

20
share/qtcreator/qmldesigner/connectionseditor/PopupLabel.qml Normal file
View File

@@ -0,0 +1,20 @@
// Copyright (C) 2023 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GPL-3.0-only WITH Qt-GPL-exception-1.0
import QtQuick
import QtQuick.Controls
import HelperWidgets as HelperWidgets
import StudioControls as StudioControls
import StudioTheme as StudioTheme
Text {
width: root.columnWidth
color: StudioTheme.Values.themeTextColor
font.pixelSize: StudioTheme.Values.myFontSize
property alias tooltip: area.tooltip
ToolTipArea {
id: area
anchors.fill: parent
tooltip: qsTr("missing")
}
}

22
share/qtcreator/qmldesigner/connectionseditor/PropertiesDialogForm.qml
View File

@@ -6,19 +6,18 @@ import QtQuick.Controls 2.15
import StudioControls
Rectangle {
Item {
width: 400
height: 800
color: "#1b1b1b"
property var backend
Text {
id: text1
PopupLabel {
x: 10
y: 25
color: "#ffffff"
text: qsTr("Type:")
font.pixelSize: 15
}
TopLevelComboBox {
@@ -33,20 +32,16 @@ Rectangle {
onCurrentTypeIndexChanged: target.currentIndex = target.currentTypeIndex
}
Text {
id: text2
PopupLabel {
x: 10
y: 131
color: "#ffffff"
text: qsTr("Name")
font.pixelSize: 15
}
TextInput {
id: name
x: 70
y: 131
color: "white"
width: 156
text: backend.name.text ?? ""
onEditingFinished: {
@@ -54,17 +49,14 @@ Rectangle {
}
}
Text {
PopupLabel {
x: 10
y: 81
color: "#ffffff"
text: qsTr("Value")
font.pixelSize: 15
}
TextInput {
id: value
color: "red"
x: 70
y: 81
width: 156

98
share/qtcreator/qmldesigner/connectionseditor/PropertiesListView.qml
View File

@@ -12,13 +12,17 @@ ListView {
id: listView
width: 606
height: 160
interactive: false
clip: true
interactive: true
highlightMoveDuration: 0
highlightResizeDuration: 0
onVisibleChanged: {
dialog.hide()
}
property StudioTheme.ControlStyle style: StudioTheme.Values.viewBarButtonStyle
property int modelCurrentIndex: listView.model.currentIndex ?? 0
// Something weird with currentIndex happens when items are removed added.
@@ -33,6 +37,12 @@ ListView {
dialog.backend.currentRow = listView.currentIndex
}
readonly property int rowSpacing: StudioTheme.Values.toolbarHorizontalMargin
readonly property int rowSpace: listView.width - (listView.rowSpacing * 4)
- listView.style.squareControlSize.width
property int rowWidth: listView.rowSpace / 4
property int rowRest: listView.rowSpace % 4
data: [
PropertiesDialog {
id: dialog
@@ -41,10 +51,14 @@ ListView {
}
]
delegate: Item {
width: 600
height: 18
delegate: Rectangle {
id: itemDelegate
width: ListView.view.width
height: listView.style.squareControlSize.height
color: mouseArea.containsMouse ?
itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover
: listView.style.background.hover
: "transparent"
MouseArea {
id: mouseArea
@@ -64,64 +78,90 @@ ListView {
}
Row {
id: row1
x: 0
y: 0
width: 600
height: 16
spacing: 10
id: row
height: itemDelegate.height
spacing: listView.rowSpacing
property color textColor: itemDelegate.ListView.isCurrentItem ? listView.style.text.selectedText
: listView.style.icon.idle
Text {
width: 120
color: "#ffffff"
width: listView.rowWidth + listView.rowRest
height: itemDelegate.height
color: row.textColor
text: target ?? ""
anchors.verticalCenter: parent.verticalCenter
font.bold: false
elide: Text.ElideMiddle
leftPadding: listView.rowSpacing
}
Text {
width: 120
width: listView.rowWidth
height: itemDelegate.height
color: row.textColor
text: name ?? ""
color: "#ffffff"
anchors.verticalCenter: parent.verticalCenter
font.bold: false
elide: Text.ElideMiddle
}
Text {
width: 120
width: listView.rowWidth + listView.rowRest
height: itemDelegate.height
color: row.textColor
text: type ?? ""
anchors.verticalCenter: parent.verticalCenter
color: "#ffffff"
font.bold: false
elide: Text.ElideMiddle
}
Text {
width: 120
width: listView.rowWidth + listView.rowRest
height: itemDelegate.height
color: row.textColor
text: value ?? ""
anchors.verticalCenter: parent.verticalCenter
color: "#ffffff"
font.bold: false
elide: Text.ElideMiddle
}
Text {
width: 120
Rectangle {
width: listView.style.squareControlSize.width
height: listView.style.squareControlSize.height
text: "-"
anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignRight
font.pointSize: 14
color: "#ffffff"
font.bold: true
MouseArea {
color: toolTipArea.containsMouse ?
itemDelegate.ListView.isCurrentItem ? listView.style.interactionHover
: listView.style.background.hover
: "transparent"
Text {
anchors.fill: parent
text: StudioTheme.Constants.remove_medium
font.family: StudioTheme.Constants.iconFont.family
font.pixelSize: listView.style.baseIconFontSize
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
color: row.textColor
renderType: Text.QtRendering
}
HelperWidgets.ToolTipArea {
id: toolTipArea
tooltip: qsTr("This is a test.")
anchors.fill: parent
onClicked: listView.model.remove(index)
}
}
}
}
highlight: Rectangle {
color: "#2a5593"
color: listView.style.interaction
width: 600
}
}