New chat layout

This commit is contained in:
Julien Wadel 2021-11-01 21:55:15 +01:00
parent d09028b700
commit d5d23558b3
4 changed files with 48 additions and 25 deletions

View file

@ -187,6 +187,7 @@ Rectangle {
color: ChatStyle.color
implicitHeight: layout.height + ChatStyle.entry.bottomMargin
// ---------------------------------------------------------------------
MouseArea {
@ -203,7 +204,7 @@ Rectangle {
width: entry.width
Text{
id:authorName
Layout.leftMargin: timeDisplay.width + 10
Layout.leftMargin: timeDisplay.width + ChatStyle.entry.metaWidth + ChatStyle.entry.message.extraContent.spacing
Layout.fillWidth: true
text : $chatEntry.fromDisplayName ? $chatEntry.fromDisplayName : ''
property var previousItem : {
@ -226,14 +227,17 @@ Rectangle {
}
RowLayout {
spacing: 0
spacing: 5
width: entry.width
layoutDirection: $chatEntry.isOutgoing ? Qt.RightToLeft : Qt.LeftToRight
Layout.alignment: $chatEntry.isOutgoing ? Qt.AlignRight : Qt.AlignLeft
// Display time.
Text {
id:timeDisplay
Layout.alignment: Qt.AlignTop
Layout.preferredHeight: ChatStyle.entry.lineHeight
Layout.preferredHeight: implicitHeight// ChatStyle.entry.lineHeight
Layout.preferredWidth: ChatStyle.entry.time.width
color: ChatStyle.entry.event.text.color

View file

@ -12,21 +12,29 @@ import Units 1.0
import ColorsList 1.0
// =============================================================================
Row {
Item{
id:mainRow
// ---------------------------------------------------------------------------
// Avatar if it's an incoming message.
// ---------------------------------------------------------------------------
implicitHeight: rectangle.height
width: parent.width
property bool isOutgoing : $chatEntry.isOutgoing || $chatEntry.state == LinphoneEnums.ChatMessageStateIdle;
signal copyAllDone()
signal copySelectionDone()
Row {
// ---------------------------------------------------------------------------
// Avatar if it's an incoming message.
// ---------------------------------------------------------------------------
anchors.left: !isOutgoing ? parent.left : undefined
anchors.right: isOutgoing ? parent.right : undefined
layoutDirection: isOutgoing ? Qt.RightToLeft : Qt.LeftToRight
Item {
height: ChatStyle.entry.lineHeight
width: ChatStyle.entry.metaWidth
width: !isOutgoing ? ChatStyle.entry.metaWidth : 0
Component {
id: avatar
@ -55,6 +63,7 @@ Row {
anchors.centerIn: parent
sourceComponent: !isOutgoing? avatar : undefined
}
}
// ---------------------------------------------------------------------------
@ -62,7 +71,7 @@ Row {
// ---------------------------------------------------------------------------
Row {
spacing: ChatStyle.entry.message.extraContent.leftMargin
spacing: 0 //ChatStyle.entry.message.extraContent.leftMargin
Item{
width: ChatStyle.entry.message.file.width
height:rectangle.height + deliveryLayout.height
@ -378,7 +387,7 @@ Row {
// -------------------------------------------------------------------------
// Resend/Remove file message.
// -------------------------------------------------------------------------
}
Row {
spacing: ChatStyle.entry.message.extraContent.spacing
@ -386,7 +395,7 @@ Row {
id: icon
Icon {
anchors.centerIn: parent
//anchors.centerIn: parent
icon: rectangle.isError ? 'chat_error' :
(rectangle.isRead ? 'chat_read' :
@ -418,7 +427,8 @@ Row {
}
Loader {
height: ChatStyle.entry.lineHeight
anchors.bottom: parent.top
// height: ChatStyle.entry.lineHeight
width: ChatStyle.entry.message.outgoing.areaSize
sourceComponent: isOutgoing

View file

@ -45,13 +45,17 @@ Item {
Rectangle {
id: rectangle
anchors.left: !$chatEntry.isOutgoing ? parent.left : undefined
anchors.right: $chatEntry.isOutgoing ? parent.right : undefined
height: parent.height - (deliveryLayout.visible? deliveryLayout.height : 0)
radius: ChatStyle.entry.message.radius
//property int messageWidth: Math.min(message.implicitWidth, parent.width)
width: (
ephemeralTimerRow.visible && message.contentWidth < ephemeralTimerRow.width
ephemeralTimerRow.visible && message.implicitWidth < ephemeralTimerRow.width
? ephemeralTimerRow.width
: message.contentWidth < parent.width
? message.contentWidth
: message.implicitWidth < parent.width
? message.implicitWidth
: parent.width
) + message.padding * 2
Row{
@ -79,7 +83,7 @@ Item {
iconSize: ChatStyle.ephemeralTimer.iconSize
}
}
}
//}
@ -92,9 +96,11 @@ Item {
property string lastTextSelected : ''
property font customFont : SettingsModel.textMessageFont
//anchors.right: $chatEntry.isOutgoing ? parent.right : undefined
anchors {
left: container.left
right: container.right
left: rectangle.left
right: rectangle.right
}
clip: true
@ -138,7 +144,7 @@ Item {
onCopySelectionDone: container.copySelectionDone()
}
}
}
// ---------------------------------------------------------------------------
// Extra content.
// ---------------------------------------------------------------------------
@ -148,8 +154,10 @@ Item {
anchors {
left: rectangle.right
bottom: rectangle.bottom
leftMargin: ChatStyle.entry.message.extraContent.leftMargin
}
}
ChatDeliveries{
id: deliveryLayout

View file

@ -34,7 +34,6 @@ Item {
Row {
spacing: ChatStyle.entry.message.extraContent.spacing
Component {
id: iconComponent
@ -47,8 +46,8 @@ Item {
readonly property bool isUploaded: $chatEntry.state == LinphoneEnums.ChatMessageStateDelivered
readonly property bool isDelivered: $chatEntry.state == LinphoneEnums.ChatMessageStateDeliveredToUser
readonly property bool isRead: $chatEntry.state == LinphoneEnums.ChatMessageStateDisplayed
icon: iconId.isError
icon: iconId.isError
? 'chat_error'
: (iconId.isRead ? 'chat_read' : (iconId.isDelivered ? 'chat_delivered' : '' ) )
iconSize: ChatStyle.entry.message.outgoing.sendIconSize
@ -86,7 +85,8 @@ Item {
}
Loader {
height: ChatStyle.entry.lineHeight
anchors.bottom: parent.top
//height: ChatStyle.entry.lineHeight
width: ChatStyle.entry.message.outgoing.areaSize
sourceComponent: $chatEntry.state == LinphoneEnums.ChatMessageStateInProgress || $chatEntry.state == LinphoneEnums.ChatMessageStateFileTransferInProgress
@ -95,4 +95,5 @@ Item {
}
}
}
}