From 1728604a5c06a338d723af48f360589c5507ff2a Mon Sep 17 00:00:00 2001 From: Henning Gruendl Date: Thu, 20 Jun 2024 13:36:19 +0200 Subject: [PATCH] QmlDesigner: Fix responsive property editor Fix the responsive layout in the property editor by adding the remaining space when control and label max width is reached to the label width in order to make long labels more readable. Task-number: QDS-12243 Change-Id: Ib46f4d5e2ae7b48708ec790889180e6aeb932602 Reviewed-by: Thomas Hartmann --- .../imports/StudioTheme/Values.qml | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml index 010b8b52d2e..32a078b8d6d 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml @@ -173,7 +173,7 @@ QtObject { property real controlColumnWithoutControlsWidth: 2 * (values.actionIndicatorWidth + values.twoControlColumnGap) - + values.linkControlWidth // there could be an issue here with the new style + + values.iconAreaWidth // there could be an issue here with the new style property real controlColumnWidth: values.controlColumnWithoutControlsWidth + 2 * values.twoControlColumnWidth @@ -194,18 +194,21 @@ QtObject { property real dialogScreenMargin: Math.round(160 * values.scaleFactor) function responsiveResize(width) { + // Subtract all layout gaps/spaces var tmpWidth = width - values.sectionColumnSpacing - values.sectionLeftPadding - values.sectionLayoutRightPadding var labelColumnWidth = Math.round(tmpWidth * values.columnFactor) labelColumnWidth = Math.max(Math.min(values.propertyLabelWidthMax, labelColumnWidth), values.propertyLabelWidthMin) - + // Rest width when label width is substracted var controlColumnWidth = tmpWidth - labelColumnWidth - var controlWidth = Math.round((controlColumnWidth - values.controlColumnWithoutControlsWidth) * 0.5) + var controlWidth = Math.floor((controlColumnWidth - values.controlColumnWithoutControlsWidth) * 0.5) controlWidth = Math.max(Math.min(values.twoControlColumnWidthMax, controlWidth), values.twoControlColumnWidthMin) - - values.propertyLabelWidth = labelColumnWidth + // When both label and controls are at max width, calculate the remaining space + var rest = tmpWidth - (controlWidth * 2 + values.controlColumnWithoutControlsWidth + labelColumnWidth) + // Add the remaining space to the label width in order to improve readability of long labels + values.propertyLabelWidth = labelColumnWidth + rest values.twoControlColumnWidth = controlWidth }