Castopod
/
kasts
mirror of https://github.com/KDE/kasts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add progress loader symbols to loading images and refreshing feeds

This commit is contained in:
Bart De Vries 2021-04-29 22:46:07 +02:00
parent b2568e390b
commit 3439d1c34b
2 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/qml/FeedListDelegate.qml
View File

@ -59,6 +59,7 @@ Controls.ItemDelegate {
anchors.fill: parent anchors.fill: parent
imageSource: feed.cachedImage imageSource: feed.cachedImage
imageTitle: feed.name imageTitle: feed.name
isLoading: feed.refreshing
} }
Rectangle { Rectangle {
@ -69,7 +70,6 @@ Controls.ItemDelegate {
width: actionsButton.width width: actionsButton.width
height: actionsButton.height height: actionsButton.height
color: Kirigami.Theme.highlightColor color: Kirigami.Theme.highlightColor
opacity: 0.8
radius: Kirigami.Units.smallSpacing - 2 * borderWidth radius: Kirigami.Units.smallSpacing - 2 * borderWidth
} }

30
src/qml/ImageWithFallback.qml
View File

@ -20,12 +20,14 @@ Item {
property int absoluteRadius: 0 property int absoluteRadius: 0
property real fractionalRadius: 0.0 property real fractionalRadius: 0.0
property string imageTitle: "" property string imageTitle: ""
property bool isLoading: false
Loader { Loader {
//active: !isLoading
id: imageLoader id: imageLoader
anchors.fill: parent anchors.fill: parent
asynchronous: true asynchronous: true
sourceComponent: imageSource === "no-image" ? fallbackImg : (imageSource === "" ? fallbackImg : realImg ) sourceComponent: imageSource === "no-image" ? fallbackImg : (imageSource === "" ? loaderSymbol : realImg )
opacity: root.imageOpacity opacity: root.imageOpacity
layer.enabled: (root.absoluteRadius > 0 || root.fractionalRadius > 0) layer.enabled: (root.absoluteRadius > 0 || root.fractionalRadius > 0)
layer.effect: OpacityMask { layer.effect: OpacityMask {
@ -84,7 +86,7 @@ Item {
anchors.right: parent.right anchors.right: parent.right
padding: 10 padding: 10
text: root.imageTitle text: root.imageTitle
level: 2 level: 3
color: "white" color: "white"
wrapMode: Text.Wrap wrapMode: Text.Wrap
elide: Text.ElideRight elide: Text.ElideRight
@ -99,4 +101,28 @@ Item {
} }
} }
} }
Component {
id: loaderSymbol
Item {
anchors.fill: parent
Rectangle {
color: "white"
opacity: 0.5
anchors.fill: parent
}
Controls.BusyIndicator {
anchors.centerIn: parent
width: parent.width / 2
height: parent.height / 2
}
}
}
Loader {
active: isLoading
sourceComponent: loaderSymbol
anchors.fill: parent
//anchors.centerIn: parent
}
} }