ui: more ui / focus / animation states

ui/index.html

@@ -106,14 +106,14 @@
             <div class="panel-body">
               <form class="form">
 
-                <div class="form-group">
+                <div {{ bind-attr class=":form-group newKey.keyValid:valid" }}>
                   <div class="input-group">
                     <span class="input-group-addon">{{topModel.parentKey}}</span>
                     {{ input value=newKey.key class="form-control" required=true }}
                   </div>
                 </div>
 
-                <div class="form-group">
+                <div {{ bind-attr class=":form-group newKey.valueValid:valid" }}>
                   {{ textarea value=newKey.value class="form-control"}}
                 </div>
 

ui/javascripts/app/models.js

@@ -86,6 +86,9 @@ App.Key = Ember.Object.extend(Ember.Validations.Mixin, {
     value: { presence: true }
   },
 
+  keyValid: Ember.computed.empty('errors.key'),
+  valueValid: Ember.computed.empty('errors.value'),
+
   isFolder: function() {
     return (this.get('key').slice(-1) == "/")
   }.property('key'),

ui/styles/_forms.scss

@@ -0,0 +1,19 @@
+.form-group {
+
+    .form-control {
+        @include transition(border-color .2s ease-in-out);
+        @include transition(box-shadow .2s ease-in-out);
+        @include transition(border-color .2s ease-in-out);
+    }
+
+    &.valid {
+        .form-control {
+            border-color: $green-faded;
+            box-shadow: 0 0 5px $green-faded;
+        }
+    }
+
+    .input-group-addon {
+        background-color: $gray-background;
+    }
+}

ui/styles/_lists.scss

@@ -5,6 +5,7 @@
     border-radius: 0px;
     margin-bottom: 15px;
     margin-top: 15px;
+    @include transition(background-color .3s ease-in-out);
 
     .list-group-item-heading, .list-inline {
         margin: 10px 15px 10px 15px;
@@ -42,9 +43,11 @@
     }
 
     &.active {
+        @include transition(border-color .1s linear);
         border-color: $purple;
 
         .list-bar {
+            @include transition(background-color .1s linear);
             background-color: $purple;
         }
     }

ui/styles/_panels.scss

@@ -1,6 +1,7 @@
 .panel {
     border-width: 2px;
     border-color: $gray-background;
+    @include transition(background-color .3s ease-in-out);
 
     .panel-heading {
         background-color: transparent;
@@ -41,7 +42,7 @@
     .panel-bar {
         width: 100%;
         height: 20px;
-        @include transition(background-color .3s ease-in-out);
+        @include transition(background-color .1s linear);
     }
 
     &.panel-link {
@@ -62,7 +63,7 @@
             border-color: $purple;
         }
 
-        @include transition(background-color .3s ease-in-out);
+        @include transition(background-color .1s linear);
 
         border-color: $purple;
 

ui/styles/base.scss

@@ -5,6 +5,7 @@
 @import "nav";
 @import "buttons";
 @import "lists";
+@import "forms";
 
 @media (min-width: 768px) { // + 18
   .container {
@@ -84,7 +85,7 @@ a {
 }
 
 .bg-gray {
-    background-color: $gray;
+    background-color: $gray-light;
 }
 
 .bg-light-gray {