diff options
| 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 | |
| parent | eb28534423092624c6a82cbf8ffcff23a41b7ec0 (diff) | |
| download | openembedded-core-contrib-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')
| -rw-r--r-- | bitbake/lib/toaster/toastergui/static/css/default.css | 49 | ||||
| -rw-r--r-- | bitbake/lib/toaster/toastergui/static/js/libtoaster.js | 22 | ||||
| -rw-r--r-- | bitbake/lib/toaster/toastergui/templates/base.html | 5 |
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> |