diff --git a/sandbox/controls/ListItems.qml b/sandbox/controls/ListItems.qml index 8426f15f..32c2d83a 100644 --- a/sandbox/controls/ListItems.qml +++ b/sandbox/controls/ListItems.qml @@ -331,12 +331,11 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I StatusListItem { title: "List Item with Tags" icon.isLetterIdenticon: true - tags: [ - StatusListItemTag { - title: qsTr("Tag 1") - icon.isLetterIdenticon: true - } - ] + bottomModel: 3 + bottomDelegate: StatusListItemTag { + title: "tag" + icon.isLetterIdenticon: true + } } StatusDescriptionListItem { diff --git a/src/StatusQ/Components/StatusListItem.qml b/src/StatusQ/Components/StatusListItem.qml index c29fb1cd..c87ea40b 100644 --- a/src/StatusQ/Components/StatusListItem.qml +++ b/src/StatusQ/Components/StatusListItem.qml @@ -23,7 +23,8 @@ Rectangle { property bool propagateTitleClicks: true property int type: StatusListItem.Type.Primary property list<Item> components - property list<StatusListItemTag> tags + property var bottomModel: [] + property Component bottomDelegate property StatusIconSettings icon: StatusIconSettings { height: isLetterIdenticon ? 40 : 20 @@ -81,7 +82,7 @@ Rectangle { implicitWidth: 448 implicitHeight: { - if (tags.length === 0) { + if (bottomModel.length === 0) { return Math.max(64, statusListItemTitleArea.height + 16) } return Math.max(64, statusListItemTitleArea.height + 90) @@ -109,14 +110,6 @@ Rectangle { } } - onTagsChanged: { - if (tags.length) { - for (let idx in tags) { - tags[idx].parent = statusListItemTagsSlot - } - } - } - MouseArea { id: sensor @@ -162,7 +155,7 @@ Rectangle { anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding anchors.rightMargin: statusListItem.rightPadding - anchors.verticalCenter: tags.length === 0 ? parent.verticalCenter : undefined + anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined height: childrenRect.height @@ -174,8 +167,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 + anchors.top: bottomModel.length === 0 ? undefined: parent.top + anchors.topMargin: bottomModel.length === 0 ? undefined : 20 color: { if (!statusListItem.enabled) { return Theme.palette.baseColor1 @@ -208,8 +201,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 + anchors.top: bottomModel.length === 0 ? undefined: parent.top + anchors.topMargin: bottomModel.length === 0 ? undefined : 20 text: statusListItem.titleAsideText font.pixelSize: 10 color: Theme.palette.baseColor1 @@ -265,13 +258,18 @@ Rectangle { width: contentItem.width spacing: 10 anchors.verticalCenter: parent.verticalCenter + + Repeater { + model: bottomModel + delegate: bottomDelegate + } } StatusBaseText { id: statusListItemLabel - anchors.verticalCenter: tags.length === 0 ? parent.verticalCenter : undefined - anchors.top: tags.length === 0 ? undefined: parent.top - anchors.topMargin: tags.length === 0 ? undefined : 16 + anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined + anchors.top: bottomModel.length === 0 ? undefined: parent.top + anchors.topMargin: bottomModel.length === 0 ? undefined : 16 anchors.right: statusListItemComponentsSlot.left anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0 @@ -285,9 +283,9 @@ Rectangle { id: statusListItemComponentsSlot anchors.right: parent.right anchors.rightMargin: statusListItem.rightPadding - anchors.verticalCenter: tags.length === 0 ? parent.verticalCenter : undefined - anchors.top: tags.length === 0 ? undefined: parent.top - anchors.topMargin: tags.length === 0 ? undefined : 12 + anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined + anchors.top: bottomModel.length === 0 ? undefined: parent.top + anchors.topMargin: bottomModel.length === 0 ? undefined : 12 spacing: 10 } } diff --git a/src/StatusQ/Components/StatusListItemTag.qml b/src/StatusQ/Components/StatusListItemTag.qml index b133701e..18515045 100644 --- a/src/StatusQ/Components/StatusListItemTag.qml +++ b/src/StatusQ/Components/StatusListItemTag.qml @@ -8,7 +8,7 @@ Rectangle { id: root width: titleText.contentWidth + 60 height: 30 - color: Theme.palette.primaryColor2 + color: Theme.palette.primaryColor3 radius: 15 property string title: "" @@ -62,7 +62,7 @@ Rectangle { anchors.leftMargin: 5 anchors.verticalCenter: parent.verticalCenter color: Theme.palette.primaryColor1 - icon: "close" + icon: "close-circle" } MouseArea {