diff --git a/sandbox/ListItems.qml b/sandbox/ListItems.qml index 4d3a93ad..19aa57ae 100644 --- a/sandbox/ListItems.qml +++ b/sandbox/ListItems.qml @@ -152,6 +152,16 @@ GridLayout { statusListItemTitle.font.weight: Font.Bold } + StatusListItem { + title: "Title" + subTitle: "Super long description that causes a multiline paragraph and makes the size of the component grow. Let's see how it behaves." + tertiaryTitle: "Tertiary title" + icon.name: "info" + + 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 d5507d0e..6bb743e9 100644 --- a/src/StatusQ/Components/StatusListItem.qml +++ b/src/StatusQ/Components/StatusListItem.qml @@ -68,6 +68,8 @@ Rectangle { property int type: StatusListItem.Type.Primary property alias sensor: sensor + + property alias statusListItemIcon: iconOrImage property alias statusListItemTitle: statusListItemTitle property alias statusListItemSubTitle: statusListItemSubTitle property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle @@ -95,7 +97,8 @@ Rectangle { id: iconOrImage anchors.left: parent.left anchors.leftMargin: statusListItem.leftPadding - anchors.verticalCenter: parent.verticalCenter + anchors.top: parent.top + anchors.topMargin: 12 sourceComponent: { if (statusListItem.icon.isLetterIdenticon) { return statusLetterIdenticon @@ -148,7 +151,10 @@ Rectangle { Item { id: statusListItemTitleArea anchors.left: iconOrImage.active ? iconOrImage.right : parent.left + anchors.right: statusListItemLabel.visible ? + statusListItemLabel.left : statusListItemComponentsSlot.left anchors.leftMargin: statusListItem.leftPadding + anchors.rightMargin: statusListItem.rightPadding anchors.verticalCenter: parent.verticalCenter height: statusListItemTitle.height + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0) + @@ -157,7 +163,9 @@ Rectangle { StatusBaseText { id: statusListItemTitle text: statusListItem.title + width: parent.width font.pixelSize: 15 + wrapMode: Text.WrapAtWordBoundaryOrAnywhere color: { switch (statusListItem.type) { case StatusListItem.Type.Primary: @@ -173,24 +181,28 @@ Rectangle { StatusBaseText { id: statusListItemSubTitle anchors.top: statusListItemTitle.bottom - + width: parent.width text: statusListItem.subTitle font.pixelSize: 15 color: !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1 visible: !!statusListItem.subTitle + wrapMode: Text.WrapAtWordBoundaryOrAnywhere } StatusBaseText { id: statusListItemTertiaryTitle anchors.top: statusListItemSubTitle.bottom + width: parent.width text: statusListItem.tertiaryTitle color: Theme.palette.baseColor1 font.pixelSize: 13 visible: !!statusListItem.tertiaryTitle + wrapMode: Text.WrapAtWordBoundaryOrAnywhere } } StatusBaseText { + id: statusListItemLabel anchors.verticalCenter: parent.verticalCenter anchors.right: statusListItemComponentsSlot.left anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0 diff --git a/src/StatusQ/Components/StatusNavigationListItem.qml b/src/StatusQ/Components/StatusNavigationListItem.qml index ec06f9e1..3a7a8c46 100644 --- a/src/StatusQ/Components/StatusNavigationListItem.qml +++ b/src/StatusQ/Components/StatusNavigationListItem.qml @@ -17,6 +17,7 @@ StatusListItem { icon.background.height: 20 icon.background.color: "transparent" + statusListItemIcon.anchors.topMargin: 14 color: { if (selected) {