Charm config panel visual design

Charm config panel visual design

First pass at getting the visual design.  This branch begins using
some of the specified assets.

The placement of the buttons and cogs feels crude.  I'm happy to get
suggestions on better ways to do the CSS for those elements.

Note replacing the pop-up was not in the scope of this branch.  The
elements below the buttons are being left for another branch in order
to get earlier feedback on the approach.

https://code.launchpad.net/~bac/juju-gui/charm-assets/+merge/130636

(do not edit description out of merge proposal)

[bac, 2012-10-20 16:59:11]

Please take a look.

[bac, 2012-10-24 13:38:45]

Please take a look.

[gary.poster, 2012-10-24 14:43:47]

Approved, with a small comment or two.  Thanks!

Gary

https://codereview.appspot.com/6709062/diff/3001/app/templates/charm-pre-conf...
File app/templates/charm-pre-configuration.handlebars (right):

https://codereview.appspot.com/6709062/diff/3001/app/templates/charm-pre-conf...
app/templates/charm-pre-configuration.handlebars:11: class="btn btn-primary
deploy left">
As I mentioned, I have a small suggestion that it would be nice to not introduce
the new "left" class and instead only apply the "float: right" to the buttons in
the two other specific pages in the charm panel.  In other words, I think we can
do this pretty cleanly in the CSS without introducing even more classes.  You
said you did it already. :-) Thank you

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

https://codereview.appspot.com/6709062/diff/3001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:11: @charm-panel-separator-color: #aeaeae;
Thank you, cool.

It worries me a bit for our design that these colors are so unique.  I feel like
they should apply to many things.  That's a question for the designer though and
doesn't affect this review...I'm just talking. :-)

https://codereview.appspot.com/6709062/diff/3001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:1083: /* XXX: The positioning here feels like a big
hack.  Suggestions welcome. */
I think this is good now.

https://codereview.appspot.com/6709062/diff/3001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:1096: z-index:1;
Now that the cog is in a css background, the z-index is unnecessary

https://codereview.appspot.com/6709062/diff/3001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:1102: z-index:1;
as above.

[bac, 2012-10-24 14:48:35]

Thanks for the review and the trouble shooting.  Gary.  Your issues have been
addressed.

https://codereview.appspot.com/6709062/diff/3001/app/templates/charm-pre-conf...
File app/templates/charm-pre-configuration.handlebars (right):

https://codereview.appspot.com/6709062/diff/3001/app/templates/charm-pre-conf...
app/templates/charm-pre-configuration.handlebars:11: class="btn btn-primary
deploy left">
On 2012/10/24 14:43:47, gary.poster wrote:
> As I mentioned, I have a small suggestion that it would be nice to not
introduce
> the new "left" class and instead only apply the "float: right" to the buttons
in
> the two other specific pages in the charm panel.  In other words, I think we
can
> do this pretty cleanly in the CSS without introducing even more classes.  You
> said you did it already. :-) Thank you

Done.

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

https://codereview.appspot.com/6709062/diff/3001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:11: @charm-panel-separator-color: #aeaeae;
When used in more places the actual color can be defined and these variables can
reference it or the variable can be made more generic.

https://codereview.appspot.com/6709062/diff/3001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:1083: /* XXX: The positioning here feels like a big
hack.  Suggestions welcome. */
On 2012/10/24 14:43:47, gary.poster wrote:
> I think this is good now.

Done.

https://codereview.appspot.com/6709062/diff/3001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:1096: z-index:1;
On 2012/10/24 14:43:47, gary.poster wrote:
> Now that the cog is in a css background, the z-index is unnecessary

Done.

https://codereview.appspot.com/6709062/diff/3001/lib/views/stylesheet.less#ne...
lib/views/stylesheet.less:1102: z-index:1;
On 2012/10/24 14:43:47, gary.poster wrote:
> as above.

Done.

[bac, 2012-10-24 15:01:31]

*** Submitted:

Charm config panel visual design

First pass at getting the visual design.  This branch begins using
some of the specified assets.

The placement of the buttons and cogs feels crude.  I'm happy to get
suggestions on better ways to do the CSS for those elements.

Note replacing the pop-up was not in the scope of this branch.  The
elements below the buttons are being left for another branch in order
to get earlier feedback on the approach.

R=gary.poster
CC=
https://codereview.appspot.com/6709062