Merge pull request #4 from hashicorp/website-demo-updates

Website: Demo improvements

website/source/_ember_templates.html.erb

@@ -6,9 +6,11 @@
 
 <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}}
+        {{#if isLoading}}
         <div class="loading-bar"></div>
+        {{/if}}
     </div>
 </script>
 

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();
 	},

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();
     }
   }
 });

website/source/assets/javascripts/demo/controllers/demo.js

@@ -4,10 +4,17 @@ Demo.DemoController = Ember.ObjectController.extend({
   logPrefix: "$ ",
   cursor: 0,
   notCleared: true,
+  isLoading: false,
 
   setFromHistory: function() {
     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');
+    },
+  }
 });

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);
@@ -62,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:
@@ -98,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.$();
 

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;

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;

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;