diff --git a/sandbox/controls/ListItems.qml b/sandbox/controls/ListItems.qml index 0a0516ba..a68cec88 100644 --- a/sandbox/controls/ListItems.qml +++ b/sandbox/controls/ListItems.qml @@ -4,6 +4,7 @@ import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 import StatusQ.Components 0.1 +import StatusQ.Core.Utils 0.1 GridLayout { columns: 1 @@ -338,6 +339,24 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I } } + StatusListItem { + title: "List Item with Inline Tags" + icon.isLetterIdenticon: true + tagsModel : 2 + tagsDelegate: StatusListItemTag { + color: "blue" + height: 24 + radius: 6 + closeButtonVisible: false + icon.emoji: "😁" + icon.emojiSize: Emoji.size.verySmall + icon.isLetterIdenticon: true + title: "helloworld.eth" + titleText.font.pixelSize: 12 + titleText.color: Theme.palette.indirectColor1 + } + } + StatusListItem { title: "List Item with Emoji" subTitle: "Emoji" diff --git a/src/StatusQ/Components/StatusExpandableItem.qml b/src/StatusQ/Components/StatusExpandableItem.qml index 68ec9395..53847760 100644 --- a/src/StatusQ/Components/StatusExpandableItem.qml +++ b/src/StatusQ/Components/StatusExpandableItem.qml @@ -12,6 +12,7 @@ Rectangle { property alias additionalText: additionalText.text property alias button: button property alias expandableComponent: expandableRegion.sourceComponent + property alias expandableItem: expandableRegion.item property int type: StatusExpandableItem.Type.Primary property bool expandable: true @@ -185,7 +186,7 @@ Rectangle { anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0 anchors.right: parent.right anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0 - active: false + visible: false } onExpandedChanged: { @@ -202,13 +203,13 @@ Rectangle { name: "EXPANDED" PropertyChanges {target: expandImage; icon: "chevron-up"} PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22} - PropertyChanges {target: expandableRegion; active: true} + PropertyChanges {target: expandableRegion; visible: true} }, State { name: "COLLAPSED" PropertyChanges {target: expandImage; icon: "chevron-down"} PropertyChanges {target: statusExpandableItem; height: 82} - PropertyChanges {target: expandableRegion; active: false} + PropertyChanges {target: expandableRegion; visible: false} } ] diff --git a/src/StatusQ/Components/StatusListItem.qml b/src/StatusQ/Components/StatusListItem.qml index 877ccde4..1cd76b9b 100644 --- a/src/StatusQ/Components/StatusListItem.qml +++ b/src/StatusQ/Components/StatusListItem.qml @@ -25,6 +25,8 @@ Rectangle { property list components property var bottomModel: [] property Component bottomDelegate + property var tagsModel: [] + property Component tagsDelegate property StatusIconSettings icon: StatusIconSettings { height: isLetterIdenticon ? 40 : 20 @@ -71,6 +73,7 @@ Rectangle { property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle property alias statusListItemComponentsSlot: statusListItemComponentsSlot property alias statusListItemTagsSlot: statusListItemTagsSlot + property alias statusListItemInlineTagsSlot: statusListItemTagsSlotInline signal clicked(string itemId) signal titleClicked(string titleId) @@ -247,7 +250,19 @@ Rectangle { width: contentItem.width implicitHeight: visible ? 22 : 0 } - + + Row { + id: statusListItemTagsSlotInline + anchors.top: statusListItemTertiaryTitle.bottom + width: parent.width + spacing: 10 + clip: true + + Repeater { + model: tagsModel + delegate: tagsDelegate + } + } } Row {