Add image loading indicator.

Add AutoImage.
square-messages
Black Hat 2018-08-18 18:59:23 +08:00
parent bf456ae523
commit aa8f50a6c2
3 changed files with 40 additions and 9 deletions

View File

@ -0,0 +1,34 @@
import QtQuick 2.9
import QtQuick.Controls 2.2
Item {
property alias source: baseImage.source
property alias sourceSize: baseImage.sourceSize.width
readonly property bool loading: baseImage.status == Image.Loading
signal clicked()
id: rekt
width: loading ? 128 : baseImage.implicitWidth
height: loading ? progressBar.height : baseImage.implicitHeight
Image {
id: baseImage
}
ProgressBar {
id: progressBar
width: parent.width
visible: loading
indeterminate: true
}
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onClicked: rekt.clicked()
}
}

View File

@ -9,8 +9,8 @@ AvatarContainer {
Rectangle {
id: messageRect
width: messageImage.implicitWidth + 24
height: messageImage.implicitHeight + 24
width: messageImage.width + 24
height: messageImage.height + 24
color: sentByMe ? background : Material.accent
@ -21,17 +21,13 @@ AvatarContainer {
height: messageImage.height
anchors.centerIn: parent
Image {
AutoImage {
id: messageImage
z: -4
sourceSize.width: 128
sourceSize: 128
source: "image://mxc/" + (content.thumbnail_url ? content.thumbnail_url : content.url)
MouseArea {
anchors.fill: parent
propagateComposedEvents: true
onClicked: downloadAndOpen()
}
onClicked: downloadAndOpen()
}
}
}

View File

@ -31,5 +31,6 @@
<file>qml/form/SettingGeneralForm.qml</file>
<file>qml/component/EmojiPicker.qml</file>
<file>qml/component/EmojiButton.qml</file>
<file>qml/component/AutoImage.qml</file>
</qresource>
</RCC>