Add scrollbar to chat messages
This commit is contained in:
parent
8d2b955bcd
commit
f67fb34e69
|
@ -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()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue