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: new design for the chat bubble

This commit is contained in:
Jonathan Rainville 2020-05-28 15:32:14 -04:00 committed by Iuri Matias
parent b0f1bfc4fc
commit 4fa3c34199
2 changed files with 82 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@ import "./samples/"
ListView {
property var messageList: MessagesData {}
spacing: 4
id: chatLogView
model: messageList
Layout.fillWidth: true

136
ui/app/AppLayouts/Chat/ChatColumn/Message.qml
View File

@ -6,7 +6,7 @@ import Qt.labs.platform 1.1
import "../../../../shared"
import "../../../../imports"
Rectangle {
Item {
property string userName: "Jotaro Kujo"
property string message: "That's right. We're friends... Of justice, that is."
property string identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="
@ -14,84 +14,110 @@ Rectangle {
property bool repeatMessageInfo: true
property int timestamp: 1234567
id: chatBox
height: repeatMessageInfo ? 60 + chatText.height : 5 + chatText.height
color: "#00000000"
border.color: "#00000000"
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillWidth: true
width: chatLogView.width
width: parent.width
height: isCurrentUser || (!isCurrentUser && !repeatMessageInfo) ? chatBox.height : 24 + chatBox.height
Image {
id: chatImage
width: 30
height: 30
anchors.left: !isCurrentUser ? parent.left : undefined
anchors.leftMargin: !isCurrentUser ? Theme.padding : 0
anchors.right: !isCurrentUser ? undefined : parent.right
anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding
width: 36
height: 36
anchors.topMargin: 20
anchors.left: parent.left
anchors.leftMargin: Theme.padding
anchors.top: parent.top
anchors.topMargin: Theme.padding
fillMode: Image.PreserveAspectFit
source: identicon
visible: repeatMessageInfo
visible: repeatMessageInfo && !isCurrentUser
}
TextEdit {
id: chatName
text: userName
anchors.leftMargin: 20
anchors.top: parent.top
anchors.topMargin: 22
anchors.left: !isCurrentUser ? chatImage.right : undefined
anchors.leftMargin: Theme.padding
anchors.right: !isCurrentUser ? undefined : chatImage.left
anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding
anchors.topMargin: 0
anchors.left: chatImage.right
font.bold: true
font.pixelSize: 14
readOnly: true
wrapMode: Text.WordWrap
selectByMouse: true
visible: repeatMessageInfo
visible: repeatMessageInfo && !isCurrentUser
}
TextEdit {
id: chatText
text: message
horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight
font.family: "Inter"
wrapMode: Text.WordWrap
anchors.right: !isCurrentUser ? parent.right : chatName.right
anchors.rightMargin: !isCurrentUser ? 60 : 0
anchors.left: !isCurrentUser ? chatName.left : parent.left
anchors.leftMargin: !isCurrentUser ? 0 : 60
anchors.top: repeatMessageInfo ? chatName.bottom : parent.top
anchors.topMargin: Theme.padding
font.pixelSize: 14
readOnly: true
selectByMouse: true
Layout.fillWidth: true
}
Rectangle {
property int chatVerticalPadding: 7
property int chatHorizontalPadding: 12
TextEdit {
id: chatTime
color: Theme.darkGrey
font.family: "Inter"
text: timestamp
anchors.top: chatText.bottom
anchors.bottomMargin: Theme.padding
anchors.right: !isCurrentUser ? parent.right : undefined
anchors.rightMargin: !isCurrentUser ? Theme.padding : 0
anchors.left: !isCurrentUser ? undefined : parent.left
anchors.leftMargin: !isCurrentUser ? 0 : Theme.padding
font.pixelSize: 10
readOnly: true
selectByMouse: true
visible: repeatMessageInfo
id: chatBox
height: (2 * chatVerticalPadding) + chatText.height
color: isCurrentUser ? Theme.blue : Theme.lightBlue
border.color: Theme.transparent
width: message.length > 52 ? 380 : chatText.width + 2 * chatHorizontalPadding
radius: 16
anchors.left: !isCurrentUser ? chatImage.right : undefined
anchors.leftMargin: !isCurrentUser ? 8 : 0
anchors.right: !isCurrentUser ? undefined : parent.right
anchors.rightMargin: !isCurrentUser ? 0 : Theme.padding
anchors.top: repeatMessageInfo && !isCurrentUser ? chatImage.top : parent.top
anchors.topMargin: 0
// Thi`s rectangle's only job is to mask the corner to make it less rounded... yep
Rectangle {
color: parent.color
width: 18
height: 18
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.left: !isCurrentUser ? parent.left : undefined
anchors.leftMargin: 0
anchors.right: !isCurrentUser ? undefined : parent.right
anchors.rightMargin: 0
radius: 4
z: -1
}
TextEdit {
id: chatText
text: message
anchors.left: parent.left
anchors.leftMargin: parent.chatHorizontalPadding
anchors.right: message.length > 52 ? parent.right : undefined
anchors.rightMargin: message.length > 52 ? parent.chatHorizontalPadding : 0
horizontalAlignment: !isCurrentUser ? Text.AlignLeft : Text.AlignRight
font.family: "Inter"
wrapMode: Text.WordWrap
anchors.top: parent.top
anchors.topMargin: chatBox.chatVerticalPadding
font.pixelSize: 15
readOnly: true
selectByMouse: true
color: !isCurrentUser ? Theme.black : Theme.white
}
TextEdit {
id: chatTime
color: Theme.darkGrey
font.family: "Inter"
text: timestamp
anchors.top: chatText.bottom
anchors.bottomMargin: Theme.padding
anchors.right: !isCurrentUser ? parent.right : undefined
anchors.rightMargin: !isCurrentUser ? Theme.padding : 0
anchors.left: !isCurrentUser ? undefined : parent.left
anchors.leftMargin: !isCurrentUser ? 0 : Theme.padding
font.pixelSize: 10
readOnly: true
selectByMouse: true
// Probably only want to show this when clicking?
visible: false
}
}
}
/*##^##
Designer {
D{i:0;height:80;width:500}
D{i:0;formeditorColor:"#ffffff";formeditorZoom:1.5;width:600}
}
##^##*/