feat: add a button to scroll back to the end of the chat list

This commit is contained in:
Jonathan Rainville 2020-09-23 12:13:39 -04:00 committed by Iuri Matias
parent 4060b40ccf
commit c36f1f82cd
2 changed files with 24 additions and 17 deletions

View File

@ -37,18 +37,22 @@ ScrollView {
Rectangle { Rectangle {
id: newMessagesBox id: newMessagesBox
visible: state !== "hidden"
color: Style.current.secondaryBackground color: Style.current.secondaryBackground
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.current.padding anchors.rightMargin: Style.current.padding
height: newMessagesText.height + clickHereText.height + 2 * Style.current.smallPadding height: childrenRect.height + 2 * Style.current.smallPadding
width: 200 width: 200
radius: Style.current.radius radius: Style.current.radius
state: "hidden"
StyledText { StyledText {
id: newMessagesText id: newMessagesText
text: newMessagesBox.state === "new-message" ?
//% "New message(s) received" //% "New message(s) received"
text: qsTrId("new-message-s--received") qsTrId("new-message-s--received") :
qsTr("Go back to bottom")
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
anchors.left: parent.left anchors.left: parent.left
@ -61,6 +65,8 @@ ScrollView {
} }
StyledText { StyledText {
id: clickHereText id: clickHereText
visible: newMessagesBox.state === "new-message"
height: visible ? implicitHeight : 0
//% "Click here to scroll back down" //% "Click here to scroll back down"
text: qsTrId("click-here-to-scroll-back-down") text: qsTrId("click-here-to-scroll-back-down")
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@ -74,20 +80,21 @@ ScrollView {
font.pixelSize: 12 font.pixelSize: 12
color: Style.current.darkGrey color: Style.current.darkGrey
} }
}
MouseArea { MouseArea {
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
anchors.fill: parent anchors.fill: newMessagesBox
onClicked: { onClicked: {
newMessagesBox.visible = false newMessagesBox.state = "hidden"
chatLogView.scrollToBottom(true) chatLogView.scrollToBottom(true)
} }
} }
}
onAtYEndChanged: { onAtYEndChanged: {
if (chatLogView.atYEnd) { if (chatLogView.atYEnd) {
newMessagesBox.visible = false newMessagesBox.state = "hidden"
} else {
newMessagesBox.state = "scrolled-up"
} }
} }
@ -130,7 +137,7 @@ ScrollView {
onNewMessagePushed: { onNewMessagePushed: {
if (!chatLogView.scrollToBottom()) { if (!chatLogView.scrollToBottom()) {
newMessagesBox.visible = true newMessagesBox.state = "new-message"
} }
} }