From 75571c9f225de1f755cd43f9e8adc2fcdf31f07e Mon Sep 17 00:00:00 2001 From: Alex Jbanca Date: Mon, 27 Mar 2023 14:51:58 +0300 Subject: [PATCH] fix(StatusItemsSelector): Allow icons to be provided by the model Fixing https://github.com/status-im/status-desktop/issues/9766 The main change is that the model will now provide the image type, on top of the image source. The image type can be either icon or image. Icons will be coloured with the same colour as the text. --- storybook/pages/StatusItemSelectorPage.qml | 1 + .../StatusQ/Components/StatusItemSelector.qml | 18 +++++++++--------- .../Chat/controls/community/PermissionItem.qml | 5 ++++- .../panels/communities/HoldingsListPanel.qml | 5 ++++- .../communities/CommunityNewPermissionView.qml | 1 + .../communities/HoldingsSelectionModel.qml | 15 ++++++++++++++- 6 files changed, 33 insertions(+), 12 deletions(-) diff --git a/storybook/pages/StatusItemSelectorPage.qml b/storybook/pages/StatusItemSelectorPage.qml index 9f384f3dfa..4020c65b1d 100644 --- a/storybook/pages/StatusItemSelectorPage.qml +++ b/storybook/pages/StatusItemSelectorPage.qml @@ -44,6 +44,7 @@ ColumnLayout { model.append({ text: input.text, imageSource: Style.png("tokens/SNT"), + isIcon: false, operator: model.count > 0 ? OperatorsUtils.Operators.Or : OperatorsUtils.Operators.None }) diff --git a/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml index bdb369757a..11488293c7 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml @@ -55,6 +55,7 @@ StatusFlowSelector { ListElement { text: "Socks" imageSource: "qrc:imports/assets/png/tokens/SOCKS.png" + isIcon: false color: "" emoji: "" operator: Utils.Operator.None @@ -62,6 +63,7 @@ StatusFlowSelector { ListElement { text: "ZRX" imageSource: "qrc:imports/assets/png/tokens/ZRX.png" + isIcon: false color: "" emoji: "" operator: Utils.Operator.Or @@ -69,6 +71,7 @@ StatusFlowSelector { ListElement { text: "Custom Token" imageSource: "" + isIcon: true color: "red" emoji: "⚽" operator: Utils.Operator.Or @@ -77,18 +80,13 @@ StatusFlowSelector { \endqml */ property alias model: repeater.model - /*! - \qmlproperty bool StatusItemSelector::useIcons - This property determines if the imageSource role from the model will be handled as - an image or an icon. - */ - property bool useIcons: false property StatusAssetSettings asset: StatusAssetSettings { height: 20 width: 20 + bgHeight: height + bgWidth: width bgColor: "transparent" - isImage: !root.useIcons isLetterIdenticon: root.useLetterIdenticons } property int tagLeftPadding: 6 @@ -146,11 +144,13 @@ StatusFlowSelector { asset.height: root.asset.height asset.width: root.asset.width + asset.bgHeight: root.asset.bgHeight + asset.bgWidth: root.asset.bgWidth asset.name: root.useLetterIdenticons ? model.text : (model.imageSource ?? "") - asset.isImage: root.asset.isImage + asset.isImage: !model.isIcon asset.bgColor: root.asset.bgColor asset.emoji: model.emoji ? model.emoji : "" - asset.color: model.color ? model.color : "" + asset.color: model.color ? model.color : titleText.color asset.isLetterIdenticon: root.useLetterIdenticons closeButtonVisible: false titleText.color: Theme.palette.primaryColor1 diff --git a/ui/app/AppLayouts/Chat/controls/community/PermissionItem.qml b/ui/app/AppLayouts/Chat/controls/community/PermissionItem.qml index 91a2b966cf..d1b0bce5da 100644 --- a/ui/app/AppLayouts/Chat/controls/community/PermissionItem.qml +++ b/ui/app/AppLayouts/Chat/controls/community/PermissionItem.qml @@ -102,10 +102,13 @@ Control{ leftPadding: 2 title: model.text asset.name: model.imageSource - asset.isImage: true + asset.isImage: !model.isIcon asset.bgColor: "transparent" + asset.color: asset.isImage ? "transparent" : titleText.color asset.height: 28 asset.width: asset.height + asset.bgHeight: asset.height + asset.bgWidth: asset.height closeButtonVisible: false titleText.color: Theme.palette.primaryColor1 titleText.font.pixelSize: d.tagTextPixelSize diff --git a/ui/app/AppLayouts/Chat/panels/communities/HoldingsListPanel.qml b/ui/app/AppLayouts/Chat/panels/communities/HoldingsListPanel.qml index f8141bc4c8..7aa83957a6 100644 --- a/ui/app/AppLayouts/Chat/panels/communities/HoldingsListPanel.qml +++ b/ui/app/AppLayouts/Chat/panels/communities/HoldingsListPanel.qml @@ -74,10 +74,13 @@ Control { leftPadding: 2 title: model.text asset.name: model.imageSource - asset.isImage: true + asset.isImage: !model.isIcon asset.bgColor: "transparent" asset.height: 28 asset.width: asset.height + asset.bgWidth: asset.height + asset.bgHeight: asset.height + asset.color: asset.isImage ? "transparent" : titleText.color closeButtonVisible: false titleText.color: model.available ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1 bgColor: model.available ? Theme.palette.primaryColor2 :Theme.palette.dangerColor2 diff --git a/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml b/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml index e897f3be1e..6ac0b00ace 100644 --- a/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml +++ b/ui/app/AppLayouts/Chat/views/communities/CommunityNewPermissionView.qml @@ -475,6 +475,7 @@ StatusScrollView { Component.onCompleted: { append({ imageSource: inDropdown.communityImage, + isIcon: false, text: inDropdown.communityName, operator: OperatorsUtils.Operators.None, color: inDropdown.communityColor diff --git a/ui/app/AppLayouts/Chat/views/communities/HoldingsSelectionModel.qml b/ui/app/AppLayouts/Chat/views/communities/HoldingsSelectionModel.qml index 68d92c32f1..95bb80c8b5 100644 --- a/ui/app/AppLayouts/Chat/views/communities/HoldingsSelectionModel.qml +++ b/ui/app/AppLayouts/Chat/views/communities/HoldingsSelectionModel.qml @@ -56,7 +56,7 @@ SortFilterProxyModel { function getIcon(type, key) { if (type === HoldingTypes.Type.Ens) - return Style.svg("profile/ensUsernames") + return "username" const model = type === HoldingTypes.Type.Asset ? assetsModel : collectiblesModel @@ -70,6 +70,19 @@ SortFilterProxyModel { return getIcon(model.type, model.key) } }, + ExpressionRole { + name: "isIcon" + + function isIconType(type) { + return type === HoldingTypes.Type.Ens + } + + expression: { + _assetsChanges.revision + _collectiblesChanges.revision + return isIconType(model.type) + } + }, ExpressionRole { name: "operator"