admin: Add an animation when modifications are in progress
This commit is contained in:
parent
34f175e57b
commit
b86a6ebc0c
@ -64,6 +64,21 @@ const indextpl = `<!DOCTYPE html>
|
|||||||
.col img {
|
.col img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
.circle-anim {
|
||||||
|
z-index:1;
|
||||||
|
border: black 1px solid;
|
||||||
|
border-radius: .5em;
|
||||||
|
margin-top: .4em;
|
||||||
|
margin-left: .5em;
|
||||||
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
transition: transform ease-in .7s;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
.circle-anim.play {
|
||||||
|
transform: scale(250);
|
||||||
|
opacity:0;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<base href="{{.urlbase}}">
|
<base href="{{.urlbase}}">
|
||||||
<script src="js/d3.v3.min.js"></script>
|
<script src="js/d3.v3.min.js"></script>
|
||||||
@ -109,6 +124,10 @@ const indextpl = `<!DOCTYPE html>
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<span id="clock" class="navbar-text" ng-controller="CountdownController" ng-cloak>
|
<span id="clock" class="navbar-text" ng-controller="CountdownController" ng-cloak>
|
||||||
|
<div style="position: absolute;">
|
||||||
|
<div style="position: absolute;" id="circle1" class="circle-anim border-danger"></div>
|
||||||
|
<div style="position: absolute;" id="circle2" class="circle-anim border-info"></div>
|
||||||
|
</div>
|
||||||
<button type="button" class="mr-2 btn btn-sm" ng-class="{'btn-info':staticFilesNeedUpdate,'btn-secondary':!staticFilesNeedUpdate}" ng-click="regenerateStaticFiles()"><span class="glyphicon glyphicon-refresh" aria-hidden="true" title="Regénérer les fichiers statiques"></span><span ng-if="staticFilesNeedUpdate"> {{ "{{ staticFilesNeedUpdate }}" }}</span></button>
|
<button type="button" class="mr-2 btn btn-sm" ng-class="{'btn-info':staticFilesNeedUpdate,'btn-secondary':!staticFilesNeedUpdate}" ng-click="regenerateStaticFiles()"><span class="glyphicon glyphicon-refresh" aria-hidden="true" title="Regénérer les fichiers statiques"></span><span ng-if="staticFilesNeedUpdate"> {{ "{{ staticFilesNeedUpdate }}" }}</span></button>
|
||||||
<span ng-show="startIn > 0">
|
<span ng-show="startIn > 0">
|
||||||
Démarrage dans :
|
Démarrage dans :
|
||||||
|
@ -450,7 +450,7 @@ angular.module("FICApp")
|
|||||||
};
|
};
|
||||||
})
|
})
|
||||||
|
|
||||||
.run(function($rootScope, $http, $interval, Settings, $location) {
|
.run(function($rootScope, $http, $interval, $timeout, Settings, $location) {
|
||||||
$rootScope.$location = $location;
|
$rootScope.$location = $location;
|
||||||
$rootScope.Utils = {
|
$rootScope.Utils = {
|
||||||
keys : Object.keys
|
keys : Object.keys
|
||||||
@ -491,6 +491,24 @@ angular.module("FICApp")
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
$rootScope.$on('$locationChangeStart', function(event, next, current) {
|
||||||
|
if($rootScope.staticFilesNeedUpdate) {
|
||||||
|
$timeout(function () {
|
||||||
|
document.getElementById("circle1").classList.add("play");
|
||||||
|
}, 10);
|
||||||
|
$timeout(function () {
|
||||||
|
document.getElementById("circle1").classList.remove("play");
|
||||||
|
}, 710);
|
||||||
|
|
||||||
|
$timeout(function () {
|
||||||
|
document.getElementById("circle2").classList.add("play");
|
||||||
|
}, 50);
|
||||||
|
$timeout(function () {
|
||||||
|
document.getElementById("circle2").classList.remove("play");
|
||||||
|
}, 750);
|
||||||
|
}
|
||||||
|
});
|
||||||
})
|
})
|
||||||
|
|
||||||
.controller("VersionController", function($scope, Version) {
|
.controller("VersionController", function($scope, Version) {
|
||||||
|
Loading…
Reference in New Issue
Block a user