diff --git a/app/templates/container-token-units.handlebars b/app/templates/container-token-units.handlebars
index 97687fea7b..6c69e3882e 100644
--- a/app/templates/container-token-units.handlebars
+++ b/app/templates/container-token-units.handlebars
@@ -1,6 +1,9 @@
{{#units}}
- {{displayName}}
+
+ {{displayName}}
+ °
+
{{/units}}
diff --git a/app/templates/container-token.handlebars b/app/templates/container-token.handlebars
index 3ff688e688..36f8575b45 100644
--- a/app/templates/container-token.handlebars
+++ b/app/templates/container-token.handlebars
@@ -1,6 +1,9 @@
-
{{ displayName }}
+
+ {{ displayName }}
+ °
+
{{#if displayDelete}}
diff --git a/app/templates/machine-token.handlebars b/app/templates/machine-token.handlebars
index 970c0751a4..8cbc159ec1 100644
--- a/app/templates/machine-token.handlebars
+++ b/app/templates/machine-token.handlebars
@@ -1,6 +1,9 @@
-
{{ displayName }}
+
+ {{ displayName }}
+ °
+
{{#units}}
diff --git a/lib/views/machine-view/container-token.less b/lib/views/machine-view/container-token.less
index 02b55a701d..193d5c2310 100644
--- 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
index 0aeecdc4a5..cbda8956b3 100644
--- 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
index 5c1e30181c..88be16db0f 100644
--- 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
index 92d7d4da8d..7ed8b01fee 100644
--- 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
index e367476c0e..4758c1f4a1 100644
--- 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');
});