Charm config panel visual design fixes.

Charm config panel visual design fixes.

The charm configuration panel now should match UX wireframe.
This branch also contains fixes to the configuration
section hiding when a config file is uploaded.
Also introduced LESS mixins for border radii and box shadows.
Added "docstrings" to relevant charm panel methods.

https://code.launchpad.net/~frankban/juju-gui/bug-1075679-charm-config-panel/+merge/133657

(do not edit description out of merge proposal)

[frankban, 2012-11-09 12:01:50]

Please take a look.

[bac, 2012-11-09 14:03:46]

Nice changes Francesco.

I think the config file button still needs some attention.  I find it odd that
it isn't part of the collapsible div and remains visible when Service Settings
is collapsed. Did you discuss that UX with Matt or Jovan?  Of course I defer to
them but think it currently looks funny.

Also, when a file is chosen, Service Settings collapses but the chevron still
points down.  Further you can click on it and the chevron changes but nothing
else happens.  I guess it'd be nice to collapse, set the chevron to up, and lock
it in place.

https://codereview.appspot.com/6827066/diff/1/app/views/charm-panel.js
File app/views/charm-panel.js (right):

https://codereview.appspot.com/6827066/diff/1/app/views/charm-panel.js#newcod...
app/views/charm-panel.js:601: */
Nice, thanks.

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

https://codereview.appspot.com/6827066/diff/1/lib/views/stylesheet.less#newco...
lib/views/stylesheet.less:43: 
Thanks!  Maybe 'set-' instead of 'create-' for both?

https://codereview.appspot.com/6827066/diff/1/lib/views/stylesheet.less#newco...
lib/views/stylesheet.less:987: padding-left: 5px;
The vis design shows this lined up with the other elements and the charm icon up
top.  I think the padding-left should be 11px.

Good to see you and Matt discussing it.

And as I mentioned in IRC we should decide on one value and apply it to all
charm panels, abstracting it into a LESS variable.

https://codereview.appspot.com/6827066/diff/1/undocumented
File undocumented (left):

https://codereview.appspot.com/6827066/diff/1/undocumented#oldcode82
undocumented:82: app/views/charm-panel.js render
yay

[frankban, 2012-11-09 14:31:51]

Please take a look.

[gary.poster, 2012-11-09 14:58:12]

Great changes, Francesco!  No suggestions or requests.  Thanks!

Gary

https://codereview.appspot.com/6827066/diff/2002/app/views/charm-panel.js
File app/views/charm-panel.js (right):

https://codereview.appspot.com/6827066/diff/2002/app/views/charm-panel.js#new...
app/views/charm-panel.js:600: * @return {undefined} Dispatches only.
Awesome.  Thank you for this and the other docs

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

https://codereview.appspot.com/6827066/diff/2002/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:1: /* Processed with LESS from
lib/views/stylesheet.less */
Great changes here, Francesco.

https://codereview.appspot.com/6827066/diff/2002/undocumented
File undocumented (left):

https://codereview.appspot.com/6827066/diff/2002/undocumented#oldcode81
undocumented:81: app/views/charm-panel.js onFileRemove
Thank you!

[frankban, 2012-11-09 15:23:25]

*** Submitted:

Charm config panel visual design fixes.

The charm configuration panel now should match UX wireframe.
This branch also contains fixes to the configuration
section hiding when a config file is uploaded.
Also introduced LESS mixins for border radii and box shadows.
Added "docstrings" to relevant charm panel methods.

R=bac, gary.poster
CC=
https://codereview.appspot.com/6827066