From f6424328d87a4cac571f3b1c424f2dc125ced7b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82?= Date: Thu, 8 Sep 2022 11:06:25 +0200 Subject: [PATCH] feat(StatusItemSelector): improved reusablity, addItem and popup handling removed (#887) Additionally: - minor positioning fixes in StatusListItem and StatusListItemTag - StatusItemSelectorPage updated and added to main.qml --- sandbox/main.qml | 5 ++ sandbox/pages/StatusItemSelectorPage.qml | 25 ++++++- src/StatusQ/Components/StatusItemSelector.qml | 65 ++++++++++--------- src/StatusQ/Components/StatusListItem.qml | 3 +- src/StatusQ/Components/StatusListItemTag.qml | 10 ++- 5 files changed, 66 insertions(+), 42 deletions(-) diff --git a/sandbox/main.qml b/sandbox/main.qml index c889ffa5..59067e06 100644 --- a/sandbox/main.qml +++ b/sandbox/main.qml @@ -302,6 +302,11 @@ StatusWindow { selected: viewLoader.source.toString().includes(title) onClicked: mainPageView.page(title); } + StatusNavigationListItem { + title: "StatusItemSelector" + selected: viewLoader.source.toString().includes(title) + onClicked: mainPageView.page(title, true); + } StatusListSectionHeadline { text: "StatusQ.Popup" } StatusNavigationListItem { title: "StatusPopupMenu" diff --git a/sandbox/pages/StatusItemSelectorPage.qml b/sandbox/pages/StatusItemSelectorPage.qml index 2a346b0d..e90888d5 100644 --- a/sandbox/pages/StatusItemSelectorPage.qml +++ b/sandbox/pages/StatusItemSelectorPage.qml @@ -1,4 +1,4 @@ -import QtQuick 2.0 +import QtQuick 2.14 import QtQuick.Layouts 1.14 import StatusQ.Components 0.1 @@ -15,25 +15,44 @@ ColumnLayout { defaultItemText: "Example: Empty items" andOperatorText: "and" orOperatorText: "or" - popupItem: StatusDropdown { + + itemsModel: ListModel { + id: model + } + + StatusDropdown { id: dropdown + + parent: selector.addButton width: 200 contentItem: ColumnLayout { spacing: 10 StatusInput { id: input + text: "Sample" Layout.fillWidth: true } StatusButton { Layout.alignment: Qt.AlignHCenter text: "Add element" onClicked: { - selector.addItem(input.text, "qrc:/images/SNT.png", selector.itemsModel.count > 0 ? Utils.Operators.Or : Utils.Operators.None) + model.append({ + text: input.text, + imageSource: "qrc:/images/SNT.png", + operator: model.count > 0 ? Utils.Operators.Or : Utils.Operators.None + }) + dropdown.close() } } } } + + addButton.onClicked: { + dropdown.x = mouse.x + dropdown.y = mouse.y + dropdown.open() + } } StatusButton { diff --git a/src/StatusQ/Components/StatusItemSelector.qml b/src/StatusQ/Components/StatusItemSelector.qml index feb48838..b6576d9a 100644 --- a/src/StatusQ/Components/StatusItemSelector.qml +++ b/src/StatusQ/Components/StatusItemSelector.qml @@ -27,12 +27,15 @@ import StatusQ.Core.Utils 0.1 defaultItemText: qsTr("Example: 10 SNT") andOperatorText: qsTr("and") orOperatorText: qsTr("or") - popupItem: CustomPopup { - id: customPopup - onAddItem: { - tokensSelector.addItem(itemText, itemImage, operator) - customPopup.close() - } + + CustomPopup { + id: popup + } + + addButton.onClicked: { + popup.x = mouse.x + popup.y = mouse.y + popup.open() } } \endqml @@ -66,10 +69,10 @@ Rectangle { */ property url defaultItemImageSource: "" /*! - \qmlproperty QC.Popup StatusItemSelector::popupItem - This property holds a custom popup item to be opened near the `add` button in order to select new items. + \qmlproperty StatusRoundButton StatusItemSelector::addButton + This property holds an alias to the `add` button. */ - property QC.Popup popupItem + readonly property alias addButton: addItemButton /*! \qmlproperty ListModel StatusItemSelector::itemsModel This property holds the data that will be populated in the items selector. @@ -90,7 +93,7 @@ Rectangle { } \endqml */ - property ListModel itemsModel: ListModel { } + property var itemsModel: ListModel { } /*! \qmlproperty string StatusItemSelector::andOperatorText This property holds the string text representation for an `AND` logical operator. @@ -101,27 +104,24 @@ Rectangle { This property holds the string text representation for an `OR` logical operator. */ property string orOperatorText: qsTr("or") - /* - \qmlmethod StatusItemSelector::addItem() - It is used to add new items into the selector control. The expected arguments are: - string `text`, url `imageSource` and int `operator` (None = 0, And = 1 and Or = 2) + /*! + \qmlsignal StatusItemSelector::itemClicked + This signal is emitted when the item is clicked. */ - function addItem(text, imageSource, operator) { - itemsModel.insert(itemsModel.count, { "text": text, "imageSource": imageSource.toString(), "operator": operator }) - } + signal itemClicked(var item, int index, var mouse) + QtObject { id: d function operatorTextFormat(operator) { - switch(operator) - { - case Utils.Operators.And: - return root.andOperatorText - case Utils.Operators.Or: - return root.orOperatorText - case Utils.Operators.None: - return "" + switch(operator) { + case Utils.Operators.And: + return root.andOperatorText + case Utils.Operators.Or: + return root.orOperatorText + case Utils.Operators.None: + return "" } } } @@ -179,8 +179,10 @@ Rectangle { } Repeater { model: itemsModel + RowLayout { spacing: flow.spacing + StatusBaseText { visible: model.operator !== Utils.Operators.None Layout.alignment: Qt.AlignVCenter @@ -207,7 +209,13 @@ Rectangle { closeButtonVisible: false titleText.color: Theme.palette.primaryColor1 titleText.font.pixelSize: 15 - //onClicked: // TODO: Open remove or edit dialog + + MouseArea { + anchors.fill: parent + cursorShape: Qt.PointingHandCursor + acceptedButtons: Qt.LeftButton | Qt.RightButton + onClicked: root.itemClicked(parent, model.index, mouse) + } } } } @@ -218,11 +226,6 @@ Rectangle { height: width type: StatusRoundButton.Type.Secondary icon.name: "add" - onClicked: { - root.popupItem.x = addItemButton.x + addItemButton.width + 4 * flow.spacing - root.popupItem.y = addItemButton.y + addItemButton.height - root.popupItem.open() - } } } } diff --git a/src/StatusQ/Components/StatusListItem.qml b/src/StatusQ/Components/StatusListItem.qml index 2b5f7f8a..a943562d 100644 --- a/src/StatusQ/Components/StatusListItem.qml +++ b/src/StatusQ/Components/StatusListItem.qml @@ -135,8 +135,7 @@ Rectangle { id: iconOrImage anchors.left: parent.left anchors.leftMargin: statusListItem.leftPadding - anchors.top: parent.top - anchors.topMargin: 12 + anchors.verticalCenter: parent.verticalCenter visible: !iconOrImageLoadingOverlay.visible asset: statusListItem.asset name: statusListItem.title diff --git a/src/StatusQ/Components/StatusListItemTag.qml b/src/StatusQ/Components/StatusListItemTag.qml index f81e01a0..2c640e24 100644 --- a/src/StatusQ/Components/StatusListItemTag.qml +++ b/src/StatusQ/Components/StatusListItemTag.qml @@ -6,8 +6,8 @@ import StatusQ.Core.Theme 0.1 Rectangle { id: root - width: layout.width + layout.anchors.margins - height: 30 + implicitWidth: layout.width + layout.anchors.margins + implicitHeight: 30 color: Theme.palette.primaryColor3 radius: 15 @@ -15,7 +15,7 @@ Rectangle { property string title: "" property bool closeButtonVisible: true - signal clicked() + signal clicked(var mouse) property StatusAssetSettings asset: StatusAssetSettings { height: 20 @@ -61,9 +61,7 @@ Rectangle { anchors.fill: parent hoverEnabled: true cursorShape: Qt.PointingHandCursor - onClicked: { - root.clicked() - } + onClicked: root.clicked(mouse) } } }