Add nice rounded corners for thumbnail

This commit is contained in:
Sebastian J. Wolf 2020-08-14 11:11:34 +02:00
parent 41ac3c4829
commit 39587a7724

View file

@ -22,7 +22,7 @@ import Sailfish.Silica 1.0
Item { Item {
id: imageTumbnail id: imageThumbnail
property variant imageData; property variant imageData;
@ -41,9 +41,9 @@ Item {
onFileUpdated: { onFileUpdated: {
if (id === imageData.id) { if (id === imageData.id) {
console.log("File updated, completed? " + fileInformation.local.is_downloading_completed); console.log("File updated, completed? " + fileInformation.local.is_downloading_completed);
imageTumbnail.imageData = fileInformation; imageThumbnail.imageData = fileInformation;
if (imageTumbnail.imageData.local.is_downloading_completed) { if (imageThumbnail.imageData.local.is_downloading_completed) {
singleImage.source = imageTumbnail.imageData.local.path; singleImage.source = imageThumbnail.imageData.local.path;
} }
} }
} }
@ -57,6 +57,27 @@ Item {
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
autoTransform: true autoTransform: true
asynchronous: 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 { Image {