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:
![[image loading]](http://i.imgur.com/fBTZHwW.png)
![[image loading]](http://i.imgur.com/ymCwCJl.png)
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:
![[image loading]](http://i.imgur.com/XNGd5ot.png)
And modify it to get the connected and a disconnect alert (which I think are the three different images we need for this):
![[image loading]](http://i.imgur.com/IKOOWJl.png)
![[image loading]](http://i.imgur.com/cvw6AXL.png)
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:
![[image loading]](http://i.imgur.com/A1g5tCu.png)
![[image loading]](http://i.imgur.com/0FEJ2p1.png)
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.
![5.00 stars based on 1 ratings *](/images/blogs/blackstar.gif)
![5.00 stars based on 1 ratings *](/images/blogs/blackstar.gif)
![5.00 stars based on 1 ratings *](/images/blogs/blackstar.gif)
![5.00 stars based on 1 ratings *](/images/blogs/blackstar.gif)
![5.00 stars based on 1 ratings *](/images/blogs/blackstar.gif)