Add UX styling to the sidebar and container UI

Add UX styling to the sidebar and container UI

- Theme the containers
- Adjust the container to be clickable/toggleable thruogh the whole heading.
- Add the active state to the charms in the sidebar
- Adjust some of the CSS for the charm details to present in the sidebar view.

https://code.launchpad.net/~rharding/juju-gui/sidebar-design/+merge/158183

(do not edit description out of merge proposal)

[rharding, 2013-04-10 18:20:00]

Please take a look.

[jeff.pihach, 2013-04-10 18:41:10]

LGTM Thanks! Some trivial comments below.

https://codereview.appspot.com/8618044/diff/1/app/subapps/browser/views/sideb...
File app/subapps/browser/views/sidebar.js (right):

https://codereview.appspot.com/8618044/diff/1/app/subapps/browser/views/sideb...
app/subapps/browser/views/sidebar.js:55:
ev.currentTarget.ancestor('.yui3-charmtoken').addClass('active');
Any way you can listen to this click event on yui3-charmtoken to avoid needing
to do these DOM queries?

https://codereview.appspot.com/8618044/diff/1/lib/views/browser/charm-full.less
File lib/views/browser/charm-full.less (right):

https://codereview.appspot.com/8618044/diff/1/lib/views/browser/charm-full.le...
lib/views/browser/charm-full.less:252: #subapp-browser #bws-fullscreen .charm {
nested Id's are considered bad selectors in css feel free to drop the
#subapp-browser

[rharding, 2013-04-10 19:02:02]

comments below.

https://codereview.appspot.com/8618044/diff/1/app/subapps/browser/views/sideb...
File app/subapps/browser/views/sidebar.js (right):

https://codereview.appspot.com/8618044/diff/1/app/subapps/browser/views/sideb...
app/subapps/browser/views/sidebar.js:55:
ev.currentTarget.ancestor('.yui3-charmtoken').addClass('active');
On 2013/04/10 18:41:10, jeff.pihach wrote:
> Any way you can listen to this click event on yui3-charmtoken to avoid needing
> to do these DOM queries?

I'm hesitant to force this. The charm-token is used everywhere, but only in the
sidebar selection is this change applied. Since it seems more related to being
in the sidebar. Removing active on other widget instances seems dirty. Maybe the
charm-container can hold this logic. I'll investigate as a follow up.

I have created a bug around this and the fact that the charm-token is outputting
with an id == to the charm id. We'll look at what we can do.

https://codereview.appspot.com/8618044/diff/1/lib/views/browser/charm-full.less
File lib/views/browser/charm-full.less (right):

https://codereview.appspot.com/8618044/diff/1/lib/views/browser/charm-full.le...
lib/views/browser/charm-full.less:252: #subapp-browser #bws-fullscreen .charm {
On 2013/04/10 18:41:10, jeff.pihach wrote:
> nested Id's are considered bad selectors in css feel free to drop the
> #subapp-browser

rgr, updating.

[rharding, 2013-04-10 21:19:18]

LGTM with the bug and issues around best way of dealing with the selected state.

[rharding, 2013-04-10 21:35:23]

*** Submitted:

Add UX styling to the sidebar and container UI

- Theme the containers
- Adjust the container to be clickable/toggleable thruogh the whole heading.
- Add the active state to the charms in the sidebar
- Adjust some of the CSS for the charm details to present in the sidebar view.

R=jeff.pihach
CC=
https://codereview.appspot.com/8618044