dappros / ethora

A 'super app' engine for your project. React Native (iOS, Android) and React.js (Web, desktop). Social Sign In 🄵, Messaging 💬 (chat, voice, push notifications), Web3 Wallet 🪪 (profile QR, documents, coins, NFT), DLT 🔐 (provenance, crypto signing), Gamification 🤩, Social Commerce and more.
https://ethora.com/
GNU Affero General Public License v3.0
395 stars 74 forks source link

Mobile - Message interaction menu #517

Open phwizard opened 8 months ago

phwizard commented 8 months ago

Let's update the Message Interaction according to the new design.

Notes:

Screenshot 2023-11-01 at 05 37 08
dzinzyura commented 7 months ago

@polipivnenko fyi previous designs

User:

IMG_9855 IMG_9854

Room Admin / owner:

IMG_9856

polipivnenko commented 7 months ago

image image image

Message interaction menu has been developed in two versions. Both are ready. Additional pop-up element for the amount of coins is ready too @phwizard @dzinzyura

dzinzyura commented 7 months ago

@polipivnenko thank you! looks great.

please don't forget to create a design for the Kick and Block buttons as well.

polipivnenko commented 7 months ago

image image image

Pop-up for blocking in personal messages, for unblocking and for blocking or removing a user from a shared chat @phwizard @dzinzyura

dzinzyura commented 7 months ago

thank you @polipivnenko! pop-ups look nice, but we'll also need to have Kick and Block buttons directly in the message interaction menu (attached a screenshot)

image
polipivnenko commented 7 months ago

@dzinzyura Are you sure, it should be in the message interaction menu itself? Usually, in this part is placed the reaction to the message, not the user.

polipivnenko commented 7 months ago

image image

Updated versions

polipivnenko commented 7 months ago

image

Due to the many functions in the message interaction menu, I think it's better to depict coin reward in a way similar to the photo. This way, it will have a unified appearance. Here are the display options for the Administrator and participant actions on their messages and others' messages. @phwizard @dzinzyura

dzinzyura commented 7 months ago

great idea! thank you @polipivnenko! if it's a final version, I can assign it for implementation. please, let me know.

phwizard commented 7 months ago

This is a good suggestion and we had this in the design suggestions before:

Screenshot 2023-11-22 at 16 30 08

However, I prefer this option as it's easier to modify by a Developer:

Screenshot 2023-11-22 at 16 29 02

Reason is different Apps (projects) may prefer to disable Coins or Items/NFT gamification and commerce options. In such case these menu items will be hidden / removed by the engine.

Also note that the emoji and message action menus will appear overlayed over the message (like a layer on top). Depending on the positioning of the chat message, if it's in the bottom of the screen, there will be no place to display the bottom menu. If it's in the top, there will be no place to display the emojis menu. See how this works in messenger apps. Therefore these will be overlayed depending on the position.

So I would just go ahead with this version for implementation:

Screenshot 2023-11-22 at 16 35 23

@polipivnenko @dzinzyura

polipivnenko commented 7 months ago

image

I added these functions to the interaction menu for the administrator and for the regular member. @phwizard @dzinzyura

phwizard commented 7 months ago

This is good, let's go ahead and implement @dzinzyura