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;
+        }
      }

  }