From a9799d31c60335e29e323d1786a09433ffb90a7c Mon Sep 17 00:00:00 2001
From: lvuch <laurenvuchetich@gmail.com>
Date: Mon, 14 Dec 2015 16:47:09 -0700
Subject: [PATCH] header tweaks

---
 app/admin-tab/settings/template.hbs           |  8 +++--
 .../environment-header/template.hbs           |  2 ++
 app/components/header-state/component.js      |  6 ++++
 app/components/header-state/template.hbs      |  7 +++++
 app/components/info-multi-stats/template.hbs  | 14 +--------
 app/components/stack-section/template.hbs     |  2 +-
 app/container/template.hbs                    | 20 ++++++-------
 app/host/template.hbs                         | 15 +++++-----
 app/service/template.hbs                      | 29 ++++++-------------
 app/styles/environment.scss                   |  1 +
 app/styles/layout.scss                        |  4 ---
 11 files changed, 48 insertions(+), 60 deletions(-)
 create mode 100644 app/components/header-state/component.js
 create mode 100644 app/components/header-state/template.hbs

diff --git a/app/admin-tab/settings/template.hbs b/app/admin-tab/settings/template.hbs
index 7026d7930..e6cc9e1ed 100644
--- a/app/admin-tab/settings/template.hbs
+++ b/app/admin-tab/settings/template.hbs
@@ -2,9 +2,11 @@
   <h1 class="right-divider">Settings</h1>
 </section>
 
-<section>
-  {{top-errors errors=errors}}
-</section>
+{{#if errors.length}}
+  <section>
+   {{top-errors errors=errors}}
+  </section>
+{{/if}}
 
 <section class="well">
   {{host-settings host=model.host sendActiveValue=(action (mut model.host))}}
diff --git a/app/components/environment-header/template.hbs b/app/components/environment-header/template.hbs
index 2e4cb53ca..34d3839f5 100644
--- a/app/components/environment-header/template.hbs
+++ b/app/components/environment-header/template.hbs
@@ -50,4 +50,6 @@
       {{model.transitioningMessage}}
     </div>
   {{/if}}
+
+  {{header-state model=model}}
 </section>
diff --git a/app/components/header-state/component.js b/app/components/header-state/component.js
new file mode 100644
index 000000000..b9514f42d
--- /dev/null
+++ b/app/components/header-state/component.js
@@ -0,0 +1,6 @@
+import Ember from 'ember';
+
+export default Ember.Component.extend({
+  classNames: ['pull-right','section','r-mt5'],
+  classNameBindings: ['model.stateColor'],
+});
\ No newline at end of file
diff --git a/app/components/header-state/template.hbs b/app/components/header-state/template.hbs
new file mode 100644
index 000000000..c1616cab9
--- /dev/null
+++ b/app/components/header-state/template.hbs
@@ -0,0 +1,7 @@
+<i class="icon {{model.stateIcon}}"></i>
+{{model.displayState~}}
+{{#if model.showTransitioningMessage}}
+  <span class="force-wrap">
+    ({{model.transitioningMessage}})
+  </span>
+{{/if}}
\ No newline at end of file
diff --git a/app/components/info-multi-stats/template.hbs b/app/components/info-multi-stats/template.hbs
index e935eedad..d9b7f758e 100644
--- a/app/components/info-multi-stats/template.hbs
+++ b/app/components/info-multi-stats/template.hbs
@@ -1,17 +1,5 @@
 <div class="container-fluid container-multi-stat">
-  <div class="row bg-lightgray">
-    <div class="col-sm-12 col-md-12 col-lg-12 ">
-      <label class="section r-mt5 badge {{model.stateBackground}}" style="color:white;">
-         {{model.displayState~}}
-        {{#if model.showTransitioningMessage}}
-          <span class="force-wrap">
-            ({{model.transitioningMessage}})
-          </span>
-        {{/if}}
-      </label>
-      {{model.name}}
-    </div>
-  </div>
+
   <div class="row">
     <div class="col-sm-12 col-md-12 col-lg-12">
       {{yield}}
diff --git a/app/components/stack-section/template.hbs b/app/components/stack-section/template.hbs
index e78599797..9f53c9bfa 100644
--- a/app/components/stack-section/template.hbs
+++ b/app/components/stack-section/template.hbs
@@ -1,4 +1,4 @@
-<div class="clearfix {{if single model.stateBackground}} {{if single 'single'}}">
+<div class="clearfix {{if single 'single'}}">
   {{#unless single}}
     <div class="stack-state {{model.stateBackground}}"><i class="{{model.stateIcon}}"></i></div>
   {{/unless}}
diff --git a/app/container/template.hbs b/app/container/template.hbs
index 3a02be85c..cd701ff10 100644
--- a/app/container/template.hbs
+++ b/app/container/template.hbs
@@ -1,18 +1,16 @@
 <section class="header">
-  <h1 class="right-divider">
-    
-      {{#link-to "containers" href=false}}<a>Container:</a>{{/link-to}}
-    
-    
-      {{#power-select options=model.primaryHost.instances selected=model onchange=(action "changeContainer") searchField="displayName" as |obj|}}
-        <div class="clip r-mr15"><i class="{{obj.stateIcon}} {{obj.stateColor}}" tooltip="{{obj.displayState}}" data-placement="left"></i> {{obj.displayName}}</div>
-      {{/power-select}}
+  {{#link-to "containers" tagName="h1" href=false}}<a>Container:</a>{{/link-to}}
+  {{#power-select options=model.primaryHost.instances selected=model onchange=(action "changeContainer") searchField="displayName" as |obj|}}
+    <div class="clip r-mr15">
+      <i class="{{obj.stateIcon}} {{obj.stateColor}}" tooltip="{{obj.displayState}}" data-placement="left"></i> {{obj.displayName}}
+    </div>
+  {{/power-select}}
 
-      <strong>on {{#link-to "host" model.primaryHost.id href=false}}<a>{{model.primaryHost.displayName}}</a>{{/link-to}}</strong>
+  <strong>on {{#link-to "host" model.primaryHost.id href=false}}<a>{{model.primaryHost.displayName}}</a>{{/link-to}}</strong>
     
-  </h1>
-
   {{action-menu model=model size="sm"}}
+
+  {{header-state model=model}}
 </section>
 
 <section>
diff --git a/app/host/template.hbs b/app/host/template.hbs
index aa21d4e03..ffd61be9a 100644
--- a/app/host/template.hbs
+++ b/app/host/template.hbs
@@ -1,16 +1,15 @@
 <section class="header">
-
-    {{#link-to "hosts" tagName="h1" href=false}}<a>Host:</a>{{/link-to}}
-    
-      {{#power-select options=model.all selected=host onchange=(action "changeHost") searchField="displayName" as |obj|}}
-        <div class="clip"><i class="{{obj.stateIcon}} {{obj.stateColor}}" tooltip="{{obj.displayState}}" data-placement="left"></i> {{obj.displayName}}</div>
-      {{/power-select}}
-    
+  {{#link-to "hosts" tagName="h1" href=false}}<a>Host:</a>{{/link-to}}
+  
+  {{#power-select options=model.all selected=host onchange=(action "changeHost") searchField="displayName" as |obj|}}
+    <div class="clip"><i class="{{obj.stateIcon}} {{obj.stateColor}}" tooltip="{{obj.displayState}}" data-placement="left"></i> {{obj.displayName}}</div>
+  {{/power-select}}
   
-
   {{#action-menu model=host size="sm" classNames="left-divider"}}
     {{#link-to "containers.new" (query-params hostId=host.id) classNames="btn btn-sm btn-primary"}}Add Container{{/link-to}}
   {{/action-menu}}
+
+  {{header-state model=host}}
 </section>
 
 <section>
diff --git a/app/service/template.hbs b/app/service/template.hbs
index 75c899ee7..ac5e904e6 100644
--- a/app/service/template.hbs
+++ b/app/service/template.hbs
@@ -1,31 +1,20 @@
 <section class="header">
-  <h1 class="right-divider">
+  <h1>
     Service:
-      {{#power-select options=model.stack.services selected=service onchange=(action "changeService") searchField="displayName" as |obj|}}
-        <div class="clip"><i class="{{obj.stateIcon}} {{obj.stateColor}}" tooltip="{{obj.displayState}}" data-placement="left"></i> {{obj.displayName}}</div>
-      {{/power-select}}
-    
   </h1>
-
-  {{action-menu model=service classNames="left-divider r-ml5" size="sm"}}
+  
+  {{#power-select options=model.stack.services selected=service onchange=(action "changeService") searchField="displayName" as |obj|}}
+    <div class="clip"><i class="{{obj.stateIcon}} {{obj.stateColor}}" tooltip="{{obj.displayState}}" data-placement="left"></i> {{obj.displayName}}</div>
+  {{/power-select}}
+   
+  {{action-menu model=service classNames="r-ml5" size="sm"}}
+  {{header-state model=service}}
 </section>
 
 {{!todo copy pasta}}
 <section>
   <div class="container-fluid container-multi-stat">
-    <div class="row bg-lightgray">
-      <div class="col-sm-12 col-md-12 col-lg-12">
-      <label class="section r-mt5 r-mr5 r-p5 badge {{service.stateBackground}}" style="color:white;">
-          State: {{service.displayState~}}
-          {{#if service.showTransitioningMessage}}
-            <span class="force-wrap">
-              ({{service.transitioningMessage}})
-            </span>
-          {{/if}}
-        </label>
-        {{service.name}}
-      </div>
-    </div>
+
     <div class="row">
       <div class="col-sm-12 col-md-12 col-lg-12">
         <div class="row multi-stats">
diff --git a/app/styles/environment.scss b/app/styles/environment.scss
index 9b6840a20..f0d959efe 100644
--- a/app/styles/environment.scss
+++ b/app/styles/environment.scss
@@ -158,6 +158,7 @@ $singleCountWidth : 120px;
 
   .single {
     color: white;
+    background: $midGray;
 
     .count {
       width: $singleCountWidth;
diff --git a/app/styles/layout.scss b/app/styles/layout.scss
index 21cd55799..d38351237 100644
--- a/app/styles/layout.scss
+++ b/app/styles/layout.scss
@@ -247,10 +247,6 @@ UL.list-lines {
   overflow: hidden;
   white-space: nowrap;
   word-wrap: break-word;
-
-  & i {
-    font-size: 10px;
-  }
 }
 
 .force-wrap {