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