From 2ed76d0a277e6a31902c9d8640e5e780ad97556b Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Mon, 2 Jun 2014 11:49:01 -0400
Subject: [PATCH] ui: default to condensed view, add secondary actions

---
 ui/index.html                     | 21 ++++++++++++---------
 ui/javascripts/app/controllers.js | 10 +++++++++-
 ui/javascripts/app/models.js      |  2 +-
 ui/styles/_buttons.scss           |  4 ++++
 ui/styles/_forms.scss             |  4 ++++
 ui/styles/base.scss               |  4 ++++
 6 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/ui/index.html b/ui/index.html
index a4fd0b4fd5..5226212465 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -50,15 +50,18 @@
 
   <script type="text/x-handlebars" id="actionbar">
     <div class="row">
-      <div class="col-md-8">
-        {{ input type="text" value=filter class="form-control" placeholder="Filter by name"}}
-      </div>
-      <div class="col-md-4">
-        <div class="checkbox">
-          <label>
-            {{input type="checkbox" name="condensedView" checked=condensedView}}
-            Condensed
-          </label>
+      <div class="action-bar">
+        <div class="col-md-5">
+          {{ input type="text" value=filter class="form-control form-control-mini" placeholder="Filter by name"}}
+        </div>
+        <div class="col-md-4">
+          <div class="btn-group">
+            <button {{ bind-attr class=":btn :btn-mini condensedView:btn-default:btn-primary" }} {{action toggleCondensed }}>Expand</button>
+            <button {{ bind-attr class=":btn :btn-mini true:btn-primary:btn-default" }} {{action }}>Action</button>
+          </div>
+        </div>
+        <div class="col-md-3">
+          {{view Ember.Select content=statuses value=filterStatus class="form-control form-control-mini"}}
         </div>
       </div>
     </div>
diff --git a/ui/javascripts/app/controllers.js b/ui/javascripts/app/controllers.js
index 137b13c6be..a7da924e8c 100644
--- a/ui/javascripts/app/controllers.js
+++ b/ui/javascripts/app/controllers.js
@@ -221,7 +221,9 @@ ItemBaseController = Ember.ArrayController.extend({
   needs: ["dc"],
   dc: Ember.computed.alias("controllers.dc"),
   condensedView: true,
-  filter: "",
+  filter: "", // default
+  filterStatus: "any status", // default
+  statuses: ["passing", "warning", "critical", "any status"],
 
   filteredContent: function() {
     var filter = this.get('filter');
@@ -230,6 +232,12 @@ ItemBaseController = Ember.ArrayController.extend({
       return item.get('filterKey').toLowerCase().match(filter.toLowerCase());
     });
   }.property('filter', 'items.@each'),
+
+  actions: {
+    toggleCondensed: function() {
+      this.set('condensedView', !this.get('condensedView'))
+    }
+  }
 });
 
 App.NodesController = ItemBaseController.extend({
diff --git a/ui/javascripts/app/models.js b/ui/javascripts/app/models.js
index a75b85280c..a3a84a1817 100644
--- a/ui/javascripts/app/models.js
+++ b/ui/javascripts/app/models.js
@@ -108,7 +108,7 @@ App.Node = Ember.Object.extend({
 
   filterKey: function() {
     return this.get('Node')
-  }.property('Node')
+  }.property('Node'),
 });
 
 
diff --git a/ui/styles/_buttons.scss b/ui/styles/_buttons.scss
index ab704a6cf8..419b415926 100644
--- a/ui/styles/_buttons.scss
+++ b/ui/styles/_buttons.scss
@@ -76,5 +76,9 @@
 
     }
 
+    &.btn-mini {
+        font-size: 10px;
+        padding: 8px;
+    }
 
 }
diff --git a/ui/styles/_forms.scss b/ui/styles/_forms.scss
index 6f3422a66f..011a965c17 100644
--- a/ui/styles/_forms.scss
+++ b/ui/styles/_forms.scss
@@ -3,6 +3,10 @@
         @include transition(border-color .2s ease-in-out);
         @include transition(box-shadow .2s ease-in-out);
         @include transition(border-color .2s ease-in-out);
+
+        &.form-control-mini {
+            font-size: 10px;
+        }
     }
 
     &.valid {
diff --git a/ui/styles/base.scss b/ui/styles/base.scss
index 2ea7f6b0d3..7eaca74eb3 100644
--- a/ui/styles/base.scss
+++ b/ui/styles/base.scss
@@ -103,3 +103,7 @@ a {
 .bg-light-gray {
     background-color: $gray-background;
 }
+
+.action-bar {
+  height: 50px;
+}