Merge pull request #452 from huwshimi/uncommitted-circles

Uncommitted circles Replace the uncommitted background with circles.
juju · Jul 24, 2014 · 0e6058a · 0e6058a
2 parents 7a91bcb + 9ab5e36
commit 0e6058a
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 16 deletions.
diff --git a/app/templates/container-token-units.handlebars b/app/templates/container-token-units.handlebars
@@ -1,6 +1,9 @@
 {{#units}}
   <li class="unit {{#unless agent_state }}uncommitted{{/unless}}">
     <img src="{{icon}}" alt="{{service}}"/>
-    <span class="name">{{displayName}}</span>
+    <span class="name">
+      {{displayName}}
+      <span class="unit-uncommitted">&deg;</span>
+    </span>
   </li>
 {{/units}}
diff --git a/app/templates/container-token.handlebars b/app/templates/container-token.handlebars
@@ -1,6 +1,9 @@
 <div class="token">
   <div class="top">
-    <span class="title">{{ displayName }}</span>
+    <span class="title">
+      {{ displayName }}
+      <span class="token-uncommitted">&deg;</span>
+    </span>
     <ul class="service-icons"></ul>
   </div>
   {{#if displayDelete}}

diff --git a/app/templates/machine-token.handlebars b/app/templates/machine-token.handlebars
@@ -1,6 +1,9 @@
 <div class="token">
   <div class="top">
-    <span class="title">{{ displayName }}</span>
+    <span class="title">
+      {{ displayName }}
+      <span class="token-uncommitted">&deg;</span>
+    </span>
     <span class="service-icons">
       {{#units}}
         <img src="{{icon}}" alt="{{service}}" class="unit">

diff --git a/lib/views/machine-view/container-token.less b/lib/views/machine-view/container-token.less
@@ -13,12 +13,15 @@
                     margin: 0 -20px;
                     padding: 5px 20px;
 
-                    &.uncommitted {
-                        background-color: #ddf4fc;
+                    &.uncommitted .unit-uncommitted {
+                        display: inline-block;
                     }
                     &:last-child {
                         margin-bottom: 0;
                     }
+                    .unit-uncommitted {
+                        display: none;
+                    }
                     img {
                         vertical-align: middle;
                         margin: 0 7px 0 0;

diff --git a/lib/views/machine-view/machine-view-token-base.less b/lib/views/machine-view/machine-view-token-base.less
@@ -33,17 +33,19 @@
             display: block;
         }
     }
-    &.uncommitted {
-        background-color: #ddf4fc;
-
-        &:hover,
-        &.active {
-            background-color: #c5edfb;
-        }
+    &.uncommitted .token-uncommitted {
+        display: inline-block;
     }
     span {
         display: block;
     }
+    .unit-uncommitted,
+    .token-uncommitted {
+        .uncommitted-circle;
+    }
+    .token-uncommitted {
+        display: none;
+    }
     .top {
         .display-flex;
         overflow: hidden;

diff --git a/lib/views/mixins.less b/lib/views/mixins.less
@@ -133,3 +133,10 @@
     -ms-flex: @grow;
     flex: @grow;
 }
+.uncommitted-circle {
+    vertical-align: bottom;
+    margin-left: 1px;
+    color: @uncommitted-colour;
+    font-size: 32px;
+    line-height: 0px;
+}
diff --git a/lib/views/stylesheet.less b/lib/views/stylesheet.less
@@ -59,6 +59,7 @@ This is a general guide on how to structure your classes.
 @navbar-border-light: #2d2928;
 @text-colour: #505050;
 @border-radius: 2px;
+@uncommitted-colour: #19b6ee;
 
 // Imports need to be after vars.
 @import "typography.less";

diff --git a/test/test_machine_view_panel.js b/test/test_machine_view_panel.js
@@ -798,8 +798,8 @@ describe('machine view panel view', function() {
                    'models are out of sync with displayed list');
       list.each(function(item, index) {
         var m = machines.item(index);
-        assert.equal(item.one('.title').get('text'), m.displayName,
-                     'displayed item does not match model');
+        assert.equal(item.one('.title').get('text').replace(/\s+/g, ' ').trim(),
+            m.displayName + ' °', 'displayed item does not match model');
       });
     });
 
@@ -867,13 +867,15 @@ describe('machine view panel view', function() {
               selector + '[data-id="' + machineModel.get('id') + '"]');
       assert.notEqual(item, null, 'machine was not initially displayed');
       assert.equal(
-          item.one('.title').get('text'), machineModel.get('displayName'),
+          item.one('.title').get('text').replace(/\s+/g, ' ').trim(),
+          machineModel.get('displayName') + ' °',
           'initial machine names do not match');
       machineModel.set('id', id);
       item = container.one(selector + '[data-id="' + id + '"]');
       assert.notEqual(item, null, 'machine was not displayed post-update');
       assert.equal(
-          item.one('.title').get('text'), machineModel.get('displayName'),
+          item.one('.title').get('text').replace(/\s+/g, ' ').trim(),
+          machineModel.get('displayName') + ' °',
           'machine names do not match post-update');
     });