status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(@StatusListItem): Use tags model

This commit is contained in:
Anthony Laibe 2022-03-09 11:31:04 +01:00 committed by r4bbit.eth
parent 7e9c7a52fd
commit 9dbb7ec53f
3 changed files with 26 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
sandbox/controls/ListItems.qml
View File

@ -331,12 +331,11 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusListItem { StatusListItem {
title: "List Item with Tags" title: "List Item with Tags"
icon.isLetterIdenticon: true icon.isLetterIdenticon: true
tags: [ bottomModel: 3
StatusListItemTag { bottomDelegate: StatusListItemTag {
title: qsTr("Tag 1") title: "tag"
icon.isLetterIdenticon: true icon.isLetterIdenticon: true
} }
]
} }
StatusDescriptionListItem { StatusDescriptionListItem {

40
src/StatusQ/Components/StatusListItem.qml
View File

@ -23,7 +23,8 @@ Rectangle {
property bool propagateTitleClicks: true property bool propagateTitleClicks: true
property int type: StatusListItem.Type.Primary property int type: StatusListItem.Type.Primary
property list<Item> components property list<Item> components
property list<StatusListItemTag> tags property var bottomModel: []
property Component bottomDelegate
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
height: isLetterIdenticon ? 40 : 20 height: isLetterIdenticon ? 40 : 20
@ -81,7 +82,7 @@ Rectangle {
implicitWidth: 448 implicitWidth: 448
implicitHeight: { implicitHeight: {
if (tags.length === 0) { if (bottomModel.length === 0) {
return Math.max(64, statusListItemTitleArea.height + 16) return Math.max(64, statusListItemTitleArea.height + 16)
} }
return Math.max(64, statusListItemTitleArea.height + 90) 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 { MouseArea {
id: sensor id: sensor
@ -162,7 +155,7 @@ Rectangle {
anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left
anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding
anchors.rightMargin: statusListItem.rightPadding anchors.rightMargin: statusListItem.rightPadding
anchors.verticalCenter: tags.length === 0 ? parent.verticalCenter : undefined anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
height: childrenRect.height height: childrenRect.height
@ -174,8 +167,8 @@ Rectangle {
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
anchors.left: parent.left anchors.left: parent.left
anchors.right: !statusListItem.titleAsideText && !titleIconsRow.sourceComponent ? parent.right : undefined anchors.right: !statusListItem.titleAsideText && !titleIconsRow.sourceComponent ? parent.right : undefined
anchors.top: tags.length === 0 ? undefined: parent.top anchors.top: bottomModel.length === 0 ? undefined: parent.top
anchors.topMargin: tags.length === 0 ? undefined : 20 anchors.topMargin: bottomModel.length === 0 ? undefined : 20
color: { color: {
if (!statusListItem.enabled) { if (!statusListItem.enabled) {
return Theme.palette.baseColor1 return Theme.palette.baseColor1
@ -208,8 +201,8 @@ Rectangle {
anchors.left: statusListItemTitle.right anchors.left: statusListItemTitle.right
anchors.leftMargin: 4 anchors.leftMargin: 4
anchors.verticalCenter: statusListItemTitle.verticalCenter anchors.verticalCenter: statusListItemTitle.verticalCenter
anchors.top: tags.length === 0 ? undefined: parent.top anchors.top: bottomModel.length === 0 ? undefined: parent.top
anchors.topMargin: tags.length === 0 ? undefined : 20 anchors.topMargin: bottomModel.length === 0 ? undefined : 20
text: statusListItem.titleAsideText text: statusListItem.titleAsideText
font.pixelSize: 10 font.pixelSize: 10
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
@ -265,13 +258,18 @@ Rectangle {
width: contentItem.width width: contentItem.width
spacing: 10 spacing: 10
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
Repeater {
model: bottomModel
delegate: bottomDelegate
}
} }
StatusBaseText { StatusBaseText {
id: statusListItemLabel id: statusListItemLabel
anchors.verticalCenter: tags.length === 0 ? parent.verticalCenter : undefined anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
anchors.top: tags.length === 0 ? undefined: parent.top anchors.top: bottomModel.length === 0 ? undefined: parent.top
anchors.topMargin: tags.length === 0 ? undefined : 16 anchors.topMargin: bottomModel.length === 0 ? undefined : 16
anchors.right: statusListItemComponentsSlot.left anchors.right: statusListItemComponentsSlot.left
anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0 anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
@ -285,9 +283,9 @@ Rectangle {
id: statusListItemComponentsSlot id: statusListItemComponentsSlot
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: statusListItem.rightPadding anchors.rightMargin: statusListItem.rightPadding
anchors.verticalCenter: tags.length === 0 ? parent.verticalCenter : undefined anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
anchors.top: tags.length === 0 ? undefined: parent.top anchors.top: bottomModel.length === 0 ? undefined: parent.top
anchors.topMargin: tags.length === 0 ? undefined : 12 anchors.topMargin: bottomModel.length === 0 ? undefined : 12
spacing: 10 spacing: 10
} }
} }

4
src/StatusQ/Components/StatusListItemTag.qml
View File

@ -8,7 +8,7 @@ Rectangle {
id: root id: root
width: titleText.contentWidth + 60 width: titleText.contentWidth + 60
height: 30 height: 30
color: Theme.palette.primaryColor2 color: Theme.palette.primaryColor3
radius: 15 radius: 15
property string title: "" property string title: ""
@ -62,7 +62,7 @@ Rectangle {
anchors.leftMargin: 5 anchors.leftMargin: 5
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
icon: "close" icon: "close-circle"
} }
MouseArea { MouseArea {