From 492ea9cec148d6c09d85306960ca7cecfd538720 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Tue, 17 Mar 2015 12:22:18 -0700
Subject: [PATCH 1/5] website: wire close button for demos, fade white overlay

---
 website/source/_ember_templates.html.erb            |  2 +-
 website/source/assets/javascripts/app/Sidebar.js    |  2 +-
 .../assets/javascripts/demo/controllers/demo.js     |  8 +++++++-
 .../source/assets/javascripts/demo/views/demo.js    | 13 ++++++++++++-
 website/source/assets/stylesheets/_demo.scss        |  1 +
 website/source/assets/stylesheets/_sidebar.scss     |  6 +++---
 6 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/website/source/_ember_templates.html.erb b/website/source/_ember_templates.html.erb
index 5301d08c95f..09b438b67df 100644
--- a/website/source/_ember_templates.html.erb
+++ b/website/source/_ember_templates.html.erb
@@ -6,7 +6,7 @@
 
 <script type="text/x-handlebars" data-template-name="demo">
     <div class="terminal">
-        <a class="close-terminal" href="#">X</a>
+        <span class="close-terminal" {{action "close"}}>X</span>
         {{outlet}}
         <div class="loading-bar"></div>
     </div>
diff --git a/website/source/assets/javascripts/app/Sidebar.js b/website/source/assets/javascripts/app/Sidebar.js
index 67239be95b2..986f1bae924 100644
--- a/website/source/assets/javascripts/app/Sidebar.js
+++ b/website/source/assets/javascripts/app/Sidebar.js
@@ -16,7 +16,7 @@ Sidebar = Base.extend({
     	this.$sidebarHeader = $('#sidebar .sidebar-header');
     	this.$toggleButton = $('.navbar-toggle');
 
-    	this.sidebarImg = this.$sidebarHeader.css('background-image');    	
+    	this.sidebarImg = this.$sidebarHeader.css('background-image');
 
 		this.addEventListeners();
 	},
diff --git a/website/source/assets/javascripts/demo/controllers/demo.js b/website/source/assets/javascripts/demo/controllers/demo.js
index 2b7fda5361a..0deda660185 100644
--- a/website/source/assets/javascripts/demo/controllers/demo.js
+++ b/website/source/assets/javascripts/demo/controllers/demo.js
@@ -9,5 +9,11 @@ Demo.DemoController = Ember.ObjectController.extend({
     var index = this.get('currentLog.length') + this.get('cursor');
 
     this.set('currentText', this.get('currentLog')[index]);
-  }.observes('cursor')
+  }.observes('cursor'),
+
+  actions: {
+    close: function() {
+      this.transitionTo('index');
+    }
+  }
 });
diff --git a/website/source/assets/javascripts/demo/views/demo.js b/website/source/assets/javascripts/demo/views/demo.js
index 91f380202da..eb68c9f7b15 100644
--- a/website/source/assets/javascripts/demo/views/demo.js
+++ b/website/source/assets/javascripts/demo/views/demo.js
@@ -2,7 +2,15 @@ Demo.DemoView = Ember.View.extend({
   classNames: ['demo-overlay'],
 
   didInsertElement: function() {
-    var element  = this.$();
+    var controller = this.get('controller'),
+        overlay    = $('.sidebar-overlay'),
+        element    = this.$();
+
+    overlay.addClass('active');
+
+    overlay.on('click', function() {
+      controller.transitionTo('index');
+    });
 
     element.hide().fadeIn(300);
 
@@ -44,6 +52,9 @@ Demo.DemoView = Ember.View.extend({
   },
 
   willDestroyElement: function() {
+    // Remove overlay
+    $('.sidebar-overlay').removeClass('active');
+
     var element  = this.$();
 
     element.fadeOut(400);
diff --git a/website/source/assets/stylesheets/_demo.scss b/website/source/assets/stylesheets/_demo.scss
index d63c74ecfa6..72ef843c470 100644
--- a/website/source/assets/stylesheets/_demo.scss
+++ b/website/source/assets/stylesheets/_demo.scss
@@ -32,6 +32,7 @@
         font-size: 30px;
         @include lato-light();
         transition: all 250ms ease-in;
+        cursor: pointer;
 
         &:hover{
             text-decoration: none;
diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss
index afc540d3ae2..0398a8a1764 100644
--- a/website/source/assets/stylesheets/_sidebar.scss
+++ b/website/source/assets/stylesheets/_sidebar.scss
@@ -1,4 +1,4 @@
-  
+
 // Base variables
 // --------------------------------------------------
 $screen-tablet:          768px;
@@ -460,7 +460,7 @@ $sidebar-font-weight: 300;
   bottom: 0;
   opacity: 0;
   background: $white;
-  z-index: $zindex-sidebar-fixed - 1;
+  z-index: 2;
 
   -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
   -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
@@ -473,7 +473,7 @@ $sidebar-font-weight: 300;
 }
 
 .sidebar-overlay.active {
-  opacity: 0.8;
+  opacity: 0.3;
   visibility: visible;
   -webkit-transition-delay: 0;
   -moz-transition-delay: 0;

From 05daec0905136754d7524e0bf91a9ee548de8114 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Tue, 17 Mar 2015 12:47:16 -0700
Subject: [PATCH 2/5] website: refactor send command for demo

---
 .../assets/javascripts/demo/controllers/crud.js | 17 +++++++++++++++--
 .../assets/javascripts/demo/controllers/demo.js |  3 ++-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/website/source/assets/javascripts/demo/controllers/crud.js b/website/source/assets/javascripts/demo/controllers/crud.js
index c7d1c5af61b..0df00982618 100644
--- a/website/source/assets/javascripts/demo/controllers/crud.js
+++ b/website/source/assets/javascripts/demo/controllers/crud.js
@@ -1,13 +1,15 @@
 Demo.DemoCrudController = Ember.ObjectController.extend({
   needs: ['demo'],
+  isLoading: Ember.computed.alias('controllers.demo.isLoading'),
   currentText: Ember.computed.alias('controllers.demo.currentText'),
   currentLog: Ember.computed.alias('controllers.demo.currentLog'),
   logPrefix: Ember.computed.alias('controllers.demo.logPrefix'),
   currentMarker: Ember.computed.alias('controllers.demo.currentMarker'),
   notCleared: Ember.computed.alias('controllers.demo.notCleared'),
 
-  actions: {
-    submitText: function() {
+  sendCommand: function() {
+    // Request
+    Ember.run.later(this, function() {
       var command = this.getWithDefault('currentText', '');
       var currentLogs = this.get('currentLog').toArray();
 
@@ -28,6 +30,17 @@ Demo.DemoCrudController = Ember.ObjectController.extend({
         default:
           console.log("Submitting: ", command);
       }
+
+      this.set('isLoading', false);
+    }, 1000);
+  },
+
+  actions: {
+    submitText: function() {
+      this.set('isLoading', true);
+
+      // Send the actual request (fake for now)
+      this.sendCommand();
     }
   }
 });
diff --git a/website/source/assets/javascripts/demo/controllers/demo.js b/website/source/assets/javascripts/demo/controllers/demo.js
index 0deda660185..da477026e68 100644
--- a/website/source/assets/javascripts/demo/controllers/demo.js
+++ b/website/source/assets/javascripts/demo/controllers/demo.js
@@ -4,6 +4,7 @@ Demo.DemoController = Ember.ObjectController.extend({
   logPrefix: "$ ",
   cursor: 0,
   notCleared: true,
+  isLoading: false,
 
   setFromHistory: function() {
     var index = this.get('currentLog.length') + this.get('cursor');
@@ -14,6 +15,6 @@ Demo.DemoController = Ember.ObjectController.extend({
   actions: {
     close: function() {
       this.transitionTo('index');
-    }
+    },
   }
 });

From 14c89c8f8bfac271f4cc2fda1a2cce6506ee6ced Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Tue, 17 Mar 2015 12:47:34 -0700
Subject: [PATCH 3/5] website: slow down demo animation

---
 website/source/assets/stylesheets/_utilities.scss | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/website/source/assets/stylesheets/_utilities.scss b/website/source/assets/stylesheets/_utilities.scss
index a29cb2efd67..9b4b8ad7d95 100755
--- a/website/source/assets/stylesheets/_utilities.scss
+++ b/website/source/assets/stylesheets/_utilities.scss
@@ -96,13 +96,13 @@
   }
 }
 
-#demo-app.loading .loading-bar{
+#demo-app .loading-bar{
     display: block;
-    -webkit-animation: shift-rightwards 1s ease-in-out infinite;
-    -moz-animation: shift-rightwards 1s ease-in-out infinite;
-    -ms-animation: shift-rightwards 1s ease-in-out infinite;
-    -o-animation: shift-rightwards 1s ease-in-out infinite;
-    animation: shift-rightwards 1s ease-in-out infinite;
+    -webkit-animation: shift-rightwards 2s ease-in-out infinite;
+    -moz-animation: shift-rightwards 2s ease-in-out infinite;
+    -ms-animation: shift-rightwards 2s ease-in-out infinite;
+    -o-animation: shift-rightwards 2s ease-in-out infinite;
+    animation: shift-rightwards 2s ease-in-out infinite;
     -webkit-animation-delay: .4s;
     -moz-animation-delay: .4s;
     -o-animation-delay: .4s;

From 40be97bec60010728825d203426f65d6c5ce282c Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Tue, 17 Mar 2015 12:47:55 -0700
Subject: [PATCH 4/5] website: add isLoading

---
 website/source/_ember_templates.html.erb             | 2 ++
 website/source/assets/javascripts/demo/views/demo.js | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/source/_ember_templates.html.erb b/website/source/_ember_templates.html.erb
index 09b438b67df..33a97ad43b6 100644
--- a/website/source/_ember_templates.html.erb
+++ b/website/source/_ember_templates.html.erb
@@ -8,7 +8,9 @@
     <div class="terminal">
         <span class="close-terminal" {{action "close"}}>X</span>
         {{outlet}}
+        {{#if isLoading}}
         <div class="loading-bar"></div>
+        {{/if}}
     </div>
 </script>
 
diff --git a/website/source/assets/javascripts/demo/views/demo.js b/website/source/assets/javascripts/demo/views/demo.js
index eb68c9f7b15..6b3802de054 100644
--- a/website/source/assets/javascripts/demo/views/demo.js
+++ b/website/source/assets/javascripts/demo/views/demo.js
@@ -73,8 +73,6 @@ Demo.DemoView = Ember.View.extend({
     var cursor = this.get('controller.cursor'),
         currentLength = this.get('controller.currentLog.length');
 
-    console.log(ev);
-
     switch(ev.keyCode) {
       // Down arrow
       case 40:

From 26d1b36991d4475cc32f2cf8a055196b1b0876c1 Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Tue, 17 Mar 2015 12:55:24 -0700
Subject: [PATCH 5/5] website: defocus input (hide cursor) during submission

---
 website/source/assets/javascripts/demo/views/demo.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/website/source/assets/javascripts/demo/views/demo.js b/website/source/assets/javascripts/demo/views/demo.js
index 6b3802de054..f7d9655d1f3 100644
--- a/website/source/assets/javascripts/demo/views/demo.js
+++ b/website/source/assets/javascripts/demo/views/demo.js
@@ -107,6 +107,16 @@ Demo.DemoView = Ember.View.extend({
     }
   },
 
+  deFocus: function() {
+    var element = this.$().find('input.shell');
+
+    // defocus while loading
+    if (this.get('controller.isLoading')) {
+      element.blur()
+    }
+
+  }.observes('controller.isLoading'),
+
   submitted: function() {
     var element  = this.$();