feat: add basic collectibles header
This commit is contained in:
parent
08ddc55db4
commit
9ffd58e5b0
|
@ -1,33 +1,132 @@
|
||||||
import QtQuick 2.13
|
import QtQuick 2.13
|
||||||
|
import QtGraphicalEffects 1.13
|
||||||
import "../../../imports"
|
import "../../../imports"
|
||||||
import "../../../shared"
|
import "../../../shared"
|
||||||
|
|
||||||
Item {
|
Item {
|
||||||
StyledText {
|
property bool isLoading: true
|
||||||
//% "No collectibles in this account"
|
id: root
|
||||||
text: qsTrId("no-collectibles-in-this-account")
|
|
||||||
visible: walletModel.collectibles.rowCount() === 0
|
|
||||||
}
|
|
||||||
|
|
||||||
Loader {
|
Loader {
|
||||||
id: loadingImg
|
active: true
|
||||||
active: false
|
sourceComponent: true || root.isLoading || walletModel.collectibles.rowCount() > 0 ? collectiblesListComponent
|
||||||
sourceComponent: loadingImageComponent
|
: noCollectiblesComponent
|
||||||
anchors.right: parent.right
|
width: parent.width
|
||||||
anchors.rightMargin: Style.current.padding
|
|
||||||
anchors.top: parent.top
|
|
||||||
anchors.topMargin: Style.currentPadding
|
|
||||||
}
|
}
|
||||||
|
|
||||||
Component {
|
Component {
|
||||||
id: loadingImageComponent
|
id: noCollectiblesComponent
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
color: Style.current.secondaryText
|
||||||
|
text: qsTr("Collectibles will appear here")
|
||||||
|
anchors.horizontalCenter: parent.horizontalCenter
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
font.pixelSize: 15
|
||||||
|
visible: !root.isLoading && walletModel.collectibles.rowCount() === 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: collectiblesListComponent
|
||||||
|
|
||||||
|
Rectangle {
|
||||||
|
property bool hovered: false
|
||||||
|
|
||||||
|
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: "../../img/collectibles/CryptoKitties.png"
|
||||||
|
width: 40
|
||||||
|
height: 40
|
||||||
|
anchors.left: parent.left
|
||||||
|
anchors.leftMargin: Style.current.padding
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: "CryptoKitties"
|
||||||
|
anchors.left: collectibleIconImage.right
|
||||||
|
anchors.leftMargin: Style.current.padding
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
active: true
|
||||||
|
sourceComponent: root.isLoading ? loadingComponent : handleComponent
|
||||||
|
anchors.right: parent.right
|
||||||
|
anchors.rightMargin: Style.current.padding
|
||||||
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: loadingComponent
|
||||||
|
|
||||||
LoadingImage {}
|
LoadingImage {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Component {
|
||||||
|
id: handleComponent
|
||||||
|
|
||||||
|
Item {
|
||||||
|
id: element1
|
||||||
|
width: childrenRect.width
|
||||||
|
height: numberCollectibleText.height
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
id: numberCollectibleText
|
||||||
|
color: Style.current.secondaryText
|
||||||
|
// TODO change with number of current collectible
|
||||||
|
text: "6"
|
||||||
|
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: !root.isLoading
|
||||||
|
anchors.fill: parent
|
||||||
|
cursorShape: Qt.PointingHandCursor
|
||||||
|
hoverEnabled: true
|
||||||
|
onEntered: {
|
||||||
|
collectibleHeader.hovered = true
|
||||||
|
}
|
||||||
|
onExited: {
|
||||||
|
collectibleHeader.hovered = false
|
||||||
|
}
|
||||||
|
onClicked: {
|
||||||
|
console.log('Open collectibles')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
Connections {
|
Connections {
|
||||||
target: walletModel
|
target: walletModel
|
||||||
onLoadingCollectibles: {
|
onLoadingCollectibles: {
|
||||||
loadingImg.active = isLoading
|
root.isLoading= isLoading
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -83,15 +182,15 @@ Item {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ListView {
|
// ListView {
|
||||||
id: assetListView
|
// id: assetListView
|
||||||
spacing: Style.current.smallPadding
|
// spacing: Style.current.smallPadding
|
||||||
anchors.topMargin: Style.current.bigPadding
|
// anchors.topMargin: Style.current.bigPadding
|
||||||
anchors.fill: parent
|
// anchors.fill: parent
|
||||||
// model: exampleModel
|
//// model: exampleModel
|
||||||
model: walletModel.collectibles
|
// model: walletModel.collectibles
|
||||||
delegate: collectiblesViewDelegate
|
// delegate: collectiblesViewDelegate
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
/*##^##
|
/*##^##
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 2.8 KiB |
|
@ -1,10 +1,3 @@
|
||||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M11.4768 3.10902C9.13361 1.43909 5.85953 1.65524 3.7573 3.75747C1.41416 6.10061 1.41416 9.8996 3.7573 12.2427C6.10045 14.5859 9.89944 14.5859 12.2426 12.2427C14.3448 10.1405 14.561 6.86644 12.891 4.52323" stroke="url(#paint0_angular)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4026 7.61613C15.1003 6.27604 14.3668 5.06612 13.3089 4.16834C12.2508 3.27037 10.9252 2.73329 9.52966 2.6397C8.13414 2.54611 6.74648 2.90125 5.5742 3.65036C4.40214 4.39934 3.50926 5.50117 3.02621 6.78932C2.54323 8.07728 2.49501 9.48441 2.88849 10.8014C3.28202 12.1185 4.09701 13.277 5.21455 14.1023C6.3323 14.9278 7.6921 15.375 9.09086 15.375L9.09086 17.625C7.21319 17.625 5.38448 17.0249 3.87789 15.9123C2.3711 14.7995 1.26676 13.2331 0.732658 11.4455C0.198503 9.65769 0.264129 7.74689 0.919466 5.9993C1.57473 4.2519 2.78355 2.76349 4.36265 1.75441C5.94153 0.745467 7.80684 0.269103 9.68023 0.394746C11.5536 0.520391 13.3374 1.24153 14.7648 2.45282C16.1923 3.66429 17.187 5.30147 17.5974 7.12107L15.4026 7.61613Z" fill="#939BA1"/>
|
||||||
<defs>
|
|
||||||
<radialGradient id="paint0_angular" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(7.99998 8.00007) rotate(-45) scale(5.5)">
|
|
||||||
<stop stop-color="white" stop-opacity="0"/>
|
|
||||||
<stop offset="0.0718232" stop-color="white" stop-opacity="0"/>
|
|
||||||
<stop offset="1" stop-color="white"/>
|
|
||||||
</radialGradient>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
Before Width: | Height: | Size: 749 B After Width: | Height: | Size: 887 B |
|
@ -186,8 +186,7 @@ Item {
|
||||||
anchors.left: txtPassword.right
|
anchors.left: txtPassword.right
|
||||||
anchors.leftMargin: Style.current.padding
|
anchors.leftMargin: Style.current.padding
|
||||||
anchors.verticalCenter: txtPassword.verticalCenter
|
anchors.verticalCenter: txtPassword.verticalCenter
|
||||||
// TODO replace by a real loading image
|
source: "../app/img/loading.svg"
|
||||||
source: "../app/img/settings.svg"
|
|
||||||
width: 30
|
width: 30
|
||||||
height: 30
|
height: 30
|
||||||
fillMode: Image.Stretch
|
fillMode: Image.Stretch
|
||||||
|
|
|
@ -3,10 +3,9 @@ import "."
|
||||||
|
|
||||||
SVGImage {
|
SVGImage {
|
||||||
id: loadingImg
|
id: loadingImg
|
||||||
// TODO replace by a real loading image
|
source: "../app/img/loading.svg"
|
||||||
source: "../app/img/settings.svg"
|
width: 17
|
||||||
width: 30
|
height: 17
|
||||||
height: 30
|
|
||||||
fillMode: Image.Stretch
|
fillMode: Image.Stretch
|
||||||
RotationAnimator {
|
RotationAnimator {
|
||||||
target: loadingImg;
|
target: loadingImg;
|
||||||
|
|
Loading…
Reference in New Issue