status-desktop/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesHeader.qml

101 lines
2.8 KiB
QML

import QtQuick 2.13
import QtGraphicalEffects 1.13
import "../../../../../imports"
import "../../../../../shared"
Rectangle {
property url collectibleIconSource: "../../../../img/collectibles/CryptoKitties.png"
property string collectibleName: "CryptoKitties"
property bool isLoading: true
property bool hovered: false
property var toggleCollectible: function () {}
property int collectiblesQty: 6
id: collectibleHeader
height: 64
width: parent.width
color: hovered ? Style.current.backgroundHover : Style.current.transparent
border.width: 0
radius: Style.current.radius
Image {
id: collectibleIconImage
source: collectibleHeader.collectibleIconSource
width: 40
height: 40
anchors.left: parent.left
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
}
StyledText {
text: collectibleHeader.collectibleName
anchors.left: collectibleIconImage.right
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
}
Loader {
active: true
sourceComponent: collectibleHeader.isLoading ? loadingComponent : handleComponent
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
anchors.verticalCenter: parent.verticalCenter
}
Component {
id: loadingComponent
LoadingImage {}
}
Component {
id: handleComponent
Item {
id: element1
width: childrenRect.width
height: numberCollectibleText.height
StyledText {
id: numberCollectibleText
color: Style.current.secondaryText
text: !!error ? "-" : collectibleHeader.collectiblesQty
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
}
SVGImage {
id: caretImg
anchors.verticalCenter: parent.verticalCenter
source: "../../../../img/caret.svg"
width: 11
anchors.left: numberCollectibleText.right
anchors.leftMargin: Style.current.padding
fillMode: Image.PreserveAspectFit
}
ColorOverlay {
anchors.fill: caretImg
source: caretImg
color: Style.current.black
}
}
}
MouseArea {
enabled: !collectibleHeader.isLoading
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onEntered: {
collectibleHeader.hovered = true
}
onExited: {
collectibleHeader.hovered = false
}
onClicked: {
collectibleHeader.toggleCollectible()
}
}
}