status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
ui/app/AppLayouts/Wallet/CollectiblesTab.qml
View File

@ -1,33 +1,132 @@
import QtQuick 2.13
import QtGraphicalEffects 1.13
import "../../../imports"
import "../../../shared"
Item {
StyledText {
//% "No collectibles in this account"
text: qsTrId("no-collectibles-in-this-account")
visible: walletModel.collectibles.rowCount() === 0
}
property bool isLoading: true
id: root
Loader {
id: loadingImg
active: false
sourceComponent: loadingImageComponent
anchors.right: parent.right
anchors.rightMargin: Style.current.padding
anchors.top: parent.top
anchors.topMargin: Style.currentPadding
active: true
sourceComponent: true || root.isLoading || walletModel.collectibles.rowCount() > 0 ? collectiblesListComponent
: noCollectiblesComponent
width: parent.width
}
Component {
id: loadingImageComponent
LoadingImage {}
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 {}
}
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 {
target: walletModel
onLoadingCollectibles: {
loadingImg.active = isLoading
root.isLoading= isLoading
}
}
@ -83,15 +182,15 @@ Item {
}
}
ListView {
id: assetListView
spacing: Style.current.smallPadding
anchors.topMargin: Style.current.bigPadding
anchors.fill: parent
// model: exampleModel
model: walletModel.collectibles
delegate: collectiblesViewDelegate
}
// ListView {
// id: assetListView
// spacing: Style.current.smallPadding
// anchors.topMargin: Style.current.bigPadding
// anchors.fill: parent
//// model: exampleModel
// model: walletModel.collectibles
// delegate: collectiblesViewDelegate
// }
}
/*##^##

BIN
ui/app/img/collectibles/CryptoKitties.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

11
ui/app/img/loading.svg
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">
<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"/>
<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 width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<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"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 749 B

After

Width:  |  Height:  |  Size: 887 B

3
ui/onboarding/Login.qml
View File

@ -186,8 +186,7 @@ Item {
anchors.left: txtPassword.right
anchors.leftMargin: Style.current.padding
anchors.verticalCenter: txtPassword.verticalCenter
// TODO replace by a real loading image
source: "../app/img/settings.svg"
source: "../app/img/loading.svg"
width: 30
height: 30
fillMode: Image.Stretch

9
ui/shared/LoadingImage.qml
View File

@ -3,10 +3,9 @@ import "."
SVGImage {
id: loadingImg
// TODO replace by a real loading image
source: "../app/img/settings.svg"
width: 30
height: 30
source: "../app/img/loading.svg"
width: 17
height: 17
fillMode: Image.Stretch
RotationAnimator {
target: loadingImg;
@ -16,4 +15,4 @@ SVGImage {
running: true
loops: Animation.Infinite
}
}
}