Implemented css working indicator

This commit is contained in:
benweet 2013-11-16 18:09:33 +00:00
parent d3069049b2
commit 03192b6f41
23 changed files with 42 additions and 23 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

View File

@ -2,20 +2,41 @@ define([
"jquery",
"underscore",
"classes/Extension",
], function($, _, Extension) {
"crel"
], function ($, _, Extension, crel) {
var workingIndicator = new Extension("workingIndicator", "Working Indicator");
var $bodyElt;
var $workingIndicatorElt;
workingIndicator.onAsyncRunning = function(isRunning) {
var intervalId;
workingIndicator.onAsyncRunning = function (isRunning) {
$bodyElt.toggleClass("working", isRunning);
$workingIndicatorElt.toggleClass("show", isRunning);
if(isRunning) {
animate();
intervalId = setInterval(animate, 200);
}
else {
clearInterval(intervalId);
}
};
workingIndicator.onReady = function() {
var indicatorElts = [];
var loop = 0;
function animate() {
indicatorElts[loop].className = '';
loop = (loop + 1) % 3;
indicatorElts[loop].className = 'highlighted';
}
workingIndicator.onReady = function () {
$bodyElt = $(document.body);
$workingIndicatorElt = $(".working-indicator");
for (var i = 0; i < 3; i++) {
indicatorElts.push(crel('div'));
}
$workingIndicatorElt.append(indicatorElts);
};
return workingIndicator;

View File

@ -35,7 +35,7 @@
placeholder="Document title" /></li>
</ul>
<ul class="nav pull-right">
<li><i class="working-indicator icon-none"></i></li>
<li><div class="working-indicator"></div></li>
</ul>
</div>
</div>

View File

@ -29,7 +29,7 @@
<li><span class="file-title-navbar"></span></li>
</ul>
<ul class="nav pull-right">
<li><i class="working-indicator icon-none"></i></li>
<li><div class="working-indicator"></div></li>
</ul>
</div>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

View File

@ -330,12 +330,22 @@ a {
}
.working-indicator {
width: 50px;
height: 17px;
background-position: 0 0;
margin-top: 12px;
&.show {
.img-retina('../img/loader-default.gif', '../img/loader-default2x.gif', 50px, 17px);
margin: 12px -2px 0;
div {
display: inline-block;
visibility: hidden;
width: 14px;
height: 14px;
border-radius: 6px;
margin: 0 2px;
background-color: fade(@btn-success-color, 25%);
.transition(~"background-color linear .15s");
&.highlighted {
background-color: fade(@btn-success-color, 75%);
}
}
&.show div {
visibility: visible;
}
}
}

View File

@ -1,7 +1,3 @@
@import "../styles/main.less";
@primary-bg: #d9dfe3;
.navbar .working-indicator.show {
.img-retina('../img/loader-blue-gray.gif', '../img/loader-blue-gray2x.gif', 50px, 17px);
}

View File

@ -44,10 +44,6 @@
.box-shadow(~"inset 0 1px 1px rgba(255, 255, 255, 0), 0 0 8px rgba(255, 255, 255, 0.75)");
}
.navbar .working-indicator.show {
.img-retina('../img/loader-night.gif', '../img/loader-night2x.gif', 50px, 17px);
}
.ace-tm {
.ace_cursor {
border-left-color: #fff;

View File

@ -87,7 +87,3 @@ h1, h2, h3, h4, h5, h6 {
font-family: 'cursive_standardregular';
line-height: 34px;
}
.navbar .working-indicator.show {
.img-retina('../img/loader-school.gif', '../img/loader-school2x.gif', 50px, 17px);
}