feat: add CollectiblesModal for the collectibles content
This commit is contained in:
parent
13201e5085
commit
07081d412c
|
@ -28,6 +28,11 @@ Item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
CollectiblesModal {
|
||||||
|
id: collectiblesModalComponent
|
||||||
|
}
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: collectiblesListComponent
|
id: collectiblesListComponent
|
||||||
|
|
||||||
|
@ -35,6 +40,11 @@ Item {
|
||||||
collectibleName: "CryptoKitties"
|
collectibleName: "CryptoKitties"
|
||||||
collectibleIconSource: "../../img/collectibles/CryptoKitties.png"
|
collectibleIconSource: "../../img/collectibles/CryptoKitties.png"
|
||||||
isLoading: root.isLoading
|
isLoading: root.isLoading
|
||||||
|
collectiblesModal: collectiblesModalComponent
|
||||||
|
buttonText: qsTr("View in Cryptokitties")
|
||||||
|
getLink: function (id) {
|
||||||
|
return `https://www.cryptokitties.co/kitty/${id}`
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -8,6 +8,9 @@ Item {
|
||||||
property string collectibleName: "CryptoKitties"
|
property string collectibleName: "CryptoKitties"
|
||||||
property bool isLoading: true
|
property bool isLoading: true
|
||||||
property bool collectiblesOpened: false
|
property bool collectiblesOpened: false
|
||||||
|
property var collectiblesModal
|
||||||
|
property string buttonText: "View in Cryptokitties"
|
||||||
|
property var getLink: function () {}
|
||||||
|
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
|
@ -32,7 +35,11 @@ Item {
|
||||||
Component {
|
Component {
|
||||||
id: contentComponent
|
id: contentComponent
|
||||||
|
|
||||||
CollectiblesContent {}
|
CollectiblesContent {
|
||||||
|
collectiblesModal: root.collectiblesModal
|
||||||
|
buttonText: root.buttonText
|
||||||
|
getLink: root.getLink
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -8,19 +8,25 @@ ScrollView {
|
||||||
property var collectibles: [{
|
property var collectibles: [{
|
||||||
name: "Kitty cat1",
|
name: "Kitty cat1",
|
||||||
image: "../../../../img/collectibles/placeholders/kitty.png",
|
image: "../../../../img/collectibles/placeholders/kitty.png",
|
||||||
collectibleId: "1337"
|
collectibleId: "1337",
|
||||||
|
description: "Avast ye! I'm the dread pirate Furbeard, and I'll most likely sleep"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Kitty cat2",
|
name: "Kitty cat2",
|
||||||
image: "../../../../img/collectibles/placeholders/kitty.png",
|
image: "../../../../img/collectibles/placeholders/kitty.png",
|
||||||
collectibleId: "1338"
|
collectibleId: "1338",
|
||||||
|
description: "Avast ye! I'm the dread pirate Furbeard, and I'll most likely sleep"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Kitty cat3",
|
name: "Kitty cat3",
|
||||||
image: "../../../../img/collectibles/placeholders/kitty.png",
|
image: "../../../../img/collectibles/placeholders/kitty.png",
|
||||||
collectibleId: "1339"
|
collectibleId: "1339",
|
||||||
|
description: "Avast ye! I'm the dread pirate Furbeard, and I'll most likely sleep"
|
||||||
}]
|
}]
|
||||||
readonly property int imageSize: 164
|
readonly property int imageSize: 164
|
||||||
|
property var collectiblesModal
|
||||||
|
property string buttonText: "View in Cryptokitties"
|
||||||
|
property var getLink: function () {}
|
||||||
|
|
||||||
id: root
|
id: root
|
||||||
height: contentRow.height
|
height: contentRow.height
|
||||||
|
@ -52,6 +58,21 @@ ScrollView {
|
||||||
source: modelData.image
|
source: modelData.image
|
||||||
fillMode: Image.PreserveAspectCrop
|
fillMode: Image.PreserveAspectCrop
|
||||||
}
|
}
|
||||||
|
|
||||||
|
MouseArea {
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
anchors.fill: parent
|
||||||
|
onClicked: {
|
||||||
|
collectiblesModal.openModal({
|
||||||
|
name: modelData.name,
|
||||||
|
id: modelData.collectibleId,
|
||||||
|
description: modelData.description,
|
||||||
|
buttonText: root.buttonText,
|
||||||
|
link: root.getLink(modelData.collectibleId),
|
||||||
|
image: modelData.image
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,44 @@
|
||||||
|
import QtQuick 2.13
|
||||||
|
import QtGraphicalEffects 1.13
|
||||||
|
import "../../../../../imports"
|
||||||
|
import "../../../../../shared"
|
||||||
|
|
||||||
|
ModalPopup {
|
||||||
|
property string collectibleName: "Furbeard"
|
||||||
|
property string collectibleId: "1423"
|
||||||
|
property url collectibleImage: "../../../../img/collectibles/placeholders/kitty.png"
|
||||||
|
property string collectibleDescription: "Avast ye! I'm the dread pirate Furbeard, and I'll most likely sleep"
|
||||||
|
property string buttonText: "View in Cryptokitties"
|
||||||
|
property string buttonLink: "https://www.cryptokitties.co/"
|
||||||
|
property var openModal: function (options) {
|
||||||
|
popup.collectibleName = options.name
|
||||||
|
popup.collectibleId = options.id
|
||||||
|
popup.collectibleDescription = options.description
|
||||||
|
popup.collectibleImage = options.image
|
||||||
|
popup.buttonText = options.buttonText || qsTr("View")
|
||||||
|
popup.buttonLink = options.link
|
||||||
|
popup.open()
|
||||||
|
}
|
||||||
|
|
||||||
|
id: popup
|
||||||
|
title: collectibleName
|
||||||
|
|
||||||
|
CollectiblesModalContent {
|
||||||
|
collectibleName: popup.collectibleName
|
||||||
|
collectibleId: popup.collectibleId
|
||||||
|
collectibleImage: popup.collectibleImage
|
||||||
|
collectibleDescription: popup.collectibleDescription
|
||||||
|
}
|
||||||
|
|
||||||
|
footer: StyledButton {
|
||||||
|
visible: !!popup.buttonLink
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: Style.current.padding
|
||||||
|
label: popup.buttonText
|
||||||
|
anchors.top: parent.top
|
||||||
|
onClicked: {
|
||||||
|
console.log('Go to', popup.buttonLink)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -0,0 +1,49 @@
|
||||||
|
import QtQuick 2.13
|
||||||
|
import QtGraphicalEffects 1.13
|
||||||
|
import "../../../../../imports"
|
||||||
|
import "../../../../../shared"
|
||||||
|
|
||||||
|
Item {
|
||||||
|
property string collectibleName: "Furbeard"
|
||||||
|
property string collectibleId: "1423"
|
||||||
|
property url collectibleImage: "../../../../img/collectibles/placeholders/kitty.png"
|
||||||
|
property string collectibleDescription: "Avast ye! I'm the dread pirate Furbeard, and I'll most likely sleep"
|
||||||
|
|
||||||
|
id: root
|
||||||
|
width: parent.width
|
||||||
|
|
||||||
|
Image {
|
||||||
|
id: collectibleImage
|
||||||
|
width: 248
|
||||||
|
height: 248
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
source: root.collectibleImage
|
||||||
|
fillMode: Image.PreserveAspectCrop
|
||||||
|
}
|
||||||
|
|
||||||
|
TextWithLabel {
|
||||||
|
id: idText
|
||||||
|
label: qsTr("ID")
|
||||||
|
text: root.collectibleId
|
||||||
|
anchors.top: collectibleImage.bottom
|
||||||
|
anchors.topMargin:0
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
TextWithLabel {
|
||||||
|
visible: !!root.collectibleDescription
|
||||||
|
id: descriptionText
|
||||||
|
label: qsTr("Description")
|
||||||
|
text: root.collectibleDescription
|
||||||
|
anchors.top: idText.bottom
|
||||||
|
anchors.topMargin: 0
|
||||||
|
wrap: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*##^##
|
||||||
|
Designer {
|
||||||
|
D{i:0;autoSize:true;formeditorColor:"#ffffff";height:480;width:640}
|
||||||
|
}
|
||||||
|
##^##*/
|
|
@ -155,6 +155,8 @@ DISTFILES += \
|
||||||
app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContainer.qml \
|
app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContainer.qml \
|
||||||
app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml \
|
app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml \
|
||||||
app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesHeader.qml \
|
app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesHeader.qml \
|
||||||
|
app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModal.qml \
|
||||||
|
app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModalContent.qml \
|
||||||
fonts/InterStatus/InterStatus-Black.otf \
|
fonts/InterStatus/InterStatus-Black.otf \
|
||||||
fonts/InterStatus/InterStatus-BlackItalic.otf \
|
fonts/InterStatus/InterStatus-BlackItalic.otf \
|
||||||
fonts/InterStatus/InterStatus-Bold.otf \
|
fonts/InterStatus/InterStatus-Bold.otf \
|
||||||
|
|
|
@ -9,6 +9,7 @@ Item {
|
||||||
property string fontFamily: Style.current.fontRegular.name
|
property string fontFamily: Style.current.fontRegular.name
|
||||||
property string textToCopy: ""
|
property string textToCopy: ""
|
||||||
property alias value: textItem
|
property alias value: textItem
|
||||||
|
property bool wrap: false
|
||||||
|
|
||||||
id: infoText
|
id: infoText
|
||||||
height: this.childrenRect.height
|
height: this.childrenRect.height
|
||||||
|
@ -25,20 +26,32 @@ Item {
|
||||||
StyledTextEdit {
|
StyledTextEdit {
|
||||||
id: textItem
|
id: textItem
|
||||||
text: infoText.text
|
text: infoText.text
|
||||||
|
selectByMouse: true
|
||||||
font.family: fontFamily
|
font.family: fontFamily
|
||||||
readOnly: true
|
readOnly: true
|
||||||
anchors.top: inputLabel.bottom
|
anchors.top: inputLabel.bottom
|
||||||
anchors.topMargin: 7
|
anchors.topMargin: 7
|
||||||
font.pixelSize: 15
|
font.pixelSize: 15
|
||||||
|
wrapMode: infoText.wrap ? Text.WordWrap : Text.NoWrap
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.right: infoText.wrap ? parent.right : undefined
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
active: !!infoText.textToCopy
|
||||||
|
sourceComponent: copyComponent
|
||||||
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: copyComponent
|
||||||
CopyToClipBoardButton {
|
CopyToClipBoardButton {
|
||||||
visible: !!infoText.textToCopy
|
|
||||||
anchors.verticalCenter: textItem.verticalCenter
|
anchors.verticalCenter: textItem.verticalCenter
|
||||||
anchors.left: textItem.right
|
anchors.left: textItem.right
|
||||||
anchors.leftMargin: Style.current.smallPadding
|
anchors.leftMargin: Style.current.smallPadding
|
||||||
textToCopy: infoText.textToCopy
|
textToCopy: infoText.textToCopy
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*##^##
|
/*##^##
|
||||||
|
|
Loading…
Reference in New Issue