admin: Add an animation when modifications are in progress

This commit is contained in:
nemunaire 2023-06-17 02:07:27 +02:00
parent 34f175e57b
commit b86a6ebc0c
2 changed files with 38 additions and 1 deletions

View File

@ -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 :

View File

@ -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) {