From 39587a77244c15e2ae0aa16a951c6d06d10c2a2a Mon Sep 17 00:00:00 2001 From: "Sebastian J. Wolf" 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 {