feat(StatusCommunityTags): Add community tags component (#718)

sandbox/demoapp/data/Models.qml

@@ -1478,4 +1478,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         ListElement { name: "enviroment"; emoji: "☠️"}
         ListElement { name: "privacy"; emoji: "👻"}
     }
+
+    property var communityTags :{"Activism":"✊","Art":"🎨","Blockchain":"🔗","Books & blogs":"📚","Career":"💼","Collaboration":"🤝","Commerce":"🛒","Crypto":"Ξ","Culture":"🎎","DAO":"🚀","DIY":"🔨","DeFi":"📈","Design":"🧩","Education":"🎒","Entertainment":"🍿","Environment":"🌿","Event":"🗓","Fantasy":"🧙‍♂️","Fashion":"🧦","Food":"🌶","Gaming":"🎮","Global":"🌍","Health":"🧠","Hobby":"📐","Innovation":"🧪","Language":"📜","Lifestyle":"✨","Local":"📍","Love":"❤️","Markets":"💎","Movies & TV":"🎞","Music":"🎶","NFT":"🖼","NSFW":"🍆","News":"🗞","Non-profit":"🙏","Org":"🏢","Pets":"🐶","Play":"🎲","Podcast":"🎙️","Politics":"🗳️","Privacy":"👻","Product":"🍱","Psyche":"🍁","Security":"🔒","Social":"☕","Software dev":"👩‍💻","Sports":"⚽️","Tech":"📱","Travel":"🗺","Vehicles":"🚕","Web3":"🌐"}
 }

sandbox/main.qml

@@ -289,6 +289,11 @@ StatusWindow {
                             selected: viewLoader.source.toString().includes(title)
                             onClicked: mainPageView.page(title);
                         }
+                        StatusNavigationListItem {
+                            title: "StatusCommunityTags"
+                            selected: viewLoader.source.toString().includes(title)
+                            onClicked: mainPageView.page(title);
+                        }
                         StatusListSectionHeadline { text: "StatusQ.Popup" }
                         StatusNavigationListItem {
                             title: "StatusPopupMenu"

sandbox/pages/StatusCommunityTagsPage.qml

@@ -0,0 +1,83 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
+import Sandbox 0.1
+
+import "../demoapp/data" 1.0
+
+Item {
+
+    property int cntSelectedTags: 0
+    property int maxSelectedTags: 4
+    property ListModel tagsModel: ListModel {}
+
+    Component.onCompleted: {
+        tagsModel.clear();
+        for (const key of Object.keys(Models.communityTags)) {
+            tagsModel.append({ name: key, emoji: Models.communityTags[key], selected: false });
+        }
+    }
+
+    ColumnLayout {
+        id: column
+        anchors.centerIn: parent
+        width: 600
+        height: 500
+        spacing: 20
+
+        StatusInput {
+            id: tagsFilter
+            leftPadding: 0
+            rightPadding: 0
+            label: qsTr("Select tags that will fit your Community")
+            input.icon.name: "search"
+            input.placeholderText: qsTr("Search tags")
+            Layout.fillWidth: true
+        }
+
+        StatusCommunityTags {
+            filterString: tagsFilter.text
+            model: tagsModel
+            enabled: cntSelectedTags < maxSelectedTags
+            onClicked: {
+                cntSelectedTags++;
+                item.selected = true;
+            }
+            Layout.fillWidth: true
+        }
+
+        RowLayout {
+            StatusBaseText {
+                text: qsTr("Selected tags")
+                font.pixelSize: 15
+                Layout.fillWidth: true
+            }
+
+            StatusBaseText {
+                text: cntSelectedTags + "/" + maxSelectedTags
+                color: Theme.palette.baseColor1
+                font.pixelSize: 13
+            }
+        }
+
+        StatusCommunityTags {
+            model: tagsModel
+            showOnlySelected: true
+            onClicked: {
+                cntSelectedTags--;
+                item.selected = false;
+            }
+            Layout.fillWidth: true
+        }
+
+        Item {
+            Layout.fillHeight: true
+        }
+    }
+}

src/StatusQ/Components/StatusCommunityTags.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.14
+
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+
+Item {
+    id: root
+
+    property string filterString
+    property bool showOnlySelected: false
+    property bool active: true
+
+    property alias model: repeater.model
+    property alias contentWidth: flow.width
+
+    signal clicked(var item)
+
+    implicitWidth: flow.implicitWidth
+    implicitHeight: flow.implicitHeight
+
+    Flow {
+        id: flow
+        anchors.centerIn: parent
+        width: {
+            let itemsWidth = 0;
+            for (let i = 0; i < repeater.count; ++i) {
+                itemsWidth += spacing + repeater.itemAt(i).width;
+            }
+            return Math.min(parent.width, itemsWidth);
+        }
+        spacing: 10
+
+        Repeater {
+            id: repeater
+
+            delegate: StatusCommunityTag {
+                emoji: model.emoji
+                name: model.name
+                visible: (root.showOnlySelected ? model.selected : !model.selected) &&
+                         (filterString == 0 || name.toUpperCase().indexOf(filterString.toUpperCase()) !== -1)
+                width: visible ? implicitWidth : -10
+                height: visible ? implicitHeight : 0
+                removable: root.showOnlySelected && root.active
+                onClicked: root.clicked(model)
+            }
+        }
+    }
+}

src/StatusQ/Components/StatusEmoji.qml

@@ -6,7 +6,7 @@ Image {
     id: root
 
     property string emojiId: ""
-    
+
     width: 14
     height: 14
     sourceSize.width: width

src/StatusQ/Components/qmldir

@@ -36,3 +36,4 @@ StatusWizardStepper 0.1 StatusWizardStepper.qml
 StatusImageCropPanel 0.1 StatusImageCropPanel.qml
 StatusColorSpace 0.0 StatusColorSpace.qml
 StatusCommunityCard 0.1 StatusCommunityCard.qml
+StatusCommunityTags 0.1 StatusCommunityTags.qml

src/StatusQ/Controls/StatusCommunityTag.qml

@@ -0,0 +1,57 @@
+import QtQuick 2.14
+import StatusQ.Core 0.1
+import StatusQ.Components 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Core.Utils 0.1
+
+Rectangle {
+    id: root
+
+    property string emoji
+    property string name
+    property bool removable: false
+
+    signal clicked()
+
+    implicitHeight: 32
+    implicitWidth: row.width + 20
+    radius: height / 2
+    border.color: Theme.palette.baseColor2
+    border.width: 1
+    color: mouseArea.containsMouse ? Theme.palette.primaryColor2 : "transparent"
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+        onClicked: root.clicked()
+    }
+
+    Row {
+        id: row
+        anchors.centerIn: parent
+
+        StatusEmoji {
+            emojiId: root.emoji != "" ? Emoji.iconId(root.emoji) : ""
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        Item {
+            width: 5
+            height: width
+        }
+
+        StatusBaseText {
+            anchors.verticalCenter: parent.verticalCenter
+            font.pixelSize: 13
+            color: root.enabled ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
+            text: root.name
+        }
+
+        StatusIcon {
+            visible: removable
+            color: root.enabled ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
+            icon: "close"
+        }
+    }
+}

src/StatusQ/Controls/qmldir

@@ -18,6 +18,7 @@ StatusButton 0.1 StatusButton.qml
 StatusFlatButton 0.1 StatusFlatButton.qml
 StatusRoundButton 0.1 StatusRoundButton.qml
 StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
+StatusCommunityTag 0.1 StatusCommunityTag.qml
 StatusSwitch 0.1 StatusSwitch.qml
 StatusRadioButton 0.1 StatusRadioButton.qml
 StatusCheckBox 0.1 StatusCheckBox.qml