From 640027e10d1f8126603b90cdbf867907f3ff6d3f Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Wed, 30 Apr 2014 12:15:54 -0400
Subject: [PATCH] ui: more ui / focus / animation states

---
 ui/index.html                |  4 ++--
 ui/javascripts/app/models.js |  3 +++
 ui/styles/_forms.scss        | 19 +++++++++++++++++++
 ui/styles/_lists.scss        |  3 +++
 ui/styles/_panels.scss       |  5 +++--
 ui/styles/base.scss          |  3 ++-
 6 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 ui/styles/_forms.scss

diff --git a/ui/index.html b/ui/index.html
index 0c08b3b01..682537281 100644
--- a/ui/index.html
+++ b/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>
 
diff --git a/ui/javascripts/app/models.js b/ui/javascripts/app/models.js
index 552e0bf30..fd7c1522e 100644
--- a/ui/javascripts/app/models.js
+++ b/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'),
diff --git a/ui/styles/_forms.scss b/ui/styles/_forms.scss
new file mode 100644
index 000000000..2a40e364c
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/ui/styles/_lists.scss b/ui/styles/_lists.scss
index 4edcb7b8c..b9fe9fc1e 100644
--- a/ui/styles/_lists.scss
+++ b/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;
         }
     }
diff --git a/ui/styles/_panels.scss b/ui/styles/_panels.scss
index 8148654f7..33b514191 100644
--- a/ui/styles/_panels.scss
+++ b/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;
 
diff --git a/ui/styles/base.scss b/ui/styles/base.scss
index 59b8b844c..af41453e9 100644
--- a/ui/styles/base.scss
+++ b/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 {