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

QmlDesigner: Fix responsive property editor

Browse Source 
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 <thomas.hartmann@qt.io>
This commit is contained in:
Henning Gruendl
2024-06-20 13:36:19 +02:00
committed by Henning Gründl
parent a87b8253ae
commit 1728604a5c
1 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/StudioTheme/Values.qml
View File

@@ -173,7 +173,7 @@ QtObject {
property real controlColumnWithoutControlsWidth: 2 * (values.actionIndicatorWidth property real controlColumnWithoutControlsWidth: 2 * (values.actionIndicatorWidth
+ values.twoControlColumnGap) + 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 property real controlColumnWidth: values.controlColumnWithoutControlsWidth
+ 2 * values.twoControlColumnWidth + 2 * values.twoControlColumnWidth
@@ -194,18 +194,21 @@ QtObject {
property real dialogScreenMargin: Math.round(160 * values.scaleFactor) property real dialogScreenMargin: Math.round(160 * values.scaleFactor)
function responsiveResize(width) { function responsiveResize(width) {
// Subtract all layout gaps/spaces
var tmpWidth = width - values.sectionColumnSpacing var tmpWidth = width - values.sectionColumnSpacing
- values.sectionLeftPadding - values.sectionLayoutRightPadding - values.sectionLeftPadding - values.sectionLayoutRightPadding
var labelColumnWidth = Math.round(tmpWidth * values.columnFactor) var labelColumnWidth = Math.round(tmpWidth * values.columnFactor)
labelColumnWidth = Math.max(Math.min(values.propertyLabelWidthMax, labelColumnWidth), labelColumnWidth = Math.max(Math.min(values.propertyLabelWidthMax, labelColumnWidth),
values.propertyLabelWidthMin) values.propertyLabelWidthMin)
// Rest width when label width is substracted
var controlColumnWidth = tmpWidth - labelColumnWidth 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), controlWidth = Math.max(Math.min(values.twoControlColumnWidthMax, controlWidth),
values.twoControlColumnWidthMin) values.twoControlColumnWidthMin)
// When both label and controls are at max width, calculate the remaining space
values.propertyLabelWidth = labelColumnWidth 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 values.twoControlColumnWidth = controlWidth
} }