Filter buttons should match design

Filter buttons should match design

The filter buttons should match the design defined by this document:
https://docs.google.com/a/canonical.com/file/d/0BwQq-CeM0Yiod3lacmNqRm43a2s/edit

The filters should use the buttons only. We will not implement the dropdowm version.

https://code.launchpad.net/~tveronezi/juju-gui/filter-buttons/+merge/130832

(do not edit description out of merge proposal)

[thiago, 2012-10-22 15:14:20]

Please take a look.

[matthew.scott, 2012-10-25 08:10:02]

I think this looks pretty good, with the minor below.  This is just a trainee
review.

https://codereview.appspot.com/6733060/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6733060/diff/1/lib/views/stylesheet.less#newco...
lib/views/stylesheet.less:878: div:nth-child(6) {
This might be better using the :last-child pseudoselector, as much of the work
in the view is related to making the amount of filter buttons data driven (and
the stylesheet has no knowledge of that)

[benjamin.saller, 2012-10-25 15:09:14]

I might have missed some impl detail that prevents us from using the bootstrap
button styles but even if that is the case we should still be able to style the
whole mess using 

:first-child
el.class + el.class  for 'center'
:last-child 

Then drop the position and position-xxx stuff from the templates and the
template context generation.

https://codereview.appspot.com/6733060/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6733060/diff/1/lib/views/stylesheet.less#newco...
lib/views/stylesheet.less:878: div:nth-child(6) {
On 2012/10/25 08:10:02, matthew.scott wrote:
> This might be better using the :last-child pseudoselector, as much of the work
> in the view is related to making the amount of filter buttons data driven (and
> the stylesheet has no knowledge of that)

Agreed.

[thiago, 2012-10-26 07:57:16]

Please take a look.

[thiago.veronezi, 2012-10-26 07:58:31]

https://codereview.appspot.com/6733060/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6733060/diff/1/lib/views/stylesheet.less#newco...
lib/views/stylesheet.less:878: div:nth-child(6) {
On 2012/10/25 08:10:02, matthew.scott wrote:
> This might be better using the :last-child pseudoselector, as much of the work
> in the view is related to making the amount of filter buttons data driven (and
> the stylesheet has no knowledge of that)

Done.

[bac, 2012-11-06 12:44:24]

Nice branch Thiago.  I've made a few comments about things to be tidied up and a
question about a small deviation from the visual design.  But overall it looks
good.

https://codereview.appspot.com/6733060/diff/5002/app/templates/service.handle...
File app/templates/service.handlebars (right):

https://codereview.appspot.com/6733060/diff/5002/app/templates/service.handle...
app/templates/service.handlebars:14: <div class="inline
filter-label"><span>Filter</span></div>
The visual design has an eye ball image instead of the word 'Filter'.  Has the
design changed?

https://codereview.appspot.com/6733060/diff/5002/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6733060/diff/5002/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:896: 
This file has some trailing whitespace.  Please remove it before landing.

https://codereview.appspot.com/6733060/diff/5002/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:930: color: #2D2D2D!important;
This color of gray is used a couple of times.  Perhaps you could define a
variable for it.

[thiago, 2012-11-06 13:38:31]

https://codereview.appspot.com/6733060/diff/5002/app/templates/service.handle...
File app/templates/service.handlebars (right):

https://codereview.appspot.com/6733060/diff/5002/app/templates/service.handle...
app/templates/service.handlebars:14: <div class="inline
filter-label"><span>Filter</span></div>
On 2012/11/06 12:44:24, bac wrote:
> The visual design has an eye ball image instead of the word 'Filter'.  Has the
> design changed?

The eye ball is for the other service view. This implementation follows this
design:
https://docs.google.com/a/canonical.com/file/d/0BwQq-CeM0Yiod3lacmNqRm43a2s/edit

https://codereview.appspot.com/6733060/diff/5002/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/6733060/diff/5002/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:896: 
On 2012/11/06 12:44:24, bac wrote:
> This file has some trailing whitespace.  Please remove it before landing.

Done.
btw we can remove trailing spaces with the following regex...

[ \t]+$

https://codereview.appspot.com/6733060/diff/5002/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:930: color: #2D2D2D!important;
On 2012/11/06 12:44:24, bac wrote:
> This color of gray is used a couple of times.  Perhaps you could define a
> variable for it.

Done.

[thiago, 2012-11-06 13:46:21]

*** Submitted:

Filter buttons should match design

The filter buttons should match the design defined by this document:
https://docs.google.com/a/canonical.com/file/d/0BwQq-CeM0Yiod3lacmNqRm43a2s/edit

The filters should use the buttons only. We will not implement the dropdowm
version.

R=
CC=
https://codereview.appspot.com/6733060