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: make the message box scale according to the parent's width

This commit is contained in:
Jonathan Rainville 2020-11-18 13:55:57 -05:00 committed by Iuri Matias
parent 983fbfd3d4
commit 447591e9b4
2 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml
View File

@ -1,4 +1,4 @@
import QtQuick 2.3
import QtQuick 2.13
import "../../../../../shared"
import "../../../../../imports"
@ -13,7 +13,29 @@ Item {
visible: contentType == Constants.messageType || isEmoji
z: 51
height: visible ? (showMoreLoader.active ? childrenRect.height : chatText.height) : 0
width: longChatText ? undefined : chatText.width
// This function is to avoid the binding loop warning
function setWidths() {
if (longChatText) {
root.width = undefined
chatText.width = Qt.binding(function () {return root.width})
} else {
chatText.width = Qt.binding(function () {return chatText.implicitWidth})
root.width = Qt.binding(function () {return chatText.width})
}
}
Component.onCompleted: {
root.setWidths()
}
Connections {
enabled: !appSettings.compactMode
target: appSettings.compactMode ? null : chatBox
onLongChatTextChanged: {
root.setWidths()
}
}
StyledTextEdit {
id: chatText
@ -24,7 +46,6 @@ Item {
readOnly: true
selectByMouse: true
color: Style.current.textColor
width: longChatText ? parent.width : implicitWidth
height: root.veryLongChatText && !root.readMore ? 200 : implicitHeight
clip: true
onLinkActivated: function (link) {

16
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml
View File

@ -4,11 +4,11 @@ import "../../../../../imports"
Item {
property var clickMessage: function () {}
property bool showImages: appSettings.displayChatImages && imageUrls != ""
property bool showImages: appSettings.displayChatImages && imageUrls !== ""
id: chatTextItem
anchors.top: parent.top
anchors.topMargin: authorCurrentMsg != authorPrevMsg ? Style.current.smallPadding : 0
anchors.topMargin: authorCurrentMsg !== authorPrevMsg ? Style.current.smallPadding : 0
height: childrenRect.height + this.anchors.topMargin + (dateGroupLbl.visible ? dateGroupLbl.height : 0)
width: parent.width
@ -35,10 +35,16 @@ Item {
}
Rectangle {
readonly property int defaultMessageWidth: 400
readonly property int defaultMaxMessageChars: 54
readonly property int messageWidth: Math.max(defaultMessageWidth, parent.width / 2)
readonly property int maxMessageChars: (defaultMaxMessageChars * messageWidth) / defaultMessageWidth
property int chatVerticalPadding: isImage ? 4 : 7
property int chatHorizontalPadding: isImage ? 0 : 12
property bool longReply: chatReply.visible && repliedMessageContent.length > 54
property bool longChatText: chatsModel.plainText(message).length > 54
property bool longReply: chatReply.visible && repliedMessageContent.length > maxMessageChars
property bool longChatText: chatsModel.plainText(message).split('\n').some(function (messagePart) {
return messagePart.length > maxMessageChars
})
id: chatBox
color: {
@ -80,7 +86,7 @@ Item {
return chatImageContent.width
default:
if (longChatText || longReply) {
return 400;
return messageWidth;
}
let baseWidth = chatText.width;
if (chatReply.visible && chatText.width < chatReply.textFieldWidth) {