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>
author: Michael Wood <michael.g.wood@intel.com> 2015-05-21 18:44:18 +0100
committer: Richard Purdie <richard.purdie@linuxfoundation.org> 2015-06-12 00:01:49 +0100
commit: 0573e2d31c9c608aa984c8f5378e8f0097f4c774 (patch)
tree: 8693636d548b8053d390a643c967159500c59aef /bitbake/lib/toaster/toastergui
parent: eb28534423092624c6a82cbf8ffcff23a41b7ec0 (diff)
download: poky-0573e2d31c9c608aa984c8f5378e8f0097f4c774.tar.gz
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; }
 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 */
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) {
 /* 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 = {};
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 @@
    </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>
author	Michael Wood <michael.g.wood@intel.com>	2015-05-21 18:44:18 +0100
committer	Richard Purdie <richard.purdie@linuxfoundation.org>	2015-06-12 00:01:49 +0100
commit	0573e2d31c9c608aa984c8f5378e8f0097f4c774 (patch)
tree	8693636d548b8053d390a643c967159500c59aef /bitbake/lib/toaster/toastergui
parent	eb28534423092624c6a82cbf8ffcff23a41b7ec0 (diff)
download	poky-0573e2d31c9c608aa984c8f5378e8f0097f4c774.tar.gz

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
260	thead .description, .get_description_or_summary { width: 364px; }	260	thead .description, .get_description_or_summary { width: 364px; }
261	thead .add-del-layers { width: 124px; }	261	thead .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>