diff --git a/ui/StatusQ/sandbox/controls/ListItems.qml b/ui/StatusQ/sandbox/controls/ListItems.qml index ee1b0002c8..d6a71d9ccf 100644 --- 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 diff --git a/ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml b/ui/StatusQ/sandbox/demoapp/StatusAppCommunitiesPortalView.qml index f78f0cc686..8aeab6ac97 100644 --- 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 diff --git a/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml b/ui/StatusQ/src/StatusQ/Components/StatusCommunityCard.qml index bc63eed93b..169e602713 100644 --- 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 diff --git a/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml index f33396e4bd..252f197ca9 100644 --- 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 diff --git a/ui/StatusQ/src/StatusQ/Components/StatusListItemTag.qml b/ui/StatusQ/src/StatusQ/Components/StatusListItemTag.qml index 2c640e244a..3cf50417e2 100644 --- 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 { diff --git a/ui/app/AppLayouts/Chat/controls/community/PermissionItem.qml b/ui/app/AppLayouts/Chat/controls/community/PermissionItem.qml index 67eed6b0c4..ed7569d9b6 100644 --- 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 diff --git a/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml b/ui/app/AppLayouts/Profile/views/wallet/AccountView.qml index 5d13a3bf6e..73c463ea1e 100644 --- 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 diff --git a/ui/app/AppLayouts/Wallet/panels/SelectGeneratedAccount.qml b/ui/app/AppLayouts/Wallet/panels/SelectGeneratedAccount.qml index 99a2a4a2c5..944b3fed58 100644 --- 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 diff --git a/ui/imports/shared/popups/SendModal.qml b/ui/imports/shared/popups/SendModal.qml index 732458fad2..f3241e86a6 100644 --- 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 } } diff --git a/ui/imports/shared/popups/keycard/helpers/KeyPairItem.qml b/ui/imports/shared/popups/keycard/helpers/KeyPairItem.qml index 0d940a675c..3d6b84beb5 100644 --- 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 diff --git a/ui/imports/shared/popups/keycard/helpers/KeycardItem.qml b/ui/imports/shared/popups/keycard/helpers/KeycardItem.qml index ab555d6e34..3f986b3343 100644 --- 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