diff options
| author |   Michael Wood <michael.g.wood@intel.com> | 2015-05-21 18:44:18 +0100 |
|---|---|---|
| committer |   Alexandru DAMIAN <alexandru.damian@intel.com> | 2015-06-10 15:31:12 +0100 |
| commit | ecb70b0bc996529f1a6e58e5716b31e273395c98 (patch) | |
| tree | bfc81a1f0d3b0881dc2b22ef153b0926547ae74a /lib | |
| parent | 058e9db05767f2d46d46c02dd5043bb0f6b8e460 (diff) | |
| download | bitbake-contrib-ecb70b0bc996529f1a6e58e5716b31e273395c98.tar.gz | |
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]
Signed-off-by: Michael Wood <michael.g.wood@intel.com>
Diffstat (limited to 'lib')
| -rw-r--r-- | lib/toaster/toastergui/static/css/default.css | 49 | ||||
| -rw-r--r-- | lib/toaster/toastergui/static/js/libtoaster.js | 22 | ||||
| -rw-r--r-- | lib/toaster/toastergui/templates/base.html | 5 |
3 files changed, 76 insertions, 0 deletions
diff --git a/lib/toaster/toastergui/static/css/default.css b/lib/toaster/toastergui/static/css/default.css index 739efbfbb..115abc417 100644 --- a/lib/toaster/toastergui/static/css/default.css +++ b/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/lib/toaster/toastergui/static/js/libtoaster.js b/lib/toaster/toastergui/static/js/libtoaster.js index 23755a75f..c3798336f 100644 --- a/lib/toaster/toastergui/static/js/libtoaster.js +++ b/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/lib/toaster/toastergui/templates/base.html b/lib/toaster/toastergui/templates/base.html index 6cdc5e811..9f19c0384 100644 --- a/lib/toaster/toastergui/templates/base.html +++ b/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> |