From 0a8ab22f4129836641a3e063da239e30dc5eec7c Mon Sep 17 00:00:00 2001 From: Mahmoud Badri Date: Wed, 1 Dec 2021 18:43:02 +0200 Subject: [PATCH] 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 Reviewed-by: Reviewed-by: Miikka Heikkinen Reviewed-by: Qt CI Bot Reviewed-by: Thomas Hartmann --- .../statesEditorQmlSources/StatesList.qml | 91 ++++++------------- .../stateseditor/stateseditorwidget.cpp | 7 +- 2 files changed, 28 insertions(+), 70 deletions(-) diff --git a/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml b/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml index 9defca106fe..5bb834011f3 100644 --- a/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml +++ b/share/qtcreator/qmldesigner/statesEditorQmlSources/StatesList.qml @@ -38,11 +38,7 @@ FocusScope { property int delegateColumnSpacing: 2 property int delegateStateMargin: 16 property int delegatePreviewMargin: 16 - - height: (root.expanded ? (root.delegateTopAreaHeight + root.delegateBottomAreaHeight + root.delegateColumnSpacing) - : root.delegateTopAreaHeight) - + StudioTheme.Values.scrollBarThickness - + 2 * (root.delegateStateMargin + StudioTheme.Values.border + root.padding) + property int effectiveHeight: root.expanded ? 287 : 85 // height of the states area 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: { - root.expanded = !root.expanded - } + onTriggered: root.expanded = !root.expanded } } } - function closeContextMenu() { - if (contextMenu.open) - contextMenu.dismiss() - } - - Item { - id: addStateItem - - property int buttonLeftSpacing: 8 * (root.expanded ? 1 : 2) + AbstractButton { + id: addStateButton + 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 - height: root.delegateHeight + anchors.rightMargin: 8 + y: (Math.min(effectiveHeight, root.height) - height) / 2 + width: Math.max(root.delegateHeight / 2 - 8, 18) + height: root.expanded ? 60 : width - AbstractButton { - id: addStateButton - - 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() - } + onClicked: { + contextMenu.dismiss() + 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)), - flickable.width) + width: statesListView.width height: root.delegateHeight } ListView { - id: flickable + id: statesListView boundsBehavior: Flickable.StopAtBounds clip: true - anchors.left: parent.left - anchors.right: addStateItem.left - height: root.delegateHeight + StudioTheme.Values.scrollBarThickness + x: root.padding y: root.padding - anchors.leftMargin: root.padding - anchors.rightMargin: root.padding + width: Math.min(root.delegateWidth * statesListView.count + root.innerSpacing * (statesListView.count - 1), + 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 { - id: horizontal - parent: flickable - } - - ScrollBar.vertical: VerticalScrollBar { - id: vertical - parent: flickable - } + ScrollBar.horizontal: HorizontalScrollBar {} } } diff --git a/src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.cpp b/src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.cpp index d94f21bd352..4701a4079eb 100644 --- a/src/plugins/qmldesigner/components/stateseditor/stateseditorwidget.cpp +++ b/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()); } }