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

fix: fix chat height being too high in compact mode

This commit is contained in:
Jonathan Rainville 2020-09-30 16:40:54 -04:00 committed by Iuri Matias
parent fe3995bb3d
commit 261460f8fb
5 changed files with 111 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml
View File

@ -1,26 +1,12 @@
import QtQuick 2.3 import QtQuick 2.3
import "../../../../../imports" import "../../../../../imports"
Rectangle { ImageLoader {
property int chatVerticalPadding: 12 property int chatVerticalPadding: 12
property int chatHorizontalPadding: 12 property int chatHorizontalPadding: 12
property int imageWidth: 250
property string imageSource: "data:image/jpeg;base64,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" property string imageSource: "data:image/jpeg;base64,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"
id: imageChatBox id: imageMessage
height: imageMessage.height + imageChatBox.chatVerticalPadding verticalPadding: chatVerticalPadding
width: imageMessage.width + 2 * chatHorizontalPadding source: imageSource
radius: 16
visible: isImage
color: "transparent"
ImageLoader {
id: imageMessage
verticalPadding: imageChatBox.chatVerticalPadding
anchors.top: parent.top
anchors.topMargin: imageChatBox.chatVerticalPadding
source: imageSource
imageWidth: imageChatBox.imageWidth
}
} }

108
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml
View File

@ -2,61 +2,71 @@ import QtQuick 2.3
import "../../../../../shared" import "../../../../../shared"
import "../../../../../imports" import "../../../../../imports"
Rectangle { Loader {
property alias textField: lblReplyMessage property int textFieldWidth: item ? item.textField.width : 0
property bool longReply: false property bool longReply: false
property color elementsColor: isCurrentUser ? Style.current.chatReplyCurrentUser : Style.current.secondaryText property color elementsColor: isCurrentUser ? Style.current.chatReplyCurrentUser : Style.current.secondaryText
id: chatReply id: root
visible: responseTo != "" && replyMessageIndex > -1 active: responseTo != "" && replyMessageIndex > -1
// childrenRect.height shows a binding loop for soem reason, so we use heights instead
height: this.visible ? lblReplyAuthor.height + ((repliedMessageType === Constants.imageType ? imgReplyImage.height : lblReplyMessage.height) + 5 + 8) : 0
color: Style.current.transparent
StyledTextEdit { sourceComponent: Component {
id: lblReplyAuthor Rectangle {
text: "↳" + repliedMessageAuthor property alias textField: lblReplyMessage
color: chatReply.elementsColor
readOnly: true
selectByMouse: true
wrapMode: Text.Wrap
anchors.left: parent.left
anchors.right: parent.right
}
ChatImage { id: chatReply
id: imgReplyImage visible: responseTo != "" && replyMessageIndex > -1
visible: repliedMessageType == Constants.imageType // childrenRect.height shows a binding loop for soem reason, so we use heights instead
imageWidth: 50 height: this.visible ? lblReplyAuthor.height + ((repliedMessageType === Constants.imageType ? imgReplyImage.height : lblReplyMessage.height) + 5 + 8) : 0
imageSource: repliedMessageImage color: Style.current.transparent
anchors.top: lblReplyAuthor.bottom
anchors.topMargin: 5
anchors.left: parent.left
chatHorizontalPadding: 0
}
StyledTextEdit { StyledTextEdit {
id: lblReplyMessage id: lblReplyAuthor
visible: repliedMessageType != Constants.imageType text: "↳" + repliedMessageAuthor
anchors.top: lblReplyAuthor.bottom color: root.elementsColor
anchors.topMargin: 5 readOnly: true
text: Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent), "26x26"); selectByMouse: true
textFormat: Text.RichText wrapMode: Text.Wrap
color: chatReply.elementsColor anchors.left: parent.left
readOnly: true anchors.right: parent.right
selectByMouse: true }
wrapMode: Text.Wrap
anchors.left: parent.left
anchors.right: chatReply.longReply ? parent.right : undefined
z: 51
}
Separator { ChatImage {
anchors.top: repliedMessageType == Constants.imageType ? imgReplyImage.bottom : lblReplyMessage.bottom id: imgReplyImage
anchors.topMargin: repliedMessageType == Constants.imageType ? 15 : 8 visible: repliedMessageType == Constants.imageType
anchors.left: lblReplyMessage.left imageWidth: 50
anchors.right: lblReplyMessage.right imageSource: repliedMessageImage
anchors.rightMargin: chatTextItem.chatHorizontalPadding anchors.top: lblReplyAuthor.bottom
color: chatReply.elementsColor anchors.topMargin: 5
anchors.left: parent.left
chatHorizontalPadding: 0
}
StyledTextEdit {
id: lblReplyMessage
visible: repliedMessageType != Constants.imageType
anchors.top: lblReplyAuthor.bottom
anchors.topMargin: 5
text: Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent), "26x26");
textFormat: Text.RichText
color: root.elementsColor
readOnly: true
selectByMouse: true
wrapMode: Text.Wrap
anchors.left: parent.left
anchors.right: root.longReply ? parent.right : undefined
z: 51
}
Separator {
anchors.top: repliedMessageType == Constants.imageType ? imgReplyImage.bottom : lblReplyMessage.bottom
anchors.topMargin: repliedMessageType == Constants.imageType ? 15 : 8
anchors.left: lblReplyMessage.left
anchors.right: lblReplyMessage.right
anchors.rightMargin: chatTextItem.chatHorizontalPadding
color: root.elementsColor
}
}
} }
} }

2
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
View File

@ -159,7 +159,7 @@ Item {
active: emojiReactions !== "" active: emojiReactions !== ""
anchors.top: chatText.bottom anchors.top: chatText.bottom
anchors.left: chatText.left anchors.left: chatText.left
anchors.topMargin: 2 anchors.topMargin: active ? 2 : 0
sourceComponent: Component { sourceComponent: Component {
EmojiReactions {} EmojiReactions {}

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

@ -61,7 +61,7 @@ Item {
return h; return h;
} }
width: { width: {
switch(contentType){ switch(contentType) {
case Constants.stickerType: case Constants.stickerType:
return stickerId.width + (2 * chatBox.chatHorizontalPadding); return stickerId.width + (2 * chatBox.chatHorizontalPadding);
case Constants.imageType: case Constants.imageType:
@ -71,8 +71,8 @@ Item {
return 400; return 400;
} }
let baseWidth = chatText.width; let baseWidth = chatText.width;
if (chatReply.visible && chatText.width < chatReply.textField.width) { if (chatReply.visible && chatText.width < chatReply.textFieldWidth) {
baseWidth = chatReply.textField.width baseWidth = chatReply.textFieldWidth
} }
return baseWidth + 2 * chatHorizontalPadding return baseWidth + 2 * chatHorizontalPadding
} }
@ -113,15 +113,22 @@ Item {
Loader { Loader {
id: chatImageContent id: chatImageContent
active: isImage active: isImage && !!image
sourceComponent: chatImageComponent anchors.top: parent.top
} anchors.topMargin: Style.current.smallPadding
anchors.left: parent.left
anchors.leftMargin: chatBox.chatHorizontalPadding
Component { sourceComponent: Component {
id: chatImageComponent Item {
ChatImage { width: chatImageComponent.width + 2 * chatBox.chatHorizontalPadding
imageSource: image height: chatImageComponent.height
imageWidth: 250 ChatImage {
id: chatImageComponent
imageSource: image
imageWidth: 250
}
}
} }
} }

52
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml
View File

@ -2,31 +2,37 @@ import QtQuick 2.3
import "../../../../../shared" import "../../../../../shared"
import "../../../../../imports" import "../../../../../imports"
Rectangle { Loader {
id: chatImage active: isMessage && authorCurrentMsg !== authorPrevMsg
visible: isMessage && authorCurrentMsg != authorPrevMsg height: active ? item.height : 0
width: identiconImage.width
height: identiconImage.height
border.width: 1
border.color: Style.current.border
radius: 50
Image { sourceComponent: Component {
id: identiconImage Rectangle {
width: 36 id: chatImage
height: chatImage.visible ? 36 : 0 width: identiconImage.width
fillMode: Image.PreserveAspectFit height: identiconImage.height
source: !isCurrentUser ? identicon : profileModel.profile.identicon border.width: 1
mipmap: true border.color: Style.current.border
smooth: false radius: 50
antialiasing: true
MouseArea { Image {
cursorShape: Qt.PointingHandCursor id: identiconImage
acceptedButtons: Qt.LeftButton | Qt.RightButton width: 36
anchors.fill: parent height: 36
onClicked: { fillMode: Image.PreserveAspectFit
clickMessage(true) source: !isCurrentUser ? identicon : profileModel.profile.identicon
mipmap: true
smooth: false
antialiasing: true
MouseArea {
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
anchors.fill: parent
onClicked: {
clickMessage(true)
}
}
} }
} }
} }