110 lines
3.5 KiB
QML
110 lines
3.5 KiB
QML
|
import QtQuick 2.15
|
||
|
|
import QtQuick.Layouts 1.15
|
||
|
|
import QtGraphicalEffects 1.15
|
||
|
|
|
||
|
|
import StatusQ.Core.Theme 0.1
|
||
|
|
import StatusQ.Core 0.1
|
||
|
|
import StatusQ.Controls 0.1
|
||
|
|
import StatusQ.Components 0.1
|
||
|
|
|
||
|
|
import shared.controls 1.0
|
||
|
|
import utils 1.0
|
||
|
|
|
||
|
|
ColumnLayout {
|
||
|
|
id: root
|
||
|
|
|
||
|
|
property string nftName
|
||
|
|
property string nftUrl
|
||
|
|
property string tokenId
|
||
|
|
property string contractAddress
|
||
|
|
property bool strikethrough: false
|
||
|
|
|
||
|
|
spacing: Style.current.padding
|
||
|
|
|
||
|
|
StatusBaseText {
|
||
|
|
Layout.fillWidth: true
|
||
|
|
font.pixelSize: 15
|
||
|
|
color: Theme.palette.directColor5
|
||
|
|
text: qsTr("Preview")
|
||
|
|
elide: Text.ElideRight
|
||
|
|
}
|
||
|
|
|
||
|
|
Rectangle {
|
||
|
|
radius: 8
|
||
|
|
Layout.fillWidth: true
|
||
|
|
Layout.preferredHeight: nftPreviewColumn.height + Style.current.bigPadding
|
||
|
|
color: nftPreviewSensor.hovered ? Theme.palette.baseColor2 : "transparent"
|
||
|
|
border.width: 1
|
||
|
|
border.color: Style.current.separator
|
||
|
|
|
||
|
|
HoverHandler {
|
||
|
|
id: nftPreviewSensor
|
||
|
|
target: parent
|
||
|
|
}
|
||
|
|
|
||
|
|
Column {
|
||
|
|
// NOTE Using Column instead of Layout to handle image fill mode properly
|
||
|
|
id: nftPreviewColumn
|
||
|
|
spacing: Style.current.padding
|
||
|
|
anchors {
|
||
|
|
left: parent.left
|
||
|
|
top: parent.top
|
||
|
|
right: parent.right
|
||
|
|
margins: Style.current.bigPadding / 2
|
||
|
|
}
|
||
|
|
height: childrenRect.height
|
||
|
|
|
||
|
|
StatusRoundedMedia {
|
||
|
|
id: nftPreviewImage
|
||
|
|
width: parent.width
|
||
|
|
height: width
|
||
|
|
mediaUrl: root.nftUrl
|
||
|
|
mediaType: "image"
|
||
|
|
radius: 8
|
||
|
|
}
|
||
|
|
|
||
|
|
RowLayout {
|
||
|
|
width: parent.width
|
||
|
|
spacing: Style.current.smallPadding
|
||
|
|
ColumnLayout {
|
||
|
|
Layout.fillWidth: true
|
||
|
|
Layout.rightMargin: button.visible ? 0 : button.width + parent.spacing
|
||
|
|
Layout.topMargin: Style.current.smallPadding
|
||
|
|
Layout.alignment: Qt.AlignLeft
|
||
|
|
spacing: 4
|
||
|
|
StatusBaseText {
|
||
|
|
Layout.fillWidth: true
|
||
|
|
font.pixelSize: 15
|
||
|
|
font.strikeout: root.strikethrough
|
||
|
|
text: root.nftName
|
||
|
|
visible: !!text
|
||
|
|
elide: Text.ElideRight
|
||
|
|
}
|
||
|
|
|
||
|
|
StatusBaseText {
|
||
|
|
Layout.fillWidth: true
|
||
|
|
font.pixelSize: 15
|
||
|
|
color: Theme.palette.directColor5
|
||
|
|
text: root.tokenId
|
||
|
|
visible: !!text
|
||
|
|
elide: Text.ElideRight
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
StatusRoundButton {
|
||
|
|
id: button
|
||
|
|
implicitWidth: 32
|
||
|
|
implicitHeight: 32
|
||
|
|
Layout.alignment: Qt.AlignRight | Qt.AlignTop
|
||
|
|
icon.color: hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1
|
||
|
|
icon.name: "external"
|
||
|
|
type: StatusRoundButton.Type.Quinary
|
||
|
|
radius: 8
|
||
|
|
visible: nftPreviewSensor.hovered && !!root.tokenId && !!root.contractAddress
|
||
|
|
onClicked: Global.openLink("https://etherscan.io/nft/%1/%2".arg(root.contractAddress).arg(root.tokenId))
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|