]> git.ipfire.org Git - thirdparty/openembedded/openembedded-core-contrib.git/commitdiff
projects / thirdparty / openembedded / openembedded-core-contrib.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: eb28534)
bitbake: toaster: Add ajax loading spinner
authorMichael Wood <michael.g.wood@intel.com>
Thu, 21 May 2015 17:44:18 +0000 (18:44 +0100)
committerRichard Purdie <richard.purdie@linuxfoundation.org>
Thu, 11 Jun 2015 23:01:49 +0000 (00:01 +0100)
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>
bitbake/lib/toaster/toastergui/static/css/default.css patch | blob | blame | history
bitbake/lib/toaster/toastergui/static/js/libtoaster.js patch | blob | blame | history
bitbake/lib/toaster/toastergui/templates/base.html patch | blob | blame | history

diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css
index 739efbfbbeac99d670190626d2c29cb8e84bb3f4..115abc4176e6f94df262630b594ef754ce26baad 100644 (file)
--- 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 23755a75f2bb77e2748e3232a864c2e648093ded..c3798336f2b3042b0ce46a0a08569166b1b1bd9a 100644 (file)
--- 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 6cdc5e8110016bdc0f25179d369566f689a87477..9f19c0384c64ab816a418eaa211d3a0a9088b4dd 100644 (file)
--- 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>
Mirror of git://git.openembedded.org/openembedded-core-contrib