Skip to content

Commit da9e359

Browse files
Thomas Rueckstiessrueckstiess
Thomas Rueckstiess
authored and
rueckstiess
committed
use new behavior but old styling. delete nprogress.
1 parent d8a61bd commit da9e359

File tree

6 files changed

+93
-174
lines changed

6 files changed

+93
-174
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,6 @@
139139
"mongodb-schema": "^3.3.1",
140140
"mousetrap": "^1.5.3",
141141
"node-notifier": "^4.3.1",
142-
"nprogress": "^0.2.0",
143142
"numeral": "^1.5.3",
144143
"octicons": "https://github.com/github/octicons/archive/v3.1.0.tar.gz",
145144
"pluralize": "^1.2.1",

‎src/models/sampled-schema.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -203,22 +203,22 @@ module.exports = Schema.extend({
203203
debug('creating sample stream');
204204
var status = 0;
205205
var counter = 0;
206-
app.statusbar.show();
206+
app.statusbar.show('Sampling collection...');
207+
app.statusbar.width = 1;
208+
app.statusbar.trickle(true);
207209
app.client.sample(model.ns, options)
208210
.pipe(es.map(parse))
209211
.once('data', function() {
210-
// disable trickling
211-
status = app.statusbar.status();
212-
debug('first doc arrived', status);
212+
status = app.statusbar.width;
213+
app.statusbar.message = 'Analyzing documents...';
214+
app.statusbar.trickle(false);
213215
})
214216
.on('data', function() {
215217
counter ++;
216218
if (counter % 7 === 0) {
217-
var inc = (1.0 - status) * 7 / options.size;
218-
app.statusbar.inc(inc);
219+
var inc = (100 - status) * 7 / options.size;
220+
app.statusbar.width += inc;
219221
}
220-
// inc statusbar
221-
// debug('more docs', inc);
222222
})
223223
.pipe(es.map(addToDocuments))
224224
.pipe(es.wait(onEnd));

‎src/statusbar/index.jade‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
#statusbar.progress
2-
//- .progress(data-hook='outer-bar')
3-
//- .progress-bar.progress-bar-striped.active(data-hook='inner-bar')
1+
#statusbar
2+
.progress(data-hook='outer-bar')
3+
.progress-bar.progress-bar-striped.active(data-hook='inner-bar')
44
ul.message-background.with-sidebar.centered(data-hook='message-container'): li
55
p(data-hook='message')
66
.spinner-circles(data-hook='loading')

‎src/statusbar/index.js‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
var View = require('ampersand-view');
2-
var NProgress = require('nprogress');
32
var debug = require('debug')('scout:statusbar:index');
43

54
var StatusbarView = View.extend({
65
props: {
6+
trickleTimer: 'any',
77
width: {
88
type: 'number',
9-
default: 100
9+
default: 0
1010
},
1111
message: {
1212
type: 'string'
@@ -64,10 +64,6 @@ var StatusbarView = View.extend({
6464
}
6565
}
6666
},
67-
render: function() {
68-
this.renderWithTemplate(this);
69-
NProgress.configure({ parent: '#statusbar', easing: 'ease', speed: 800, trickle: true });
70-
},
7167
watch: function(view, collection) {
7268
// view.listenTo(collection, 'sync', this.onComplete.bind(this));
7369
// view.listenTo(collection, 'request', this.onRequest.bind(this));
@@ -88,32 +84,33 @@ var StatusbarView = View.extend({
8884
fatal: function(err) {
8985
this.loading = false;
9086
this.message = 'Fatal Error: ' + err.message;
87+
this.width = 100;
88+
clearInterval(this.trickleTimer);
89+
},
90+
trickle: function(bool) {
91+
if (bool) {
92+
this.trickleTimer = setInterval(function() {
93+
var inc = _.random(1, 5);
94+
this.width = Math.min(96, this.width + inc);
95+
}.bind(this), 800);
96+
} else {
97+
clearInterval(this.trickleTimer);
98+
}
9199
},
92100
show: function(message) {
93-
debug('show');
94-
NProgress.start()
95101
this.message = message || '';
96-
// this.width = 100;
102+
this.width = 100;
97103
this.loading = true;
98104
},
99-
inc: function(val) {
100-
NProgress.inc(val);
101-
debug('NProgress', NProgress);
102-
},
103-
trickle: function(bool) {
104-
NProgress.configure({ trickle: bool });
105-
},
106-
status: function() {
107-
return NProgress.status;
108-
},
109105
hide: function() {
110-
NProgress.set(1);
111-
_.delay(function() {
112-
NProgress.done();
113-
}, 800);
106+
this.width = 100;
114107
this.message = '';
115-
// this.width = 0;
116108
this.loading = false;
109+
clearInterval(this.trickleTimer);
110+
var model = this;
111+
_.delay(function() {
112+
model.width = 0;
113+
}, 1000);
117114
}
118115
});
119116

‎src/statusbar/index.less‎

Lines changed: 57 additions & 134 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,68 @@
1-
/* Make clicks pass-through */
2-
#nprogress {
3-
pointer-events: none;
4-
}
5-
6-
#nprogress .bar {
7-
background: #6ba442;
8-
1+
#statusbar {
2+
background: 0 0;
93
position: fixed;
10-
z-index: 1031;
114
top: 0;
125
left: 0;
13-
14-
width: 100%;
15-
height: 3px;
16-
}
17-
18-
/* Fancy blur effect */
19-
#nprogress .peg {
20-
display: block;
21-
position: absolute;
22-
right: 0px;
23-
width: 100px;
6+
right: 0;
7+
z-index: 1020;
248
height: 100%;
25-
box-shadow: 0 0 10px #6ba442, 0 0 5px #6ba442;
26-
opacity: 1.0;
27-
28-
-webkit-transform: rotate(3deg) translate(0px, -4px);
29-
-ms-transform: rotate(3deg) translate(0px, -4px);
30-
transform: rotate(3deg) translate(0px, -4px);
31-
}
32-
33-
/* Remove these to get rid of the spinner */
34-
#nprogress .spinner {
35-
display: block;
36-
position: fixed;
37-
z-index: 1031;
38-
top: 15px;
39-
right: 15px;
40-
}
41-
42-
#nprogress .spinner-icon {
43-
width: 18px;
44-
height: 18px;
45-
box-sizing: border-box;
9+
width: 100%;
4610

47-
border: solid 2px transparent;
48-
border-top-color: #6ba442;
49-
border-left-color: #6ba442;
50-
border-radius: 50%;
11+
.progress {
12+
position: fixed;
13+
top: 0;
14+
left: 0;
15+
right: 0;
16+
text-align: center;
17+
height: 4px;
18+
z-index: 2000;
19+
border-radius: 0;
20+
transition: height 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
5121

52-
-webkit-animation: nprogress-spinner 400ms linear infinite;
53-
animation: nprogress-spinner 400ms linear infinite;
54-
}
22+
.progress-bar {
23+
background-color: #6ba442;
24+
}
25+
}
26+
.message-background {
27+
.spinner-circles {
28+
width: 40px;
29+
height: 40px;
30+
position: relative;
31+
margin: 40px auto;
5532

56-
.nprogress-custom-parent {
57-
overflow: hidden;
58-
position: relative;
59-
}
33+
.circle-1, .circle-2 {
34+
width: 100%;
35+
height: 100%;
36+
border-radius: 50%;
37+
background-color: @mc-blue0;
38+
opacity: 0.6;
39+
position: absolute;
40+
top: 0;
41+
left: 0;
6042

61-
.nprogress-custom-parent #nprogress .spinner,
62-
.nprogress-custom-parent #nprogress .bar {
63-
position: absolute;
64-
}
43+
-webkit-animation: bounce 2.0s infinite ease-in-out;
44+
animation: bounce 2.0s infinite ease-in-out;
45+
}
6546

66-
@-webkit-keyframes nprogress-spinner {
67-
0% { -webkit-transform: rotate(0deg); }
68-
100% { -webkit-transform: rotate(360deg); }
69-
}
70-
@keyframes nprogress-spinner {
71-
0% { transform: rotate(0deg); }
72-
100% { transform: rotate(360deg); }
73-
}
47+
.circle-2 {
48+
-webkit-animation-delay: -1.0s;
49+
animation-delay: -1.0s;
50+
}
7451

75-
#statusbar {
76-
height: 5px;
77-
}
52+
@-webkit-keyframes bounce {
53+
0%, 100% { -webkit-transform: scale(0.0) }
54+
50% { -webkit-transform: scale(1.0) }
55+
}
7856

79-
// background: 0 0;
80-
// position: fixed;
81-
// top: 0;
82-
// left: 0;
83-
// right: 0;
84-
// z-index: 1020;
85-
// height: 100%;
86-
// width: 100%;
87-
//
88-
// .progress {
89-
// position: fixed;
90-
// top: 0;
91-
// left: 0;
92-
// right: 0;
93-
// text-align: center;
94-
// height: 4px;
95-
// z-index: 2000;
96-
// border-radius: 0;
97-
// transition: height 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
98-
//
99-
// .progress-bar {
100-
// background-color: #6ba442;
101-
// }
102-
// }
103-
// .message-background {
104-
// .spinner-circles {
105-
// width: 40px;
106-
// height: 40px;
107-
// position: relative;
108-
// margin: 40px auto;
109-
//
110-
// .circle-1, .circle-2 {
111-
// width: 100%;
112-
// height: 100%;
113-
// border-radius: 50%;
114-
// background-color: @mc-blue0;
115-
// opacity: 0.6;
116-
// position: absolute;
117-
// top: 0;
118-
// left: 0;
119-
//
120-
// -webkit-animation: bounce 2.0s infinite ease-in-out;
121-
// animation: bounce 2.0s infinite ease-in-out;
122-
// }
123-
//
124-
// .circle-2 {
125-
// -webkit-animation-delay: -1.0s;
126-
// animation-delay: -1.0s;
127-
// }
128-
//
129-
// @-webkit-keyframes bounce {
130-
// 0%, 100% { -webkit-transform: scale(0.0) }
131-
// 50% { -webkit-transform: scale(1.0) }
132-
// }
133-
//
134-
// @keyframes bounce {
135-
// 0%, 100% {
136-
// transform: scale(0.0);
137-
// -webkit-transform: scale(0.0);
138-
// } 50% {
139-
// transform: scale(1.0);
140-
// -webkit-transform: scale(1.0);
141-
// }
142-
// }
143-
// }
144-
// }
145-
// }
57+
@keyframes bounce {
58+
0%, 100% {
59+
transform: scale(0.0);
60+
-webkit-transform: scale(0.0);
61+
} 50% {
62+
transform: scale(1.0);
63+
-webkit-transform: scale(1.0);
64+
}
65+
}
66+
}
67+
}
68+
}

‎styles/10strap.less‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -649,10 +649,10 @@ fieldset[disabled] .btn-link:focus {
649649
-webkit-box-sizing: border-box;
650650
-moz-box-sizing: border-box;
651651
box-sizing: border-box;
652-
-webkit-transition: width 0.6s ease;
653-
-moz-transition: width 0.6s ease;
654-
-o-transition: width 0.6s ease;
655-
transition: width 0.6s ease;
652+
-webkit-transition: width 0.8s ease;
653+
-moz-transition: width 0.8s ease;
654+
-o-transition: width 0.8s ease;
655+
transition: width 0.8s ease;
656656
}
657657
.progress.active .progress-bar {
658658
-webkit-animation: progress-bar-stripes 0.6s linear infinite;

0 commit comments

Comments
 (0)