import QtQuick 2.13 import QtQuick.Layouts 1.0 import StatusQ.Core 0.1 import StatusQ.Controls 0.1 import StatusQ.Components 0.1 import StatusQ.Core.Theme 0.1 import utils 1.0 StatusRadioButton { id: gasRectangle property string primaryText property string timeText property string totalGasFiatValue property double totalGasEthValue width: contentItem.implicitWidth // To-do Use StatusCard instead. It crashes if I use StatusCard and // already spent 2 days on this, so leaving it out for now contentItem: Rectangle { id: card implicitHeight: 76 implicitWidth: 128 radius: 8 color: gasRectangle.checked || mouseArea.containsMouse ? "transparent": Theme.palette.baseColor4 border.color: gasRectangle.checked || mouseArea.containsMouse ? Theme.palette.primaryColor2: Theme.palette.baseColor4 ColumnLayout { anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top anchors.leftMargin: 8 anchors.rightMargin: 8 anchors.topMargin: 8 StatusBaseText { id: primaryText font.pixelSize: 15 font.weight: Font.Medium elide: Text.ElideRight text: gasRectangle.primaryText color: Theme.palette.directColor1 } StatusBaseText { id: secondaryLabel Layout.maximumWidth: card.width - Style.current.smallPadding font.pixelSize: 13 font.weight: Font.Medium text: gasRectangle.totalGasFiatValue color: Theme.palette.primaryColor1 elide: Text.ElideRight } StatusBaseText { id: tertiaryText font.pixelSize: 10 text: gasRectangle.timeText color: Theme.palette.directColor5 } } MouseArea { id: mouseArea anchors.fill: parent cursorShape: Qt.PointingHandCursor hoverEnabled: true onClicked: gasRectangle.toggle() } } indicator: Item { width:card.width height: card.height } }