feat: add CollectiblesContent

ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContainer.qml

@@ -7,13 +7,32 @@ Item {
     property url collectibleIconSource: "../../../../img/collectibles/CryptoKitties.png"
     property string collectibleName: "CryptoKitties"
     property bool isLoading: true
+    property bool collectiblesOpened: false
 
     id: root
 
     CollectiblesHeader {
+        id: collectiblesHeader
         collectibleName: root.collectibleName
         collectibleIconSource: root.collectibleIconSource
         isLoading: root.isLoading
+        toggleCollectible: function () {
+            root.collectiblesOpened = !root.collectiblesOpened
+        }
+    }
+
+    Loader {
+        active: root.collectiblesOpened
+        sourceComponent: contentComponent
+        anchors.top: collectiblesHeader.bottom
+        anchors.topMargin: Style.current.halfPadding
+        width: parent.width
+    }
+
+    Component {
+        id: contentComponent
+
+        CollectiblesContent {}
     }
 }
 

ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml

@@ -0,0 +1,58 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import QtGraphicalEffects 1.13
+import "../../../../../imports"
+import "../../../../../shared"
+
+ScrollView {
+    property var collectibles: [{
+            name: "Kitty cat1",
+            image: "../../../../img/collectibles/placeholders/kitty.png",
+            collectibleId: "1337"
+        },
+        {
+            name: "Kitty cat2",
+            image: "../../../../img/collectibles/placeholders/kitty.png",
+            collectibleId: "1338"
+        },
+        {
+            name: "Kitty cat3",
+            image: "../../../../img/collectibles/placeholders/kitty.png",
+            collectibleId: "1339"
+        }]
+    readonly property int imageSize: 164
+
+    id: root
+    height: contentRow.height
+    width: parent.width
+    ScrollBar.vertical.policy: ScrollBar.AlwaysOff
+    ScrollBar.horizontal.policy: ScrollBar.AsNeeded
+    clip: true
+
+    Row {
+        id: contentRow
+        bottomPadding: Style.current.padding
+        spacing: Style.current.padding
+
+        Repeater {
+            model: collectibles
+
+            Rectangle {
+                radius: 16
+                border.width: 1
+                border.color: Style.current.border
+                color: Style.current.background
+                width: collectibleImage.width
+                height: collectibleImage.height
+
+                Image {
+                    id: collectibleImage
+                    width: root.imageSize
+                    height: root.imageSize
+                    source: modelData.image
+                    fillMode: Image.PreserveAspectCrop
+                }
+            }
+        }
+    }
+}

ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesHeader.qml

@@ -8,6 +8,7 @@ Rectangle {
     property string collectibleName: "CryptoKitties"
     property bool isLoading: true
     property bool hovered: false
+    property var toggleCollectible: function () {}
 
     id: collectibleHeader
     height: 64
@@ -93,7 +94,7 @@ Rectangle {
             collectibleHeader.hovered = false
         }
         onClicked: {
-            console.log('Open collectibles')
+            collectibleHeader.toggleCollectible()
         }
     }
 }

ui/imports/Themes/Theme.qml

@@ -38,6 +38,7 @@ QtObject {
     property int padding: 16
     property int halfPadding: 8
     property int smallPadding: 10
+    property int halfPadding: 8
     property int radius: 8
 
     property int leftTabPrefferedSize: 340

ui/nim-status-client.pro

@@ -153,6 +153,7 @@ DISTFILES += \
     app/AppLayouts/Wallet/components/HeaderButton.qml \
     app/AppLayouts/Profile/Sections/Data/locales.js \
     app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContainer.qml \
+    app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml \
     app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesHeader.qml \
     fonts/InterStatus/InterStatus-Black.otf \
     fonts/InterStatus/InterStatus-BlackItalic.otf \