status-desktop/ui/app/AppLayouts/Wallet/panels/WalletNftPreview.qml

110 lines
3.5 KiB
QML
Raw Normal View History

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))
}
}
}
}
}