status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
ui/app/AppLayouts/Chat/ChatColumn/Message.qml
View File

@ -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
}

2
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/CompactMessage.qml
View File

@ -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

33
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/EmojiReactions.qml
View File

@ -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

1
ui/app/AppLayouts/Chat/ChatColumn/MessageComponents/MessageMouseArea.qml
View File

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

29
ui/app/AppLayouts/Chat/components/EmojiReaction.qml
View File

@ -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()
}
}
}

12
ui/app/AppLayouts/Chat/components/MessageContextMenu.qml
View File

@ -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()
}