adding angular-loading-bar to 100k demo

Zhuk, Alexander · Zhuk, Alexander · commit 748e44a705fd · 2016-01-27T16:32:54.000+03:00
diff --git a/demo/100k/css/angular-data-grid.bootstrap.css b/demo/100k/css/angular-data-grid.bootstrap.css
@@ -24,3 +24,21 @@
 .sortable.sort-descent:after {
   content: "\f0dd";
   vertical-align: top; }
+
+#loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 11002; }
+
+#loading-bar-spinner {
+  display: block;
+  position: fixed;
+  z-index: 11002;
+  top: 50%;
+  left: 50%;
+  margin-left: -15px;
+  margin-right: -15px; }
diff --git a/demo/100k/index.html b/demo/100k/index.html
@@ -6,6 +6,7 @@
     <link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+    <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.css' type='text/css' media='all' />
     <link rel="stylesheet" href="css/angular-data-grid.bootstrap.css">
 </head>
 <body ng-app="myApp" ng-controller="myAppController" ng-cloak>
@@ -31,10 +32,10 @@ <h3>Angular Data Grid 100k Example</h3>
                 <div class="form-group">
                     <label for="orderIdFilter">Search by User ID</label>
                     <input id="orderIdFilter" type="text" class="form-control order-search-box"
-                           placeholder="Enter User ID"
+                           placeholder="Enter User Name"
                            ng-change="gridActions.filter()"
-                           ng-model="id"
-                           filter-by="id"
+                           ng-model="name"
+                           filter-by="name"
                            filter-type="text">
                 </div>
             </div>
@@ -107,8 +108,7 @@ <h3>Angular Data Grid 100k Example</h3>
             <div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
                 <div class="row">
                     <div class="col-md-3" ng-cloak>
-                        <span class="items" ng-bind="filtered.length">{{filtered.length}} users total</span>
-                        <div>Time stats</div>
+                        <span class="items" ng-bind="filtered.length + ' items total' "></span>
                         <div>Copy time: {{_time.copy}}</div>
                         <div>Filter time: {{_time.filters}}</div>
                         <div>Sort time: {{_time.sort}}</div>
@@ -212,6 +212,7 @@ <h3>Angular Data Grid 100k Example</h3>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
+<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.js'></script>
 <script src="../../dist/pagination.min.js"></script>
 <script src="../../dist/dataGrid.js"></script>
 <script src="js/demoApp.js"></script>
diff --git a/demo/100k/js/demoApp.js b/demo/100k/js/demoApp.js
@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
+    angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'angular-loading-bar', 'ngAnimate'])
         .controller('myAppController', ['$scope', '$http', function ($scope, $http) {
 
             $scope.gridOptions = {
diff --git a/demo/100k/scss/angular-data-grid.bootstrap.scss b/demo/100k/scss/angular-data-grid.bootstrap.scss
@@ -29,4 +29,24 @@
     content: "\f0dd";
     vertical-align: top;
   }
+}
+
+#loading-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.2);
+  z-index: 11002;
+}
+
+#loading-bar-spinner {
+  display: block;
+  position: fixed;
+  z-index: 11002;
+  top: 50%;
+  left: 50%;
+  margin-left: -15px;
+  margin-right: -15px;
 }
diff --git a/demo/material/index.html b/demo/material/index.html
@@ -5,7 +5,7 @@
     <title>Angular Data Grid - Material Design</title>
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
-    <link rel="stylesheet" href="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.1-master-a687bfc/angular-material.css">
+    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
     <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-blue.min.css">
     <link rel="stylesheet" href="css/angular-data-grid.material.css">
 </head>
@@ -185,7 +185,7 @@ <h4>Angular Data Grid sample using Material Design styling</h4>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
-<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
 <script src="../../dist/pagination.min.js"></script>
 <script src="../../dist/dataGrid.min.js"></script>
 <script src="js/demoApp.js"></script>
diff --git a/gulpfile.js b/gulpfile.js
@@ -38,6 +38,9 @@
         gulp.src('./demo/bootstrap/scss/angular-data-grid.bootstrap.scss')
             .pipe(sass().on('error', sass.logError))
             .pipe(gulp.dest('./demo/bootstrap/css/'));
+        gulp.src('./demo/100k/scss/angular-data-grid.bootstrap.scss')
+            .pipe(sass().on('error', sass.logError))
+            .pipe(gulp.dest('./demo/100k/css/'));
     });
 
     gulp.task('build', ['js', 'sass']);
