Merge remote-tracking branch 'becky/loadingview' into production-readiness

Author: ianmstew

app/app-js/modules/loading/loading.controller.js

@@ -15,16 +15,13 @@ define(function (require) {
       }
     },
 
-    initialize: function () {
-      console.log('HERE!');
-      // this.loadingView = new LoadingView();
-      // appChannel.commands.execute('showin:loadingRegion', this.loadingView);
-    },
-
     loadingData: function (modalData) {
+      this.loadingView = new LoadingView();
+      appChannel.commands.execute('showin:loadingRegion', this.loadingView);
     },
 
     loadedData: function () {
+      appChannel.commands.execute('close:loadingRegion', this.loadingView);
     }
   });
 

app/app-js/modules/loading/loading.view.html

@@ -0,0 +1 @@
+

app/app-js/modules/loading/loading.view.js

@@ -1,7 +1,33 @@
 define(function (require) {
-  // require anything you need
+  var Marionette = require('marionette'),
+      template = require('hgn!modules/loading/loading.view'),
+      Spinner = require('spinner'),
+      LoadingView;
 
-  // build the view
-  
-  return 'The view :)';
+  LoadingView = Marionette.ItemView.extend({
+    template: template,
+    className: 'loading-modal',
+
+    onShow: function() {
+      var opts = {
+        lines: 10,
+        length: 12,
+        width: 8,
+        radius: 15,
+        corners: 1,
+        rotate: 0,
+        direction: 1,
+        color: '#007bb6',
+        speed: 1,
+        trail: 60,
+        className: 'spinner'
+      };
+
+      var spinner = new Spinner(opts).spin();
+      this.$el.append(spinner.el);
+    }
+
+  });
+
+  return LoadingView;
 });

app/app-js/modules/welcome/welcome.view.js

@@ -6,35 +6,6 @@ define(function (require) {
   StartView = Marionette.ItemView.extend({
     template: template
     // className: 'container-fluid'
-
-    /*
-    onShow: function () {
-      _.defer(function() {
-        var totalHeight = '100%',
-        $uriField = $('.js-input-expand');
-
-        $uriField.each(function() {
-          $(this).data('height', $(this).height());
-        });
-
-        $('.js-input-expand')
-          .focus(function() {
-              $(this).animate({
-                height: 100
-              },
-              'slow'
-            );
-          })
-
-          .blur(function() {
-              $(this).animate({
-                height: totalHeight
-              },
-              'slow'
-            );
-          });
-      });
-    }*/
   });
 
   return StartView;

app/less/buttons.less

@@ -2,10 +2,51 @@
 // Buttons
 // --------------------------------------------------
 
-// Modifications to button danger
-@btn-danger-color:  @brand-danger;
-@btn-danger-bg:     #fff;
-@btn-danger-border: @brand-danger;
+.btn-gray,
+.btn-gray-block,
+.btn-action,
+.btn-action-block,
+.btn-green,
+.btn-green-block,
+.btn-red,
+.btn-red-block,
+.btn-yellow,
+.btn-yellow-block {
+  &:extend(.btn all, .btn-md all);
+}
+
+.btn-gray-block,
+.btn-green-block,
+.btn-action-block,
+.btn-red-block,
+.btn-yellow-block {
+  &:extend(.btn-block all);
+}
+
+.btn-gray,
+.btn-gray-block {
+  &:extend(.btn-default all);
+}
+
+.btn-action,
+.btn-action-block {
+  &:extend(.btn-primary all);
+}
+
+.btn-green,
+.btn-green-block {
+  &:extend(.btn-success all);
+}
+
+.btn-red,
+.btn-red-block {
+  &:extend(.btn-danger all);
+}
+
+.btn-yellow,
+.btn-yellow-block {
+  &:extend(.btn-warning all);
+}
 
 // NOTE: This needs to be revised in accordance with engine-ui
 .btn-green {
@@ -14,8 +55,9 @@
 }
 
 .btn-red {
+  .button-variant(@brand-danger, #fff, @brand-danger);
   &:hover {
     color: #fff;
-    background-color: desaturate(lighten(@brand-danger, 10%), 15%);
+    background-color: lighten(@brand-danger, 5%);
   }
 }

app/less/hosted-apis.less

@@ -2,6 +2,7 @@
 @import "button-groups.less";
 @import "buttons.less";
 @import "dashboard.less";
+@import "loading.less";
 @import "mixins.less";
 @import "static.less";
 @import "try-uri.less";

app/less/loading.less

@@ -0,0 +1,20 @@
+// Loading
+// --------------------------------------------------
+
+#loading-region {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+
+  .loading-modal {
+    position: relative;
+    margin: 0 auto;
+    top: 35%;
+    width: 100px;
+    height: 100px;
+    background: rgba(235, 235, 235, 0.5);
+
+    .border-radius (@radius: 10px);
+  }
+}

app/less/mixins.less

@@ -1,52 +1,6 @@
-// Buttons
+// Mixins
 // --------------------------------------------------
 
-.btn-gray,
-.btn-gray-block,
-.btn-action,
-.btn-action-block,
-.btn-green,
-.btn-green-block,
-.btn-red,
-.btn-red-block,
-.btn-yellow,
-.btn-yellow-block {
-  &:extend(.btn all, .btn-md all);
-}
-
-.btn-gray-block,
-.btn-green-block,
-.btn-action-block,
-.btn-red-block,
-.btn-yellow-block {
-  &:extend(.btn-block all);
-}
-
-.btn-gray,
-.btn-gray-block {
-  &:extend(.btn-default all);
-}
-
-.btn-action,
-.btn-action-block {
-  &:extend(.btn-primary all);
-}
-
-.btn-green,
-.btn-green-block {
-  &:extend(.btn-success all);
-}
-
-.btn-red,
-.btn-red-block {
-  &:extend(.btn-danger all);
-}
-
-.btn-yellow,
-.btn-yellow-block {
-  &:extend(.btn-warning all);
-}
-
 .border-left-radius(@radius) {
              border-top-left-radius: @radius;
           border-bottom-left-radius: @radius;
@@ -64,3 +18,13 @@
      -webkit-border-top-right-radius: @radius;
   -webkit-border-bottom-right-radius: @radius;
 }
+
+.border-radius (@radius: 0px) {
+	-webkit-border-radius:   @radius;
+	-moz-border-radius:      @radius;
+	border-radius:           @radius;
+
+	-moz-background-clip:    padding;
+	-webkit-background-clip: padding-box;
+	background-clip:         padding-box;
+}