Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Deleted message #12804

Merged
merged 1 commit into from
Nov 23, 2023
Merged

Add Deleted message #12804

merged 1 commit into from
Nov 23, 2023

Conversation

jrainville
Copy link
Member

Fixes #11712

Adds a little message when someone deletes a message and shows who deleted.

Do note: there is no Desktop design for this, so I just copied the mobile design. We can modify it once we have an actual design.

delete.webm
^user on the left, group admin on the right (he can delete other people's messages)

@status-im-auto
Copy link
Member

status-im-auto commented Nov 20, 2023

Jenkins Builds

Click to see older builds (21)
Commit #️⃣ Finished (UTC) Duration Platform Result
✖️ 20fbeb0 #1 2023-11-20 21:26:57 ~5 min tests/nim 📄log
✔️ 20fbeb0 #1 2023-11-20 21:29:13 ~7 min macos/aarch64 🍎dmg
✔️ 20fbeb0 #1 2023-11-20 21:32:20 ~10 min macos/x86_64 🍎dmg
✔️ 20fbeb0 #1 2023-11-20 21:33:57 ~12 min tests/ui 📄log
✔️ 20fbeb0 #1 2023-11-20 21:37:48 ~15 min linux/x86_64 📦tgz
✔️ 20fbeb0 #1 2023-11-20 21:55:27 ~33 min windows/x86_64 💿exe
✖️ 20fbeb0 #1 2023-11-20 21:55:54 ~34 min tests/e2e 📄log
✖️ 83458bf #2 2023-11-21 16:06:29 ~6 min tests/nim 📄log
✔️ 83458bf #2 2023-11-21 16:08:44 ~8 min macos/aarch64 🍎dmg
✔️ 83458bf #2 2023-11-21 16:09:08 ~8 min macos/x86_64 🍎dmg
✔️ 83458bf #2 2023-11-21 16:15:26 ~15 min tests/ui 📄log
✔️ 83458bf #2 2023-11-21 16:16:22 ~16 min linux/x86_64 📦tgz
✖️ 83458bf #2 2023-11-21 16:27:34 ~27 min tests/e2e 📄log
✔️ 83458bf #2 2023-11-21 16:28:50 ~28 min windows/x86_64 💿exe
✔️ 46c9150 #4 2023-11-22 19:22:44 ~5 min tests/nim 📄log
✔️ 46c9150 #4 2023-11-22 19:24:24 ~7 min macos/aarch64 🍎dmg
✔️ 46c9150 #4 2023-11-22 19:27:13 ~10 min tests/ui 📄log
✔️ 46c9150 #4 2023-11-22 19:27:51 ~10 min macos/x86_64 🍎dmg
✔️ 46c9150 #4 2023-11-22 19:34:20 ~17 min linux/x86_64 📦tgz
46c9150 #4 2023-11-22 19:42:58 ~25 min windows/x86_64 📄log
✖️ 46c9150 #4 2023-11-22 19:48:47 ~31 min tests/e2e 📄log
Commit #️⃣ Finished (UTC) Duration Platform Result
✔️ da119d2 #5 2023-11-22 20:12:47 ~4 min macos/aarch64 🍎dmg
✔️ da119d2 #5 2023-11-22 20:13:57 ~5 min tests/nim 📄log
✔️ da119d2 #5 2023-11-22 20:18:37 ~10 min macos/x86_64 🍎dmg
da119d2 #5 2023-11-22 20:23:48 ~15 min windows/x86_64 📄log
da119d2 #5 2023-11-22 20:42:29 ~34 min tests/ui 📄log
✖️ da119d2 #5 2023-11-22 20:57:20 ~49 min tests/e2e 📄log
✔️ da119d2 #6 2023-11-22 21:34:15 ~42 min tests/ui 📄log
✖️ da119d2 #6 2023-11-22 21:40:10 ~33 min tests/e2e 📄log
✔️ 21c50c7 #6 2023-11-23 16:18:43 ~5 min macos/aarch64 🍎dmg
✔️ 21c50c7 #6 2023-11-23 16:21:03 ~7 min tests/nim 📄log
✔️ 21c50c7 #6 2023-11-23 16:22:29 ~8 min macos/x86_64 🍎dmg
✔️ 21c50c7 #7 2023-11-23 16:25:36 ~11 min tests/ui 📄log
✖️ 21c50c7 #7 2023-11-23 16:38:12 ~24 min tests/e2e 📄log
✔️ 21c50c7 #6 2023-11-23 16:41:35 ~27 min windows/x86_64 💿exe
✖️ 21c50c7 #8 2023-11-23 17:46:37 ~22 min tests/e2e 📄log
✔️ 21c50c7 #9 2023-11-23 19:19:02 ~1 hr 9 min tests/e2e 📄log

Copy link
Contributor

@alexjba alexjba left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Nice work! 😄

One finding on the deleted indicator opacity. The color alpha works much better.

Screenshot 2023-11-21 at 17 04 26

opacity: 0.1
Layout.alignment: Qt.AlignVCenter

StatusIcon {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks to me like the mobile icon opacity is 1. Or at least greater that 0.1
The mobile design looks better 😄

Screenshot 2023-11-21 at 16 44 43 Screenshot 2023-11-21 at 16 50 51

Comment on lines 502 to 503
color: Theme.palette.dangerColor1
opacity: 0.1
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
color: Theme.palette.dangerColor1
opacity: 0.1
color: Theme.palette.dangerColor3

@jrainville
Copy link
Member Author

@alexjba nice eye. I did find that my icon was hard to see. I forgot that setting opacity on a parent also affects the children 🤦


# messages are sorted from the most recent to the least recent one
viewItems.add(item)
var viewItems = self.createMessageItemsFromMessageDtos(messages, reactions)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❤️

Component {
id: deletedMessageComponent

ColumnLayout {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This ColumnLayout seems redundant

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe I'm just a QML noob, but without it, the Layout. properties in the RowLayout didn't work. I think it's because the parent of deletedMessageComponent's Loader is not a Layout.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah... it's weird to have Loader as the toplevel item, you never know in which context the component ends up being used

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok I see, it indeed will do the trick here. It's not right, but shouldn't hurt, so I guess we can keep it as it will be rewritten anyway 🙂


RowLayout {
id: deletedMessage
height: 40
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we shouldn't set height here, it should be calculated automatically based on content size and given margins.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component is meant to be removed/refactored by actual good UI devs when we get a design someday 😅

}

Rectangle {
width: deletedMessage.height
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be either implicit... or Layout.preferred..., it's wrong to set width/height for items inside a Layout.
Same for items below

Comment on lines +240 to +244
if result.deleted and result.deletedBy == "":
# The message was deleted by the sender itself
result.deletedBy = result.`from`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the following code needed then 🤔

if deletedBy == "":
# deletedBy is empty if it was deleted by the sender
let messageItem = self.view.model().getItemWithMessageId(messageId)
if messageItem.id == "":
return
deletedByValue = messageItem.senderId

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, because that code in onMessageDeleted is called from a status-go signal that only contains the messageID, the chatID and possibly the deletedBy (see RemovedMessageDto).

@jrainville jrainville merged commit d66540d into master Nov 23, 2023
7 of 8 checks passed
@jrainville jrainville deleted the feat/deleted-system-message branch November 23, 2023 21:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Chat -> Deleted messages UI representation is missing
6 participants