QmlDesigner: Make the states view responsive

When resizing the states view vertically, states now will update their
height to fit the available space.

Fixes: QDS-5753
Change-Id: I3aa352610122b49049979c84aba12d99a0da0ea5
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>

share/qtcreator/qmldesigner/statesEditorQmlSources/StatesDelegate.qml

@@ -40,7 +40,6 @@ Rectangle {
     property color baseColor
     property string delegateStateName
     property string delegateStateImageSource
-    property int delegateStateImageSize
     property bool delegateHasWhenCondition
     property string delegateWhenConditionString
     property bool hasAnnotation: checkAnnotation()
@@ -70,7 +69,6 @@ Rectangle {
     MouseArea {
         id: mouseArea
         anchors.fill: parent
-        acceptedButtons: Qt.LeftButton
         onClicked: {
             focus = true
             root.currentStateInternalId = internalNodeId
@@ -168,7 +166,7 @@ Rectangle {
     }
 
 
-    Rectangle {
+    Rectangle { // highlight for default state
         anchors.margins: (isDefaultState || (isBaseState && !modelHasDefaultState)) ? -myRoot.highlightBorderWidth : 0
         anchors.fill: column
         color: StudioTheme.Values.themeStateSeparator
@@ -176,7 +174,6 @@ Rectangle {
         border.width: (isDefaultState || (isBaseState && !modelHasDefaultState)) ? myRoot.highlightBorderWidth : 0
     }
 
-
     Column {
         id: column
 
@@ -185,7 +182,6 @@ Rectangle {
         spacing: expanded ? myRoot.columnSpacing : 0
 
         Rectangle {
-
             width: myRoot.width - 2 * myRoot.stateMargin
             height: myRoot.topAreaHeight
 
@@ -261,13 +257,12 @@ Rectangle {
                 font.pixelSize: StudioTheme.Values.myFontSize
                 font.family: StudioTheme.Constants.font
 
-                visible: (isDefaultState || (isBaseState && !modelHasDefaultState))
+                visible: isDefaultState || (isBaseState && !modelHasDefaultState)
 
                 text: qsTr("Default")
             }
         }
 
-
         Rectangle {
             id: stateImageArea
             width: myRoot.width - 2 * myRoot.stateMargin
@@ -297,8 +292,6 @@ Rectangle {
                 anchors.centerIn: parent
                 anchors.fill: parent
                 source: delegateStateImageSource
-                sourceSize.width: delegateStateImageSize
-                sourceSize.height: delegateStateImageSize
                 fillMode: Image.PreserveAspectFit
             }
         }
@@ -329,5 +322,4 @@ Rectangle {
             hideWidget()
         }
     }
-
 }

share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml

@@ -34,20 +34,18 @@ FocusScope {
     id: root
 
     property int delegateTopAreaHeight: StudioTheme.Values.height + 8
-    property int delegateBottomAreaHeight: 200
+    property int delegateBottomAreaHeight: delegateHeight - 2 * delegateStateMargin - delegateTopAreaHeight - delegateColumnSpacing
     property int delegateColumnSpacing: 2
     property int delegateStateMargin: 16
-    property int delegatePreviewMargin: 16
-    property int effectiveHeight: root.expanded ? 287 : 85 // height of the states area
+    property int delegatePreviewMargin: 10
+    property int effectiveHeight: root.expanded ? Math.max(85, Math.min(287, root.height)) : 85 // height of the states area
 
     signal createNewState
     signal deleteState(int internalNodeId)
     signal duplicateCurrentState
 
-    property int stateImageSize: 200
     property int padding: 2
-    property int delegateWidth: root.stateImageSize
-                                + 2 * (root.delegateStateMargin + root.delegatePreviewMargin)
+    property int delegateWidth: 264
     property int delegateHeight: effectiveHeight
                                  - StudioTheme.Values.scrollBarThickness
                                  - 2 * (root.padding + StudioTheme.Values.border)
@@ -102,8 +100,8 @@ FocusScope {
         anchors.right: parent.right
         anchors.rightMargin: 8
         y: (Math.min(effectiveHeight, root.height) - height) / 2
-        width: Math.max(root.delegateHeight / 2 - 8, 18)
-        height: root.expanded ? 60 : width
+        width: root.expanded ? 140 : 18
+        height: root.expanded ? 60 : 18
 
         onClicked: {
             contextMenu.dismiss()
@@ -144,7 +142,6 @@ FocusScope {
             baseColor: isCurrentState ? StudioTheme.Values.themeInteraction : background.color
             delegateStateName: stateName
             delegateStateImageSource: stateImageSource
-            delegateStateImageSize: stateImageSize
             delegateHasWhenCondition: hasWhenCondition
             delegateWhenConditionString: whenConditionString
             onDelegateInteraction: contextMenu.dismiss()