Inspector visual review changes

Inspector visual review changes

These are Ant's notes from which I made the changes:

Inspector-wide: 

Background colour should be #221E1C
Padding should be 20px
Inspector background should have 2px rounded corners

Charm info:

Charm icon should be 30 x 30px
Charm icon margin-right should be 10px
Charm name input field should be 180 x 30px
Charm name input field should align with the top of the charm icon
Charm name input field placeholder text should 14px
Close icon should be 10 x 10px
Close icon looks too fat compared to visual
Missing wide divider at bottom of section

Service details:

"Service details" should be 16px
Unit input field text should be 14px
Unit input field should have margin-left 20px
Can we have the units "Min units" inside the input field? 
The unit numbers should be left aligned within the field
Unit input field padding should 10px
Wrong styling for dividers

Constraints:

Padding should 20px
Input field labels should range right and be 10px from input fields
Can we have input metrics (Ghz, GB) inside the input fields?
Input metrics text 14px #bbbbbb
Input fields should have #ffffff background colour and 30px height

Configuration:

Padding should 20px
"Use the default configuration?" should be 14px
"cross" and "tick" don't use the correct graphics
There should be a 2px high 250px wide divider between "default config" and "import config"
- Top (dark) 1px rgba(0, 0, 0, 0.3)
- Bottom (light) 1px rgba(255, 255, 255, 0.05)
Import config file... field should be 250px wide
check boxes should have labels to the left of them

Deploy & Save:

Padding around buttons should be 20px
Buttons should be 120 x 30px
Button text 14px and centred
In between "Save & Deploy" and "Destroy" we should have a divider 2px high 250px wide:
- Top (dark) 1px rgba(0, 0, 0, 0.3)
- Bottom (light) 1px rgba(255, 255, 255, 0.05)

Destroy Service:

Should have 20px padding

https://code.launchpad.net/~huwshimi/juju-gui/inspector-visual-review/+merge/183849

(do not edit description out of merge proposal)

[huwshimi, 2013-09-04 11:11:32]

Please take a look.

[matthew.scott, 2013-09-04 11:18:13]

Code LGTM - will QA (on IE, too), in a second.  Just one comment - verify with
bcsaller if you need.

https://codereview.appspot.com/13521043/diff/1/app/assets/javascripts/d3.stat...
File app/assets/javascripts/d3.status.js (right):

https://codereview.appspot.com/13521043/diff/1/app/assets/javascripts/d3.stat...
app/assets/javascripts/d3.status.js:55: width: 250,
I think 250 makes a bit more sense than 270 as a default, however, I think it
would make more sense to pass this as an option on/around line 418 of
app/views/viewlets/service-overview.js

https://codereview.appspot.com/13521043/diff/1/test/test_d3_status.js
File test/test_d3_status.js (right):

https://codereview.appspot.com/13521043/diff/1/test/test_d3_status.js#newcode55
test/test_d3_status.js:55: width: 280,
These can be reverted if the previous change is made.

[huwshimi, 2013-09-04 11:33:22]

Please take a look.

[huwshimi, 2013-09-04 11:42:51]

*** Submitted:

Inspector visual review changes

These are Ant's notes from which I made the changes:

Inspector-wide: 

Background colour should be #221E1C
Padding should be 20px
Inspector background should have 2px rounded corners

Charm info:

Charm icon should be 30 x 30px
Charm icon margin-right should be 10px
Charm name input field should be 180 x 30px
Charm name input field should align with the top of the charm icon
Charm name input field placeholder text should 14px
Close icon should be 10 x 10px
Close icon looks too fat compared to visual
Missing wide divider at bottom of section

Service details:

"Service details" should be 16px
Unit input field text should be 14px
Unit input field should have margin-left 20px
Can we have the units "Min units" inside the input field? 
The unit numbers should be left aligned within the field
Unit input field padding should 10px
Wrong styling for dividers

Constraints:

Padding should 20px
Input field labels should range right and be 10px from input fields
Can we have input metrics (Ghz, GB) inside the input fields?
Input metrics text 14px #bbbbbb
Input fields should have #ffffff background colour and 30px height

Configuration:

Padding should 20px
"Use the default configuration?" should be 14px
"cross" and "tick" don't use the correct graphics
There should be a 2px high 250px wide divider between "default config" and
"import config"
- Top (dark) 1px rgba(0, 0, 0, 0.3)
- Bottom (light) 1px rgba(255, 255, 255, 0.05)
Import config file... field should be 250px wide
check boxes should have labels to the left of them

Deploy & Save:

Padding around buttons should be 20px
Buttons should be 120 x 30px
Button text 14px and centred
In between "Save & Deploy" and "Destroy" we should have a divider 2px high 250px
wide:
- Top (dark) 1px rgba(0, 0, 0, 0.3)
- Bottom (light) 1px rgba(255, 255, 255, 0.05)

Destroy Service:

Should have 20px padding

R=matthew.scott
CC=
https://codereview.appspot.com/13521043