diff --git a/ui/app/AppLayouts/Wallet/CollectiblesTab.qml b/ui/app/AppLayouts/Wallet/CollectiblesTab.qml index 5776b0b3e0..6860f6ba11 100644 --- a/ui/app/AppLayouts/Wallet/CollectiblesTab.qml +++ b/ui/app/AppLayouts/Wallet/CollectiblesTab.qml @@ -28,6 +28,11 @@ Item { } } + + CollectiblesModal { + id: collectiblesModalComponent + } + Component { id: collectiblesListComponent @@ -35,6 +40,11 @@ Item { collectibleName: "CryptoKitties" collectibleIconSource: "../../img/collectibles/CryptoKitties.png" isLoading: root.isLoading + collectiblesModal: collectiblesModalComponent + buttonText: qsTr("View in Cryptokitties") + getLink: function (id) { + return `https://www.cryptokitties.co/kitty/${id}` + } } } diff --git a/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContainer.qml b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContainer.qml index 71c24c5456..b9bb9f1155 100644 --- a/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContainer.qml +++ b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContainer.qml @@ -8,6 +8,9 @@ Item { property string collectibleName: "CryptoKitties" property bool isLoading: true property bool collectiblesOpened: false + property var collectiblesModal + property string buttonText: "View in Cryptokitties" + property var getLink: function () {} id: root @@ -32,7 +35,11 @@ Item { Component { id: contentComponent - CollectiblesContent {} + CollectiblesContent { + collectiblesModal: root.collectiblesModal + buttonText: root.buttonText + getLink: root.getLink + } } } diff --git a/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml index 738f90aa9d..2783d7bd8b 100644 --- a/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml +++ b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml @@ -8,19 +8,25 @@ ScrollView { property var collectibles: [{ name: "Kitty cat1", 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", 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", 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 + property var collectiblesModal + property string buttonText: "View in Cryptokitties" + property var getLink: function () {} id: root height: contentRow.height @@ -52,6 +58,21 @@ ScrollView { source: modelData.image 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 + }) + } + } } } } diff --git a/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModal.qml b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModal.qml new file mode 100644 index 0000000000..e2ffd14a22 --- /dev/null +++ b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModal.qml @@ -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) + } + } +} + diff --git a/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModalContent.qml b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModalContent.qml new file mode 100644 index 0000000000..026abed558 --- /dev/null +++ b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModalContent.qml @@ -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} +} +##^##*/ diff --git a/ui/nim-status-client.pro b/ui/nim-status-client.pro index 909eefe86d..773a3a7c09 100644 --- a/ui/nim-status-client.pro +++ b/ui/nim-status-client.pro @@ -155,6 +155,8 @@ DISTFILES += \ app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContainer.qml \ app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.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-BlackItalic.otf \ fonts/InterStatus/InterStatus-Bold.otf \ diff --git a/ui/shared/TextWithLabel.qml b/ui/shared/TextWithLabel.qml index fa7bfa397b..0f695eb664 100644 --- a/ui/shared/TextWithLabel.qml +++ b/ui/shared/TextWithLabel.qml @@ -9,6 +9,7 @@ Item { property string fontFamily: Style.current.fontRegular.name property string textToCopy: "" property alias value: textItem + property bool wrap: false id: infoText height: this.childrenRect.height @@ -25,20 +26,32 @@ Item { StyledTextEdit { id: textItem text: infoText.text + selectByMouse: true font.family: fontFamily readOnly: true anchors.top: inputLabel.bottom anchors.topMargin: 7 font.pixelSize: 15 + wrapMode: infoText.wrap ? Text.WordWrap : Text.NoWrap + anchors.left: parent.left + anchors.right: infoText.wrap ? parent.right : undefined } - CopyToClipBoardButton { - visible: !!infoText.textToCopy - anchors.verticalCenter: textItem.verticalCenter - anchors.left: textItem.right - anchors.leftMargin: Style.current.smallPadding - textToCopy: infoText.textToCopy + Loader { + active: !!infoText.textToCopy + sourceComponent: copyComponent } + + Component { + id: copyComponent + CopyToClipBoardButton { + anchors.verticalCenter: textItem.verticalCenter + anchors.left: textItem.right + anchors.leftMargin: Style.current.smallPadding + textToCopy: infoText.textToCopy + } + } + } /*##^##