status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-01-13 15:55:18 +00:00
Code Issues Projects Releases Wiki Activity

add loading and error image boxes

Browse Source
This commit is contained in:
Jonathan Rainville 2020-07-23 12:23:20 -04:00 committed by Iuri Matias
parent 42c09c9f3a
commit 327552c33b
3 changed files with 40 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml
View File

@ -69,7 +69,7 @@ ScrollView {
}
onSendingMessage: {
scrollToBottom(true)
chatLogView.scrollToBottom(true)
}
onMessagePushed: {

2
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml
View File

@ -30,7 +30,7 @@ Rectangle {
imageChatBox.height = 0
imageChatBox.visible = false
} else if (imageMessage.status == Image.Ready) {
messageItem.scrollToBottom(false, messageItem)
messageItem.scrollToBottom(true, messageItem)
}
}
}

57
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageMessage.qml
View File

@ -11,7 +11,7 @@ Rectangle {
height: {
let h = chatVerticalPadding
for (let i = 0; i < imageRepeater.count; i++) {
h += imageRepeater.itemAt(i).height || imageRepeater.itemAt(i).minHeight
h += imageRepeater.itemAt(i).height
}
return h + chatVerticalPadding * imageRepeater.count
}
@ -30,26 +30,45 @@ Rectangle {
return imageUrls.split(" ")
}
Image {
// This minimum height is for the initial load of the chat to work correctly
// Without this, the chat doesn't understand that the image wil lhave a height and doesn't scroll to the bottom
property int minHeight: 400
id: imageMessage
anchors.horizontalCenter: parent.horizontalCenter
Item {
id: imageContainer
width: loadingImage.visible ? loadingImage.width : imageMessage.width
height: loadingImage.visible ? loadingImage.height : imageMessage.paintedHeight
anchors.top: (index == 0) ? parent.top: parent.children[index-1].bottom
anchors.topMargin: imageChatBox.chatVerticalPadding
sourceSize.width: imageChatBox.imageWidth
source: modelData
onStatusChanged: {
if (imageMessage.status === Image.Error) {
imageMessage.height = 0
imageMessage.minHeight = 0
imageMessage.source = ""
imageMessage.visible = false
imageChatBox.height = 0
imageChatBox.visible = false
} else if (imageMessage.status == Image.Ready) {
messageItem.scrollToBottom(false, messageItem)
Rectangle {
id: loadingImage
property bool hasError: false
width: hasError ? 200 : 400
height: hasError ? 75 : 400
border.width: 1
border.color: Style.current.border
radius: Style.current.radius
StyledText {
text: loadingImage.hasError ? qsTr("Error loading the image") : qsTr("Loading image...")
color: loadingImage.hasError ? Style.current.red : Style.current.textColor
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
}
Image {
id: imageMessage
sourceSize.width: imageChatBox.imageWidth
source: modelData
onStatusChanged: {
if (imageMessage.status === Image.Error) {
loadingImage.hasError = true
imageMessage.height = 0
imageMessage.source = ""
imageMessage.visible = false
} else if (imageMessage.status === Image.Ready) {
loadingImage.visible = false
scrollToBottom(true, messageItem)
}
}
}
}