added loading bar

Changes: - show loading bar during XHR request
dounoit · Jul 8, 2015 · fcf938d · fcf938d
1 parent c425857
commit fcf938d
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 4 deletions.
diff --git a/bower.json b/bower.json
@@ -21,6 +21,7 @@
     "angular-ui-router": "~0.2.15",
     "angular-breadcrumb": "~0.4.0",
     "foundation": "~5.5.2",
-    "foundation-datepicker": "~1.3.0"
+    "foundation-datepicker": "~1.3.0",
+    "angular-loading-bar": "~0.8.0"
   }
 }
diff --git a/gulpfile.js b/gulpfile.js
@@ -35,7 +35,8 @@ gulp.task('scss', function() {
 gulp.task('css', function() { 
     var vendorFiles = [
         'bower_components/normalize.css/normalize.css',
-        'bower_components/foundation-datepicker/stylesheets/foundation-datepicker.css'
+        'bower_components/foundation-datepicker/stylesheets/foundation-datepicker.css',
+        'bower_components/angular-loading-bar/build/loading-bar.min.css',
     ];
     return gulp.src(vendorFiles) 
         .pipe(gulp.dest(config.vendorRoot + 'css/')); 
@@ -54,6 +55,7 @@ gulp.task('js', function(){
         './bower_components/modernizr/modernizr.js',
         './bower_components/foundation/js/foundation.min.js',
         './bower_components/foundation-datepicker/js/foundation-datepicker.js',
+        './bower_components/angular-loading-bar/build/loading-bar.min.js',
     ];
     gulp.src(vendorFiles)
         .pipe(gulp.dest(config.vendorRoot + 'js/'));

diff --git a/src/ralph/admin/templates/admin/base.html b/src/ralph/admin/templates/admin/base.html
@@ -5,11 +5,11 @@
 <html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %} class="no-js">
   <head>
     {% block extrastyle %}{% endblock %}
-    <link rel="stylesheet" type="text/css" href="{% static "vendor/css/foundation-datepicker.css" %}">
-    <link rel="stylesheet" type="text/css" href="{% static "css/ralph.css" %}" />
     <title>{% block title %}{% endblock %}</title>
     {% block extrahead %}{% endblock %}
     {{ media.css }}
+    <link rel="stylesheet" type="text/css" href="{% static "vendor/css/foundation-datepicker.css" %}">
+    <link rel="stylesheet" type="text/css" href="{% static "css/ralph.css" %}" />
   </head>
   <body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}">
     {% if not is_popup %}

diff --git a/src/ralph/dc_view/static/js/app/apps.js b/src/ralph/dc_view/static/js/app/apps.js
@@ -7,6 +7,7 @@ angular
             'ncy-angular-breadcrumb',
             'data_center.controllers',
             'rack.controllers',
+            'angular-loading-bar',
         ]
     )
     .config(['$httpProvider', '$stateProvider', '$urlRouterProvider', '$breadcrumbProvider', function($httpProvider, $stateProvider, $urlRouterProvider, $breadcrumbProvider) {

diff --git a/src/ralph/dc_view/templates/dc_view/angular_scripts.html b/src/ralph/dc_view/templates/dc_view/angular_scripts.html
@@ -5,6 +5,7 @@
 <script src="{% static 'vendor/js/angular-cookies.min.js' %}"></script>
 <script src="{% static 'vendor/js/angular-breadcrumb.min.js' %}"></script>
 <script src="{% static 'vendor/js/angular-ui-router.min.js' %}"></script>
+<script src="{% static 'vendor/js/loading-bar.min.js' %}"></script>
 
 <script src="{% static 'js/app/apps.js' %}"></script>
 <script src="{% static 'js/app/data_center/controllers.js' %}"></script>

diff --git a/src/ralph/dc_view/templates/dc_view/data_center_view.html b/src/ralph/dc_view/templates/dc_view/data_center_view.html
@@ -5,6 +5,11 @@
   {% trans "Dc View" %}
 {% endblock %}
 
+{% block extrahead %}
+  {{ block.super }}
+  <link rel="stylesheet" type="text/css" href="{% static "vendor/css/loading-bar.min.css" %}" />
+{% endblock %}
+
 {% block extra_scripts %}
   {{ block.super }}
   {% include 'dc_view/angular_scripts.html' %}

diff --git a/src/ralph/static/src/scss/_overrides.scss b/src/ralph/static/src/scss/_overrides.scss
@@ -61,6 +61,15 @@ select {
     text-align: right;
 }
 
+#loading-bar .bar {
+    position: absolute;
+    top: 72px;
+    height: 3px;
+    background: $primary-color;
+}
+
+#loading-bar-spinner {display: none;}
+
 .field-row .end.columns {
     /* Raw-id fields customization */
     position:relative;