From 39587a77244c15e2ae0aa16a951c6d06d10c2a2a Mon Sep 17 00:00:00 2001
From: "Sebastian J. Wolf" <sebastian@ygriega.de>
Date: Fri, 14 Aug 2020 11:11:34 +0200
Subject: [PATCH] Add nice rounded corners for thumbnail

---
 qml/components/ImageThumbnail.qml | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/qml/components/ImageThumbnail.qml b/qml/components/ImageThumbnail.qml
index 3be655c..69823ad 100644
--- a/qml/components/ImageThumbnail.qml
+++ b/qml/components/ImageThumbnail.qml
@@ -22,7 +22,7 @@ import Sailfish.Silica 1.0
 
 Item {
 
-    id: imageTumbnail
+    id: imageThumbnail
 
     property variant imageData;
 
@@ -41,9 +41,9 @@ Item {
             onFileUpdated: {
                 if (id === imageData.id) {
                     console.log("File updated, completed? " + fileInformation.local.is_downloading_completed);
-                    imageTumbnail.imageData = fileInformation;
-                    if (imageTumbnail.imageData.local.is_downloading_completed) {
-                        singleImage.source = imageTumbnail.imageData.local.path;
+                    imageThumbnail.imageData = fileInformation;
+                    if (imageThumbnail.imageData.local.is_downloading_completed) {
+                        singleImage.source = imageThumbnail.imageData.local.path;
                     }
                 }
             }
@@ -57,6 +57,27 @@ Item {
         fillMode: Image.PreserveAspectCrop
         autoTransform: true
         asynchronous: true
+        visible: false
+    }
+
+    Rectangle {
+        id: imageThumbnailMask
+        width: parent.width - Theme.paddingSmall
+        height: parent.height - Theme.paddingSmall
+        color: Theme.primaryColor
+        radius: parent.width / 7
+        anchors.centerIn: singleImage
+        visible: false
+    }
+
+    OpacityMask {
+        id: maskedThumbnail
+        source: singleImage
+        maskSource: imageThumbnailMask
+        anchors.fill: singleImage
+        visible: singleImage.status === Image.Ready ? true : false
+        opacity: singleImage.status === Image.Ready ? 1 : 0
+        Behavior on opacity { NumberAnimation {} }
     }
 
     Image {