Castopod/kasts
1
0
Fork 0
mirror of https://github.com/KDE/kasts.git synced 2024-12-28 09:21:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Introduce ImageWithFallback

Browse Source
This commit is contained in:
Bart De Vries 2021-04-29 16:13:18 +02:00
parent f91dfda504
commit f0106aceef
4 changed files with 98 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/qml/GenericEntryDelegate.qml
View File

@ -21,12 +21,14 @@ Kirigami.SwipeListItem {
property var listView: ""
contentItem: RowLayout {
Loader {
property var loaderListView: listView
property var loaderListItem: listItem
sourceComponent: dragHandleComponent
active: isQueue
}
Component {
id: dragHandleComponent
Kirigami.ListItemDragHandle {
@ -35,32 +37,18 @@ Kirigami.SwipeListItem {
onMoveRequested: DataManager.moveQueueItem(oldIndex, newIndex)
}
}
Image {
ImageWithFallback {
id: img
asynchronous: true
source: entry.image === "" ? "logo.png" : "file://"+Fetcher.image(entry.image)
fillMode: Image.PreserveAspectFit
imageSource: entry.image
property int size: Kirigami.Units.gridUnit * 3
sourceSize.width: size
sourceSize.height: size
Layout.maximumHeight: size
Layout.maximumWidth: size
Layout.preferredHeight: size
Layout.preferredWidth: size
Layout.rightMargin:Kirigami.Units.smallSpacing
opacity: (entry.read) ? 0.5 : 1
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Item {
width: img.width
height: img.height
Rectangle {
anchors.centerIn: parent
width: img.adapt ? img.width : Math.min(img.width, img.height)
height: img.adapt ? img.height : width
radius: Math.min(width, height)/6
}
}
}
imageOpacity: (entry.read) ? 0.5 : 1
fractionalRadius: 1.0 / 8.0
}
ColumnLayout {
spacing: Kirigami.Units.smallSpacing
Layout.fillWidth: true

25
src/qml/GenericHeader.qml
View File

@ -22,17 +22,15 @@ Item {
implicitHeight: headerHeight
implicitWidth: parent.width
Image {
id: backgroundimage
source: image === "" ? "logo.png" : "file://"+Fetcher.image(image)
fillMode: Image.PreserveAspectCrop
ImageWithFallback {
id: backgroundImage
anchors.fill: parent
asynchronous: true
imageSource: image
}
GaussianBlur {
id: blur
anchors.fill: backgroundimage
source: backgroundimage
anchors.fill: backgroundImage
source: backgroundImage
radius: 12
samples: 16
deviation: 6
@ -42,6 +40,7 @@ Item {
source: blur
color:"#87000000" //RGBA, but first value is actually the alpha channel
}
RowLayout {
property int size: Kirigami.Units.gridUnit * 6
property int margin: Kirigami.Units.gridUnit * 1
@ -53,14 +52,14 @@ Item {
anchors.rightMargin: margin
anchors.bottomMargin: margin
Image {
id: frontimage
source: image === "" ? "logo.png" : "file://"+Fetcher.image(image)
ImageWithFallback {
id: frontImage
imageSource: image
Layout.maximumHeight: parent.size
Layout.maximumWidth: parent.size
sourceSize.width: parent.size
sourceSize.height: parent.size
asynchronous: true
Layout.minimumHeight: parent.size
Layout.minimumWidth: parent.size
absoluteRadius: Kirigami.Units.smallSpacing
}
ColumnLayout {
Layout.fillWidth: true

75
src/qml/ImageWithFallback.qml Normal file
View File

@ -0,0 +1,75 @@
/**
* SPDX-FileCopyrightText: 2021 Bart De Vries <bart@mogwai.be>
*
* SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
*/
import QtQuick 2.15
import QtQuick.Controls 2.14 as Controls
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.15
import org.kde.kirigami 2.15 as Kirigami
import org.kde.alligator 1.0
Item {
id: root
property string imageSource: ""
property real imageOpacity: 1
property int absoluteRadius: 0
property real fractionalRadius: 0.0
Loader {
id: imageLoader
anchors.fill: parent
asynchronous: true
sourceComponent: imageSource === "" ? fallbackImg : realImg
opacity: root.imageOpacity
layer.enabled: (root.absoluteRadius > 0 || root.fractionalRadius > 0)
layer.effect: OpacityMask {
maskSource: Item {
width: imageLoader.width
height: imageLoader.height
Rectangle {
anchors.centerIn: parent
width: imageLoader.adapt ? imageLoader.width : Math.min(imageLoader.width, imageLoader.height)
height: imageLoader.adapt ? imageLoader.height : width
radius: (absoluteRadius > 0) ? absoluteRadius : ( (fractionalRadius > 0) ? Math.min(width, height)*fractionalRadius : 0 )
}
}
}
}
Component {
id: realImg
Image {
anchors.fill: parent
//visible: root.imageSource !== ""
source: "file://" + Fetcher.image(root.imageSource)
//root.imageSource === "" ? "logo.png" : "file://" + Fetcher.image(root.imageSource)
fillMode: Image.PreserveAspectCrop
sourceSize.width: width
sourceSize.height: height
asynchronous: true
}
}
Component {
id: fallbackImg
Item {
//visible: imageSource === ""
anchors.fill: parent
// Add white background color in order to use coloroverlay later on
Rectangle {
anchors.fill: parent
color: "white"
}
Kirigami.Icon {
width: parent.width
height: parent.height
source: "rss"
}
}
}
}

1
src/resources.qrc
View File

@ -19,6 +19,7 @@
<file alias="DownloadSwipePage.qml">qml/DownloadSwipePage.qml</file>
<file alias="GenericHeader.qml">qml/GenericHeader.qml</file>
<file alias="GenericEntryDelegate.qml">qml/GenericEntryDelegate.qml</file>
<file alias="ImageWithFallback.qml">qml/ImageWithFallback.qml</file>
<file alias="UpdateNotification.qml">qml/UpdateNotification.qml</file>
<file alias="logo.png">../logo.png</file>
<file>qtquickcontrols2.conf</file>