bitbake: toaster: Add ajax loading spinner
This adds an ajax loading spinner to provide feedback when in-page loading is happening. It will show after 1.2 seconds of initial loading. [YOCTO #7790] (Bitbake rev: ecb70b0bc996529f1a6e58e5716b31e273395c98) Signed-off-by: Michael Wood <michael.g.wood@intel.com> Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>
This commit is contained in:
parent
eb28534423
commit
0573e2d31c
|
@ -259,3 +259,52 @@ div.add-deps { margin-top: 15px; }
|
||||||
|
|
||||||
thead .description, .get_description_or_summary { width: 364px; }
|
thead .description, .get_description_or_summary { width: 364px; }
|
||||||
thead .add-del-layers { width: 124px; }
|
thead .add-del-layers { width: 124px; }
|
||||||
|
|
||||||
|
#loading-notification {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 101;
|
||||||
|
top: 3%;
|
||||||
|
left: 40%;
|
||||||
|
right: 40%;
|
||||||
|
#c09853
|
||||||
|
-webkit-box-shadow: 0 0 10px #c09853;
|
||||||
|
-moz-box-shadow: 0 0 10px #c09853;
|
||||||
|
box-shadow: 0 0 10px #c09853;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Copied in from newer version of Font-Awesome 4.3.0 */
|
||||||
|
.fa-spin {
|
||||||
|
-webkit-animation: fa-spin 2s infinite linear;
|
||||||
|
animation: fa-spin 2s infinite linear;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.fa-pulse {
|
||||||
|
-webkit-animation: fa-spin 1s infinite steps(8);
|
||||||
|
animation: fa-spin 1s infinite steps(8);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes fa-spin {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(359deg);
|
||||||
|
transform: rotate(359deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fa-spin {
|
||||||
|
0% {
|
||||||
|
-webkit-transform: rotate(0deg);
|
||||||
|
-moz-transform: rotate(0deg);
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
-webkit-transform: rotate(359deg);
|
||||||
|
-moz-transform: rotate(359deg);
|
||||||
|
transform: rotate(359deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* End copied in from newer version of Font-Awesome 4.3.0 */
|
||||||
|
|
|
@ -341,6 +341,8 @@ function reload_params(params) {
|
||||||
/* Things that happen for all pages */
|
/* Things that happen for all pages */
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
|
|
||||||
|
var ajaxLoadingTimer;
|
||||||
|
|
||||||
/* If we don't have a console object which might be the case in some
|
/* If we don't have a console object which might be the case in some
|
||||||
* browsers, no-op it to avoid undefined errors.
|
* browsers, no-op it to avoid undefined errors.
|
||||||
*/
|
*/
|
||||||
|
@ -482,6 +484,26 @@ $(document).ready(function() {
|
||||||
$('#collapse-warnings').addClass('in');
|
$('#collapse-warnings').addClass('in');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Show the loading notification if nothing has happend after 1.5
|
||||||
|
* seconds
|
||||||
|
*/
|
||||||
|
$(document).bind("ajaxStart", function(){
|
||||||
|
if (ajaxLoadingTimer)
|
||||||
|
window.clearTimeout(ajaxLoadingTimer);
|
||||||
|
|
||||||
|
ajaxLoadingTimer = window.setTimeout(function() {
|
||||||
|
$("#loading-notification").fadeIn();
|
||||||
|
}, 1200);
|
||||||
|
});
|
||||||
|
|
||||||
|
$(document).bind("ajaxStop", function(){
|
||||||
|
if (ajaxLoadingTimer)
|
||||||
|
window.clearTimeout(ajaxLoadingTimer);
|
||||||
|
|
||||||
|
$("#loading-notification").fadeOut();
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
function check_for_duplicate_ids () {
|
function check_for_duplicate_ids () {
|
||||||
/* warn about duplicate element ids */
|
/* warn about duplicate element ids */
|
||||||
var ids = {};
|
var ids = {};
|
||||||
|
|
|
@ -68,6 +68,11 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body style="height: 100%">
|
<body style="height: 100%">
|
||||||
|
|
||||||
|
<div id="loading-notification" class="alert lead text-center" style="display:none">
|
||||||
|
Loading <i class="fa-pulse icon-spinner"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="navbar navbar-static-top">
|
<div class="navbar navbar-static-top">
|
||||||
<div class="navbar-inner">
|
<div class="navbar-inner">
|
||||||
<a class="brand logo" href="#"><img src="{% static 'img/logo.png' %}" class="" alt="Yocto logo project"/></a>
|
<a class="brand logo" href="#"><img src="{% static 'img/logo.png' %}" class="" alt="Yocto logo project"/></a>
|
||||||
|
|
Loading…
Reference in New Issue