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.
This commit is contained in:
Alex Jbanca
Alex Jbanca
parent
17834ecbc1
commit
75571c9f22
|
|
@ -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
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -475,6 +475,7 @@ StatusScrollView {
|
|||
Component.onCompleted: {
|
||||
append({
|
||||
imageSource: inDropdown.communityImage,
|
||||
isIcon: false,
|
||||
text: inDropdown.communityName,
|
||||
operator: OperatorsUtils.Operators.None,
|
||||
color: inDropdown.communityColor
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue