Skip to content

Commit 0afba7d

Browse files
caybrocaybro
committed
fix: improve emoji actions and other chat popups
- StatusMessageEmojiReactions: update according to the latest Figma designs, simplify the `showReactionAuthors()` function - StatusMessage: disable the hover quick actions on mobile; the context menu works much better and has the same actions (including the emoji quick reactions) - StatusTextMessage: make it `enabled: false` in order to support the long-press context menu on mobile - MessageView: streamline context menus opening that works with both mouse and touch - WalletAccountHeader: support fallback account icons (non-emojis) - RenameAccountModal: fix changing the emoji of an existing wallet account - removed some unused properties - update and fixed the relevant SB pages - do no use hardcoded margins/paddings - fix some QML warnings Fixes #19328 Fixes #19327 Iterates: #19199
1 parent 395c3ca commit 0afba7d

File tree

15 files changed

+132
-151
lines changed

15 files changed

+132
-151
lines changed

‎storybook/pages/StatusEmojiPopupPage.qml‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import QtQuick
44
import QtQuick.Controls
55
import QtQuick.Layouts
66

7+
import StatusQ
78
import StatusQ.Core.Theme
89
import StatusQ.Core.Utils as StatusQUtils
910

@@ -21,6 +22,7 @@ SplitView {
2122
QtObject {
2223
id: d
2324
property string lastSelectedEmoji: "N/A"
25+
property string lastSelectedEmojiHexcode: ""
2426
}
2527

2628
Pane {
@@ -62,6 +64,7 @@ SplitView {
6264
onEmojiSelected: function(emoji, atCu, hexcode) {
6365
logs.logEvent("onEmojiSelected", ["emoji", "atCu", "hexcode"], arguments)
6466
d.lastSelectedEmoji = emoji
67+
d.lastSelectedEmojiHexcode = hexcode
6568
}
6669
}
6770
}
@@ -79,14 +82,26 @@ SplitView {
7982
text: "Clear settings (reload to take effect)"
8083
onClicked: {
8184
d.lastSelectedEmoji = ""
85+
d.lastSelectedEmojiHexcode = ""
8286
settings.recentEmojis = []
8387
settings.skinColor = ""
8488
settings.sync()
8589
}
8690
}
8791

88-
Label {
89-
text: "Last selected: %1 ('%2')".arg(d.lastSelectedEmoji).arg(settings.recentEmojis[0] ?? "")
92+
RowLayout {
93+
Label {
94+
text: "Last selected: %1 ('%2')".arg(d.lastSelectedEmoji).arg(d.lastSelectedEmojiHexcode)
95+
}
96+
ToolButton {
97+
Layout.preferredWidth: 32
98+
Layout.preferredHeight: 32
99+
text: "📋"
100+
enabled: !!d.lastSelectedEmojiHexcode
101+
onClicked: ClipboardUtils.setText(d.lastSelectedEmojiHexcode)
102+
ToolTip.text: "Copy to clipboard"
103+
ToolTip.visible: hovered
104+
}
90105
}
91106

92107
Button {

‎storybook/pages/StatusMessagePage.qml‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ SplitView {
2323
readonly property var reactionsModels: ReactionsModels {}
2424

2525
readonly property var messageWithThreeReactions: [{
26-
timestamp: 1667937830123,
26+
timestamp: new Date().valueOf(),
2727
senderId: "zq123456790",
2828
senderDisplayName: "Alice",
2929
contentType: StatusMessage.ContentType.Text,
30-
message: "This message has 3 reactions",
30+
message: "This message has 3 reactions and should have current timestamp",
3131
isContact: true,
3232
isAReply: false,
3333
trustIndicator: StatusContactVerificationIcons.TrustedType.None,
@@ -39,7 +39,7 @@ SplitView {
3939
senderId: "zq123456790",
4040
senderDisplayName: "Alice",
4141
contentType: StatusMessage.ContentType.Text,
42-
message: "This message has 20 reactions",
42+
message: "This message has 20 reactions (max)",
4343
isContact: true,
4444
isAReply: false,
4545
trustIndicator: StatusContactVerificationIcons.TrustedType.None,
@@ -265,19 +265,20 @@ SplitView {
265265
sender.isEnsVerified: isEnsVerified
266266
sender.profileImage {
267267
name: model.profileImage || ""
268-
colorId: index
268+
colorId: index % Theme.palette.userCustomizationColors.length
269269
}
270270
album: model.contentType === StatusMessage.ContentType.Image ? d.exampleAlbum : []
271271
albumCount: model.contentType === StatusMessage.ContentType.Image ? d.exampleAlbum.length : 0
272272
}
273273

274274
replyDetails {
275-
amISender: true
275+
amISender: index % 2
276276
sender.id: "0xdeadbeef"
277+
sender.displayName: "Foobar"
277278
sender.profileImage {
278279
width: 20
279280
height: 20
280-
name: ModelsData.icons.dribble
281+
name: index % 2 ? ModelsData.icons.dribble : ModelsData.icons.socks
281282
}
282283
messageText: ModelsData.descriptions.mediumLoremIpsum
283284
}
@@ -289,6 +290,8 @@ SplitView {
289290
onResendClicked: logs.logEvent("StatusMessage::resendClicked")
290291
onLinkActivated: logs.logEvent("StatusMessage::linkActivated", ["link"], arguments)
291292
onImageClicked: logs.logEvent("StatusMessage::imageClicked")
293+
onAddReactionClicked: logs.logEvent("StatusMessage::addReactionClicked")
294+
onToggleReactionClicked: logs.logEvent("StatusMessage::toggleReactionClicked", ["hexcode"], arguments)
292295
}
293296
}
294297
}

‎storybook/src/Models/ReactionsModels.qml‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,150 +1,147 @@
1-
import QtQuick
2-
1+
import QtQml
32

43
QtObject {
54
readonly property var threeReactions: [
65
{
7-
emoji: "😄",
6+
emoji: "1f600",
87
didIReactWithThisEmoji: true,
98
numberOfReactions: 1,
109
jsonArrayOfUsersReactedWithThisEmoji: "[\"You\"]"
1110
},
1211
{
13-
emoji: "🕵️‍♀",
12+
emoji: "1f575-fe0f-200d-2642-fe0f",
1413
didIReactWithThisEmoji: false,
1514
numberOfReactions: 2,
1615
jsonArrayOfUsersReactedWithThisEmoji: "[\"Bob\", \"John\"]"
1716
},
1817
{
19-
emoji: "😂",
18+
emoji: "1f602",
2019
didIReactWithThisEmoji: true,
2120
numberOfReactions: 5,
2221
jsonArrayOfUsersReactedWithThisEmoji: "[\"You\", \"Sally\", \"Tom\", \"Eve\", \"Raj\"]"
2322
}
24-
2523
]
24+
2625
readonly property var twentyReactions: [
2726
{
28-
emoji: "😄",
27+
emoji: "1f604",
2928
didIReactWithThisEmoji: true,
3029
numberOfReactions: 1,
3130
jsonArrayOfUsersReactedWithThisEmoji: "[\"You\"]"
3231
},
3332
{
34-
emoji: "🕵️‍♀",
33+
emoji: "1fae3",
3534
didIReactWithThisEmoji: false,
36-
numberOfReactions: 232,
35+
numberOfReactions: 23,
3736
jsonArrayOfUsersReactedWithThisEmoji: "[\"Bob\", \"John\"]"
3837
},
3938
{
40-
emoji: "😂",
39+
emoji: "1f602",
4140
didIReactWithThisEmoji: true,
4241
numberOfReactions: 5,
4342
jsonArrayOfUsersReactedWithThisEmoji: "[\"You\", \"Sally\", \"Tom\", \"Eve\", \"Raj\"]"
4443
},
4544
{
46-
emoji: "❤️",
45+
emoji: "2764",
4746
didIReactWithThisEmoji: false,
4847
numberOfReactions: 8,
4948
jsonArrayOfUsersReactedWithThisEmoji: "[\"Mia\", \"Noah\", \"Liam\", \"Olivia\", \"Ava\", \"Emma\", \"Lucas\", \"Zoe\"]"
5049
},
5150
{
52-
emoji: "👍",
51+
emoji: "1f44d",
5352
didIReactWithThisEmoji: true,
5453
numberOfReactions: 3,
5554
jsonArrayOfUsersReactedWithThisEmoji: "[\"You\", \"Ben\", \"Claire\"]"
5655
},
5756
{
58-
emoji: "🎉",
57+
emoji: "1f389",
5958
didIReactWithThisEmoji: false,
60-
numberOfReactions: 4,
61-
jsonArrayOfUsersReactedWithThisEmoji: "[\"Ivy\", \"Ken\", \"Lara\", \"Omar\"]"
59+
numberOfReactions: 16,
60+
jsonArrayOfUsersReactedWithThisEmoji: "[\"Mia\", \"Noah\", \"Liam\", \"Olivia\", \"Ava\", \"Emma\", \"Lucas\", \"Zoe\", \"Mia\", \"Noah\", \"Liam\", \"Olivia\", \"Ava\", \"Emma\", \"Lucas\", \"Zoe\"]"
6261
},
6362
{
64-
emoji: "😮",
63+
emoji: "1f62e",
6564
didIReactWithThisEmoji: false,
6665
numberOfReactions: 1,
6766
jsonArrayOfUsersReactedWithThisEmoji: "[\"Zed\"]"
6867
},
6968
{
70-
emoji: "😢",
69+
emoji: "1f972",
7170
didIReactWithThisEmoji: false,
7271
numberOfReactions: 2,
7372
jsonArrayOfUsersReactedWithThisEmoji: "[\"Martha\", \"Gus\"]"
7473
},
7574
{
76-
emoji: "🔥",
75+
emoji: "1f525",
7776
didIReactWithThisEmoji: true,
7877
numberOfReactions: 6,
7978
jsonArrayOfUsersReactedWithThisEmoji: "[\"You\", \"Alex\", \"Sam\", \"Nina\", \"Pax\", \"Rae\"]"
8079
},
8180
{
82-
emoji: "🙏",
81+
emoji: "1f64f",
8382
didIReactWithThisEmoji: false,
8483
numberOfReactions: 2,
8584
jsonArrayOfUsersReactedWithThisEmoji: "[\"Hana\", \"Ike\"]"
8685
},
8786
{
88-
emoji: "😅",
87+
emoji: "1f917",
8988
didIReactWithThisEmoji: true,
9089
numberOfReactions: 2,
9190
jsonArrayOfUsersReactedWithThisEmoji: "[\"You\", \"Pete\"]"
9291
},
9392
{
94-
emoji: "😎",
93+
emoji: "1f636-200d-1f32b-fe0f",
9594
didIReactWithThisEmoji: false,
9695
numberOfReactions: 3,
9796
jsonArrayOfUsersReactedWithThisEmoji: "[\"Ruth\", \"Vik\", \"Jill\"]"
9897
},
9998
{
100-
emoji: "🤔",
99+
emoji: "1f914",
101100
didIReactWithThisEmoji: false,
102101
numberOfReactions: 1,
103102
jsonArrayOfUsersReactedWithThisEmoji: "[\"Oli\"]"
104103
},
105104
{
106-
emoji: "🤯",
105+
emoji: "1f92f",
107106
didIReactWithThisEmoji: true,
108107
numberOfReactions: 7,
109108
jsonArrayOfUsersReactedWithThisEmoji: "[\"You\", \"Abe\", \"Maya\", \"Noel\", \"Cory\", \"Lina\", \"Zara\"]"
110109
},
111110
{
112-
emoji: "🎶",
111+
emoji: "1f3b6",
113112
didIReactWithThisEmoji: false,
114113
numberOfReactions: 2,
115114
jsonArrayOfUsersReactedWithThisEmoji: "[\"Tess\", \"Bea\"]"
116115
},
117116
{
118-
emoji: "💯",
117+
emoji: "1f4af",
119118
didIReactWithThisEmoji: true,
120119
numberOfReactions: 9,
121120
jsonArrayOfUsersReactedWithThisEmoji: "[\"You\", \"Gabe\", \"Rin\", \"Seth\", \"Moe\", \"Luz\", \"Ira\", \"Noa\", \"Pam\"]"
122121
},
123122
{
124-
emoji: "👀",
123+
emoji: "1f440",
125124
didIReactWithThisEmoji: false,
126125
numberOfReactions: 1,
127126
jsonArrayOfUsersReactedWithThisEmoji: "[\"Kai\"]"
128127
},
129128
{
130-
emoji: "😜",
129+
emoji: "1f609",
131130
didIReactWithThisEmoji: true,
132131
numberOfReactions: 3,
133132
jsonArrayOfUsersReactedWithThisEmoji: "[\"You\", \"Dot\", \"Max\"]"
134133
},
135134
{
136-
emoji: "🥳",
135+
emoji: "1f973",
137136
didIReactWithThisEmoji: false,
138137
numberOfReactions: 4,
139138
jsonArrayOfUsersReactedWithThisEmoji: "[\"June\", \"Fay\", \"Roy\", \"Skye\"]"
140139
},
141140
{
142-
emoji: "🤝",
141+
emoji: "1f37b",
143142
didIReactWithThisEmoji: false,
144-
numberOfReactions: 2,
143+
numberOfReactions: 123456789,
145144
jsonArrayOfUsersReactedWithThisEmoji: "[\"Ivy\", \"Omar\"]"
146145
}
147-
148146
]
149-
// Component.onCompleted: append(data)
150147
}

‎ui/StatusQ/src/StatusQ/Components/StatusMessage.qml‎

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,6 @@ Control {
102102
signal linkActivated(string link)
103103

104104
signal hoverChanged(string messageId, bool hovered)
105-
signal activeChanged(string messageId, bool active)
106105

107106
function startMessageFoundAnimation() {
108107
messageFoundAnimation.restart();
@@ -216,16 +215,16 @@ Control {
216215
objectName: "StatusMessage_replyDetails"
217216
replyDetails: root.replyDetails
218217
profileClickable: root.profileClickable
219-
onReplyProfileClicked: root.replyProfileClicked(sender, mouse)
220-
onMessageClicked: root.replyMessageClicked(mouse)
218+
onReplyProfileClicked: (sender, mouse) => root.replyProfileClicked(sender, mouse)
219+
onMessageClicked: mouse => root.replyMessageClicked(mouse)
221220
}
222221
}
223222

224223
RowLayout {
225224
Layout.fillWidth: true
226-
Layout.leftMargin: 16
227-
Layout.rightMargin: 16
228-
spacing: 8
225+
Layout.leftMargin: Theme.padding
226+
Layout.rightMargin: Theme.padding
227+
spacing: Theme.halfPadding
229228

230229
StatusUserImage {
231230
id: profileImage
@@ -290,9 +289,7 @@ Control {
290289
highlightedLink: root.highlightedLink
291290
linkAddressAndEnsName: root.linkAddressAndEnsName
292291
disabledTooltipText: root.disabledTooltipText
293-
onLinkActivated: {
294-
root.linkActivated(link);
295-
}
292+
onLinkActivated: link => root.linkActivated(link)
296293
textField.onHoveredLinkChanged: {
297294
root.hoveredLink = hoveredLink;
298295
}
@@ -305,7 +302,7 @@ Control {
305302

306303
sourceComponent: Column {
307304
id: imagesColumn
308-
spacing: 8
305+
spacing: Theme.halfPadding
309306
Loader {
310307
active: root.messageDetails.messageText !== ""
311308
anchors.left: parent.left
@@ -318,9 +315,7 @@ Control {
318315
allowShowMore: !root.isInPinnedPopup
319316
textField.anchors.rightMargin: root.isInPinnedPopup ? Theme.xlPadding : 0 // margin for the "Unpin" floating button
320317
highlightedLink: root.highlightedLink
321-
onLinkActivated: {
322-
root.linkActivated(link);
323-
}
318+
onLinkActivated: link => root.linkActivated(link)
324319
}
325320
}
326321

@@ -349,7 +344,7 @@ Control {
349344
model: attachmentsModel
350345
delegate: StatusImageMessage {
351346
source: model.source
352-
onClicked: root.imageClicked(image, mouse, imageSource)
347+
onClicked: (image, mouse, imageSource) => root.imageClicked(image, mouse, imageSource)
353348
shapeType: StatusImageMessage.ShapeType.LEFT_ROUNDED
354349
}
355350
}
@@ -404,7 +399,6 @@ Control {
404399

405400
onHoverChanged: (hovered) => root.hoverChanged(messageId, hovered)
406401

407-
isCurrentUser: root.messageDetails.amISender
408402
onAddEmojiClicked: (sender, mouse) => root.addReactionClicked(sender, mouse)
409403
onToggleReaction: (hexcode) => root.toggleReactionClicked(hexcode)
410404
}
@@ -413,8 +407,11 @@ Control {
413407
}
414408
}
415409

410+
// TODO remove me completely? literally the same as MessageContextMenuView, and overlaps the message text
416411
Loader {
417412
active: root.hovered && root.quickActions.length > 0
413+
&& !Utils.isMobile // hover menu disabled on mobile; we use the MessageContextMenuView
414+
visible: active
418415
anchors.right: parent.right
419416
anchors.rightMargin: Theme.padding
420417
anchors.top: parent.top

0 commit comments

Comments
 (0)