From 7b45a1ad16ada094b381b23013819deb2adeac30 Mon Sep 17 00:00:00 2001 From: Anthony Laibe Date: Fri, 4 Mar 2022 14:16:26 +0100 Subject: [PATCH] feat(@StatusListItem): add option for tags --- ui/StatusQ/sandbox/controls/ListItems.qml | 11 +++ .../src/StatusQ/Components/StatusListItem.qml | 47 +++++++++-- .../StatusQ/Components/StatusListItemTag.qml | 77 +++++++++++++++++++ ui/StatusQ/src/StatusQ/Components/qmldir | 1 + 4 files changed, 131 insertions(+), 5 deletions(-) create mode 100644 ui/StatusQ/src/StatusQ/Components/StatusListItemTag.qml diff --git a/ui/StatusQ/sandbox/controls/ListItems.qml b/ui/StatusQ/sandbox/controls/ListItems.qml index 12948cd5c7..8426f15ff8 100644 --- a/ui/StatusQ/sandbox/controls/ListItems.qml +++ b/ui/StatusQ/sandbox/controls/ListItems.qml @@ -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" diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml index 9f1111d86d..c29fb1cdfa 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml @@ -23,6 +23,7 @@ Rectangle { property bool propagateTitleClicks: true property int type: StatusListItem.Type.Primary property list components + property list 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 } } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItemTag.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItemTag.qml new file mode 100644 index 0000000000..b133701eb5 --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Components/StatusListItemTag.qml @@ -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() + } + } +} \ No newline at end of file diff --git a/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir index dfcf6b68c3..c834d2f4cf 100644 --- a/ui/StatusQ/src/StatusQ/Components/qmldir +++ b/ui/StatusQ/src/StatusQ/Components/qmldir @@ -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