diff --git a/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml b/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml index f0f54af761..0995614bb4 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/ChatMessages.qml @@ -6,6 +6,7 @@ import "../../../../shared" import "../../../../imports" import "../components" import "./samples/" +import "./MessageComponents" ScrollView { id: scrollView @@ -22,18 +23,6 @@ ScrollView { ScrollBar.vertical.policy: chatLogView.contentHeight > chatLogView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff - function scrollToBottom(force, caller) { - if (!force && !chatLogView.atYEnd) { - // User has scrolled up, we don't want to scroll back - return - } - if (caller && caller !== chatLogView.itemAtIndex(chatLogView.count - 1)) { - // If we have a caller, only accept its request if it's the last message - return - } - Qt.callLater(chatLogView.positionViewAtEnd) - } - ListView { id: chatLogView anchors.fill: parent @@ -47,6 +36,27 @@ ScrollView { id: timer } + function scrollToBottom(force, caller) { + if (!force && !chatLogView.atYEnd) { + // User has scrolled up, we don't want to scroll back + return + } + if (caller) { + if (caller !== chatLogView.itemAtIndex(chatLogView.count - 1)) { + // If we have a caller, only accept its request if it's the last message + return + } + // Add a small delay because images, even though they say they say they are loaed, they aren't shown yet + timer.setTimeout(function() { + Qt.callLater(chatLogView.positionViewAtEnd) + }, 100); + return + } + + Qt.callLater(chatLogView.positionViewAtEnd) + } + + Connections { target: chatsModel @@ -55,7 +65,7 @@ ScrollView { } onActiveChannelChanged: { - scrollToBottom(true) + chatLogView.scrollToBottom(true) } onSendingMessage: { @@ -63,13 +73,13 @@ ScrollView { } onMessagePushed: { - scrollToBottom() + chatLogView.scrollToBottom() } onAppReady: { // Add an additionnal delay, since the app can be "ready" just milliseconds before the UI updated to show the chat timer.setTimeout(function() { - scrollToBottom(true) + chatLogView.scrollToBottom(true) }, 500); } @@ -175,7 +185,7 @@ ScrollView { return -1; } appSettings: scrollView.appSettings - scrollToBottom: scrollView.scrollToBottom + scrollToBottom: chatLogView.scrollToBottom timeout: model.timeout } } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageMessage.qml index a742f3ffed..e90a443829 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageMessage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageMessage.qml @@ -11,7 +11,7 @@ Rectangle { height: { let h = chatVerticalPadding for (let i = 0; i < imageRepeater.count; i++) { - h += imageRepeater.itemAt(i).height + h += imageRepeater.itemAt(i).height || imageRepeater.itemAt(i).minHeight } return h + chatVerticalPadding * imageRepeater.count } @@ -31,6 +31,9 @@ Rectangle { } 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 anchors.top: (index == 0) ? parent.top: parent.children[index-1].bottom @@ -38,8 +41,10 @@ Rectangle { sourceSize.width: imageChatBox.imageWidth source: modelData onStatusChanged: { - if (imageMessage.status == Image.Error) { + if (imageMessage.status === Image.Error) { imageMessage.height = 0 + imageMessage.minHeight = 0 + imageMessage.source = "" imageMessage.visible = false imageChatBox.height = 0 imageChatBox.visible = false