From 8a7d6d3f7e8e01971a4048bf5d6a5e7e8b07096c Mon Sep 17 00:00:00 2001
From: emizzle <eric.mastro@gmail.com>
Date: Tue, 6 Oct 2020 15:16:36 +1100
Subject: [PATCH] fix: add image loader to collectibles images

---
 .../Profile/Sections/MyProfileContainer.qml   |  8 ++++---
 .../CollectiblesContent.qml                   | 22 ++++---------------
 .../CollectiblesModalContent.qml              |  5 ++---
 ui/shared/ImageLoader.qml                     |  3 ++-
 ui/shared/RoundedImage.qml                    |  1 +
 5 files changed, 14 insertions(+), 25 deletions(-)

diff --git a/ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml b/ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml
index 1ae1e14250..6b46c5e2c8 100644
--- a/ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml
+++ b/ui/app/AppLayouts/Profile/Sections/MyProfileContainer.qml
@@ -72,16 +72,17 @@ Item {
             width: 18
             height: 18
             anchors.right: parent.right
+            property bool hovered: false
 
             MouseArea {
                 cursorShape: Qt.PointingHandCursor
                 anchors.fill: parent
                 hoverEnabled: true
                 onExited: {
-                    qrCodeButton.color = Style.current.white
+                    parent.hovered = false
                 }
                 onEntered: {
-                    qrCodeButton.color = Style.current.grey
+                    parent.hovered = true
                 }
                 onClicked: {
                     showQR = !showQR
@@ -90,9 +91,10 @@ Item {
         }
 
         ColorOverlay {
+            id: qrCodeOverlay
             anchors.fill: qrCodeImage
             source: qrCodeImage
-            color: Style.current.textColor
+            color: qrCodeImage.hovered ? Style.current.buttonForegroundColor : Style.current.textColor
         }
 
         Separator {
diff --git a/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml
index 0d48bc8251..946648c98f 100644
--- a/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml
+++ b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesContent.qml
@@ -80,31 +80,17 @@ ScrollView {
                     height: collectibleImage.height
                     clip: true
 
-                    Image {
+                    RoundedImage {
                         id: collectibleImage
                         width: root.imageSize
                         height: root.imageSize
-                        z: 1
+                        border.width: 1
+                        border.color: Style.current.border
+                        radius: 16
                         source: modelData.image
-                        sourceSize.width: width
-                        sourceSize.height: height
                         fillMode: Image.PreserveAspectCrop
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.horizontalCenter: parent.horizontalCenter
-                    }
-
-                    Rectangle {
-                        radius: 16
-                        z: 2
-                        border.width: 1
-                        border.color: Style.current.border
-                        color: Style.current.transparent
-                        anchors.fill: parent
-                    }
-
-                    MouseArea {
-                        cursorShape: Qt.PointingHandCursor
-                        anchors.fill: parent
                         onClicked: {
                             collectiblesModal.openModal({
                                                        name: modelData.name,
diff --git a/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModalContent.qml b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModalContent.qml
index 834097e9c8..b4c3002075 100644
--- a/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModalContent.qml
+++ b/ui/app/AppLayouts/Wallet/components/collectiblesComponents/CollectiblesModalContent.qml
@@ -12,14 +12,13 @@ Item {
     id: root
     width: parent.width
 
-    Image {
+    RoundedImage {
         id: collectibleImage
         width: 248
         height: 248
         anchors.horizontalCenter: parent.horizontalCenter
         source: root.collectibleImage
-        sourceSize.width: width
-        sourceSize.height: height
+        radius: 16
         fillMode: Image.PreserveAspectCrop
     }
 
diff --git a/ui/shared/ImageLoader.qml b/ui/shared/ImageLoader.qml
index 283b801ad6..767909859d 100644
--- a/ui/shared/ImageLoader.qml
+++ b/ui/shared/ImageLoader.qml
@@ -4,7 +4,8 @@ import "../imports"
 
 Rectangle {
     id: root
-    property url source
+    property alias source: image.source
+    property alias fillMode: image.fillMode
     signal clicked
     color: Style.current.backgroundHover
     state: "loading"
diff --git a/ui/shared/RoundedImage.qml b/ui/shared/RoundedImage.qml
index 4831c6f8a8..4b7c77e1c8 100644
--- a/ui/shared/RoundedImage.qml
+++ b/ui/shared/RoundedImage.qml
@@ -5,6 +5,7 @@ Rectangle {
     id: root
     signal clicked
     property alias source: imgStickerPackThumb.source
+    property alias fillMode: imgStickerPackThumb.fillMode
 
     radius: width / 2