ui: more touches on create acl

ui/index.html

@@ -77,11 +77,18 @@
   <script type="text/x-handlebars" id="actionbar">
     <div class="row">
       <div class="action-bar">
-        <div {{ bind-attr class="searchBar:col-md-12:col-md-5" }} >
+        <div {{ bind-attr class="searchBar:col-md-10:col-md-5" }} >
           <div class="form-group">
             {{ input type="text" value=filter class="form-control form-control-mini" placeholder=filterText}}
           </div>
         </div>
+        {{#if newAclButton }}
+          <div class="col-md-2">
+            <div class="form-group">
+              {{#link-to 'acls' class='btn btn-mini btn-default btn-noactive pull-right'}}New ACL{{/link-to}}
+            </div>
+          </div>
+        {{/if}}
         {{#if statuses}}
         <div class="col-md-5">
           <div class="form-group">
@@ -591,7 +598,7 @@
               <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
                 <div class="panel-heading">
                   <h4 class="panel-title">
-                    Create ACL
+                    New ACL
                   </h4>
                 </div>
 

ui/javascripts/app/controllers.js

@@ -320,6 +320,7 @@ App.AclsController = Ember.ArrayController.extend({
   queryParams: ["filter"],
   filterText: "Filter by name or ID",
   searchBar: true,
+  newAclButton: true,
   types: ["management", "client"],
 
   dc: Ember.computed.alias("controllers.dc"),

ui/styles/_buttons.scss

@@ -29,6 +29,17 @@
         box-shadow: none;
     }
 
+    &.btn-primary {
+        color: $purple-dark;
+        background-color: transparent;
+        border: 2px solid $purple;
+
+        &:hover {
+            background-color: $light-purple;
+            color: darken($purple, 10%);
+        }
+    }
+
     &.btn-warning {
         color: $orange-faded;
         background-color: transparent;
@@ -73,6 +84,13 @@
             background-color: $light-purple;
             color: darken($purple, 10%);
         }
+
+        &.btn-noactive {
+            color: inherit;
+            background-color: inherit;
+            border: 2px solid #ccc;
+        }
+
     }
 
     &.btn-mini {
@@ -88,16 +106,3 @@
     }
 
 }
-
-.active {
-    .btn {
-        color: $purple-dark;
-        background-color: transparent;
-        border: 2px solid $purple;
-
-        &:hover {
-            background-color: $light-purple;
-            color: darken($purple, 10%);
-        }
-    }
-}