summaryrefslogtreecommitdiffstats
path: root/bitbake/lib
diff options
context:
space:
mode:
authorMichael Wood <michael.g.wood@intel.com>2015-05-21 18:44:18 +0100
committerRichard Purdie <richard.purdie@linuxfoundation.org>2015-06-12 00:01:49 +0100
commit0573e2d31c9c608aa984c8f5378e8f0097f4c774 (patch)
tree8693636d548b8053d390a643c967159500c59aef /bitbake/lib
parenteb28534423092624c6a82cbf8ffcff23a41b7ec0 (diff)
downloadpoky-0573e2d31c9c608aa984c8f5378e8f0097f4c774.tar.gz
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>
Diffstat (limited to 'bitbake/lib')
-rw-r--r--bitbake/lib/toaster/toastergui/static/css/default.css49
-rw-r--r--bitbake/lib/toaster/toastergui/static/js/libtoaster.js22
-rw-r--r--bitbake/lib/toaster/toastergui/templates/base.html5
3 files changed, 76 insertions, 0 deletions
diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css
index 739efbfbbe..115abc4176 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -259,3 +259,52 @@ div.add-deps { margin-top: 15px; }
259 259
260thead .description, .get_description_or_summary { width: 364px; } 260thead .description, .get_description_or_summary { width: 364px; }
261thead .add-del-layers { width: 124px; } 261thead .add-del-layers { width: 124px; }
262
263#loading-notification {
264 position: fixed;
265 z-index: 101;
266 top: 3%;
267 left: 40%;
268 right: 40%;
269 #c09853
270 -webkit-box-shadow: 0 0 10px #c09853;
271 -moz-box-shadow: 0 0 10px #c09853;
272 box-shadow: 0 0 10px #c09853;
273}
274
275/* Copied in from newer version of Font-Awesome 4.3.0 */
276.fa-spin {
277 -webkit-animation: fa-spin 2s infinite linear;
278 animation: fa-spin 2s infinite linear;
279 display: inline-block;
280}
281.fa-pulse {
282 -webkit-animation: fa-spin 1s infinite steps(8);
283 animation: fa-spin 1s infinite steps(8);
284 display: inline-block;
285}
286
287@-webkit-keyframes fa-spin {
288 0% {
289 -webkit-transform: rotate(0deg);
290 transform: rotate(0deg);
291 }
292 100% {
293 -webkit-transform: rotate(359deg);
294 transform: rotate(359deg);
295 }
296}
297
298@keyframes fa-spin {
299 0% {
300 -webkit-transform: rotate(0deg);
301 -moz-transform: rotate(0deg);
302 transform: rotate(0deg);
303 }
304 100% {
305 -webkit-transform: rotate(359deg);
306 -moz-transform: rotate(359deg);
307 transform: rotate(359deg);
308 }
309}
310/* End copied in from newer version of Font-Awesome 4.3.0 */
diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
index 23755a75f2..c3798336f2 100644
--- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
+++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
@@ -341,6 +341,8 @@ function reload_params(params) {
341/* Things that happen for all pages */ 341/* Things that happen for all pages */
342$(document).ready(function() { 342$(document).ready(function() {
343 343
344 var ajaxLoadingTimer;
345
344 /* If we don't have a console object which might be the case in some 346 /* If we don't have a console object which might be the case in some
345 * browsers, no-op it to avoid undefined errors. 347 * browsers, no-op it to avoid undefined errors.
346 */ 348 */
@@ -482,6 +484,26 @@ $(document).ready(function() {
482 $('#collapse-warnings').addClass('in'); 484 $('#collapse-warnings').addClass('in');
483 } 485 }
484 486
487 /* Show the loading notification if nothing has happend after 1.5
488 * seconds
489 */
490 $(document).bind("ajaxStart", function(){
491 if (ajaxLoadingTimer)
492 window.clearTimeout(ajaxLoadingTimer);
493
494 ajaxLoadingTimer = window.setTimeout(function() {
495 $("#loading-notification").fadeIn();
496 }, 1200);
497 });
498
499 $(document).bind("ajaxStop", function(){
500 if (ajaxLoadingTimer)
501 window.clearTimeout(ajaxLoadingTimer);
502
503 $("#loading-notification").fadeOut();
504 });
505
506
485 function check_for_duplicate_ids () { 507 function check_for_duplicate_ids () {
486 /* warn about duplicate element ids */ 508 /* warn about duplicate element ids */
487 var ids = {}; 509 var ids = {};
diff --git a/bitbake/lib/toaster/toastergui/templates/base.html b/bitbake/lib/toaster/toastergui/templates/base.html
index 6cdc5e8110..9f19c0384c 100644
--- a/bitbake/lib/toaster/toastergui/templates/base.html
+++ b/bitbake/lib/toaster/toastergui/templates/base.html
@@ -68,6 +68,11 @@
68 </head> 68 </head>
69 69
70<body style="height: 100%"> 70<body style="height: 100%">
71
72 <div id="loading-notification" class="alert lead text-center" style="display:none">
73 Loading <i class="fa-pulse icon-spinner"></i>
74 </div>
75
71<div class="navbar navbar-static-top"> 76<div class="navbar navbar-static-top">
72 <div class="navbar-inner"> 77 <div class="navbar-inner">
73 <a class="brand logo" href="#"><img src="{% static 'img/logo.png' %}" class="" alt="Yocto logo project"/></a> 78 <a class="brand logo" href="#"><img src="{% static 'img/logo.png' %}" class="" alt="Yocto logo project"/></a>