StatusQ: StatusFlowSelector added

storybook/PagesModel.qml

@@ -149,6 +149,10 @@ ListModel {
         title: "StatusDotsLoadingIndicator"
         section: "Components"
     }
+    ListElement {
+        title: "StatusFlowSelector"
+        section: "Components"
+    }
     ListElement {
         title: "StatusItemSelector"
         section: "Components"

storybook/pages/StatusFlowSelectorPage.qml

@@ -0,0 +1,53 @@
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
+
+import StatusQ.Components 0.1
+import utils 1.0
+
+
+ColumnLayout {
+    Item {
+        Layout.fillHeight: true
+        Layout.fillWidth: true
+
+        StatusFlowSelector {
+            anchors.centerIn: parent
+
+            icon: Style.png("tokens/SNT")
+            title: "Item Selector Title"
+
+            placeholderText: "Example: Empty items"
+
+            Repeater {
+                id: repeater
+
+                model: ListModel {
+                    id: listModel
+                }
+
+                property int counter: 0
+
+                delegate: StatusListItemTag {
+                    title: `tag ${model.name}`
+
+                    onClicked: listModel.remove(index)
+                }
+            }
+
+            placeholderItem.visible: listModel.count === 0
+
+            addButton.onClicked: {
+                listModel.append({ name: `item ${repeater.counter++}` })
+            }
+        }
+    }
+
+    Button {
+        Layout.bottomMargin: 10
+        Layout.alignment: Qt.AlignHCenter
+
+        text: "Clear list"
+        onClicked: listModel.clear()
+    }
+}

ui/StatusQ/doc/src/statusqcomponents.qdoc

@@ -20,6 +20,7 @@
        \li \l{StatusContactRequestsIndicatorListItem}
        \li \l{StatusDescriptionListItem}
        \li \l{StatusExpandableItem}
+       \li \l{StatusFlowSelector}
        \li \l{StatusGroupBox}
        \li \l{StatusImageSettings}
        \li \l{StatusItemSelector}

ui/StatusQ/src/StatusQ/Components/StatusFlowSelector.qml

@@ -0,0 +1,124 @@
+import QtQuick 2.15
+
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+
+/*!
+   \qmltype StatusFlowSelector
+   \inherits StatusGroupBox
+   \inqmlmodule StatusQ.Components
+   \since StatusQ.Components 0.1
+   \brief It allows to add items and display them as a list within a Flow
+   component.
+
+   The \c StatusFlowSelector can be populated with a repeater.
+
+   Example of how the component looks like:
+   \image status_item_selector.png
+
+   Example of how to use it:
+   \qml
+        StatusFlowSelector {
+            icon: Style.svg("contact_verified")
+            title: qsTr("Who holds")
+            placeholderItem.visible: listModel.count === 0
+
+            Repeater {
+                id: repeater
+
+                model: ListModel {
+                    id: listModel
+                }
+
+                property int counter: 0
+
+                delegate: StatusListItemTag {
+                    title: `tag ${model.name}`
+
+                    onClicked: listModel.remove(index)
+                }
+            }
+
+            addButton.onClicked: {
+                listModel.append({ name: `item ${repeater.counter++}` })
+            }
+        }
+   \endqml
+   For a list of components available see StatusQ.
+*/
+StatusGroupBox {
+    id: root
+
+    default property alias content: flow.data
+
+    /*!
+       \qmlproperty string StatusFlowSelector::placeholderText
+       This property holds the placeholder item text which can be shown when the
+       list of items is empty.
+    */
+    property string placeholderText
+
+    /*!
+       \qmlproperty url StatusFlowSelector::placeholderImageSource
+       This property holds the default item icon shown when the list of items is empty.
+    */
+    property url placeholderImageSource
+
+    /*!
+       \qmlproperty StatusListItemTag StatusFlowSelector::placeholder
+       This property holds an alias to the placeholder item.
+    */
+    readonly property alias placeholderItem: placeholderListItemTag
+
+    /*!
+       \qmlproperty StatusRoundButton StatusFlowSelector::addButton
+       This property holds an alias to the `add` button.
+    */
+    readonly property alias addButton: addItemButton
+
+    /*!
+       \qmlproperty int StatusFlowSelector::flowSpacing
+       This property specifies spacing between items in the selector.
+    */
+    property alias flowSpacing: flow.spacing
+
+    implicitWidth: 560
+
+    Flow {
+        id: flow
+
+        width: root.availableWidth
+        spacing: 6
+
+        StatusListItemTag {
+            id: placeholderListItemTag
+
+            bgColor: Theme.palette.baseColor2
+            title: root.placeholderText
+            asset.name: root.placeholderImageSource
+            asset.isImage: true
+            closeButtonVisible: false
+            titleText.color: Theme.palette.baseColor1
+            titleText.font.pixelSize: 15
+        }
+
+        onPositioningComplete: {
+            // the "add" button is intended to be the last item in the flow
+            if (addItemButton.Positioner.isLastItem || !addItemButton.visible)
+                return
+
+            addItemButton.parent = null
+            addItemButton.parent = flow
+        }
+
+        StatusRoundButton {
+            id: addItemButton
+
+            implicitHeight: 32
+            implicitWidth: implicitHeight
+            height: width
+            type: StatusRoundButton.Type.Secondary
+            icon.name: "add"
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Components/qmldir

@@ -43,6 +43,7 @@ StatusImageCropPanel 0.1 StatusImageCropPanel.qml
 StatusColorSpace 0.0 StatusColorSpace.qml
 StatusCommunityCard 0.1 StatusCommunityCard.qml
 StatusCommunityTags 0.1 StatusCommunityTags.qml
+StatusFlowSelector 0.1 StatusFlowSelector.qml
 StatusItemSelector 0.1 StatusItemSelector.qml
 StatusCard 0.1 StatusCard.qml
 StatusDatePicker 0.1 StatusDatePicker.qml

ui/StatusQ/src/statusq.qrc

@@ -30,6 +30,7 @@
         <file>StatusQ/Components/StatusEmoji.qml</file>
         <file>StatusQ/Components/StatusExpandableItem.qml</file>
         <file>StatusQ/Components/StatusImageCropPanel.qml</file>
+        <file>StatusQ/Components/StatusFlowSelector.qml</file>
         <file>StatusQ/Components/StatusItemSelector.qml</file>
         <file>StatusQ/Components/StatusLetterIdenticon.qml</file>
         <file>StatusQ/Components/StatusListItem.qml</file>