diff --git a/storybook/PagesModel.qml b/storybook/PagesModel.qml
index b64f6c6aed..b8b5dea603 100644
--- a/storybook/PagesModel.qml
+++ b/storybook/PagesModel.qml
@@ -149,6 +149,10 @@ ListModel {
title: "StatusDotsLoadingIndicator"
section: "Components"
}
+ ListElement {
+ title: "StatusFlowSelector"
+ section: "Components"
+ }
ListElement {
title: "StatusItemSelector"
section: "Components"
diff --git a/storybook/pages/StatusFlowSelectorPage.qml b/storybook/pages/StatusFlowSelectorPage.qml
new file mode 100644
index 0000000000..0a55294c62
--- /dev/null
+++ b/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()
+ }
+}
diff --git a/ui/StatusQ/doc/src/statusqcomponents.qdoc b/ui/StatusQ/doc/src/statusqcomponents.qdoc
index f22cc5c178..22e047a528 100644
--- a/ui/StatusQ/doc/src/statusqcomponents.qdoc
+++ b/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}
diff --git a/ui/StatusQ/src/StatusQ/Components/StatusFlowSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusFlowSelector.qml
new file mode 100644
index 0000000000..2460423347
--- /dev/null
+++ b/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"
+ }
+ }
+}
diff --git a/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir
index 9549acd472..96c1ac527c 100644
--- a/ui/StatusQ/src/StatusQ/Components/qmldir
+++ b/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
diff --git a/ui/StatusQ/src/statusq.qrc b/ui/StatusQ/src/statusq.qrc
index a58211c9dc..ceef78de9d 100644
--- a/ui/StatusQ/src/statusq.qrc
+++ b/ui/StatusQ/src/statusq.qrc
@@ -30,6 +30,7 @@
StatusQ/Components/StatusEmoji.qml
StatusQ/Components/StatusExpandableItem.qml
StatusQ/Components/StatusImageCropPanel.qml
+ StatusQ/Components/StatusFlowSelector.qml
StatusQ/Components/StatusItemSelector.qml
StatusQ/Components/StatusLetterIdenticon.qml
StatusQ/Components/StatusListItem.qml