fix(@StatusListItem): Use tags model
This commit is contained in:
parent
0abfab4674
commit
3363469109
|
@ -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 {
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
Loading…
Reference in New Issue