Message/EventContent delegates improvements

- Rectangle > Column > Labels instead of ColumnLayout > Labels with
  rectangle backgrounds hack

- Use basic Row and Column instead of Layouts, for simplicity and
  performance

- Get rid of a binding loop that happened sometimes when local echo icon
  disappeared

- Max bubble width when lots of screen space available
  now depends on font size, instead of always being 600
This commit is contained in:
miruka 2019-05-08 11:18:22 -04:00
parent a15e2a5c9d
commit ca04e4c4a4
2 changed files with 74 additions and 54 deletions

View File

@ -3,11 +3,17 @@ import QtQuick.Layouts 1.3
import "../../Base"
import "../utils.js" as ChatJS
HRowLayout {
Row {
id: eventContent
spacing: standardSpacing / 2
layoutDirection: isOwn ? Qt.RightToLeft : Qt.LeftToRight
width: Math.min(
roomEventListView.width - avatar.width - eventContent.spacing,
HStyle.fontSize.normal * 0.5 * 75, // 600 with 16px font
contentLabel.implicitWidth
)
HAvatar {
id: avatar
name: displayName
@ -16,6 +22,8 @@ HRowLayout {
}
HLabel {
width: parent.width
id: contentLabel
text: "<font color='" +
Qt.hsla(Backend.hueFromString(displayName.value || dict.sender),
@ -41,10 +49,5 @@ HRowLayout {
rightPadding: horizontalPadding
topPadding: verticalPadding
bottomPadding: verticalPadding
Layout.maximumWidth: Math.min(
600,
roomEventListView.width - avatar.width - eventContent.totalSpacing
)
}
}

View File

@ -3,60 +3,77 @@ import QtQuick.Layouts 1.3
import "../../Base"
Row {
id: row
id: messageContent
spacing: standardSpacing / 2
layoutDirection: isOwn ? Qt.RightToLeft : Qt.LeftToRight
HAvatar { id: avatar; hidden: combine; name: displayName }
HAvatar {
id: avatar
hidden: combine
name: displayName
}
HColumnLayout {
spacing: 0
Rectangle {
color: HStyle.chat.message.background
HLabel {
visible: ! combine
id: nameLabel
text: displayName.value || dict.sender
background: Rectangle {color: HStyle.chat.message.background}
color: Qt.hsla(Backend.hueFromString(text),
HStyle.displayName.saturation,
HStyle.displayName.lightness,
1)
elide: Text.ElideRight
maximumLineCount: 1
Layout.preferredWidth: contentLabel.width
horizontalAlignment: isOwn ? Text.AlignRight : Text.AlignLeft
leftPadding: horizontalPadding
rightPadding: horizontalPadding
topPadding: verticalPadding
}
HRichLabel {
id: contentLabel
text: (dict.formatted_body ?
Backend.htmlFilter.filter(dict.formatted_body) :
dict.body) +
"&nbsp;&nbsp;<font size=" + HStyle.fontSize.small +
"px color=" + HStyle.chat.message.date + ">" +
Qt.formatDateTime(dateTime, "hh:mm:ss") +
"</font>" +
(isLocalEcho ?
"&nbsp;<font size=" + HStyle.fontSize.small +
"px>⏳</font>" : "")
textFormat: Text.RichText
background: Rectangle {color: HStyle.chat.message.background}
color: HStyle.chat.message.body
wrapMode: Text.Wrap
leftPadding: horizontalPadding
rightPadding: horizontalPadding
topPadding: nameLabel.visible ? 0 : verticalPadding
bottomPadding: verticalPadding
Layout.minimumWidth: nameLabel.implicitWidth
Layout.maximumWidth: Math.min(
600, roomEventListView.width - avatar.width - row.spacing
//width: nameLabel.implicitWidth
width: Math.min(
roomEventListView.width - avatar.width - messageContent.spacing,
HStyle.fontSize.normal * 0.5 * 75, // 600 with 16px font
Math.max(
nameLabel.visible ? nameLabel.implicitWidth : 0,
contentLabel.implicitWidth
)
)
height: nameLabel.height + contentLabel.implicitHeight
Column {
spacing: 0
anchors.fill: parent
HLabel {
height: combine ? 0 : implicitHeight
width: parent.width
visible: height > 0
id: nameLabel
text: displayName.value || dict.sender
color: Qt.hsla(Backend.hueFromString(text),
HStyle.displayName.saturation,
HStyle.displayName.lightness,
1)
elide: Text.ElideRight
maximumLineCount: 1
horizontalAlignment: isOwn ? Text.AlignRight : Text.AlignLeft
leftPadding: horizontalPadding
rightPadding: horizontalPadding
topPadding: verticalPadding
}
HRichLabel {
width: parent.width
id: contentLabel
text: (dict.formatted_body ?
Backend.htmlFilter.filter(dict.formatted_body) :
dict.body) +
"&nbsp;&nbsp;<font size=" + HStyle.fontSize.small +
"px color=" + HStyle.chat.message.date + ">" +
Qt.formatDateTime(dateTime, "hh:mm:ss") +
"</font>" +
(isLocalEcho ?
"&nbsp;<font size=" + HStyle.fontSize.small +
"px>⏳</font>" : "")
textFormat: Text.RichText
color: HStyle.chat.message.body
wrapMode: Text.Wrap
leftPadding: horizontalPadding
rightPadding: horizontalPadding
topPadding: nameLabel.visible ? 0 : verticalPadding
bottomPadding: verticalPadding
}
}
}
}