From 02651326b57033f7f7d2b3c46b057ddc6ed11953 Mon Sep 17 00:00:00 2001 From: Jonathan Rainville Date: Mon, 1 Feb 2021 15:37:50 -0500 Subject: [PATCH] feat: add hover and selected state to the emoji picker --- ui/app/AppLayouts/Chat/ChatColumn/Message.qml | 34 ++++++++++++++++++- .../MessageComponents/CompactMessage.qml | 2 +- .../MessageComponents/EmojiReactions.qml | 33 +----------------- .../MessageComponents/MessageMouseArea.qml | 1 - .../Chat/components/EmojiReaction.qml | 29 +++++++++++++--- .../Chat/components/MessageContextMenu.qml | 12 ++++++- 6 files changed, 70 insertions(+), 41 deletions(-) diff --git a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml index d7a91d4507..83ed798804 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/Message.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/Message.qml @@ -61,6 +61,38 @@ Item { property string profileImageSource: !placeholderMessage && appMain.getProfileImage(userPubKey, isCurrentUser, useLargeImage) || "" + property var emojiReactionsModel: { + if (!emojiReactions) { + return [] + } + + try { + // group by id + var allReactions = Object.values(JSON.parse(emojiReactions)) + var byEmoji = {} + allReactions.forEach(function (reaction) { + if (!byEmoji[reaction.emojiId]) { + byEmoji[reaction.emojiId] = { + emojiId: reaction.emojiId, + fromAccounts: [], + count: 0, + currentUserReacted: false + } + } + byEmoji[reaction.emojiId].count++; + byEmoji[reaction.emojiId].fromAccounts.push(chatsModel.userNameOrAlias(reaction.from)); + if (!byEmoji[reaction.emojiId].currentUserReacted && reaction.from === profileModel.profile.pubKey) { + byEmoji[reaction.emojiId].currentUserReacted = true + } + + }) + return Object.values(byEmoji) + } catch (e) { + console.error('Error parsing emoji reactions', e) + return [] + } + } + Connections { enabled: !placeholderMessage target: profileModel.contacts.list @@ -96,7 +128,7 @@ Item { messageContextMenu.isProfile = !!isProfileClick messageContextMenu.isSticker = isSticker messageContextMenu.emojiOnly = emojiOnly - messageContextMenu.show(userName, fromAuthor, root.profileImageSource || identicon, "", nickname) + messageContextMenu.show(userName, fromAuthor, root.profileImageSource || identicon, "", nickname, emojiReactionsModel) // Position the center of the menu where the mouse is messageContextMenu.x = messageContextMenu.x - messageContextMenu.width / 2 } diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml index a68623b9d5..9f11c66993 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml @@ -248,7 +248,7 @@ Item { Loader { id: emojiReactionLoader - active: emojiReactions !== "" + active: emojiReactionsModel.length anchors.bottom: messageContainer.bottom anchors.bottomMargin: Style.current.smallPadding anchors.left: messageContainer.left diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/EmojiReactions.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/EmojiReactions.qml index d53754d4bb..1fca5c6459 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/EmojiReactions.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/EmojiReactions.qml @@ -43,38 +43,7 @@ Item { Repeater { id: reactionRepeater width: childrenRect.width - model: { - if (!emojiReactions) { - return [] - } - - try { - // group by id - var allReactions = Object.values(JSON.parse(emojiReactions)) - var byEmoji = {} - allReactions.forEach(function (reaction) { - if (!byEmoji[reaction.emojiId]) { - byEmoji[reaction.emojiId] = { - emojiId: reaction.emojiId, - fromAccounts: [], - count: 0, - currentUserReacted: false - } - } - byEmoji[reaction.emojiId].count++; - byEmoji[reaction.emojiId].fromAccounts.push(chatsModel.userNameOrAlias(reaction.from)); - if (!byEmoji[reaction.emojiId].currentUserReacted && reaction.from === profileModel.profile.pubKey) { - byEmoji[reaction.emojiId].currentUserReacted = true - } - - }) - return Object.values(byEmoji) - } catch (e) { - console.error('Error parsing emoji reactions', e) - return [] - } - - } + model: emojiReactionsModel Rectangle { property bool isHovered: false diff --git a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml index e9745f563c..8bbc1fde67 100644 --- a/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml +++ b/ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml @@ -17,4 +17,3 @@ MouseArea { } } } - diff --git a/ui/app/AppLayouts/Chat/components/EmojiReaction.qml b/ui/app/AppLayouts/Chat/components/EmojiReaction.qml index 439f0fc8b1..38bf2701cb 100644 --- a/ui/app/AppLayouts/Chat/components/EmojiReaction.qml +++ b/ui/app/AppLayouts/Chat/components/EmojiReaction.qml @@ -2,19 +2,38 @@ import QtQuick 2.13 import "../../../../imports" import "../../../../shared" -SVGImage { +Rectangle { + property alias source: reactionImage.source property var closeModal: function () {} property int emojiId - id: reactionImage - width: 32 - fillMode: Image.PreserveAspectFit + property bool reactedByUser: false + property bool isHovered: value + + id: root + width: reactionImage.width + Style.current.halfPadding + height: width + color: reactedByUser ? Style.current.secondaryBackground : + (isHovered ? Style.current.backgroundHover : Style.current.transparent) + border.width: reactedByUser ? 1 : 0 + border.color: Style.current.borderTertiary + radius: Style.current.radius + + SVGImage { + id: reactionImage + width: 32 + fillMode: Image.PreserveAspectFit + anchors.centerIn: parent + } MouseArea { anchors.fill: parent cursorShape: Qt.PointingHandCursor + hoverEnabled: !reactedByUser + onEntered: root.isHovered = true + onExited: root.isHovered = false onClicked: { chatsModel.toggleReaction(SelectedMessage.messageId, emojiId) - reactionImage.closeModal() + root.closeModal() } } } diff --git a/ui/app/AppLayouts/Chat/components/MessageContextMenu.qml b/ui/app/AppLayouts/Chat/components/MessageContextMenu.qml index 644f25886c..b6e2dfa192 100644 --- a/ui/app/AppLayouts/Chat/components/MessageContextMenu.qml +++ b/ui/app/AppLayouts/Chat/components/MessageContextMenu.qml @@ -20,13 +20,22 @@ PopupMenu { property string nickname: "" property var fromAuthor: "" property var text: "" + property var emojiReactionsReactedByUser: [] - function show(userNameParam, fromAuthorParam, identiconParam, textParam, nicknameParam) { + function show(userNameParam, fromAuthorParam, identiconParam, textParam, nicknameParam, emojiReactionsModel) { userName = userNameParam || "" nickname = nicknameParam || "" fromAuthor = fromAuthorParam || "" identicon = identiconParam || "" text = textParam || "" + let newEmojiReactions = [] + if (!!emojiReactionsModel) { + emojiReactionsModel.forEach(function (emojiReaction) { + newEmojiReactions[emojiReaction.emojiId] = emojiReaction.currentUserReacted + }) + } + emojiReactionsReactedByUser = newEmojiReactions + popup(); } @@ -48,6 +57,7 @@ PopupMenu { delegate: EmojiReaction { source: "../../../img/" + filename emojiId: model.emojiId + reactedByUser: !!messageContextMenu.emojiReactionsReactedByUser[model.emojiId] closeModal: function () { messageContextMenu.close() }