Code review comment for lp://staging/~gary/juju-gui/antdillon

Reviewers: mp+175647_code.launchpad.net,

Message:
Please take a look.

Description:
Merge antdillon's inspector styling branch

https://code.launchpad.net/~gary/juju-gui/antdillon/+merge/175647

(do not edit description out of merge proposal)

Please review this at https://codereview.appspot.com/11532044/

Affected files:
   A [revision details]
   A app/assets/images/inspector-charm-error.png
   A app/assets/images/inspector-charm-pending-list.png
   A app/assets/images/inspector-charm-pending.png
   A app/assets/images/inspector-charm-running.png
   A app/assets/images/inspector-charm-scale-up.png
   A app/assets/images/inspector-charm-upgrade.png
   M app/views/service.js
   M lib/views/juju-inspector.less

Index: [revision details]
=== added file '[revision details]'
--- [revision details] 2012-01-01 00:00:00 +0000
+++ [revision details] 2012-01-01 00:00:00 +0000
@@ -0,0 +1,2 @@
+Old revision: <email address hidden>
+New revision: <email address hidden>

Index: app/assets/images/inspector-charm-error.png
=== added file 'app/assets/images/inspector-charm-error.png'
Binary files app/assets/images/inspector-charm-error.png 1970-01-01
00:00:00 +0000 and app/assets/images/inspector-charm-error.png 2013-07-18
15:37:42 +0000 differ

Index: app/assets/images/inspector-charm-pending-list.png
=== added file 'app/assets/images/inspector-charm-pending-list.png'
Binary files app/assets/images/inspector-charm-pending-list.png 1970-01-01
00:00:00 +0000 and app/assets/images/inspector-charm-pending-list.png
2013-07-18 15:37:42 +0000 differ

Index: app/assets/images/inspector-charm-pending.png
=== added file 'app/assets/images/inspector-charm-pending.png'
Binary files app/assets/images/inspector-charm-pending.png 1970-01-01
00:00:00 +0000 and app/assets/images/inspector-charm-pending.png 2013-07-18
15:37:42 +0000 differ

Index: app/assets/images/inspector-charm-running.png
=== added file 'app/assets/images/inspector-charm-running.png'
Binary files app/assets/images/inspector-charm-running.png 1970-01-01
00:00:00 +0000 and app/assets/images/inspector-charm-running.png 2013-07-18
15:37:42 +0000 differ

Index: app/assets/images/inspector-charm-scale-up.png
=== added file 'app/assets/images/inspector-charm-scale-up.png'
Binary files app/assets/images/inspector-charm-scale-up.png 1970-01-01
00:00:00 +0000 and app/assets/images/inspector-charm-scale-up.png
2013-07-18 15:37:42 +0000 differ

Index: app/assets/images/inspector-charm-upgrade.png
=== added file 'app/assets/images/inspector-charm-upgrade.png'
Binary files app/assets/images/inspector-charm-upgrade.png 1970-01-01
00:00:00 +0000 and app/assets/images/inspector-charm-upgrade.png 2013-07-18
15:37:42 +0000 differ

Index: app/views/service.js
=== modified file 'app/views/service.js'
--- app/views/service.js 2013-07-18 17:53:08 +0000
+++ app/views/service.js 2013-07-18 18:30:48 +0000
@@ -1556,6 +1556,7 @@
      toggleUnitHeader: function(e) {
        e.currentTarget.siblings('.status-unit-content')
                       .toggleClass('close-unit');
+ e.currentTarget.toggleClass('closed-unit-list');
      },

      /**
@@ -1683,14 +1684,14 @@
                             .html(Templates['unit-action-buttons']());

        unitStatusHeader.append('span')
- .html('&#8226;');
-
- unitStatusHeader.append('span')
                        .classed('unit-qty', true);

        unitStatusHeader.append('span')
                        .classed('category-label', true);

+ unitStatusHeader.append('span')
+ .classed('chevron', true);
+
        // D3 header update section
        categoryWrapperNodes.select('.unit-qty')
                            .text(function(d) {

Index: lib/views/juju-inspector.less
=== modified file 'lib/views/juju-inspector.less'
--- lib/views/juju-inspector.less 2013-07-18 15:54:20 +0000
+++ lib/views/juju-inspector.less 2013-07-18 18:22:12 +0000
@@ -314,6 +314,7 @@

          .content {
              border-bottom: 1px solid @inspector-divider-bottom;
+ border-top: 1px solid @inspector-divider-top;
              margin: 0;
              padding: 10px;
          }
@@ -340,12 +341,13 @@

          .status-unit-header {
              background-color: @inspector-region-background-color;
- padding: 15px;
+ padding: 15px 15px 15px 40px;
              font-size: 16px;
              cursor: pointer;
              border-bottom: 1px solid @inspector-divider-bottom;
              border-top: 1px solid @inspector-divider-top;
-
+ background-position: 20px center;
+ background-repeat: no-repeat;
              span {
                  margin-right: 5px;
              }
@@ -353,12 +355,34 @@
              ul {
                  background: white;
              }
+
+ .chevron {
+ display: inline-block;
+ height: 9px;
+ margin-left: 5px;
+ width: 12px;
+ background: url("/juju-ui/assets/images/chevron_down.png")
no-repeat;
+ }
+ }
+
+ .closed-unit-list .chevron {
+ background: url("/juju-ui/assets/images/chevron_up.png")
no-repeat;
+ }
+
+ .status-unit-header.error {
+ background-image:
url("/juju-ui/assets/images/inspector-charm-error.png");
+ }
+ .status-unit-header.running {
+ background-image:
url("/juju-ui/assets/images/inspector-charm-running.png");
+ }
+ .status-unit-header.pending {
+ background-image:
url("/juju-ui/assets/images/inspector-charm-pending.png");
          }

          .status-unit-content {
- -moz-transition: .5s, max-height .5s;
- -webkit-transition: .5s, max-height .5s;
- transition: .5s, max-height .5s;
+ -moz-transition: .3s, max-height .3s;
+ -webkit-transition: .25s, max-height .3s;
+ transition: .3s, max-height .3s;
              overflow: hidden;
              background: @charm-panel-background-color;
              /* max height is being set inline in views/service.js.
@@ -386,7 +410,7 @@
              }

              input[type="checkbox"] {
- margin-right: 10px;
+ margin-right: 30px;
              }

              button.unit-action-button,
@@ -407,6 +431,16 @@
                  margin-left: 25px;
              }
          }
+
+ .status-unit-content.running ul li {
+ background:
url("/juju-ui/assets/images/inspector-charm-running.png") no-repeat scroll
35px center;
+ }
+ .status-unit-content.pending ul li {
+ background:
url("/juju-ui/assets/images/inspector-charm-pending-list.png") no-repeat
scroll 35px center;
+ }
+ .status-unit-content.error ul li {
+ background:
url("/juju-ui/assets/images/inspector-charm-error.png") no-repeat scroll
35px center;
+ }
      }

  }