sysmo-bts
/
generic-poky
9
0
Fork 0
Code Pull Requests Releases Activity

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:
Michael Wood 2015-05-21 18:44:18 +01:00 committed by Richard Purdie
parent eb28534423
commit 0573e2d31c
3 changed files with 76 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
bitbake/lib/toaster/toastergui/static/css/default.css
View File

@ -259,3 +259,52 @@ div.add-deps { margin-top: 15px; }
thead .description, .get_description_or_summary { width: 364px; }
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 */

22
bitbake/lib/toaster/toastergui/static/js/libtoaster.js
View File

@ -341,6 +341,8 @@ function reload_params(params) {
/* Things that happen for all pages */
$(document).ready(function() {
var ajaxLoadingTimer;
/* If we don't have a console object which might be the case in some
* browsers, no-op it to avoid undefined errors.
*/
@ -482,6 +484,26 @@ $(document).ready(function() {
$('#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 () {
/* warn about duplicate element ids */
var ids = {};

5
bitbake/lib/toaster/toastergui/templates/base.html
View File

@ -68,6 +68,11 @@
</head>
<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-inner">
<a class="brand logo" href="#"><img src="{% static 'img/logo.png' %}" class="" alt="Yocto logo project"/></a>