diff options
| author | Cesar G <prototech91@gmail.com> | 2013-10-15 21:37:53 -0700 |
|---|---|---|
| committer | Cesar G <prototech91@gmail.com> | 2013-10-29 07:27:08 -0700 |
| commit | da4e0c4219e5132ffddd67fc4621840c557c132a (patch) | |
| tree | 75f97ee6b303d8c9b43a6ab2bc05bb46064eab6d | |
| parent | 2f1cf0d287f416f1c3b388d5d3e68d897f226aaf (diff) | |
| download | forums-da4e0c4219e5132ffddd67fc4621840c557c132a.tar forums-da4e0c4219e5132ffddd67fc4621840c557c132a.tar.gz forums-da4e0c4219e5132ffddd67fc4621840c557c132a.tar.bz2 forums-da4e0c4219e5132ffddd67fc4621840c557c132a.tar.xz forums-da4e0c4219e5132ffddd67fc4621840c557c132a.zip | |
[ticket/11928] Replace AJAX loading popup with animation.
PHPBB3-11928
| -rw-r--r-- | phpBB/adm/images/loading.gif | bin | 0 -> 1320 bytes | |||
| -rw-r--r-- | phpBB/adm/style/admin.css | 14 | ||||
| -rw-r--r-- | phpBB/adm/style/overall_footer.html | 2 | ||||
| -rw-r--r-- | phpBB/assets/javascript/core.js | 33 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/template/overall_footer.html | 2 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/theme/colours.css | 5 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/theme/common.css | 14 | ||||
| -rw-r--r-- | phpBB/styles/prosilver/theme/images/loading.gif | bin | 0 -> 1320 bytes |
8 files changed, 55 insertions, 15 deletions
diff --git a/phpBB/adm/images/loading.gif b/phpBB/adm/images/loading.gif Binary files differnew file mode 100644 index 0000000000..e1ed0883e0 --- /dev/null +++ b/phpBB/adm/images/loading.gif diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css index 0cbdc2e9f8..fee2efb001 100644 --- a/phpBB/adm/style/admin.css +++ b/phpBB/adm/style/admin.css @@ -1593,6 +1593,20 @@ input.button1:focus, input.button2:focus, input.button3:focus { } } +#loading_indicator { + background: #000000 url("../images/loading.gif") center center no-repeat; + border-radius: 5px; + display: none; + opacity: 0.8; + margin-top: -50px; + margin-left: -50px; + height: 50px; + width: 50px; + position: fixed; + left: 50%; + top: 50%; +} + /* Pagination ---------------------------------------- */ .pagination { diff --git a/phpBB/adm/style/overall_footer.html b/phpBB/adm/style/overall_footer.html index 3c291842dc..72af9d3388 100644 --- a/phpBB/adm/style/overall_footer.html +++ b/phpBB/adm/style/overall_footer.html @@ -17,8 +17,8 @@ <div id="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}"> <div id="darken"> </div> - <div class="jalert" id="loadingalert"><h3>{L_LOADING}</h3><p>{L_PLEASE_WAIT}</p></div> </div> + <div id="loading_indicator"></div> <div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}"> <a href="#" class="alert_close"></a> diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index efb945a117..dfbbd12929 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -12,7 +12,7 @@ var keymap = { }; var dark = $('#darkenwrapper'); -var loadingAlert = $('#loadingalert'); +var loadingAlert = $('#loading_indicator'); var phpbbAlertTimer = null; @@ -22,18 +22,14 @@ var phpbbAlertTimer = null; * @returns object Returns loadingAlert. */ phpbb.loadingAlert = function() { - if (dark.is(':visible')) { + if (!loadingAlert.is(':visible')) { loadingAlert.fadeIn(phpbb.alertTime); - } else { - loadingAlert.show(); - dark.fadeIn(phpbb.alertTime, function() { - // Wait fifteen seconds and display an error if nothing has been returned by then. - phpbbAlertTimer = setTimeout(function() { - if (loadingAlert.is(':visible')) { - phpbb.alert($('#phpbb_alert').attr('data-l-err'), $('#phpbb_alert').attr('data-l-timeout-processing-req')); - } - }, 15000); - }); + // Wait fifteen seconds and display an error if nothing has been returned by then. + phpbbAlertTimer = setTimeout(function() { + if (loadingAlert.is(':visible')) { + phpbb.alert($('#phpbb_alert').attr('data-l-err'), $('#phpbb_alert').attr('data-l-timeout-processing-req')); + } + }, 15000); } return loadingAlert; @@ -66,6 +62,10 @@ phpbb.alert = function(title, msg, fadedark) { div.find('.alert_title').html(title); div.find('.alert_text').html(msg); + if (!dark.is(':visible')) { + dark.fadeIn(phpbb.alertTime); + } + div.bind('click', function(e) { e.stopPropagation(); }); @@ -131,6 +131,10 @@ phpbb.confirm = function(msg, callback, fadedark) { var div = $('#phpbb_confirm'); div.find('.alert_text').html(msg); + if (!dark.is(':visible')) { + dark.fadeIn(phpbb.alertTime); + } + div.bind('click', function(e) { e.stopPropagation(); }); @@ -372,13 +376,16 @@ phpbb.ajaxify = function(options) { phpbb.loadingAlert(); } - $.ajax({ + var request = $.ajax({ url: action, type: method, data: data, success: returnHandler, error: errorHandler }); + request.always(function() { + loadingAlert.fadeOut(phpbb.alertTime); + }); event.preventDefault(); }); diff --git a/phpBB/styles/prosilver/template/overall_footer.html b/phpBB/styles/prosilver/template/overall_footer.html index 86e55c54f6..a831ab6cb4 100644 --- a/phpBB/styles/prosilver/template/overall_footer.html +++ b/phpBB/styles/prosilver/template/overall_footer.html @@ -34,8 +34,8 @@ <div id="darkenwrapper" data-ajax-error-title="{L_AJAX_ERROR_TITLE}" data-ajax-error-text="{L_AJAX_ERROR_TEXT}" data-ajax-error-text-abort="{L_AJAX_ERROR_TEXT_ABORT}" data-ajax-error-text-timeout="{L_AJAX_ERROR_TEXT_TIMEOUT}" data-ajax-error-text-parsererror="{L_AJAX_ERROR_TEXT_PARSERERROR}"> <div id="darken"> </div> - <div class="phpbb_alert" id="loadingalert"><h3>{L_LOADING}</h3><p>{L_PLEASE_WAIT}</p></div> </div> + <div id="loading_indicator"></div> <div id="phpbb_alert" class="phpbb_alert" data-l-err="{L_ERROR}" data-l-timeout-processing-req="{L_TIMEOUT_PROCESSING_REQ}"> <a href="#" class="alert_close"></a> diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 960415afbf..d4e63bf3ec 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/phpBB/styles/prosilver/theme/colours.css @@ -1104,6 +1104,11 @@ input.disabled { background-color: #000000; } +#loading_indicator { + background-color: #000000; + background-image: url("./images/loading.gif"); +} + #notification_list ul li { border-bottom-color: #B9B9B9; } diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 84aea8212c..1e5c9e4e6a 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -821,6 +821,20 @@ li.pagination ul { opacity: 0.5; } +#loading_indicator { + background: center center no-repeat; + border-radius: 5px; + display: none; + opacity: 0.8; + margin-top: -50px; + margin-left: -50px; + height: 50px; + width: 50px; + position: fixed; + left: 50%; + top: 50%; +} + /* Miscellaneous styles ---------------------------------------- */ #forum-permissions { diff --git a/phpBB/styles/prosilver/theme/images/loading.gif b/phpBB/styles/prosilver/theme/images/loading.gif Binary files differnew file mode 100644 index 0000000000..e1ed0883e0 --- /dev/null +++ b/phpBB/styles/prosilver/theme/images/loading.gif |
