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

@@ -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"

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 {

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
+            CustomPopup {
-                onAddItem: {
+                id: popup
-                    tokensSelector.addItem(itemText, itemImage, operator)
+            }
-                    customPopup.close()
+
-                }
+            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
+       \qmlproperty StatusRoundButton StatusItemSelector::addButton
-       This property holds a custom popup item to be opened near the `add` button in order to select new items.
+       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()
+       \qmlsignal StatusItemSelector::itemClicked
-        It is used to add new items into the selector control. The expected arguments are:
+       This signal is emitted when the item is clicked.
-        string `text`, url `imageSource` and int `operator` (None = 0, And = 1 and Or = 2)
     */
-    function addItem(text, imageSource, operator) {
+    signal itemClicked(var item, int index, var mouse)
-        itemsModel.insert(itemsModel.count, { "text": text, "imageSource": imageSource.toString(), "operator": operator })
+
-    }
 
     QtObject {
         id: d
 
         function operatorTextFormat(operator) {
-            switch(operator)
+            switch(operator) {
-            {
+                case Utils.Operators.And:
-            case Utils.Operators.And:
+                    return root.andOperatorText
-                return root.andOperatorText
+                case Utils.Operators.Or:
-            case Utils.Operators.Or:
+                    return root.orOperatorText
-                return root.orOperatorText
+                case Utils.Operators.None:
-            case Utils.Operators.None:
+                    return ""
-                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()
-                }
             }
         }
     }

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.verticalCenter: parent.verticalCenter
-            anchors.topMargin: 12
             visible: !iconOrImageLoadingOverlay.visible
             asset: statusListItem.asset
             name: statusListItem.title

src/StatusQ/Components/StatusListItemTag.qml

@@ -6,8 +6,8 @@ import StatusQ.Core.Theme 0.1
 
 Rectangle {
     id: root
-    width: layout.width + layout.anchors.margins
+    implicitWidth: layout.width + layout.anchors.margins
-    height: 30
+    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: {
+                onClicked: root.clicked(mouse)
-                    root.clicked()
-                }
             }
         }
     }