fix(StatusQ/StatusListItemTag): Changed API and added test elide property when a specific width is forced

- Changed `StatusListItemTag` API. Now it is based on `Control` component. - Updated needed qml files to fit with the new `StatusListItemTag` API. - Added `elide` property in `Text` component to better visualise the content when a specific width is forced.
2022-12-21 14:57:41 +01:00 · 2022-12-21 14:57:41 +01:00 · 579075d6cc
parent f29210d4a2
commit 579075d6cc
11 changed files with 47 additions and 35 deletions
--- a/ui/StatusQ/sandbox/controls/ListItems.qml
+++ b/ui/StatusQ/sandbox/controls/ListItems.qml
@ -424,9 +424,9 @@ ColumnLayout {
            }
        }
        tagsDelegate: StatusListItemTag {
-            color: "blue"
+            bgColor: "blue"
+            bgRadius: 6
            height: 24
-            radius: 6
            closeButtonVisible: false
            asset.emoji: model.emoji
            asset.emojiSize: Emoji.size.verySmall
--- a/ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
+++ b/ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml
@ -62,10 +62,10 @@ StatusSectionLayout {
                    Repeater {
                        model: d.tagsModel
                        delegate: StatusListItemTag {
-                            border.color: Theme.palette.baseColor2
-                            color: "transparent"
+                            bgColor: "transparent"
+                            bgRadius: 36
+                            bgBorderColor: Theme.palette.baseColor2
                            height: 32
-                            radius: 36
                            closeButtonVisible: false
                            asset.emoji: model.emoji
                            asset.height: 32
--- a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml
@ -372,10 +372,10 @@ Rectangle {
                    Repeater {
                        model: root.categories
                        delegate: StatusListItemTag {
-                            border.color: Theme.palette.baseColor2
-                            color: "transparent"
+                            bgColor: "transparent"
+                            bgRadius: 20
+                            bgBorderColor: Theme.palette.baseColor2
                            height: 24
-                            radius: 20
                            closeButtonVisible: false
                            asset.emoji: model.emoji
                            asset.width: 24
--- a/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml
@ -148,11 +148,11 @@ Rectangle {
            Layout.fillWidth: true
            spacing: 6
            StatusListItemTag {
+                bgColor: Theme.palette.baseColor2
                visible: !itemsModel || itemsModel.count === 0
                title: root.defaultItemText
                asset.name: root.defaultItemImageSource
                asset.isImage: true
-                color: Theme.palette.baseColor2
                closeButtonVisible: false
                titleText.color: Theme.palette.baseColor1
                titleText.font.pixelSize: 15
--- a/ui/StatusQ/src/StatusQ/Components/StatusListItemTag.qml
+++ b/ui/StatusQ/src/StatusQ/Components/StatusListItemTag.qml
@ -4,17 +4,16 @@ import QtQuick.Layouts 1.12
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1

-Rectangle {
+Control {
    id: root
-    implicitWidth: layout.width + layout.anchors.margins
-    implicitHeight: 30
-    color: Theme.palette.primaryColor3
-    radius: 15

    property alias titleText: titleText
-
    property string title: ""
    property bool closeButtonVisible: true
+    property color bgColor: Theme.palette.primaryColor3
+    property color bgBorderColor: "transparent"
+    property int bgRadius: 15
+
    signal clicked(var mouse)

    property StatusAssetSettings asset: StatusAssetSettings {
@ -30,14 +29,27 @@ Rectangle {
        imgIsIdenticon: false
    }

-    RowLayout {
+    QtObject {
+        id: d
+        readonly property int commonMargin: 6
+        readonly property int minHeight: 30
+    }
+
+    leftPadding: d.commonMargin
+    rightPadding: d.commonMargin
+    spacing: d.commonMargin
+    implicitHeight: d.minHeight
+    background: Rectangle {
+        color: root.bgColor
+        radius: root.bgRadius
+        border.color: root.bgBorderColor
+    }
+    contentItem: RowLayout {
        id: layout
-        height: parent.height
-        anchors.margins: 6
+        spacing: root.spacing

        StatusSmartIdenticon {
            id: iconOrImage
-            Layout.leftMargin: 4
            asset: root.asset
            name: root.title
            active: root.asset.isLetterIdenticon ||
@ -46,9 +58,11 @@ Rectangle {

        StatusBaseText {
            id: titleText
+            Layout.fillWidth: true
            color: Theme.palette.primaryColor1
            text: root.title
-            Layout.rightMargin: closeButtonVisible ? 0 : 5
+            Layout.rightMargin: closeButtonVisible ? 0 : d.commonMargin
+            elide: Text.ElideRight
        }

        StatusIcon {
--- a/ui/app/AppLayouts/Chat/controls/community/PermissionItem.qml
+++ b/ui/app/AppLayouts/Chat/controls/community/PermissionItem.qml
@ -110,13 +110,13 @@ Control{
                    }
                    StatusListItemTag {
                        Layout.preferredHeight: d.flowRowHeight
+                        leftPadding: 2
                        title: model.text
                        asset.name: model.imageSource
                        asset.isImage: true
                        asset.bgColor: "transparent"
                        asset.height: 28
                        asset.width: asset.height
-                        color: Theme.palette.primaryColor3
                        closeButtonVisible: false
                        titleText.color: Theme.palette.primaryColor1
                        titleText.font.pixelSize: d.tagTextPixelSize
@ -137,7 +137,6 @@ Control{
                asset.name: root.permissionImageSource
                asset.isImage: false
                asset.bgColor: "transparent"
-                color: Theme.palette.primaryColor3
                closeButtonVisible: false
                titleText.color: Theme.palette.primaryColor1
                titleText.font.pixelSize: d.tagTextPixelSize
@ -171,7 +170,6 @@ Control{
                        asset.name: model.imageSource
                        asset.isImage: true
                        asset.bgColor: "transparent"
-                        color: Theme.palette.primaryColor3
                        closeButtonVisible: false
                        titleText.color: Theme.palette.primaryColor1
                        titleText.font.pixelSize: d.tagTextPixelSize
--- a/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml
+++ b/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml
@ -128,9 +128,9 @@ Item {
                primaryText: qsTr("Related Accounts")
                tagsModel: walletStore.currentAccount.relatedAccounts
                tagsDelegate: StatusListItemTag {
-                    color: model.color
-                    height: 24
-                    radius: 6
+                    bgColor: model.color
+                    bgRadius: 6
+                    height: 50
                    closeButtonVisible: false
                    asset.emoji: model.emoji
                    asset.emojiSize: Emoji.size.verySmall
--- a/ui/app/AppLayouts/Wallet/panels/SelectGeneratedAccount.qml
+++ b/ui/app/AppLayouts/Wallet/panels/SelectGeneratedAccount.qml
@ -83,9 +83,9 @@ StatusSelect {
        border.width: 1
        border.color: Theme.palette.baseColor2
        tagsDelegate: StatusListItemTag {
-            color: model.color
+            bgColor: model.color
+            bgRadius: 6
            height: Style.current.bigPadding
-            radius: 6
            closeButtonVisible: false
            asset.emoji: model.emoji
            asset.emojiSize: Emoji.size.verySmall
@ -104,9 +104,9 @@ StatusSelect {
        asset.bgColor: "transparent"
        asset.color: model.generatedModel ? Theme.palette.primaryColor1 : Theme.palette.directColor5
        tagsDelegate: StatusListItemTag {
-            color: model.color
+            bgColor: model.color
+            bgRadius: 6
            height: 24
-            radius: 6
            closeButtonVisible: false
            asset.emoji: model.emoji
            asset.emojiSize: Emoji.size.verySmall
--- a/ui/imports/shared/popups/SendModal.qml
+++ b/ui/imports/shared/popups/SendModal.qml
@ -222,12 +222,12 @@ StatusDialog {
                            color: Theme.palette.directColor1
                        }
                        StatusListItemTag {
+                            bgColor: d.errorMode ? Theme.palette.dangerColor2 : Theme.palette.primaryColor3
                            height: 22
                            width: childrenRect.width
                            title: d.maxFiatBalance > 0 ? qsTr("Max: %1").arg(LocaleUtils.numberToLocaleString(d.maxFiatBalance)) : qsTr("No balances active")
                            closeButtonVisible: false
                            titleText.font.pixelSize: 12
-                            color: d.errorMode ? Theme.palette.dangerColor2 : Theme.palette.primaryColor3
                            titleText.color: d.errorMode ? Theme.palette.dangerColor1 : Theme.palette.primaryColor1
                        }
                    }
--- a/ui/imports/shared/popups/keycard/helpers/KeyPairItem.qml
+++ b/ui/imports/shared/popups/keycard/helpers/KeyPairItem.qml
@ -66,9 +66,9 @@ StatusListItem {
    tagsModel: ListModel{}

    tagsDelegate: StatusListItemTag {
-        color: model.color
+        bgColor: model.color
+        bgRadius: 6
        height: Style.current.bigPadding
-        radius: 6
        closeButtonVisible: false
        asset {
            emoji: model.emoji
--- a/ui/imports/shared/popups/keycard/helpers/KeycardItem.qml
+++ b/ui/imports/shared/popups/keycard/helpers/KeycardItem.qml
@ -66,9 +66,9 @@ StatusListItem {
    tagsModel: ListModel{}

    tagsDelegate: StatusListItemTag {
-        color: model.color
+        bgColor: model.color
+        bgRadius: 6
        height: Style.current.bigPadding
-        radius: 6
        closeButtonVisible: false
        asset {
            emoji: model.emoji