fix: fix chat height being too high in compact mode

2020-09-30 16:40:54 -04:00 · 2020-09-30 16:40:54 -04:00 · 261460f8fb
parent fe3995bb3d
commit 261460f8fb
5 changed files with 111 additions and 102 deletions
--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatImage.qml
@ -1,26 +1,12 @@
 import QtQuick 2.3
 import "../../../../../imports"

-Rectangle {
+ImageLoader {
    property int chatVerticalPadding: 12
    property int chatHorizontalPadding: 12
-    property int imageWidth: 250
    property string imageSource: "data:image/jpeg;base64,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"

-    id: imageChatBox
-    height: imageMessage.height + imageChatBox.chatVerticalPadding
-    width:  imageMessage.width + 2 * chatHorizontalPadding
-    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
-    }
+    id: imageMessage
+    verticalPadding: chatVerticalPadding
+    source: imageSource
 }
--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatReply.qml
@ -2,61 +2,71 @@ import QtQuick 2.3
 import "../../../../../shared"
 import "../../../../../imports"

-Rectangle {
-    property alias textField: lblReplyMessage
+Loader {
+    property int textFieldWidth: item ? item.textField.width : 0
    property bool longReply: false
    property color elementsColor: isCurrentUser ? Style.current.chatReplyCurrentUser : Style.current.secondaryText

-    id: chatReply
-    visible: 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
+    id: root
+    active: responseTo != "" && replyMessageIndex > -1

-    StyledTextEdit {
-        id: lblReplyAuthor
-        text: "↳" + repliedMessageAuthor
-        color: chatReply.elementsColor
-        readOnly: true
-        selectByMouse: true
-        wrapMode: Text.Wrap
-        anchors.left: parent.left
-        anchors.right: parent.right
-    }
+    sourceComponent: Component {
+        Rectangle {
+            property alias textField: lblReplyMessage

-    ChatImage {
-        id: imgReplyImage
-        visible: repliedMessageType == Constants.imageType
-        imageWidth: 50
-        imageSource: repliedMessageImage
-        anchors.top: lblReplyAuthor.bottom
-        anchors.topMargin: 5
-        anchors.left: parent.left
-        chatHorizontalPadding: 0
-    }
+            id: chatReply
+            visible: 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 {
-        id: lblReplyMessage
-        visible: repliedMessageType != Constants.imageType
-        anchors.top: lblReplyAuthor.bottom
-        anchors.topMargin: 5
-        text: Emoji.parse(Utils.linkifyAndXSS(repliedMessageContent), "26x26");
-        textFormat: Text.RichText
-        color: chatReply.elementsColor
-        readOnly: true
-        selectByMouse: true
-        wrapMode: Text.Wrap
-        anchors.left: parent.left
-        anchors.right: chatReply.longReply ? parent.right : undefined
-        z: 51
-    }
+            StyledTextEdit {
+                id: lblReplyAuthor
+                text: "↳" + repliedMessageAuthor
+                color: root.elementsColor
+                readOnly: true
+                selectByMouse: true
+                wrapMode: Text.Wrap
+                anchors.left: parent.left
+                anchors.right: parent.right
+            }

-    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: chatReply.elementsColor
+            ChatImage {
+                id: imgReplyImage
+                visible: repliedMessageType == Constants.imageType
+                imageWidth: 50
+                imageSource: repliedMessageImage
+                anchors.top: lblReplyAuthor.bottom
+                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
+            }
+        }
    }
 }
+
--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
@ -159,7 +159,7 @@ Item {
        active: emojiReactions !== ""
        anchors.top: chatText.bottom
        anchors.left: chatText.left
-        anchors.topMargin: 2
+        anchors.topMargin: active ? 2 : 0

        sourceComponent: Component {
            EmojiReactions {}
--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml
@ -61,7 +61,7 @@ Item {
           return h;
        }
        width: {
-            switch(contentType){
+            switch(contentType) {
                case Constants.stickerType:
                    return stickerId.width + (2 * chatBox.chatHorizontalPadding);
                case Constants.imageType:
@ -71,8 +71,8 @@ Item {
                        return 400;
                    }
                    let baseWidth = chatText.width;
-                    if (chatReply.visible && chatText.width < chatReply.textField.width) {
-                        baseWidth = chatReply.textField.width
+                    if (chatReply.visible && chatText.width < chatReply.textFieldWidth) {
+                        baseWidth = chatReply.textFieldWidth
                    }
                    return baseWidth + 2 * chatHorizontalPadding
            }
@ -113,15 +113,22 @@ Item {

        Loader {
            id: chatImageContent
-            active: isImage
-            sourceComponent: chatImageComponent
-        }
+            active: isImage && !!image
+            anchors.top: parent.top
+            anchors.topMargin: Style.current.smallPadding
+            anchors.left: parent.left
+            anchors.leftMargin: chatBox.chatHorizontalPadding

-        Component {
-            id: chatImageComponent
-            ChatImage {
-                imageSource: image
-                imageWidth: 250
+            sourceComponent: Component {
+                Item {
+                    width: chatImageComponent.width + 2 * chatBox.chatHorizontalPadding
+                    height: chatImageComponent.height
+                    ChatImage {
+                        id: chatImageComponent
+                        imageSource: image
+                        imageWidth: 250
+                    }
+                }
            }
        }

--- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml
+++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/UserImage.qml
@ -2,31 +2,37 @@ import QtQuick 2.3
 import "../../../../../shared"
 import "../../../../../imports"

-Rectangle {
-    id: chatImage
-    visible: isMessage  && authorCurrentMsg != authorPrevMsg
-    width: identiconImage.width
-    height: identiconImage.height
-    border.width: 1
-    border.color: Style.current.border
-    radius: 50
+Loader {
+    active: isMessage && authorCurrentMsg !== authorPrevMsg
+    height: active ? item.height : 0

-    Image {
-        id: identiconImage
-        width: 36
-        height: chatImage.visible ? 36 : 0
-        fillMode: Image.PreserveAspectFit
-        source: !isCurrentUser ? identicon : profileModel.profile.identicon
-        mipmap: true
-        smooth: false
-        antialiasing: true
+    sourceComponent: Component {
+        Rectangle {
+            id: chatImage
+            width: identiconImage.width
+            height: identiconImage.height
+            border.width: 1
+            border.color: Style.current.border
+            radius: 50

-        MouseArea {
-            cursorShape: Qt.PointingHandCursor
-            acceptedButtons: Qt.LeftButton | Qt.RightButton
-            anchors.fill: parent
-            onClicked: {
-                clickMessage(true)
+            Image {
+                id: identiconImage
+                width: 36
+                height: 36
+                fillMode: Image.PreserveAspectFit
+                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)
+                    }
+                }
            }
        }
    }