SyntaxMeets icon indicating copy to clipboard operation
SyntaxMeets copied to clipboard

Improve UI of Chat Box

Open Lavcodes opened this issue 4 years ago β€’ 8 comments

Is your feature request related to a problem? Please describe.

  • On scrolling down, the close button also moves. Ideally only chat component should scroll and close should remain fixed.
  • Chat always opens from the first created message. It should start from last read or most recent message.
  • Input and emoji picker alignment could be better.
  • For a single message component, the name of the user should always be aligned with their profile icon. Currently it always aligns to the left.
  • Make chat user specific. Currently every user sees same alignment of chat. In my experience, it is defaulted as last added user's messages in blue colour and from right. Rest all in grey and from left. It would be more intuitive to have the user whose window is opened, from right and in blue rest in grey from left.

Screenshots. Chat always opens from top Chatopensfromtop

Close button scrolls along with chat component closebuttonscroll

Alignment of message header and lower input bar alignmentandinputstyling

How the chat defaults defaultforeach

when third user arrives

Screenshot (5)

Describe the solution you'd like Implement the suggestions

Motivation Please outline the motivation for the proposal.

Are you willing to contribute to this issue? Yes

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

Lavcodes avatar Mar 30 '21 12:03 Lavcodes

Hi @Lavcodes, First of all, thank you so much for taking out the time to work on this issue.

Regarding the Last Point ⭐

  • ❎ How the chat defaults for all users

    Actually, you are facing this issue because you are using the same browser for all users, but we are saving the user details in local storage. So local storage for all 3 users is the same. So every time a new user joins the room, the local storage gets override with new user details. Therefore you are facing such kind of abnormal behavior. To avoid this I would recommend you to use different browsers or incognito mode.

Rest All points are correct, and for sure you can work on the same.

But, currently, we are on implementing Redux for SyntaxMeets, so there are a lot of changes in the codebase. So I am keeping this issue on hold for now, and once the code refactoring is done, I'll definitely assign it to you.

And last but not least, Keep Contributing πŸ™πŸ”₯

kothariji avatar Mar 31 '21 04:03 kothariji

Hi @Lavcodes, we are good to go with this issue now. So please confirm with us about the same, so that we can assign this issue to you.

kothariji avatar Apr 07 '21 12:04 kothariji

Yes, I would like to work on this issue. Please assign it to me

Lavcodes avatar Apr 09 '21 14:04 Lavcodes

Yes, I would like to work on this issue. Please assign it to me

Great @Lavcodes, we are assigning this issue to you. πŸ”₯ Also, the 3rd issue - Input and emoji picker alignment could be better. - is already resolved. So you can work on other points.

kothariji avatar Apr 10 '21 06:04 kothariji

@Lavcodes any updates ?

kothariji avatar May 10 '21 14:05 kothariji

Hey sorry about the late response will just complete the pr ASAP

Lavcodes avatar May 14 '21 17:05 Lavcodes

Hey sorry about the late response will just complete the pr ASAP

Yupp No issues πŸ™Œ

kothariji avatar May 14 '21 19:05 kothariji

Can I work on this issue?

srishtij2000 avatar May 20 '21 16:05 srishtij2000