feat(@StatusListItem): add option for tags

This commit is contained in:
Anthony Laibe 2022-03-04 14:16:26 +01:00 committed by Michał Cieślak
parent 688b6b2d92
commit 7b45a1ad16
4 changed files with 131 additions and 5 deletions

View File

@ -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"

View File

@ -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
}
}

View File

@ -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()
}
}
}

View File

@ -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