Modify look to be more Slack like and unique for OSD

[bnvk]

Notable things in this change will include the following UI changes:

• Colors & fonts that match Open Source Design branding
• Placeholder for avatars of users
• Move user list to left of room
• Increased whitespace around messages and design
• Skinable-ness of logo, name, fonts

[jancborchardt]

Nice! One thing only:

Move user list to left of room

Slack doesn’t have the user list permanently visible, only as a popover available on the top right. I find that very nice since the user list is not that important.

[bnvk]

@jancborchardt yah, that's true. This is actually a bit tricky to get right depending on how an instance of Shout is configured. I've opened up a more granular issue #4 to track this

[simonv3]

I did some doodling today, and was wondering what people thought of this:

The squares in the bottom right are other channels. There's probably a couple of ways to elegantly handle multiple channels.

Hoping this gets some conversation going about direction of Slick.

[jdittrich]

thx for moving this further.

I assume that switching channels would influence both the chat-stream-view (left) and the people-in-channel-view (right). If the buttons are in the people-in-channel sidebar, users will assume that them being clicked will only influence this sidebar ("control mapping")
So the buttons for switching channels (or are they not for switching?) should probably in a place where it is clear that they influence chatstream and people-in-channel e.g. in a bar that is on top of both. (We would need one of these designer-dev-visual-tools now, I think :-) )

[simonv3]

@jdittrich Yeah it would. It's not clear, but there is actually a differentiation line between the people-in-channel-view. I see what you're saying though.

Maybe the channels are hidden under a dropdown instead?

I wasn't sure whether it made sense underneath the channel title. The dropdown could just be hidden if we don't want people to join new channels.

What I imagine could work in that case is that it shows a list of recent channels, possibly with notifications in each channel if there are mentions. And the ability to add another channel.

[bnvk]

The way Slack handles this is with a "show channel" button (lil person shaped button with the number 30 next to it). Here is the header view with no channel users sidebar being visible.

And here is the sidebar that slides out when that "details" button is clicked on:

[simonv3]

@bnvk I'm seeing two use cases then - one dropdown gives more channel information. (I would prefer to maybe store that above the user list / in the sidebar? Or below?) An other dropdown to switch between channels. Is that what you were thinking?

I actually think Slack suffers from the fact that it has a lot of drop downs that I never think about or use.

Edit: a decision should probably be made whether we want to treat Slick as a "one channel" app, with the ability to easily switch to and between channels, or as an app that shows lots of channels at the same time. (like Slack, Shout, IRCCloud all do). I think the second option is part of why IRC is confusing.

[jancborchardt]

Well, honestly the list of users in a channel is not as important to warrant it being shown all the time. I think Slacks approach to that is very good - channel list, private conversations and current conversation should be focused.

[simonv3]

@jancborchardt Slack also shows some of the most "active" users. I think showing 10 of the most active users (most likely the people that a new joiner will interact with) and then having a collapsed "view more" might be a good idea?