feat: add hover and selected state to the emoji picker

This commit is contained in:
Jonathan Rainville 2021-02-01 15:37:50 -05:00 committed by Iuri Matias
parent c665861820
commit 02651326b5
6 changed files with 70 additions and 41 deletions

View File

@ -61,6 +61,38 @@ Item {
property string profileImageSource: !placeholderMessage && appMain.getProfileImage(userPubKey, isCurrentUser, useLargeImage) || "" 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 { Connections {
enabled: !placeholderMessage enabled: !placeholderMessage
target: profileModel.contacts.list target: profileModel.contacts.list
@ -96,7 +128,7 @@ Item {
messageContextMenu.isProfile = !!isProfileClick messageContextMenu.isProfile = !!isProfileClick
messageContextMenu.isSticker = isSticker messageContextMenu.isSticker = isSticker
messageContextMenu.emojiOnly = emojiOnly 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 // Position the center of the menu where the mouse is
messageContextMenu.x = messageContextMenu.x - messageContextMenu.width / 2 messageContextMenu.x = messageContextMenu.x - messageContextMenu.width / 2
} }

View File

@ -248,7 +248,7 @@ Item {
Loader { Loader {
id: emojiReactionLoader id: emojiReactionLoader
active: emojiReactions !== "" active: emojiReactionsModel.length
anchors.bottom: messageContainer.bottom anchors.bottom: messageContainer.bottom
anchors.bottomMargin: Style.current.smallPadding anchors.bottomMargin: Style.current.smallPadding
anchors.left: messageContainer.left anchors.left: messageContainer.left

View File

@ -43,38 +43,7 @@ Item {
Repeater { Repeater {
id: reactionRepeater id: reactionRepeater
width: childrenRect.width width: childrenRect.width
model: { model: 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 []
}
}
Rectangle { Rectangle {
property bool isHovered: false property bool isHovered: false

View File

@ -17,4 +17,3 @@ MouseArea {
} }
} }
} }

View File

@ -2,19 +2,38 @@ import QtQuick 2.13
import "../../../../imports" import "../../../../imports"
import "../../../../shared" import "../../../../shared"
SVGImage { Rectangle {
property alias source: reactionImage.source
property var closeModal: function () {} property var closeModal: function () {}
property int emojiId property int emojiId
id: reactionImage property bool reactedByUser: false
width: 32 property bool isHovered: value
fillMode: Image.PreserveAspectFit
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 { MouseArea {
anchors.fill: parent anchors.fill: parent
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
hoverEnabled: !reactedByUser
onEntered: root.isHovered = true
onExited: root.isHovered = false
onClicked: { onClicked: {
chatsModel.toggleReaction(SelectedMessage.messageId, emojiId) chatsModel.toggleReaction(SelectedMessage.messageId, emojiId)
reactionImage.closeModal() root.closeModal()
} }
} }
} }

View File

@ -20,13 +20,22 @@ PopupMenu {
property string nickname: "" property string nickname: ""
property var fromAuthor: "" property var fromAuthor: ""
property var text: "" property var text: ""
property var emojiReactionsReactedByUser: []
function show(userNameParam, fromAuthorParam, identiconParam, textParam, nicknameParam) { function show(userNameParam, fromAuthorParam, identiconParam, textParam, nicknameParam, emojiReactionsModel) {
userName = userNameParam || "" userName = userNameParam || ""
nickname = nicknameParam || "" nickname = nicknameParam || ""
fromAuthor = fromAuthorParam || "" fromAuthor = fromAuthorParam || ""
identicon = identiconParam || "" identicon = identiconParam || ""
text = textParam || "" text = textParam || ""
let newEmojiReactions = []
if (!!emojiReactionsModel) {
emojiReactionsModel.forEach(function (emojiReaction) {
newEmojiReactions[emojiReaction.emojiId] = emojiReaction.currentUserReacted
})
}
emojiReactionsReactedByUser = newEmojiReactions
popup(); popup();
} }
@ -48,6 +57,7 @@ PopupMenu {
delegate: EmojiReaction { delegate: EmojiReaction {
source: "../../../img/" + filename source: "../../../img/" + filename
emojiId: model.emojiId emojiId: model.emojiId
reactedByUser: !!messageContextMenu.emojiReactionsReactedByUser[model.emojiId]
closeModal: function () { closeModal: function () {
messageContextMenu.close() messageContextMenu.close()
} }