search

decent-chat / decent

Open source messaging platform for the modern web
https://meta.decent.chat
GNU General Public License v3.0
21 stars 5 forks source link

Indicate unread mentions in UI #302

Open towerofnix opened 6 years ago

towerofnix commented 6 years ago

Currently if there's an unread mention, we show that in the title bar. We should also show that in the UI somehow. Discord puts a little marker icon beside the mentions button, as well as a number-of-unread-mentions in place of the channel's icon in the sidebar. To me, those both sound like they'd work well with Decent's UI.

Ping @PullJosh for design thoughts.

PullJosh commented 6 years ago

I love the idea of putting a red indicator dot on the icon for the "mentions" tab in the right sidebar. If we're going to do that, it really makes sense to update the Icon component to be able to draw an indicator dot over any icon just by being passed a boolean prop. Then we can use Icon in the channel list as well as the sidebar tabs.

bates64 commented 6 years ago

I think we should have two colours of indicator for unread and mentioned. Mentions can be (are?) per-channel so the channel would have a blue indicator if you have unread mentions.

Also we should show this data in the server dropdown also.

PullJosh commented 6 years ago

I think we should have two colours of indicator for unread and mentioned.

I definitely like the idea of making a distinction. It might be fun to play around with using a red @ sign in place of the usual red dot. No idea if it would look good, but could be fun to try.

PullJosh commented 6 years ago

image I gave it an honest effort, but I'm not sure that there's enough room to pull it off. The normal dot is 6px wide. I gave myself 8px to work with in the @ icon, but that's still not particularly spacious.

bates64 commented 6 years ago

@PullJosh We can go for a more muted dot for 'unread' and a strong one (eg. red) for mention, then?

PullJosh commented 6 years ago

Sounds good.