diff --git a/ui/StatusQ/sandbox/controls/ListItems.qml b/ui/StatusQ/sandbox/controls/ListItems.qml index a68cec88fd..cf60105dc6 100644 --- a/ui/StatusQ/sandbox/controls/ListItems.qml +++ b/ui/StatusQ/sandbox/controls/ListItems.qml @@ -26,7 +26,7 @@ GridLayout { badge.value: 1 } StatusNavigationListItem { - title: "Menu Item (selected)" + title: "Menu Item (selected) with very long text" selected: true icon.name: "info" badge.value: 1 @@ -420,10 +420,16 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy } + StatusMemberListItem { + nickName: "very-long-annoying-nickname.eth" + isOnline: false + trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy + } + StatusMemberListItem { nickName: "This girl I know from work" userName: "annabelle" - isOnline: true + isOnline: true } StatusMemberListItem { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml index ec32035cc7..2c51edc925 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusListItem.qml @@ -14,13 +14,13 @@ Rectangle { property string title: "" property string titleAsideText: "" property string subTitle: "" - property string tertiaryTitle: "" + property string tertiaryTitle: "" property string label: "" property real leftPadding: 16 property real rightPadding: 16 property bool enabled: true property bool highlighted: false - property bool propagateTitleClicks: true + property bool propagateTitleClicks: true property int type: StatusListItem.Type.Primary property list components property var bottomModel: [] @@ -169,26 +169,34 @@ Rectangle { text: statusListItem.title font.pixelSize: 15 height: visible ? contentHeight : 0 - wrapMode: Text.WrapAtWordBoundaryOrAnywhere + elide: Text.ElideRight anchors.left: parent.left - anchors.right: !statusListItem.titleAsideText && !titleIconsRow.sourceComponent ? parent.right : undefined anchors.top: bottomModel.length === 0 ? undefined: parent.top anchors.topMargin: bottomModel.length === 0 ? undefined : 20 + width: Math.min(implicitWidth, parent.width) color: { - if (!statusListItem.enabled) { - return Theme.palette.baseColor1 - } - switch (statusListItem.type) { - case StatusListItem.Type.Primary: - return Theme.palette.directColor1 - case StatusListItem.Type.Secondary: - return Theme.palette.primaryColor1 - case StatusListItem.Type.Danger: - return Theme.palette.dangerColor1 - } + if (!statusListItem.enabled) { + return Theme.palette.baseColor1 + } + switch (statusListItem.type) { + case StatusListItem.Type.Primary: + return Theme.palette.directColor1 + case StatusListItem.Type.Secondary: + return Theme.palette.primaryColor1 + case StatusListItem.Type.Danger: + return Theme.palette.dangerColor1 + } + } + + StatusToolTip { + id: statusListItemTitleTooltip + text: statusListItemTitle.text + delay: 0 + visible: statusListItemTitle.truncated && statusListItemTitleMouseArea.containsMouse } MouseArea { + id: statusListItemTitleMouseArea anchors.fill: parent enabled: statusListItem.enabled cursorShape: sensor.enabled && containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor