From 031319968d8b2d054330b52ba091d64ae4b373a8 Mon Sep 17 00:00:00 2001 From: Pascal Precht Date: Tue, 20 Jul 2021 14:01:27 +0200 Subject: [PATCH] feat(StatusListItem): support tertiaryTitle Usage: ```qml StatusListItem { title: ... subTitle: ... tertiaryTitle: ... } ``` Closes #275 --- sandbox/ListItems.qml | 9 +++++++++ src/StatusQ/Components/StatusListItem.qml | 20 +++++++++++++++++--- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/sandbox/ListItems.qml b/sandbox/ListItems.qml index 944509b0..4d3a93ad 100644 --- a/sandbox/ListItems.qml +++ b/sandbox/ListItems.qml @@ -143,6 +143,15 @@ GridLayout { subTitle: "Subtitle" } + StatusListItem { + title: "Title" + subTitle: "Subtitle" + tertiaryTitle: "Tertiary title" + + statusListItemTitle.font.pixelSize: 17 + statusListItemTitle.font.weight: Font.Bold + } + StatusListItem { title: "Title" subTitle: "Subtitle" diff --git a/src/StatusQ/Components/StatusListItem.qml b/src/StatusQ/Components/StatusListItem.qml index 583e4446..d5507d0e 100644 --- a/src/StatusQ/Components/StatusListItem.qml +++ b/src/StatusQ/Components/StatusListItem.qml @@ -8,7 +8,7 @@ Rectangle { id: statusListItem implicitWidth: 448 - implicitHeight: 64 + implicitHeight: Math.max(64, statusListItemTitleArea.height + 16) enum Type { Primary, @@ -34,6 +34,7 @@ Rectangle { property string title: "" property string subTitle: "" + property string tertiaryTitle: "" property real leftPadding: 16 property real rightPadding: 16 property StatusIconSettings icon: StatusIconSettings { @@ -69,6 +70,7 @@ Rectangle { property alias sensor: sensor property alias statusListItemTitle: statusListItemTitle property alias statusListItemSubTitle: statusListItemSubTitle + property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle property alias statusListItemComponentsSlot: statusListItemComponentsSlot property list components @@ -144,10 +146,13 @@ Rectangle { } Item { + id: statusListItemTitleArea anchors.left: iconOrImage.active ? iconOrImage.right : parent.left anchors.leftMargin: statusListItem.leftPadding anchors.verticalCenter: parent.verticalCenter - height: statusListItemTitle.height + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0) + height: statusListItemTitle.height + + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0) + + (statusListItemTertiaryTitle.visible ? statusListItemTertiaryTitle.height : 0) StatusBaseText { id: statusListItemTitle @@ -171,9 +176,18 @@ Rectangle { text: statusListItem.subTitle font.pixelSize: 15 - color: Theme.palette.baseColor1 + color: !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1 visible: !!statusListItem.subTitle } + + StatusBaseText { + id: statusListItemTertiaryTitle + anchors.top: statusListItemSubTitle.bottom + text: statusListItem.tertiaryTitle + color: Theme.palette.baseColor1 + font.pixelSize: 13 + visible: !!statusListItem.tertiaryTitle + } } StatusBaseText {