diff --git a/ui/StatusQ/sandbox/ListItems.qml b/ui/StatusQ/sandbox/ListItems.qml index 42417b7999..deb0046279 100644 --- a/ui/StatusQ/sandbox/ListItems.qml +++ b/ui/StatusQ/sandbox/ListItems.qml @@ -206,4 +206,18 @@ GridLayout { } ] } + + StatusDescriptionListItem { + title: "Title" + subTitle: "Subtitle" + } + + StatusDescriptionListItem { + title: "Title" + subTitle: "Subtitle" + tooltip.text: "Tooltip" + icon.name: "info" + iconButton.onClicked: tooltip.visible = !tooltip.visible + } + } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusDescriptionListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusDescriptionListItem.qml new file mode 100644 index 0000000000..5ba644fd8d --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Components/StatusDescriptionListItem.qml @@ -0,0 +1,68 @@ +import QtQuick 2.13 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Controls 0.1 + +Rectangle { + id: statusDescriptionListItem + + property string title: "" + property string subTitle: "" + property StatusIconSettings icon: StatusIconSettings { + width: 23 + height: 23 + } + property alias tooltip: statusToolTip + property alias iconButton: statusFlatRoundButton + + implicitWidth: 448 + implicitHeight: 56 + radius: 8 + + color: Theme.palette.statusListItem.backgroundColor + + StatusBaseText { + id: statusDescriptionListItemTitle + anchors.top: parent.top + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.topMargin: 5 + + color: Theme.palette.baseColor1 + text: statusDescriptionListItem.title + font.pixelSize: 13 + font.weight: Font.Medium + } + + StatusBaseText { + id: statusDescriptionListItemSubTitle + anchors.top: statusDescriptionListItemTitle.bottom + anchors.left: parent.left + anchors.leftMargin: 16 + anchors.topMargin: 4 + + text: statusDescriptionListItem.subTitle + color: Theme.palette.directColor1 + font.pixelSize: 15 + font.weight: Font.Normal + } + + StatusFlatRoundButton { + id: statusFlatRoundButton + visible: !!statusDescriptionListItem.icon.name + anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter + anchors.left: statusDescriptionListItemSubTitle.right + anchors.leftMargin: 4 + + width: 32 + height: 32 + + icon.name: statusDescriptionListItem.icon.name + icon.width: statusDescriptionListItem.icon.width + icon.height: statusDescriptionListItem.icon.height + + StatusToolTip { + id: statusToolTip + } + } +} diff --git a/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir index 473c7760e6..75c785179f 100644 --- a/ui/StatusQ/src/StatusQ/Components/qmldir +++ b/ui/StatusQ/src/StatusQ/Components/qmldir @@ -2,6 +2,7 @@ module StatusQ.Components StatusBadge 0.1 StatusBadge.qml StatusChatListItem 0.1 StatusChatListItem.qml +StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml StatusListItem 0.1 StatusListItem.qml StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml