Add scrollbar to chat messages

This commit is contained in:
Richard Ramos 2020-05-28 18:22:51 -04:00 committed by Iuri Matias
parent 8d2b955bcd
commit f67fb34e69
1 changed files with 34 additions and 23 deletions

View File

@ -1,39 +1,50 @@
import QtQuick 2.3 import QtQuick 2.14
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Controls 2.12 as QQC2 import QtQuick.Controls 2.14 as QQC2
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import Qt.labs.platform 1.1 import Qt.labs.platform 1.1
import "../../../../shared" import "../../../../shared"
import "../../../../imports" import "../../../../imports"
import "./samples/" import "./samples/"
ListView { ScrollView {
property var messageList: MessagesData {} property var messageList: MessagesData {}
spacing: 4
id: chatLogView anchors.fill: parent
model: messageList
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
delegate: Message {
userName: model.userName
message: model.message
identicon: model.identicon
isCurrentUser: model.isCurrentUser
repeatMessageInfo: model.repeatMessageInfo
timestamp: model.timestamp
}
highlightFollowsCurrentItem: true
onCountChanged: { ScrollBar.vertical.policy: chatLogView.contentHeight > chatLogView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
if (!this.atYEnd) { ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
// User has scrolled up, we don't want to scroll back
return ListView {
anchors.fill: parent
spacing: 4
id: chatLogView
model: messageList
Layout.fillWidth: true
Layout.fillHeight: true
delegate: Message {
userName: model.userName
message: model.message
identicon: model.identicon
isCurrentUser: model.isCurrentUser
repeatMessageInfo: model.repeatMessageInfo
timestamp: model.timestamp
} }
highlightFollowsCurrentItem: true
// positionViewAtEnd doesn't work well. Instead, we use highlightFollowsCurrentItem onCountChanged: {
// and set the current Item/Index to the latest item if (!this.atYEnd) {
while (this.currentIndex < this.count - 1) { // User has scrolled up, we don't want to scroll back
this.incrementCurrentIndex() return
}
// positionViewAtEnd doesn't work well. Instead, we use highlightFollowsCurrentItem
// and set the current Item/Index to the latest item
while (this.currentIndex < this.count - 1) {
this.incrementCurrentIndex()
}
} }
} }
} }