From efc5be38bddbc8670d22c73465eba64e39ac9a47 Mon Sep 17 00:00:00 2001 From: Igor Sirotin Date: Sat, 10 Sep 2022 11:22:12 +0800 Subject: [PATCH] fix(StatusMessageEmojiReactions): Fixed emoji reactions appearance (#889) --- sandbox/demoapp/data/Models.qml | 53 +++++++- .../StatusMessageEmojiReactions.qml | 126 +++++++----------- src/StatusQ/Core/Theme/StatusDarkTheme.qml | 4 +- src/StatusQ/Core/Theme/StatusLightTheme.qml | 4 +- 4 files changed, 97 insertions(+), 90 deletions(-) diff --git a/sandbox/demoapp/data/Models.qml b/sandbox/demoapp/data/Models.qml index d746ac96..a837e28d 100644 --- a/sandbox/demoapp/data/Models.qml +++ b/sandbox/demoapp/data/Models.qml @@ -1007,7 +1007,54 @@ QtObject { localName: "" profileImage: "" contentType: StatusMessage.ContentType.Text - message: 'Simple text message with reactions' + message: 'Simple text message from another user with reactions' + messageContent: "" + isContact: false + trustIndicator: StatusContactVerificationIcons.TrustedType.None + hasMention: false + editMode: false + isReply: false + replySenderId: "" + replySenderName: "" + replyProfileImage: "" + replyMessageText: "" + replyAmISender: false + replyContentType: StatusMessage.ContentType.Text + replyMessageContent: "" + isPinned: false + pinnedBy: "" + hasExpired: false + reactions: [ + ListElement { + numberOfReactions: 2 + didIReactWithThisEmoji: false + jsonArrayOfUsersReactedWithThisEmoji: '["User 1", "User 3"]' + emojiId: 1 + }, + ListElement { + numberOfReactions: 3 + didIReactWithThisEmoji: true + jsonArrayOfUsersReactedWithThisEmoji: '["Teenage Mutant Turtle", "User 1", "User 3"]' + emojiId: 3 + }, + ListElement { + numberOfReactions: 1 + didIReactWithThisEmoji: false + jsonArrayOfUsersReactedWithThisEmoji: '["User 3"]' + emojiId: 4 + } + ] + } + ListElement { + timestamp: "1657937930" + amIsender: true + senderId: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04" + userName: "You" + ensName: "" + localName: "" + profileImage: "" + contentType: StatusMessage.ContentType.Text + message: 'Simple text message from current user with reactions' messageContent: "" isContact: false trustIndicator: StatusContactVerificationIcons.TrustedType.None @@ -1029,10 +1076,6 @@ QtObject { numberOfReactions: 2 didIReactWithThisEmoji: false jsonArrayOfUsersReactedWithThisEmoji: '["User 1", "User 3"]' -// jsonArrayOfUsersReactedWithThisEmoji: [ -// ListElement { text: "User 1" }, -// ListElement { text: "User 3" } -// ] emojiId: 1 }, ListElement { diff --git a/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml b/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml index 58e888ce..415394b3 100644 --- a/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml +++ b/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml @@ -1,5 +1,6 @@ import QtQuick 2.3 import QtQuick.Controls 2.13 +import QtQuick.Layouts 1.14 import QtGraphicalEffects 1.13 import StatusQ.Core 0.1 @@ -73,100 +74,65 @@ Item { Repeater { id: reactionRepeater + width: childrenRect.width model: root.emojiReactionsModel - Rectangle { - id: emojiContainer + Control { + id: reactionDelegate - readonly property bool isHovered: mouseArea.containsMouse + topPadding: 2 + bottomPadding: 2 + leftPadding: 2 + rightPadding: 6 - width: emojiImage.width + emojiCount.width + (root.imageMargin * 2) + + 8 - height: 20 - radius: 10 - color: model.didIReactWithThisEmoji ? - (isHovered ? Theme.palette.statusMessage.emojiReactionActiveBackgroundHovered : Theme.palette.statusMessage.emojiReactionActiveBackground) : - (isHovered ? Theme.palette.statusMessage.emojiReactionBackgroundHovered : Theme.palette.statusMessage.emojiReactionBackground) + background: Rectangle { + radius: 10 + color: model.didIReactWithThisEmoji + ? (reactionDelegate.hovered ? Theme.palette.statusMessage.emojiReactionActiveBackgroundHovered + : Theme.palette.statusMessage.emojiReactionActiveBackground) + : (reactionDelegate.hovered ? Theme.palette.statusMessage.emojiReactionBackgroundHovered + : Theme.palette.statusMessage.emojiReactionBackground) - StatusToolTip { - visible: mouseArea.containsMouse - maxWidth: 400 - text: d.showReactionAuthors(model.jsonArrayOfUsersReactedWithThisEmoji, model.emojiId) + // Rounded corner to cover one corner + Rectangle { + anchors.top: parent.top + anchors.left: parent.left + width: 10 + height: 10 + radius: 2 + color: parent.color + } } - // Rounded corner to cover one corner - Rectangle { - color: parent.color - width: 10 - height: 10 - anchors.top: parent.top - anchors.left: !root.isCurrentUser ? parent.left : undefined - anchors.leftMargin: 0 - anchors.right: !root.isCurrentUser ? undefined : parent.right - anchors.rightMargin: 0 - radius: 2 - z: -1 - } + contentItem: Row { + spacing: 4 - // This is a workaround to get a "border" around the rectangle including the weird rectangle - Loader { - active: model.didIReactWithThisEmoji - anchors.top: parent.top - anchors.topMargin: -1 - anchors.left: parent.left - anchors.leftMargin: -1 - z: -2 + StatusEmoji { + anchors.verticalCenter: parent.verticalCenter + width: 15 + height: 15 - sourceComponent: Component { - Rectangle { - width: emojiContainer.width + 2 - height: emojiContainer.height + 2 - radius: emojiContainer.radius - color: Theme.palette.primaryColor1 - - Rectangle { - color: parent.color - width: 10 - height: 10 - anchors.top: parent.top - anchors.left: !root.isCurrentUser ? parent.left : undefined - anchors.leftMargin: 0 - anchors.right: !root.isCurrentUser ? undefined : parent.right - anchors.rightMargin: 0 - radius: 2 - z: -1 - } + source: { + if (model.emojiId >= 1 && model.emojiId <= root.icons.length) + return root.icons[model.emojiId - 1]; + return ""; } } - } - // TODO: Use Row - - StatusEmoji { - id: emojiImage - - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.leftMargin: root.imageMargin - - width: 15 - height: 15 - - source: { - if (model.emojiId >= 1 && model.emojiId <= root.icons.length) - return root.icons[model.emojiId - 1]; - return ""; + StatusBaseText { + anchors.verticalCenter: parent.verticalCenter + text: model.numberOfReactions + font.pixelSize: 12 + color: model.didIReactWithThisEmoji ? Theme.palette.indirectColor1 : Theme.palette.directColor1 } + } - StatusBaseText { - id: emojiCount - text: model.numberOfReactions - anchors.verticalCenter: parent.verticalCenter - anchors.left: emojiImage.right - anchors.leftMargin: root.imageMargin - font.pixelSize: 12 - color: model.didIReactWithThisEmoji ? Theme.palette.primaryColor1 : Theme.palette.directColor1 + StatusToolTip { + visible: reactionDelegate.hovered + maxWidth: 400 + text: d.showReactionAuthors(model.jsonArrayOfUsersReactedWithThisEmoji, model.emojiId) } MouseArea { @@ -194,7 +160,7 @@ Item { StatusIcon { id: addEmojiButton - property bool isHovered: false // TODO: Replace with mouseArea.containsMouse + readonly property bool isHovered: addEmojiButtonMouseArea.containsMouse anchors.left: parent.left anchors.leftMargin: 2.5 @@ -211,8 +177,6 @@ Item { anchors.fill: addEmojiButton cursorShape: Qt.PointingHandCursor hoverEnabled: true - onEntered: addEmojiButton.isHovered = true - onExited: addEmojiButton.isHovered = false onClicked: { root.addEmojiClicked(this, mouse); } diff --git a/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/src/StatusQ/Core/Theme/StatusDarkTheme.qml index c1a228db..fffccc75 100644 --- a/src/StatusQ/Core/Theme/StatusDarkTheme.qml +++ b/src/StatusQ/Core/Theme/StatusDarkTheme.qml @@ -159,8 +159,8 @@ ThemePalette { property QtObject statusMessage: QtObject { property color emojiReactionBackground: "#2d2823" property color emojiReactionBackgroundHovered: "#3a3632" - property color emojiReactionActiveBackground: "#353a4d" - property color emojiReactionActiveBackgroundHovered: "#cbd5f1" + property color emojiReactionActiveBackground: getColor('blue') + property color emojiReactionActiveBackgroundHovered: Qt.darker(emojiReactionActiveBackground, 1.1) } } diff --git a/src/StatusQ/Core/Theme/StatusLightTheme.qml b/src/StatusQ/Core/Theme/StatusLightTheme.qml index 71654154..3534013f 100644 --- a/src/StatusQ/Core/Theme/StatusLightTheme.qml +++ b/src/StatusQ/Core/Theme/StatusLightTheme.qml @@ -157,8 +157,8 @@ ThemePalette { property QtObject statusMessage: QtObject { property color emojiReactionBackground: "#e2e6e9" property color emojiReactionBackgroundHovered: "#d7dadd" - property color emojiReactionActiveBackground: getColor('blue6') - property color emojiReactionActiveBackgroundHovered: "#cbd5f1" + property color emojiReactionActiveBackground: getColor('blue') + property color emojiReactionActiveBackgroundHovered: Qt.darker(emojiReactionActiveBackground, 1.1) } }