Skip to content

Commit 748e44a

Browse files
Zhuk, AlexanderZhuk, Alexander
authored andcommitted
adding angular-loading-bar to 100k demo
1 parent dec109e commit 748e44a

File tree

6 files changed

+50
-8
lines changed

6 files changed

+50
-8
lines changed

demo/100k/css/angular-data-grid.bootstrap.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,21 @@
2424
.sortable.sort-descent:after {
2525
content: "\f0dd";
2626
vertical-align: top; }
27+
28+
#loading-bar {
29+
position: fixed;
30+
top: 0;
31+
left: 0;
32+
right: 0;
33+
bottom: 0;
34+
background: rgba(0, 0, 0, 0.2);
35+
z-index: 11002; }
36+
37+
#loading-bar-spinner {
38+
display: block;
39+
position: fixed;
40+
z-index: 11002;
41+
top: 50%;
42+
left: 50%;
43+
margin-left: -15px;
44+
margin-right: -15px; }

demo/100k/index.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<link rel="icon" href="https://angularjs.org/favicon.ico" type="image/x-icon">
77
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
88
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
9+
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.css' type='text/css' media='all' />
910
<link rel="stylesheet" href="css/angular-data-grid.bootstrap.css">
1011
</head>
1112
<body ng-app="myApp" ng-controller="myAppController" ng-cloak>
@@ -31,10 +32,10 @@ <h3>Angular Data Grid 100k Example</h3>
3132
<div class="form-group">
3233
<label for="orderIdFilter">Search by User ID</label>
3334
<input id="orderIdFilter" type="text" class="form-control order-search-box"
34-
placeholder="Enter User ID"
35+
placeholder="Enter User Name"
3536
ng-change="gridActions.filter()"
36-
ng-model="id"
37-
filter-by="id"
37+
ng-model="name"
38+
filter-by="name"
3839
filter-type="text">
3940
</div>
4041
</div>
@@ -107,8 +108,7 @@ <h3>Angular Data Grid 100k Example</h3>
107108
<div grid-data id='test' grid-options="gridOptions" grid-actions="gridActions">
108109
<div class="row">
109110
<div class="col-md-3" ng-cloak>
110-
<span class="items" ng-bind="filtered.length">{{filtered.length}} users total</span>
111-
<div>Time stats</div>
111+
<span class="items" ng-bind="filtered.length + ' items total' "></span>
112112
<div>Copy time: {{_time.copy}}</div>
113113
<div>Filter time: {{_time.filters}}</div>
114114
<div>Sort time: {{_time.sort}}</div>
@@ -212,6 +212,7 @@ <h3>Angular Data Grid 100k Example</h3>
212212
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
213213
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
214214
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
215+
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.js'></script>
215216
<script src="../../dist/pagination.min.js"></script>
216217
<script src="../../dist/dataGrid.js"></script>
217218
<script src="js/demoApp.js"></script>

demo/100k/js/demoApp.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
(function () {
22
'use strict';
33

4-
angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination'])
4+
angular.module('myApp', ['ui.bootstrap', 'dataGrid', 'pagination', 'angular-loading-bar', 'ngAnimate'])
55
.controller('myAppController', ['$scope', '$http', function ($scope, $http) {
66

77
$scope.gridOptions = {

demo/100k/scss/angular-data-grid.bootstrap.scss

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,4 +29,24 @@
2929
content: "\f0dd";
3030
vertical-align: top;
3131
}
32+
}
33+
34+
#loading-bar {
35+
position: fixed;
36+
top: 0;
37+
left: 0;
38+
right: 0;
39+
bottom: 0;
40+
background: rgba(0, 0, 0, 0.2);
41+
z-index: 11002;
42+
}
43+
44+
#loading-bar-spinner {
45+
display: block;
46+
position: fixed;
47+
z-index: 11002;
48+
top: 50%;
49+
left: 50%;
50+
margin-left: -15px;
51+
margin-right: -15px;
3252
}

demo/material/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>Angular Data Grid - Material Design</title>
66
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
77
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
8-
<link rel="stylesheet" href="https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.1-master-a687bfc/angular-material.css">
8+
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
99
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-blue.min.css">
1010
<link rel="stylesheet" href="css/angular-data-grid.material.css">
1111
</head>
@@ -185,7 +185,7 @@ <h4>Angular Data Grid sample using Material Design styling</h4>
185185
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
186186
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
187187
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
188-
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
188+
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
189189
<script src="../../dist/pagination.min.js"></script>
190190
<script src="../../dist/dataGrid.min.js"></script>
191191
<script src="js/demoApp.js"></script>

gulpfile.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,9 @@
3838
gulp.src('./demo/bootstrap/scss/angular-data-grid.bootstrap.scss')
3939
.pipe(sass().on('error', sass.logError))
4040
.pipe(gulp.dest('./demo/bootstrap/css/'));
41+
gulp.src('./demo/100k/scss/angular-data-grid.bootstrap.scss')
42+
.pipe(sass().on('error', sass.logError))
43+
.pipe(gulp.dest('./demo/100k/css/'));
4144
});
4245

4346
gulp.task('build', ['js', 'sass']);

0 commit comments

Comments
 (0)