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: use StatusTooltip for emoji reaction list

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

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

@ -17,24 +17,42 @@ Item {
return nodes.join(qsTr(" and "));
}
function showReactionAuthors(fromAccounts) {
if (fromAccounts.length < 3)
return lastTwoItems(fromAccounts);
function showReactionAuthors(fromAccounts, emojiId) {
let tooltip
if (fromAccounts.length === 1) {
tooltip = fromAccounts[0]
} else if (fromAccounts.length === 2) {
tooltip = lastTwoItems(fromAccounts);
} else {
var leftNode = [];
var rightNode = [];
const maxReactions = 12
let maximum = Math.min(maxReactions, fromAccounts.length)
var leftNode = [];
var rightNode = [];
if (fromAccounts.length > maxReactions) {
leftNode = fromAccounts.slice(0, maxReactions);
rightNode = fromAccounts.slice(maxReactions, fromAccounts.length);
return (rightNode.length === 1) ?
lastTwoItems([leftNode.join(", "), rightNode[0]]) :
lastTwoItems([leftNode.join(", "), qsTr("%1 more").arg(rightNode.length)]);
}
if (fromAccounts.length > 3) {
leftNode = fromAccounts.slice(0, 3);
rightNode = fromAccounts.slice(3, fromAccounts.length);
return (rightNode.length === 1) ?
lastTwoItems([leftNode.join(", "), rightNode[0]]) :
lastTwoItems([leftNode.join(", "), qsTr("%1 more reacted.").arg(rightNode.length)]);
leftNode = fromAccounts.slice(0, maximum - 1);
rightNode = fromAccounts.slice(maximum - 1, fromAccounts.length);
tooltip = lastTwoItems([leftNode.join(", "), rightNode[0]])
}
leftNode = fromAccounts.slice(0, 2);
rightNode = fromAccounts.slice(2, fromAccounts.length);
return 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 {
@ -55,9 +73,10 @@ Item {
color: modelData.currentUserReacted ? Style.current.secondaryBackground :
(isHovered ? Style.current.emojiReactionBackgroundHovered : Style.current.emojiReactionBackground)
ToolTip {
StatusToolTip {
visible: mouseArea.containsMouse
text: showReactionAuthors(modelData.fromAccounts)
text: showReactionAuthors(modelData.fromAccounts, modelData.emojiId)
width: 400
}
// 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 int emojiId
property bool reactedByUser: false
property bool isHovered: value
property bool isHovered: false
id: root
width: reactionImage.width + Style.current.halfPadding