Implemented css working indicator
Before Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 8.6 KiB |
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 8.9 KiB |
Before Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 24 KiB |
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
Before Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 24 KiB |
Before Width: | Height: | Size: 8.6 KiB |
Before Width: | Height: | Size: 18 KiB |
Before Width: | Height: | Size: 8.9 KiB |
Before Width: | Height: | Size: 21 KiB |
Before Width: | Height: | Size: 10 KiB |
Before Width: | Height: | Size: 24 KiB |
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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);
|
||||
}
|
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
|