86 lines
2.1 KiB
QML
86 lines
2.1 KiB
QML
|
import QtQuick 2.15
|
||
|
|
import QtQuick.Layouts 1.15
|
||
|
|
import QtGraphicalEffects 1.15
|
||
|
|
|
||
|
|
import StatusQ.Core 0.1
|
||
|
|
import StatusQ.Core.Theme 0.1
|
||
|
|
import StatusQ.Components 0.1
|
||
|
|
|
||
|
|
import utils 1.0
|
||
|
|
|
||
|
|
Item {
|
||
|
|
id: root
|
||
|
|
|
||
|
|
property url imageUrl: ""
|
||
|
|
property string badgeIcon: "walletConnect"
|
||
|
|
property string fallbackIcon: "dapp"
|
||
|
|
|
||
|
|
readonly property bool iconLoaded: !mainImage.isError && !mainImage.isLoading && mainImage.image.source !== ""
|
||
|
|
|
||
|
|
implicitWidth: mainImage.implicitWidth
|
||
|
|
implicitHeight: mainImage.implicitHeight
|
||
|
|
|
||
|
|
Item {
|
||
|
|
id: imageContainer
|
||
|
|
|
||
|
|
width: parent.width
|
||
|
|
height: width
|
||
|
|
|
||
|
|
StatusRoundedImage {
|
||
|
|
id: mainImage
|
||
|
|
|
||
|
|
width: parent.width
|
||
|
|
height: width
|
||
|
|
visible: !isError && !isLoading && root.imageUrl != ""
|
||
|
|
image.source: root.imageUrl
|
||
|
|
}
|
||
|
|
|
||
|
|
Loader {
|
||
|
|
anchors.fill: mainImage
|
||
|
|
active: !mainImage.visible
|
||
|
|
sourceComponent: StatusRoundedComponent {
|
||
|
|
color: Theme.palette.primaryColor3
|
||
|
|
StatusIcon {
|
||
|
|
anchors.fill: parent
|
||
|
|
anchors.margins: Style.current.padding
|
||
|
|
color: Theme.palette.primaryColor1
|
||
|
|
icon: "dapp"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
layer.enabled: true
|
||
|
|
layer.effect: OpacityMask {
|
||
|
|
id: mask
|
||
|
|
invert: true
|
||
|
|
|
||
|
|
maskSource: Item {
|
||
|
|
width: mask.width + 2
|
||
|
|
height: mask.height + 2
|
||
|
|
|
||
|
|
Rectangle {
|
||
|
|
x: badge.x + 1
|
||
|
|
y: badge.y + 1
|
||
|
|
|
||
|
|
width: badge.width + 2
|
||
|
|
height: badge.width + 2
|
||
|
|
radius: badge.width / 2
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
StatusRoundIcon {
|
||
|
|
id: badge
|
||
|
|
width: (root.width / 2) - Style.current.padding
|
||
|
|
height: width
|
||
|
|
anchors.bottom: parent.bottom
|
||
|
|
anchors.right: parent.right
|
||
|
|
asset.name: root.badgeIcon
|
||
|
|
asset.color: "transparent"
|
||
|
|
asset.width: width
|
||
|
|
asset.height: height
|
||
|
|
asset.bgWidth: width
|
||
|
|
asset.bgHeight: height
|
||
|
|
}
|
||
|
|
}
|