From c00eb87c9686fc639db4e705662b5df48b993d80 Mon Sep 17 00:00:00 2001 From: Thomas Hartmann Date: Thu, 31 Aug 2023 16:24:18 +0200 Subject: [PATCH] QmlDesigner: Update QML for ConnectionEditor MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 Reviewed-by: Henning Gründl --- .../connectionseditor/BindingsDialogForm.qml | 25 ++--- .../connectionseditor/BindingsListView.qml | 99 +++++++++++++------ .../connectionseditor/ConnectionsDialog.qml | 4 + .../ConnectionsDialogForm.qml | 28 +++--- .../connectionseditor/ConnectionsListView.qml | 3 + .../connectionseditor/PopupDialog.qml | 14 +++ .../connectionseditor/PopupLabel.qml | 20 ++++ .../PropertiesDialogForm.qml | 22 ++--- .../connectionseditor/PropertiesListView.qml | 98 ++++++++++++------ 9 files changed, 206 insertions(+), 107 deletions(-) create mode 100644 share/qtcreator/qmldesigner/connectionseditor/PopupLabel.qml diff --git a/share/qtcreator/qmldesigner/connectionseditor/BindingsDialogForm.qml b/share/qtcreator/qmldesigner/connectionseditor/BindingsDialogForm.qml index 932860f34cb..0d053771440 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/BindingsDialogForm.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/BindingsDialogForm.qml @@ -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 } } diff --git a/share/qtcreator/qmldesigner/connectionseditor/BindingsListView.qml b/share/qtcreator/qmldesigner/connectionseditor/BindingsListView.qml index 4c73809c780..8a96ae83125 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/BindingsListView.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/BindingsListView.qml @@ -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 } } diff --git a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialog.qml b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialog.qml index aafd334046e..210fcc81d3a 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialog.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialog.qml @@ -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 { diff --git a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml index 201790c6a67..7380d47aeb8 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsDialogForm.qml @@ -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 { diff --git a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml index 179c6d220e0..1a0f3905ee9 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/ConnectionsListView.qml @@ -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 { diff --git a/share/qtcreator/qmldesigner/connectionseditor/PopupDialog.qml b/share/qtcreator/qmldesigner/connectionseditor/PopupDialog.qml index 2119f56e88c..8032ae84ec7 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/PopupDialog.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/PopupDialog.qml @@ -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() } diff --git a/share/qtcreator/qmldesigner/connectionseditor/PopupLabel.qml b/share/qtcreator/qmldesigner/connectionseditor/PopupLabel.qml new file mode 100644 index 00000000000..1af0950be4f --- /dev/null +++ b/share/qtcreator/qmldesigner/connectionseditor/PopupLabel.qml @@ -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") + } +} diff --git a/share/qtcreator/qmldesigner/connectionseditor/PropertiesDialogForm.qml b/share/qtcreator/qmldesigner/connectionseditor/PropertiesDialogForm.qml index c728027f30f..0936581c86f 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/PropertiesDialogForm.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/PropertiesDialogForm.qml @@ -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 diff --git a/share/qtcreator/qmldesigner/connectionseditor/PropertiesListView.qml b/share/qtcreator/qmldesigner/connectionseditor/PropertiesListView.qml index f39b26ee7b6..cf0194f1b48 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/PropertiesListView.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/PropertiesListView.qml @@ -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 } }