diff options
-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> |