Open bsteinbeigle opened 2 years ago
kaxline
commented
2 years ago @bsteinbeigle Since we talked about some bigger changes to the UI since this issue was created, I'm changing the scope here. Want to post some UI inspiration/examples of what you'd want the messages screen to look like?
bsteinbeigle
commented
2 years ago @kaxline You got it! Checking out some inspiration this morning and afternoon and will send your way. I will also include some additional examples for adding contacts to a conversation, deleting messages.
Additionally, to ensure we capture our in person conversation, I would like your idea to include the names of all participants in the conversation in the top menu similar to the way iOS devices display the names as well. I will include in the examples/sketches sent to hopefully clarify.
bsteinbeigle
commented
2 years ago @kaxline Getting back to you on messaging updates in line with our in person conversation and your message sent earlier this week. As, always, let me know what you think. I'll do my best to try and break up the messages sent here so my explanations/thought process proceeds any inspiration/sketch. Let me know what you think.
bsteinbeigle
commented
2 years ago @kaxline Firstly, the updates you made to the messaging field look great! There are a few bugs to work out which I will note separately as issues. All in all looks good though. Nice work!
Lets add a "frosted" box (similar to what Facebook Messenger does-example below) surrounding the message field and send button with a contrasting color border. I wonder what a blue would like (A700 #2962FF) or the teal color we are already using. Teal may be best to stick with for now and then we can play around with the colors a bit. Be good to have a couple mockups. I believe this will make the messaging fields stand out from the surrounding "frosted" box. Maybe a grey would work good as well for a border (400 #BDBDBD).
bsteinbeigle
commented
2 years ago @kaxline Here is my sketch and inspirational thoughts for changing the main messaging page. To your point earlier, I believe we need to move away from cards and set the dp to zero or the same elevation as the background so the card appearance goes away similar to what iOS, facebook, and Intagram messaging already looks like. Lets keep a faint gray horizontal line between each message and see how that looks similar to what iOS messaging looks like. Additionally instead of a grey line maybe we try color(s)100, #B2DFDB or 200, #80CBC4. Again would be good to have a mockup or two if ultimately its saves dev. time. I don't believe the line separating the messages will need to come all the way across and can stop at the individuals profile picture if that makes sense or perhaps sooner starting from the right hand side of the screen.
Referring back to our conversation about changing the top menu so individuals pics are shown in the main menu I'm thinking we go with an overlapped photo with a maximum of two photos if in a group (more than two people including yourself) chat. Located on the immediate right hand side of the other individuals photos we would list out first names and directly below that include how many others were apart of the conversation. In cases where there are only two people in the conversation, the other persons profile pic would be shown in the top menu next to their name. If a group name is chosen, the group name will replace the individuals names and directly below that it would list how many others are apart of the chat. For example Brandon, Keith...3 others. Lets place a restriction on the number of characters so the top menu is consistent
I've also added a 'New Message; button (Icon Pen/Paper) in the top menu right hand side. Once this button is selected it would take you to a separate page that would to choose who from your contacts you want to start a chat with. In this separate page, you would also be able to start a group chat. The names would appear center aligned in a carousel along the top with the option to remove individuals if needed before the chat was created. My inspiration from this came from Facebook messenger. Hopefully my sketches make sense below.
A delete button is also shown. When clicked on, a check box would appear next to the messages to be deleted. Hopefully this all makes sense.
bsteinbeigle
commented
2 years ago @kaxline Here is the functionality for adding friends to a chat or creating a group chat. I'm ok if we keep this UI for both starting a new message or adding friends to an existing chat. Let me know what you think.
kaxline
commented
2 years ago @bsteinbeigle OK, I've deployed a few of the big changes, let me know what you think. The big thing is probably creating a new chat. To do that you press the big plus button on the messages list screen. A bottom sheet should come up and allow you to add people from your connections.
For future iterations on Messaging, can you create separate issues for each thing that needs to be changed/fixed? Having a long thread like this with a lot of details buried in long paragraphs can get a bit challenging.
Some stuff that I know still needs to be done that should be separate issues:
Of course you'll have your own stuff that you want me to fix/add as well, that's just my list so far.
bsteinbeigle
commented
2 years ago @kaxline Sorry for the long thread on this! Will certainly separate moving forward. I like the new look of messaging! Nice work.
To answer your question about adding people to a group text, Lets go with someone's connections. I will include as a separate issue. I'll also loop in the friend request change into the issue as well to your point.
Ya, don't worry about the frosted glass and thank you for not spending too much time on this! I appreciate your level of thinking.
I noticed a couple bugs that came with the last update. I'll include as separate issues. Thanks again! It's coming along!
bsteinbeigle
commented
2 years ago @kaxline Lets close this issue and I will track messaging changes for the MVP milestone separately. That sound good?
@kaxline here is a snapshot of messaging. The names below the profile pics don't appear to be centered. Correcting this may result in moving the profile pic over a bit which is fine. Let me know if you are seeing the same thing on your end.