feat(@StatusListItem): add option for tags

ui/StatusQ/sandbox/controls/ListItems.qml

@@ -328,6 +328,17 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
         badge.icon.isLetterIdenticon: true
     }
 
+    StatusListItem {
+        title: "List Item with Tags"
+        icon.isLetterIdenticon: true
+        tags: [
+            StatusListItemTag {
+                title: qsTr("Tag 1")
+                icon.isLetterIdenticon: true
+            }
+        ]
+    }
+
     StatusDescriptionListItem {
         title: "Title"
         subTitle: "Subtitle"

ui/StatusQ/src/StatusQ/Components/StatusListItem.qml

@@ -23,6 +23,7 @@ Rectangle {
     property bool propagateTitleClicks: true 
     property int type: StatusListItem.Type.Primary
     property list<Item> components
+    property list<StatusListItemTag> tags
 
     property StatusIconSettings icon: StatusIconSettings {
         height: isLetterIdenticon ? 40 : 20
@@ -67,6 +68,7 @@ Rectangle {
     property alias statusListItemSubTitle: statusListItemSubTitle
     property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
     property alias statusListItemComponentsSlot: statusListItemComponentsSlot
+    property alias statusListItemTagsSlot: statusListItemTagsSlot
 
     signal clicked(string itemId)
     signal titleClicked(string titleId)
@@ -78,7 +80,12 @@ Rectangle {
     }
 
     implicitWidth: 448
-    implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
+    implicitHeight: {
+        if (tags.length === 0) {
+            return Math.max(64, statusListItemTitleArea.height + 16)
+        }
+        return Math.max(64, statusListItemTitleArea.height + 90)
+    }
     color: {
         if (sensor.containsMouse || statusListItem.highlighted) {
             switch(type) {
@@ -102,6 +109,14 @@ Rectangle {
         }
     }
 
+    onTagsChanged: {
+        if (tags.length) {
+            for (let idx in tags) {
+                tags[idx].parent = statusListItemTagsSlot
+            }
+        }
+    }
+
     MouseArea {
         id: sensor
 
@@ -147,7 +162,8 @@ Rectangle {
             anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left
             anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding
             anchors.rightMargin: statusListItem.rightPadding
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenter:  tags.length === 0 ? parent.verticalCenter : undefined
+
             height: childrenRect.height
 
             StatusBaseText {
@@ -158,6 +174,8 @@ Rectangle {
                 wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                 anchors.left: parent.left
                 anchors.right: !statusListItem.titleAsideText && !titleIconsRow.sourceComponent ? parent.right : undefined
+                anchors.top: tags.length === 0 ? undefined:  parent.top
+                anchors.topMargin: tags.length === 0 ? undefined : 20
                 color: {
                   if (!statusListItem.enabled) {
                     return Theme.palette.baseColor1
@@ -174,7 +192,8 @@ Rectangle {
 
                 MouseArea {
                     anchors.fill: parent
-                    cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
+                    enabled: statusListItem.enabled
+                    cursorShape: sensor.enabled && containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
                     hoverEnabled: true
                     propagateComposedEvents: statusListItem.propagateTitleClicks
                     onClicked: {
@@ -189,6 +208,8 @@ Rectangle {
                 anchors.left: statusListItemTitle.right
                 anchors.leftMargin: 4
                 anchors.verticalCenter: statusListItemTitle.verticalCenter
+                anchors.top: tags.length === 0 ? undefined:  parent.top
+                anchors.topMargin: tags.length === 0 ? undefined : 20
                 text: statusListItem.titleAsideText
                 font.pixelSize: 10
                 color: Theme.palette.baseColor1
@@ -232,11 +253,25 @@ Rectangle {
                 width: contentItem.width
                 implicitHeight: visible ? 22 : 0
             }
+   
+        }
+
+        Row {
+            id: statusListItemTagsSlot
+            anchors.topMargin: 16
+            anchors.top: iconOrImage.bottom
+            anchors.left: parent.left
+            anchors.leftMargin: 16
+            width: contentItem.width
+            spacing: 10
+            anchors.verticalCenter: parent.verticalCenter
         }
 
         StatusBaseText {
             id: statusListItemLabel
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenter: tags.length === 0 ? parent.verticalCenter : undefined
+            anchors.top: tags.length === 0 ? undefined:  parent.top
+            anchors.topMargin: tags.length === 0 ? undefined : 16
             anchors.right: statusListItemComponentsSlot.left
             anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
 
@@ -250,7 +285,9 @@ Rectangle {
             id: statusListItemComponentsSlot
             anchors.right: parent.right
             anchors.rightMargin: statusListItem.rightPadding
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenter: tags.length === 0 ? parent.verticalCenter : undefined
+            anchors.top: tags.length === 0 ? undefined:  parent.top
+            anchors.topMargin: tags.length === 0 ? undefined : 12
             spacing: 10
         }
     }

ui/StatusQ/src/StatusQ/Components/StatusListItemTag.qml

@@ -0,0 +1,77 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+Rectangle {
+    id: root
+    width: titleText.contentWidth + 60
+    height: 30
+    color: Theme.palette.primaryColor2
+    radius: 15
+
+    property string title: ""
+    signal clicked()
+
+    property StatusImageSettings image: StatusImageSettings {
+        width: 20
+        height: 20
+        isIdenticon: false
+    }
+
+    property StatusIconSettings icon: StatusIconSettings {
+        height: 20
+        width: 20
+        rotation: 0
+        isLetterIdenticon: false
+        letterSize: 10
+        color: Theme.palette.primaryColor1
+        background: StatusIconBackgroundSettings {
+            width: 15
+            height: 15
+            color: Theme.palette.primaryColor3
+        }
+    }
+
+    StatusSmartIdenticon {
+        id: iconOrImage
+        anchors.left: parent.left
+        anchors.leftMargin: 5
+        anchors.verticalCenter: parent.verticalCenter
+        image: root.image
+        icon: root.icon
+        name: root.title
+        active: root.icon.isLetterIdenticon ||
+                !!root.icon.name ||
+                !!root.image.source.toString()
+    }
+
+    StatusBaseText {
+        id: titleText
+        anchors.left: iconOrImage.right
+        anchors.leftMargin: 5
+        anchors.verticalCenter: parent.verticalCenter
+        color: Theme.palette.primaryColor1
+        text: root.title
+    }
+ 
+    StatusIcon {
+        id: closeIcon
+        anchors.left: titleText.right
+        anchors.leftMargin: 5
+        anchors.verticalCenter: parent.verticalCenter
+        color: Theme.palette.primaryColor1
+        icon: "close"
+    }
+    
+    MouseArea {
+        id: mouseArea
+        anchors.fill: closeIcon
+        hoverEnabled: true
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            root.clicked()
+        }
+    }
+}

ui/StatusQ/src/StatusQ/Components/qmldir

@@ -23,6 +23,7 @@ StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml
 StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
 StatusListItemBadge 0.1 StatusListItemBadge.qml
+StatusListItemTag 0.1 StatusListItemTag.qml
 StatusExpandableItem 0.1 StatusExpandableItem.qml
 StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml
 StatusMessage 0.1 StatusMessage.qml