From 0573e2d31c9c608aa984c8f5378e8f0097f4c774 Mon Sep 17 00:00:00 2001 From: Michael Wood Date: Thu, 21 May 2015 18:44:18 +0100 Subject: 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 Signed-off-by: Richard Purdie --- .../lib/toaster/toastergui/static/css/default.css | 49 ++++++++++++++++++++++ .../lib/toaster/toastergui/static/js/libtoaster.js | 22 ++++++++++ bitbake/lib/toaster/toastergui/templates/base.html | 5 +++ 3 files changed, 76 insertions(+) (limited to 'bitbake') 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 @@ + + +