I've been trying to do some stuff for Starbow this week as I wasn't at work due to my broken elbow, but I have been consumed by another project and the fact that working with one hand makes everything snail slow.

Nonetheless, I got to do a little thingy which -- even though is not very important and haven't seen it used in other sites -- might make the connection and disconnections more intuitive. So, I present the connectionGrowl: a growler that displays the current connection status and any messages related.

In the desktop client we have the bottom part to show this kind of information in a plain way:


Simple and effective.

But how can we show this kind of info in a web-based client? My first idea was to use angular-growl, but from previous experience it has proven a bit annoying as the messages' behavior wasn't the most intuitive for the user. I therefore started a side side-quest!

First came getting an idea of how the new growler was to work. Bottom-right was mostly dead space, so that seemed like a right choice.
Next I looked for an appropriate icon for connection. I found one with Dr. Google in almost no time:

And modify it to get the connected and a disconnect alert (which I think are the three different images we need for this):

Now that I see them, I believe they might need some more work, but they'll do for now!

After fiddling a while with css and ng-animate, I finally got something which looks functional and nice. The main points are the fact that the connection status is always visible (but doesn't interfere) and messages are shown with a simple call. I still have to consider some cases in which a timeout doesn't seem to be the best control for showing/hiding messages, as the "Connecting..." message might disappear while the authentication is being processed -- which looks kind of stupid. Further on, multiple messages don't look really good either.

So, final result:



You can try it out in eros.starbowmod.com, although I seem to have messed up something, so you probably won't get to use it much (sorry!).

More soon.

Signing out, SoaH.