ui: kv updates and improved active list view

ui/index.html

@@ -115,7 +115,7 @@
 
     <div class="col-md-5 col-md-offset-1">
       <div class="panel">
-        <div class="panel-bar bg-green"></div>
+        <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-green" }}></div>
           <div class="panel-heading">
             <h3 class="panel-title">
               {{model.key}}
@@ -123,7 +123,14 @@
           </div>
 
           <div class="panel-body">
-            {{ textarea value=model.value class="form-control"}}
+            <form class="form">
+              <div class="form-group">
+                {{ textarea value=model.value class="form-control"}}
+              </div>
+              <div class="form-group">
+                <button {{ action "updateKey"}} {{bind-attr disabled=isLoading }} {{ bind-attr class=":btn isLoading:btn-warning:btn-success" }}>Update</button>
+              </div>
+            </form>
           </div>
         </div>
     </div>

ui/javascripts/app/controllers.js

@@ -70,3 +70,21 @@ App.ServicesController = Ember.ArrayController.extend({
 App.ServicesShowController = Ember.Controller.extend({
   needs: ['services']
 });
+
+
+App.KvEditController = Ember.Controller.extend({
+  isLoading: false,
+
+  actions: {
+    updateKey: function() {
+      var key = this.get("model");
+      this.set('isLoading', true);
+
+      Ember.run.later(this, function() {
+        this.set('isLoading', false)
+      }, 500);
+
+    }
+  }
+
+});

ui/styles/_lists.scss

@@ -42,7 +42,10 @@
     }
 
     &.active {
-        border-color: $gray;
+        border-color: $purple;
+        .list-bar {
+            background-color: $purple;
+        }
     }
 
 }