diff --git a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml index 790a5555df..67f619d6da 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml @@ -38,6 +38,7 @@ Item { property bool isMessage: isEmoji || isImage || isSticker || isText || isAudio property bool isExpired: (outgoingStatus == "sending" && (Math.floor(timestamp) + 180000) < Date.now()) + property bool isStatusUpdate: false property int replyMessageIndex: chatsModel.messageList.getMessageIndex(responseTo); property string repliedMessageAuthor: replyMessageIndex > -1 ? chatsModel.messageList.getMessageData(replyMessageIndex, "userName") : ""; @@ -100,7 +101,8 @@ Item { case Constants.transactionType: return transactionBubble default: - return appSettings.compactMode ? compactMessageComponent : messageComponent + return appSettings.compactMode ? compactMessageComponent : + isStatusUpdate ? statusUpdateComponent : messageComponent } } } @@ -209,6 +211,13 @@ Item { } } + Component { + id: statusUpdateComponent + StatusUpdate { + clickMessage: messageItem.clickMessage + } + } + // Compact Messages Component { id: compactMessageComponent diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml index 1f73774ea2..eac4c28a35 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/ChatText.qml @@ -12,7 +12,6 @@ Item { id: root visible: contentType == Constants.messageType || isEmoji - z: 51 height: visible ? (showMoreLoader.active ? childrenRect.height - 10 : chatText.height) : 0 diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml new file mode 100644 index 0000000000..00271d3e08 --- /dev/null +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/StatusUpdate.qml @@ -0,0 +1,145 @@ +import QtQuick 2.3 +import QtGraphicalEffects 1.13 +import "../../../../../shared" +import "../../../../../imports" +import "../../../../../shared/status" + +Rectangle { + id: root + + property var clickMessage: function () {} + anchors.top: parent.top + anchors.topMargin: authorCurrentMsg != authorPrevMsg ? Style.current.smallPadding : 0 + height: (isImage ? chatImageContent.height : chatText.height) + chatName.height + 2* Style.current.padding + (emojiReactions !== "" ? 20 : 0) + width: parent.width + radius: Style.current.radius + color: hovered ? Style.current.border : Style.current.background + property bool hovered: false + + UserImage { + id: chatImage + active: isMessage || isImage + anchors.left: parent.left + anchors.leftMargin: Style.current.padding + anchors.top: parent.top + anchors.topMargin: Style.current.halfPadding + } + + UsernameLabel { + id: chatName + visible: chatImage.visible + anchors.leftMargin: Style.current.halfPadding + anchors.top: chatImage.top + anchors.left: chatImage.right + label.font.pixelSize: Style.current.primaryTextFontSize + userName: messageItem.userName + localName: messageItem.localName + alias: messageItem.alias + z: 51 + } + + ChatTime { + id: chatTime + visible: chatName.visible + anchors.verticalCenter: chatName.verticalCenter + anchors.left: chatName.right + anchors.leftMargin: Style.current.halfPadding + } + + ChatText { + id: chatText + anchors.top: chatName.visible ? chatName.bottom : chatImage.top + anchors.topMargin: chatName.visible ? 6 : 0 + anchors.left: chatImage.right + anchors.leftMargin: Style.current.halfPadding + anchors.right: parent.right + anchors.rightMargin: Style.current.padding + } + + Loader { + id: chatImageContent + active: isImage + anchors.left: chatImage.right + anchors.leftMargin: Style.current.halfPadding + anchors.top: chatText.bottom + z: 51 + + sourceComponent: Component { + ChatImage { + imageSource: image + imageWidth: 200 + onClicked: root.clickMessage(false, false, true, image) + } + } + } + + MouseArea { + anchors.fill: parent + hoverEnabled: true + propagateComposedEvents: true + onClicked: { + mouse.accepted = false + } + onEntered: { + root.hovered = true + } + onExited: { + root.hovered = false + } + } + + StatusIconButton { + id: emojiBtn + visible: root.hovered + highlighted: visible + anchors.top: root.top + anchors.topMargin: -height/2 + anchors.right: root.right + anchors.rightMargin: Style.current.halfPadding + highlightedIconColor: Style.current.secondaryText + highlightedBackgroundColor: Style.current.background + icon.name: "emoji" + icon.width: 20 + icon.height: 20 + MouseArea { + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: root.clickMessage(false, false, false, null, true) + onEntered: { + if (!root.hovered) { + root.hovered = true + } + } + onExited: { + if (root.hovered) { + root.hovered = false + } + } + } + } + DropShadow { + anchors.fill: emojiBtn + horizontalOffset: 0 + verticalOffset: 2 + radius: 10 + samples: 12 + color: "#22000000" + source: emojiBtn + } + + Loader { + id: emojiReactionLoader + active: emojiReactions !== "" + sourceComponent: emojiReactionsComponent + anchors.left: chatImage.right + anchors.leftMargin: Style.current.halfPadding + anchors.top: isImage ? chatImageContent.bottom : chatText.bottom + anchors.topMargin: Style.current.halfPadding + } + + Component { + id: emojiReactionsComponent + EmojiReactions {} + } +} diff --git a/ui/app/img/emoji.svg b/ui/app/img/emoji.svg new file mode 100644 index 0000000000..b523afab37 --- /dev/null +++ b/ui/app/img/emoji.svg @@ -0,0 +1,7 @@ + + + + + + +