feat: add basic collectibles header

This commit is contained in:
Jonathan Rainville 2020-08-18 14:46:11 -04:00 committed by Iuri Matias
parent 08ddc55db4
commit 9ffd58e5b0
5 changed files with 130 additions and 40 deletions

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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;