search

vocatwk / CodeU-Nemo

Chat web app for CodeU
Apache License 2.0
1 stars 3 forks source link

Updated UI for conversations and chat page #120

Closed vocatwk closed 6 years ago

vocatwk commented 6 years ago

I updated the UI for conversations page.

I really wanted to implement those icons with the number of messages not yet seen next to each conversation like those in @yebrahim's design cause they just look really cool to have. But I'm not sure if it's that important since the user will see those messages were sent in his notifications page. But I still think it would be a cool feature to have. Let me know what you guys think.

Also while I was thinking of the above, I realized we'd have to account for messages coming in while the user is in the chat. Right now, it won't be difficult to implement because we only update messages in the chat on page reload but that got me thinking that getting those messages without having to refresh might also be good to have. It could be very inefficient at first like using the fetch API to get all the messages every 5000ms and then to improve we can use sockets I think(not really sure about this though). Let me know what you guys think about this too.

I changed the chat page too and updated conversations page a bit. I also added wrap property to the list of edited members.

EDIT #2

I added back the activityFeed link(I had accidentally taken it out from the navbar). I added a scroll bar to the search results and queued users and added badges to the conversation with the number of unseen messages. I'm working on designing the chat box to look more like messages instead of bullet points.

screen shot 2018-07-31 at 6 25 36 am screen shot 2018-08-01 at 6 39 17 pm screen shot 2018-08-01 at 7 09 03 pm screen shot 2018-08-01 at 7 35 42 pm screen shot 2018-08-01 at 7 54 48 pm
lealgamb commented 6 years ago

This looks great! I think that the icons look great, but if it's not a priority we can always return to it if we have some time at the end of the week.

Since we would only see the number of messages on the conversations page, then I think that getting the number of messages every time the user navigates to this page should work. I might not be thinking exactly of what you have in mind though.

jasminechau2 commented 6 years ago

I love it the logo is so cool

yebrahim commented 6 years ago

Yes, implementing the badges will be tricky, but it's doable. You can have the server return the number of unread messages along with each conversation object in the GET endpoint for conversations.

You're exactly right about loading incoming messages live. The easiest implementation would use a combination of interval polling and AJAX to update the messages. A more involved implementation would use websockets to keep a two-way connection between each client and the server.