ui: default to condensed view, add secondary actions

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>

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({

ui/javascripts/app/models.js

@@ -108,7 +108,7 @@ App.Node = Ember.Object.extend({
 
   filterKey: function() {
     return this.get('Node')
-  }.property('Node')
+  }.property('Node'),
 });
 
 

ui/styles/_buttons.scss

@@ -76,5 +76,9 @@
 
     }
 
+    &.btn-mini {
+        font-size: 10px;
+        padding: 8px;
+    }
 
 }

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 {

ui/styles/base.scss

@@ -103,3 +103,7 @@ a {
 .bg-light-gray {
     background-color: $gray-background;
 }
+
+.action-bar {
+  height: 50px;
+}