status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: implement design for the new messages box in chat

This commit is contained in:
Jonathan Rainville 2020-09-24 11:05:17 -04:00 committed by Iuri Matias
parent 1dfd16f83d
commit 39f06d0741
1 changed files with 47 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@ import QtQuick 2.13
import QtQuick.Controls 2.13 import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13 import QtQuick.Layouts 1.13
import QtQml.Models 2.13 import QtQml.Models 2.13
import QtGraphicalEffects 1.13
import "../../../../shared" import "../../../../shared"
import "../../../../imports" import "../../../../imports"
import "../components" import "../components"
@ -9,11 +10,12 @@ import "./samples/"
import "./MessageComponents" import "./MessageComponents"
ScrollView { ScrollView {
id: scrollView id: root
property var messageList: MessagesData {} property var messageList: MessagesData {}
property bool loadingMessages: false property bool loadingMessages: false
property real scrollY: chatLogView.visibleArea.yPosition * chatLogView.contentHeight property real scrollY: chatLogView.visibleArea.yPosition * chatLogView.contentHeight
property int newMessages: 0
contentItem: chatLogView contentItem: chatLogView
Layout.fillWidth: true Layout.fillWidth: true
@ -35,68 +37,65 @@ ScrollView {
id: timer id: timer
} }
Rectangle { Button {
id: newMessagesBox id: newMessagesBox
visible: state !== "hidden" height: 32
color: Style.current.secondaryBackground width: nbMessages.width + arrowImage.width + 2 * Style.current.halfPadding + (nbMessages.visible ? 5 : 0)
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: childrenRect.height + 2 * Style.current.smallPadding background: Rectangle {
width: 200 color: Style.current.buttonDisabledForegroundColor
radius: Style.current.radius border.width: 0
state: "hidden" radius: 16
}
onClicked: {
root.newMessages = 0
newMessagesBox.visible = false
chatLogView.scrollToBottom(true)
}
StyledText { StyledText {
id: newMessagesText id: nbMessages
text: newMessagesBox.state === "new-message" ? visible: root.newMessages > 0
//% "New message(s) received" width: visible ? implicitWidth : 0
qsTrId("new-message-s--received") : text: root.newMessages
//% "Go back to bottom" anchors.verticalCenter: parent.verticalCenter
qsTrId("go-back-to-bottom")
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: Style.current.smallPadding color: Style.current.pillButtonTextColor
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding
anchors.top: parent.top
anchors.topMargin: Style.current.smallPadding
font.pixelSize: 15 font.pixelSize: 15
anchors.leftMargin: Style.current.halfPadding
} }
StyledText {
id: clickHereText SVGImage {
visible: newMessagesBox.state === "new-message" id: arrowImage
height: visible ? implicitHeight : 0 width: 24
//% "Click here to scroll back down" height: 24
text: qsTrId("click-here-to-scroll-back-down") anchors.verticalCenter: parent.verticalCenter
horizontalAlignment: Text.AlignHCenter anchors.left: nbMessages.right
wrapMode: Text.WordWrap source: "../../../img/leave_chat.svg"
anchors.left: parent.left anchors.leftMargin: nbMessages.visible ? 5 : 0
anchors.leftMargin: Style.current.smallPadding rotation: -90
anchors.right: parent.right
anchors.rightMargin: Style.current.smallPadding ColorOverlay {
anchors.top: newMessagesText.bottom anchors.fill: parent
anchors.topMargin: 0 source: parent
font.pixelSize: 12 color: Style.current.pillButtonTextColor
color: Style.current.darkGrey }
} }
}
MouseArea { MouseArea {
enabled: newMessagesBox.visible cursorShape: Qt.PointingHandCursor
cursorShape: enabled ? Qt.PointingHandCursor : undefined anchors.fill: parent
anchors.fill: newMessagesBox onPressed: mouse.accepted = false
onClicked: {
newMessagesBox.state = "hidden"
chatLogView.scrollToBottom(true)
} }
} }
onAtYEndChanged: { onAtYEndChanged: {
if (chatLogView.atYEnd) { if (chatLogView.atYEnd) {
newMessagesBox.state = "hidden" newMessagesBox.visible = false
} else { } else {
newMessagesBox.state = "scrolled-up" newMessagesBox.visible = true
} }
} }
@ -139,7 +138,7 @@ ScrollView {
onNewMessagePushed: { onNewMessagePushed: {
if (!chatLogView.scrollToBottom()) { if (!chatLogView.scrollToBottom()) {
newMessagesBox.state = "new-message" root.newMessages++
} }
} }