status-im/status-desktop
2
0
Fork 0
mirror of https://github.com/status-im/status-desktop.git synced 2025-02-20 02:28:56 +00:00
Code Issues Projects Releases Wiki Activity

feat: use StatusTooltip for emoji reaction list

Browse Source
This commit is contained in:
Jonathan Rainville 2021-02-02 11:24:45 -05:00 committed by Iuri Matias
parent 984133ba4a
commit 55920a4f9d
2 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,24 +17,42 @@ Item {
return nodes.join(qsTr(" and ")); return nodes.join(qsTr(" and "));
} }
function showReactionAuthors(fromAccounts) { function showReactionAuthors(fromAccounts, emojiId) {
if (fromAccounts.length < 3) let tooltip
return lastTwoItems(fromAccounts); if (fromAccounts.length === 1) {
tooltip = fromAccounts[0]
} else if (fromAccounts.length === 2) {
tooltip = lastTwoItems(fromAccounts);
} else {
var leftNode = []; var leftNode = [];
var rightNode = []; var rightNode = [];
const maxReactions = 12
let maximum = Math.min(maxReactions, fromAccounts.length)
if (fromAccounts.length > 3) { if (fromAccounts.length > maxReactions) {
leftNode = fromAccounts.slice(0, 3); leftNode = fromAccounts.slice(0, maxReactions);
rightNode = fromAccounts.slice(3, fromAccounts.length); rightNode = fromAccounts.slice(maxReactions, fromAccounts.length);
return (rightNode.length === 1) ? return (rightNode.length === 1) ?
lastTwoItems([leftNode.join(", "), rightNode[0]]) : lastTwoItems([leftNode.join(", "), rightNode[0]]) :
lastTwoItems([leftNode.join(", "), qsTr("%1 more reacted.").arg(rightNode.length)]); lastTwoItems([leftNode.join(", "), qsTr("%1 more").arg(rightNode.length)]);
} }
leftNode = fromAccounts.slice(0, 2); leftNode = fromAccounts.slice(0, maximum - 1);
rightNode = fromAccounts.slice(2, fromAccounts.length); rightNode = fromAccounts.slice(maximum - 1, fromAccounts.length);
return lastTwoItems([leftNode.join(", "), rightNode[0]]); tooltip = lastTwoItems([leftNode.join(", "), rightNode[0]])
}
tooltip += qsTr(" reacted with ");
switch (emojiId) {
case 1: return tooltip + ":heart:"
case 2: return tooltip + ":thumbsup:"
case 3: return tooltip + ":thumbsdown:"
case 4: return tooltip + ":laughing:"
case 5: return tooltip + ":cry:"
case 6: return tooltip + ":angry:"
default: return tooltip
}
} }
Row { Row {
@ -55,9 +73,10 @@ Item {
color: modelData.currentUserReacted ? Style.current.secondaryBackground : color: modelData.currentUserReacted ? Style.current.secondaryBackground :
(isHovered ? Style.current.emojiReactionBackgroundHovered : Style.current.emojiReactionBackground) (isHovered ? Style.current.emojiReactionBackgroundHovered : Style.current.emojiReactionBackground)
ToolTip { StatusToolTip {
visible: mouseArea.containsMouse visible: mouseArea.containsMouse
text: showReactionAuthors(modelData.fromAccounts) text: showReactionAuthors(modelData.fromAccounts, modelData.emojiId)
width: 400
} }
// Rounded corner to cover one corner // Rounded corner to cover one corner

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

@ -7,7 +7,7 @@ Rectangle {
property var closeModal: function () {} property var closeModal: function () {}
property int emojiId property int emojiId
property bool reactedByUser: false property bool reactedByUser: false
property bool isHovered: value property bool isHovered: false
id: root id: root
width: reactionImage.width + Style.current.halfPadding width: reactionImage.width + Style.current.halfPadding