From 2a135f5d1456d0de871ab78457991e1d62530102 Mon Sep 17 00:00:00 2001 From: Henning Gruendl Date: Mon, 18 Sep 2023 15:41:54 +0200 Subject: [PATCH] QmlDesigner: Fix long expression pill texts * Elide static texts * Clip dynamic texts Change-Id: I90a511ec6dd35d2b65f4064bc09c0a83e8d1e905 Reviewed-by: Qt CI Patch Build Bot Reviewed-by: Reviewed-by: Thomas Hartmann --- .../connectionseditor/ExpressionBuilder.qml | 1 + .../qmldesigner/connectionseditor/Pill.qml | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/share/qtcreator/qmldesigner/connectionseditor/ExpressionBuilder.qml b/share/qtcreator/qmldesigner/connectionseditor/ExpressionBuilder.qml index bd367debb75..54d8ee937f3 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/ExpressionBuilder.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/ExpressionBuilder.qml @@ -306,6 +306,7 @@ Rectangle { id: pill operatorModel: __operatorModel + maxTextWidth: root.width - 2 * StudioTheme.Values.flowMargin onRemove: function() { // If pill has focus due to selection or keyboard navigation diff --git a/share/qtcreator/qmldesigner/connectionseditor/Pill.qml b/share/qtcreator/qmldesigner/connectionseditor/Pill.qml index 3862e53e5ce..1a6d2681f50 100644 --- a/share/qtcreator/qmldesigner/connectionseditor/Pill.qml +++ b/share/qtcreator/qmldesigner/connectionseditor/Pill.qml @@ -36,6 +36,8 @@ FocusScope { property bool hovered: rootMouseArea.containsMouse property bool selected: root.focus + property int maxTextWidth: 600 + width: row.width height: StudioTheme.Values.flowPillHeight @@ -111,10 +113,23 @@ FocusScope { leftPadding: root.margin rightPadding: icon.visible ? 0 : root.margin + property int textWidth: Math.min(textMetrics.width, + root.maxTextWidth - row.leftPadding + - (icon.visible ? icon.width : root.margin)) + + TextMetrics { + id: textMetrics + text: textItem.visible ? textItem.text : textInput.text + font: textItem.font + } + Text { id: textItem + width: row.textWidth height: StudioTheme.Values.flowPillHeight verticalAlignment: Text.AlignVCenter + textFormat: Text.PlainText + elide: Text.ElideMiddle font.pixelSize: StudioTheme.Values.baseFontSize color: root.isShadow() ? StudioTheme.Values.themePillTextSelected : StudioTheme.Values.themePillText @@ -125,10 +140,11 @@ FocusScope { TextInput { id: textInput - x: root.isInvalid() ? root.margin : 0 + width: row.textWidth height: StudioTheme.Values.flowPillHeight topPadding: 1 + clip: true font.pixelSize: StudioTheme.Values.baseFontSize color: { if (root.isIntermediate())