refactor: split CollectiblesTab to CollectiblesContainer and Header

ui/app/AppLayouts/Profile/Sections/AdvancedContainer.qml

@@ -31,6 +31,10 @@ Item {
         anchors.topMargin: 20
         anchors.left: parent.left
         anchors.leftMargin: 24
+        Component.onCompleted: {
+            walletBtn.enabled = true
+        }
+
         StyledText {
             //% "Wallet Tab"
             text: qsTrId("wallet-tab")

ui/app/AppLayouts/Wallet/CollectiblesTab.qml

@@ -2,6 +2,7 @@ import QtQuick 2.13
 import QtGraphicalEffects 1.13
 import "../../../imports"
 import "../../../shared"
+import "./components/collectiblesComponents"
 
 Item {
     property bool isLoading: true
@@ -30,96 +31,10 @@ Item {
     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')
-                }
-            }
+        CollectiblesContainer {
+            collectibleName: "CryptoKitties"
+            collectibleIconSource: "../../img/collectibles/CryptoKitties.png"
+            isLoading: root.isLoading
         }
     }
 

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

@@ -0,0 +1,24 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+import "../../../../../imports"
+import "../../../../../shared"
+
+Item {
+    property url collectibleIconSource: "../../../../img/collectibles/CryptoKitties.png"
+    property string collectibleName: "CryptoKitties"
+    property bool isLoading: true
+
+    id: root
+
+    CollectiblesHeader {
+        collectibleName: root.collectibleName
+        collectibleIconSource: root.collectibleIconSource
+        isLoading: root.isLoading
+    }
+}
+
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/

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

@@ -0,0 +1,99 @@
+import QtQuick 2.13
+import QtGraphicalEffects 1.13
+import "../../../../../imports"
+import "../../../../../shared"
+
+Rectangle {
+    property url collectibleIconSource: "../../../../img/collectibles/CryptoKitties.png"
+    property string collectibleName: "CryptoKitties"
+    property bool isLoading: true
+    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: collectibleHeader.collectibleIconSource
+        width: 40
+        height: 40
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.padding
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    StyledText {
+        text: collectibleHeader.collectibleName
+        anchors.left: collectibleIconImage.right
+        anchors.leftMargin: Style.current.padding
+        anchors.verticalCenter: parent.verticalCenter
+    }
+
+    Loader {
+        active: true
+        sourceComponent: collectibleHeader.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: !collectibleHeader.isLoading
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
+        onEntered: {
+            collectibleHeader.hovered = true
+        }
+        onExited: {
+            collectibleHeader.hovered = false
+        }
+        onClicked: {
+            console.log('Open collectibles')
+        }
+    }
+}

ui/nim-status-client.pro

@@ -30,6 +30,7 @@ SOURCES = *.qml \
           app/AppLayouts/Profile/Sections/Contacts/*.qml \
           app/AppLayouts/Wallet/*.qml \
           app/AppLayouts/Wallet/components/*.qml \
+          app/AppLayouts/Wallet/components/collectiblesComponents/*.qml \
           app/AppLayouts/Wallet/data/*.qml \
 }
 
@@ -151,6 +152,8 @@ DISTFILES += \
     app/AppLayouts/Wallet/ReceiveModal.qml \
     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/CollectiblesHeader.qml \
     fonts/InterStatus/InterStatus-Black.otf \
     fonts/InterStatus/InterStatus-BlackItalic.otf \
     fonts/InterStatus/InterStatus-Bold.otf \