From 315abe7e9c68cda0d1d8c09dc24b7bc563a0a2eb Mon Sep 17 00:00:00 2001 From: Mahmoud Badri Date: Wed, 15 Mar 2023 20:21:44 +0200 Subject: [PATCH] QmlDesigner: Add support for adding an extra button to EditableListView MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Will be used to add a button to open material editor from material rows in a Quick3DModel properties sheet. But can be utilized for more future usecases. Task-number: QDS-9408 Change-Id: I540479cc1a88cdfe287f244efd7cd65c895db467 Reviewed-by: Miikka Heikkinen Reviewed-by: Henning Gründl --- .../HelperWidgets/EditableListView.qml | 66 +++++++++++-------- 1 file changed, 39 insertions(+), 27 deletions(-) diff --git a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/EditableListView.qml b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/EditableListView.qml index 83f2bff6740..91fd1a740e6 100644 --- a/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/EditableListView.qml +++ b/share/qtcreator/qmldesigner/propertyEditorQmlSources/imports/HelperWidgets/EditableListView.qml @@ -7,11 +7,11 @@ import StudioControls 1.0 as StudioControls import StudioTheme 1.0 as StudioTheme Item { - id: editableListView + id: root ExtendedFunctionLogic { id: extFuncLogic - backendValue: editableListView.backendValue + backendValue: root.backendValue } property var backendValue @@ -29,6 +29,10 @@ Item { property bool delegateHover: false + property string extraButtonIcon: "" // setting this will show an extra button + property string extraButtonToolTip: "" + signal extraButtonClicked(int idx) + signal add(string value) signal remove(int idx) signal replace(int idx, string value) @@ -50,10 +54,10 @@ Item { validator: RegExpValidator { regExp: /(^[a-z_]\w*|^[A-Z]\w*\.{1}([a-z_]\w*\.?)+)/ } actionIndicatorVisible: false - typeFilter: editableListView.typeFilter + typeFilter: root.typeFilter initialModelData: modelData - textRole: editableListView.textRole - valueRole: editableListView.valueRole + textRole: root.textRole + valueRole: root.valueRole implicitWidth: StudioTheme.Values.singleControlColumnWidth width: implicitWidth @@ -64,26 +68,34 @@ Item { var curValue = itemFilterComboBox.availableValue() if (itemFilterComboBox.empty && curValue !== "") { myRepeater.dirty = false - editableListView.add(curValue) + root.add(curValue) } } onCompressedActivated: function(index, reason) { - editableListView.activatedReason = reason + root.activatedReason = reason var curValue = itemFilterComboBox.availableValue() if (itemFilterComboBox.empty && curValue) { myRepeater.dirty = false - editableListView.add(curValue) + root.add(curValue) } else { - editableListView.replace(itemFilterComboBox.myIndex, curValue) + root.replace(itemFilterComboBox.myIndex, curValue) } } - onHoverChanged: editableListView.delegateHover = itemFilterComboBox.hover + onHoverChanged: root.delegateHover = itemFilterComboBox.hover } - Spacer { implicitWidth: StudioTheme.Values.twoControlColumnGap } + Spacer { implicitWidth: extraButton.visible ? 5 : StudioTheme.Values.twoControlColumnGap } + + IconIndicator { + id: extraButton + icon: root.extraButtonIcon + tooltip: root.extraButtonToolTip + onClicked: root.extraButtonClicked(index) + visible: root.extraButtonIcon !== "" + } IconIndicator { id: closeIndicator @@ -95,12 +107,12 @@ Item { myRepeater.dirty = false myRepeater.model = myRepeater.localModel // trigger on change handler } else { - editableListView.remove(index) + root.remove(index) } if (!lastItem) myColumn.currentIndex = index - 1 } - onHoveredChanged: editableListView.delegateHover = closeIndicator.hovered + onHoveredChanged: root.delegateHover = closeIndicator.hovered } } } @@ -108,7 +120,7 @@ Item { Row { ActionIndicator { id: actionIndicator - icon.visible: editableListView.delegateHover + icon.visible: root.delegateHover icon.color: extFuncLogic.color icon.text: extFuncLogic.glyph onClicked: extFuncLogic.show() @@ -146,7 +158,7 @@ Item { myColumn.currentIndex = -1 myRepeater.localModel = [] - editableListView.model.forEach(function(item) { + root.model.forEach(function(item) { myRepeater.localModel.push(item) }); @@ -163,7 +175,7 @@ Item { else myColumn.currentIndex = myRepeater.localModel.length - 1 - if (editableListView.activatedReason === ComboBox.ActivatedReason.Other + if (root.activatedReason === ComboBox.ActivatedReason.Other && myColumn.currentItem !== null) myColumn.currentItem.forceActiveFocus() } @@ -174,36 +186,36 @@ Item { visible: myRepeater.count === 0 validator: RegExpValidator { regExp: /(^[a-z_]\w*|^[A-Z]\w*\.{1}([a-z_]\w*\.?)+)/ } actionIndicatorVisible: false - typeFilter: editableListView.typeFilter - textRole: editableListView.textRole - valueRole: editableListView.valueRole + typeFilter: root.typeFilter + textRole: root.textRole + valueRole: root.valueRole implicitWidth: StudioTheme.Values.singleControlColumnWidth width: implicitWidth onFocusChanged: { var curValue = dummyComboBox.availableValue() if (curValue !== "") - editableListView.add(curValue) + root.add(curValue) } onCompressedActivated: { - editableListView.activatedReason = reason + root.activatedReason = reason var curValue = dummyComboBox.availableValue() if (curValue !== "") - editableListView.add(curValue) + root.add(curValue) else - editableListView.replace(dummyComboBox.myIndex, curValue) + root.replace(dummyComboBox.myIndex, curValue) } - onHoverChanged: editableListView.delegateHover = dummyComboBox.hover + onHoverChanged: root.delegateHover = dummyComboBox.hover } StudioControls.AbstractButton { id: plusButton buttonIcon: StudioTheme.Constants.plus - enabled: !myRepeater.dirty && !(editableListView.backendValue.isInModel - && !editableListView.backendValue.isIdList) + enabled: !myRepeater.dirty && !(root.backendValue.isInModel + && !root.backendValue.isIdList) onClicked: { var idx = myRepeater.localModel.push("") - 1 myRepeater.model = myRepeater.localModel // trigger on change handler @@ -212,7 +224,7 @@ Item { myColumn.currentItem.forceActiveFocus() } - onHoveredChanged: editableListView.delegateHover = plusButton.hovered + onHoveredChanged: root.delegateHover = plusButton.hovered } } }