QmlDesigner: Fix states context menu not working in certain areas

Fixed 2 issues with the context menu:
- Left clicking the area to the right of the states doesn't close the
context menu. The issues seems to be a bug in the ListView, solved by
limiting the width of the ListView to the states area width.
- Clicking (left or right) below the states area doesn't work. This is
because the height of the states view was fixed to the height needed.
Solved by not restricting the view height and do necessary changes.

Also some cleanups and removing unnecessary stuff.

Fixes: QDS-5324
Change-Id: Ic1e3f5d0776bb4770a3276c93ad1aee7a0049388
Reviewed-by: Samuel Ghinet <samuel.ghinet@qt.io>
Reviewed-by: <github-actions-qt-creator@cristianadam.eu>
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@qt.io>
Reviewed-by: Qt CI Bot <qt_ci_bot@qt-project.org>
Reviewed-by: Thomas Hartmann <thomas.hartmann@qt.io>

share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml

@@ -38,11 +38,7 @@ FocusScope {
     property int delegateColumnSpacing: 2
     property int delegateStateMargin: 16
     property int delegatePreviewMargin: 16
-
+    property int effectiveHeight: root.expanded ? 287 : 85 // height of the states area
-    height: (root.expanded ? (root.delegateTopAreaHeight + root.delegateBottomAreaHeight + root.delegateColumnSpacing)
-                           : root.delegateTopAreaHeight)
-            + StudioTheme.Values.scrollBarThickness
-            + 2 * (root.delegateStateMargin + StudioTheme.Values.border + root.padding)
 
     signal createNewState
     signal deleteState(int internalNodeId)
@@ -52,7 +48,7 @@ FocusScope {
     property int padding: 2
     property int delegateWidth: root.stateImageSize
                                 + 2 * (root.delegateStateMargin + root.delegatePreviewMargin)
-    property int delegateHeight: root.height
+    property int delegateHeight: effectiveHeight
                                  - StudioTheme.Values.scrollBarThickness
                                  - 2 * (root.padding + StudioTheme.Values.border)
     property int innerSpacing: 2
@@ -65,10 +61,6 @@ FocusScope {
         function onChangedToState(n) { root.currentStateInternalId = n }
     }
 
-    SystemPalette {
-        id: palette
-    }
-
     Rectangle {
         id: background
         anchors.fill: parent
@@ -93,70 +85,51 @@ FocusScope {
 
             StudioControls.MenuItem {
                 text: root.expanded ? qsTr("Collapse") : qsTr("Expand")
-                onTriggered: {
+                onTriggered: root.expanded = !root.expanded
-                    root.expanded = !root.expanded
-                }
             }
         }
     }
 
-    function closeContextMenu() {
+    AbstractButton {
-        if (contextMenu.open)
+        id: addStateButton
-            contextMenu.dismiss()
-    }
-
-    Item {
-        id: addStateItem
-
-        property int buttonLeftSpacing: 8 * (root.expanded ? 1 : 2)
 
+        buttonIcon: root.expanded ? qsTr("Create New State") : StudioTheme.Constants.plus
+        iconFont: root.expanded ? StudioTheme.Constants.font : StudioTheme.Constants.iconFont
+        iconSize: root.expanded ? StudioTheme.Values.myFontSize : StudioTheme.Values.myIconFontSize
+        iconItalic: root.expanded
+        tooltip: qsTr("Add a new state.")
+        visible: canAddNewStates
         anchors.right: parent.right
-        width: root.delegateHeight / 2 + buttonLeftSpacing
+        anchors.rightMargin: 8
-        height: root.delegateHeight
+        y: (Math.min(effectiveHeight, root.height) - height) / 2
+        width: Math.max(root.delegateHeight / 2 - 8, 18)
+        height: root.expanded ? 60 : width
 
-        AbstractButton {
+        onClicked: {
-            id: addStateButton
+            contextMenu.dismiss()
-
+            root.createNewState()
-            buttonIcon: root.expanded ? qsTr("Create New State") : StudioTheme.Constants.plus
-            iconFont: root.expanded ? StudioTheme.Constants.font : StudioTheme.Constants.iconFont
-            iconSize: root.expanded ? StudioTheme.Values.myFontSize : StudioTheme.Values.myIconFontSize
-            iconItalic: root.expanded ? true : false
-            tooltip: qsTr("Add a new state.")
-            visible: canAddNewStates
-            anchors.right: parent.right
-            anchors.rightMargin: 8
-            anchors.verticalCenter: parent.verticalCenter
-            width: Math.max(parent.height / 2 - 8, 18)
-            height: root.expanded ? 80 : width
-
-            onClicked: {
-                root.closeContextMenu()
-                root.createNewState()
-            }
         }
     }
 
-    Rectangle {
+    Rectangle { // separator lines between state items
         color: StudioTheme.Values.themeStateSeparator
         x: root.padding
         y: root.padding
-        width: Math.min((root.delegateWidth * flickable.count) + (2 * (flickable.count - 1)),
+        width: statesListView.width
-                        flickable.width)
         height: root.delegateHeight
     }
 
     ListView {
-        id: flickable
+        id: statesListView
 
         boundsBehavior: Flickable.StopAtBounds
         clip: true
 
-        anchors.left: parent.left
+        x: root.padding
-        anchors.right: addStateItem.left
-        height: root.delegateHeight + StudioTheme.Values.scrollBarThickness
         y: root.padding
-        anchors.leftMargin: root.padding
+        width: Math.min(root.delegateWidth * statesListView.count + root.innerSpacing * (statesListView.count - 1),
-        anchors.rightMargin: root.padding
+                        root.width - addStateButton.width - root.padding - 16) // 16 = 2 * 8 (addStateButton margin)
+        height: root.delegateHeight + StudioTheme.Values.scrollBarThickness
 
         model: statesEditorModel
         orientation: ListView.Horizontal
@@ -174,7 +147,7 @@ FocusScope {
             delegateStateImageSize: stateImageSize
             delegateHasWhenCondition: hasWhenCondition
             delegateWhenConditionString: whenConditionString
-            onDelegateInteraction: root.closeContextMenu()
+            onDelegateInteraction: contextMenu.dismiss()
 
             columnSpacing: root.delegateColumnSpacing
             topAreaHeight: root.delegateTopAreaHeight
@@ -183,16 +156,6 @@ FocusScope {
             previewMargin: root.delegatePreviewMargin
         }
 
-        property bool bothVisible: horizontal.scrollBarVisible && vertical.scrollBarVisible
+        ScrollBar.horizontal: HorizontalScrollBar {}
-
-        ScrollBar.horizontal: HorizontalScrollBar {
-            id: horizontal
-            parent: flickable
-        }
-
-        ScrollBar.vertical: VerticalScrollBar {
-            id: vertical
-            parent: flickable
-        }
     }
 }

src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.cpp

@@ -168,12 +168,9 @@ void StatesEditorWidget::reloadQmlSource()
     connect(rootObject(), SIGNAL(createNewState()), m_statesEditorView.data(), SLOT(createNewState()));
     connect(rootObject(), SIGNAL(deleteState(int)), m_statesEditorView.data(), SLOT(removeState(int)));
     m_statesEditorView.data()->synchonizeCurrentStateFromWidget();
-    setFixedHeight(initialSize().height());
 
-    if (!DesignerSettings::getValue(DesignerSettingsKey::STATESEDITOR_EXPANDED).toBool()) {
+    if (!DesignerSettings::getValue(DesignerSettingsKey::STATESEDITOR_EXPANDED).toBool())
         toggleStatesViewExpanded();
-        setFixedHeight(rootObject()->height());
-    }
 
     connect(rootObject(), SIGNAL(expandedChanged()), this, SLOT(handleExpandedChanged()));
 }
@@ -184,7 +181,5 @@ void StatesEditorWidget::handleExpandedChanged()
 
     bool expanded = rootObject()->property("expanded").toBool();
     DesignerSettings::setValue(DesignerSettingsKey::STATESEDITOR_EXPANDED, expanded);
-
-    setFixedHeight(rootObject()->height());
 }
 }