diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageLoader.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageLoader.qml index 02b726a60e..b437e44d3c 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageLoader.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ImageLoader.qml @@ -1,10 +1,12 @@ import QtQuick 2.3 +import QtGraphicalEffects 1.13 import "../../../../../shared" import "../../../../../imports" Item { property int verticalPadding: 0 property int imageWidth: 350 + property bool isCurrentUser: false property url source signal clicked(string source) @@ -49,6 +51,39 @@ Item { } } + layer.enabled: true + layer.effect: OpacityMask { + maskSource: Item { + width: imageMessage.width + height: imageMessage.height + + Rectangle { + anchors.top: parent.top + anchors.left: parent.left + width: imageMessage.width + height: imageMessage.height + radius: 16 + } + + Rectangle { + anchors.bottom: parent.bottom + anchors.left: parent.left + width: 32 + height: 32 + radius: 4 + visible: !imageContainer.isCurrentUser + } + Rectangle { + anchors.bottom: parent.bottom + anchors.right: parent.right + width: 32 + height: 32 + radius: 4 + visible: imageContainer.isCurrentUser + } + } + } + MouseArea { cursorShape: Qt.PointingHandCursor anchors.fill: parent diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml index 2c894a9df5..13c0fbf3bd 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/NormalMessage.qml @@ -35,13 +35,21 @@ Item { } Rectangle { - property int chatVerticalPadding: 7 - property int chatHorizontalPadding: 12 + 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 id: chatBox - color: isSticker ? Style.current.background : (isCurrentUser ? Style.current.blue : Style.current.secondaryBackground) + color: { + if (isSticker) { + return Style.current.background + } + if (isImage) { + return "transparent" + } + return isCurrentUser ? Style.current.primary : Style.current.secondaryBackground + } border.color: isSticker ? Style.current.border : Style.current.transparent border.width: 1 height: { @@ -131,6 +139,7 @@ Item { id: chatImageComponent imageSource: image imageWidth: 250 + isCurrentUser: messageItem.isCurrentUser } } }