status-desktop/ui/shared/ImageLoader.qml

149 lines
3.8 KiB
QML

import QtQuick 2.3
import QtGraphicalEffects 1.13
import "../imports"
Rectangle {
id: root
property alias source: image.source
property alias fillMode: image.fillMode
signal loaded
signal clicked
color: Style.current.backgroundHover
state: "loading"
radius: width / 2
states: [
State {
name: "loading"
when: image.status === Image.Loading
PropertyChanges {
target: loading
active: true
}
PropertyChanges {
target: reload
visible: false
}
PropertyChanges {
target: image
visible: false
}
},
State {
name: "error"
when: image.status === Image.Error
PropertyChanges {
target: loading
active: false
}
PropertyChanges {
target: reload
visible: true
}
PropertyChanges {
target: image
visible: false
}
},
State {
name: "ready"
when: image.status === Image.Ready
PropertyChanges {
target: root
color: Style.current.transparent
}
PropertyChanges {
target: loading
active: false
}
PropertyChanges {
target: reload
visible: false
}
PropertyChanges {
target: image
visible: true
height: root.height
width: root.width
}
}
]
function reload() {
// From the documentation (https://doc.qt.io/qt-5/qml-qtquick-image.html#sourceSize-prop)
// Note: Changing this property dynamically causes the image source to
// be reloaded, potentially even from the network, if it is not in the
// disk cache.
image.sourceSize.width += 1
image.sourceSize.width -= 1
}
Component {
id: loadingIndicator
LoadingImage {
width: 23
height: 23
ColorOverlay {
anchors.fill: parent
source: parent
color: Style.current.secondaryText
antialiasing: true
}
}
}
Loader {
id: loading
sourceComponent: loadingIndicator
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
active: false
}
SVGImage {
id: reload
source: "../app/img/reload.svg"
width: 15.5
height: 19.5
fillMode: Image.PreserveAspectFit
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
ColorOverlay {
anchors.fill: parent
source: parent
color: Style.current.textColor
antialiasing: true
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: {
root.reload()
}
}
}
Image {
id: image
width: 0
height: 0
sourceSize.width: root.width * 2
sourceSize.height: root.height * 2
source: root.source
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
cache: true
onStatusChanged: {
if (image.status === Image.Ready) {
loaded()
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: {
root.clicked()
}
}
}
}