From da4e0c4219e5132ffddd67fc4621840c557c132a Mon Sep 17 00:00:00 2001 From: Cesar G Date: Tue, 15 Oct 2013 21:37:53 -0700 Subject: [PATCH 1/4] [ticket/11928] Replace AJAX loading popup with animation. PHPBB3-11928 --- phpBB/adm/images/loading.gif | Bin 0 -> 1320 bytes phpBB/adm/style/admin.css | 14 ++++++++ phpBB/adm/style/overall_footer.html | 2 +- phpBB/assets/javascript/core.js | 33 +++++++++++------- .../prosilver/template/overall_footer.html | 2 +- phpBB/styles/prosilver/theme/colours.css | 5 +++ phpBB/styles/prosilver/theme/common.css | 14 ++++++++ .../styles/prosilver/theme/images/loading.gif | Bin 0 -> 1320 bytes 8 files changed, 55 insertions(+), 15 deletions(-) create mode 100644 phpBB/adm/images/loading.gif create mode 100644 phpBB/styles/prosilver/theme/images/loading.gif diff --git a/phpBB/adm/images/loading.gif b/phpBB/adm/images/loading.gif new file mode 100644 index 0000000000000000000000000000000000000000..e1ed0883e07c63f3a36f9ee38318ffabdfe44147 GIT binary patch literal 1320 zcmd6l{c9U_9LGOt)7<6K<~f(UB$vxmAJ&H~TlbKzUA3ESll8uJwt_Hp&><)jMP);L zm|QM*NnEn6Bh6&Z3@cmf9>f+l?VPUcL23mN9Qag_IhEqWZ^A%@so#rp-u?p*?x%ad zzMt3k{kg&9K)h=#1R+>KaPya6%@&KPzTRfHJ6*KX>2lzgb~l*K1W6hU1|vlojg(%m zKUg}tW9P2-u6%Ui@?vHBjGqs_oKg})!y7mCpzWiFN|TqDKGo@Tk*4M^Zmck@Cm4>n z8TPTU#~Id3yII!b<@kWd>q}+xucQ=@kMnUn=MU_C>D2?p*S(y7`G=p!kCb=p9P8=r zYmct}`1)7H$;u1+Qti=LynFMd#ZN9?UFuvP=luMh7xxV&1+R|_g(K0}nx~)J+tj?O ztEYD$IduMmtNFvF-OoJVxglPjn(+sMU*7zYb~EsQeS&|PhWj5L-P*Uke{D2YtHYkb z-}Q9>2-;O=bxlC5h)7DysG**$ts{uKTC%=DDNaa6onDwMAJglMr4pq(Ha#Qgs43ZG zcyqRFFrD?(%*~f;Jf(LpEYwVx7On~BWa{k&jtkBk&ZJLX^I6Rn$DA&0{7`@!VBb7< z99^H`L(^WD)7H7+>&(&F@N8nsygvKQZ6WvP#YQS2*shG_&427VX?^5GX5QB)-+J=9 zw!~cTw{7f3p z0QNq$f_xwjC9u0uf3+wnjEhTi8rTR<46BN*BI3J|qVQV>{28>Z3mCc(V8P~ec@?)E zDv)tl%vN6^)2P8ojjRv6NRqJ)GJ_LYz(zalz#uoPl_i0Kx~eRPD_P4+Zgw!F<~meB zB_(`7-q zS`7*zS?2gnS&45iNNwXqZIlGZo!%MI4C@6&u?*dxQCj`Ic_lnvoG9fr0&2^()g@8? d2uOVTp3nbwY83?`yc#5-wJ)159KZv+{{|9CDcS%4 literal 0 HcmV?d00001 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 @@
 
-

{L_LOADING}

{L_PLEASE_WAIT}

+
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 @@
 
-

{L_LOADING}

{L_PLEASE_WAIT}

+
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 new file mode 100644 index 0000000000000000000000000000000000000000..e1ed0883e07c63f3a36f9ee38318ffabdfe44147 GIT binary patch literal 1320 zcmd6l{c9U_9LGOt)7<6K<~f(UB$vxmAJ&H~TlbKzUA3ESll8uJwt_Hp&><)jMP);L zm|QM*NnEn6Bh6&Z3@cmf9>f+l?VPUcL23mN9Qag_IhEqWZ^A%@so#rp-u?p*?x%ad zzMt3k{kg&9K)h=#1R+>KaPya6%@&KPzTRfHJ6*KX>2lzgb~l*K1W6hU1|vlojg(%m zKUg}tW9P2-u6%Ui@?vHBjGqs_oKg})!y7mCpzWiFN|TqDKGo@Tk*4M^Zmck@Cm4>n z8TPTU#~Id3yII!b<@kWd>q}+xucQ=@kMnUn=MU_C>D2?p*S(y7`G=p!kCb=p9P8=r zYmct}`1)7H$;u1+Qti=LynFMd#ZN9?UFuvP=luMh7xxV&1+R|_g(K0}nx~)J+tj?O ztEYD$IduMmtNFvF-OoJVxglPjn(+sMU*7zYb~EsQeS&|PhWj5L-P*Uke{D2YtHYkb z-}Q9>2-;O=bxlC5h)7DysG**$ts{uKTC%=DDNaa6onDwMAJglMr4pq(Ha#Qgs43ZG zcyqRFFrD?(%*~f;Jf(LpEYwVx7On~BWa{k&jtkBk&ZJLX^I6Rn$DA&0{7`@!VBb7< z99^H`L(^WD)7H7+>&(&F@N8nsygvKQZ6WvP#YQS2*shG_&427VX?^5GX5QB)-+J=9 zw!~cTw{7f3p z0QNq$f_xwjC9u0uf3+wnjEhTi8rTR<46BN*BI3J|qVQV>{28>Z3mCc(V8P~ec@?)E zDv)tl%vN6^)2P8ojjRv6NRqJ)GJ_LYz(zalz#uoPl_i0Kx~eRPD_P4+Zgw!F<~meB zB_(`7-q zS`7*zS?2gnS&45iNNwXqZIlGZo!%MI4C@6&u?*dxQCj`Ic_lnvoG9fr0&2^()g@8? d2uOVTp3nbwY83?`yc#5-wJ)159KZv+{{|9CDcS%4 literal 0 HcmV?d00001 From 57fc62b000391438adde160f97efaea7e2f0329a Mon Sep 17 00:00:00 2001 From: Cesar G Date: Tue, 29 Oct 2013 10:11:29 -0700 Subject: [PATCH 2/4] [ticket/11928] Make sure the indicator is on top of other elements. PHPBB3-11928 --- phpBB/adm/style/admin.css | 1 + phpBB/styles/prosilver/theme/common.css | 1 + 2 files changed, 2 insertions(+) diff --git a/phpBB/adm/style/admin.css b/phpBB/adm/style/admin.css index fee2efb001..e6146e2156 100644 --- a/phpBB/adm/style/admin.css +++ b/phpBB/adm/style/admin.css @@ -1605,6 +1605,7 @@ input.button1:focus, input.button2:focus, input.button3:focus { position: fixed; left: 50%; top: 50%; + z-index: 51; } /* Pagination diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 1e5c9e4e6a..225673a932 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/phpBB/styles/prosilver/theme/common.css @@ -833,6 +833,7 @@ li.pagination ul { position: fixed; left: 50%; top: 50%; + z-index: 51; } /* Miscellaneous styles From 4b024f035e0b49bea40932ff4a1180766fa7639a Mon Sep 17 00:00:00 2001 From: Cesar G Date: Wed, 30 Oct 2013 14:42:43 -0700 Subject: [PATCH 3/4] [ticket/11928] Rename loadingAlert to loading_indicator. PHPBB3-11928 --- phpBB/assets/javascript/core.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index dfbbd12929..1fa558721d 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -12,27 +12,27 @@ var keymap = { }; var dark = $('#darkenwrapper'); -var loadingAlert = $('#loading_indicator'); +var loading_indicator = $('#loading_indicator'); var phpbbAlertTimer = null; /** * Display a loading screen * - * @returns object Returns loadingAlert. + * @returns object Returns loading_indicator. */ -phpbb.loadingAlert = function() { - if (!loadingAlert.is(':visible')) { - loadingAlert.fadeIn(phpbb.alertTime); +phpbb.loading_indicator = function() { + if (!loading_indicator.is(':visible')) { + loading_indicator.fadeIn(phpbb.alertTime); // Wait fifteen seconds and display an error if nothing has been returned by then. phpbbAlertTimer = setTimeout(function() { - if (loadingAlert.is(':visible')) { + if (loading_indicator.is(':visible')) { phpbb.alert($('#phpbb_alert').attr('data-l-err'), $('#phpbb_alert').attr('data-l-timeout-processing-req')); } }, 15000); } - return loadingAlert; + return loading_indicator; }; /** @@ -97,8 +97,8 @@ phpbb.alert = function(title, msg, fadedark) { e.preventDefault(); }); - if (loadingAlert.is(':visible')) { - loadingAlert.fadeOut(phpbb.alertTime, function() { + if (loading_indicator.is(':visible')) { + loading_indicator.fadeOut(phpbb.alertTime, function() { dark.append(div); div.fadeIn(phpbb.alertTime); }); @@ -188,8 +188,8 @@ phpbb.confirm = function(msg, callback, fadedark) { e.preventDefault(); }); - if (loadingAlert.is(':visible')) { - loadingAlert.fadeOut(phpbb.alertTime, function() { + if (loading_indicator.is(':visible')) { + loading_indicator.fadeOut(phpbb.alertTime, function() { dark.append(div); div.fadeIn(phpbb.alertTime); }); @@ -330,7 +330,7 @@ phpbb.ajaxify = function(options) { // If confirmation is required, display a dialog to the user. phpbb.confirm(res.MESSAGE_BODY, function(del) { if (del) { - phpbb.loadingAlert(); + phpbb.loading_indicator(); data = $('
' + res.S_HIDDEN_FIELDS + '
').serialize(); $.ajax({ url: res.S_CONFIRM_ACTION, @@ -373,7 +373,7 @@ phpbb.ajaxify = function(options) { } if (overlay && (typeof $this.attr('data-overlay') === 'undefined' || $this.attr('data-overlay') === 'true')) { - phpbb.loadingAlert(); + phpbb.loading_indicator(); } var request = $.ajax({ @@ -384,7 +384,7 @@ phpbb.ajaxify = function(options) { error: errorHandler }); request.always(function() { - loadingAlert.fadeOut(phpbb.alertTime); + loading_indicator.fadeOut(phpbb.alertTime); }); event.preventDefault(); From 478c3ea3a07437e752331ee74ccb20f52c3ab4c9 Mon Sep 17 00:00:00 2001 From: Cesar G Date: Sun, 3 Nov 2013 10:49:28 -0800 Subject: [PATCH 4/4] [ticket/11928] Javascript requires camel case. PHPBB3-11928 --- phpBB/assets/javascript/core.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index 1fa558721d..a3a6d75dd2 100644 --- a/phpBB/assets/javascript/core.js +++ b/phpBB/assets/javascript/core.js @@ -12,27 +12,27 @@ var keymap = { }; var dark = $('#darkenwrapper'); -var loading_indicator = $('#loading_indicator'); +var loadingIndicator = $('#loading_indicator'); var phpbbAlertTimer = null; /** * Display a loading screen * - * @returns object Returns loading_indicator. + * @returns object Returns loadingIndicator. */ -phpbb.loading_indicator = function() { - if (!loading_indicator.is(':visible')) { - loading_indicator.fadeIn(phpbb.alertTime); +phpbb.loadingIndicator = function() { + if (!loadingIndicator.is(':visible')) { + loadingIndicator.fadeIn(phpbb.alertTime); // Wait fifteen seconds and display an error if nothing has been returned by then. phpbbAlertTimer = setTimeout(function() { - if (loading_indicator.is(':visible')) { + if (loadingIndicator.is(':visible')) { phpbb.alert($('#phpbb_alert').attr('data-l-err'), $('#phpbb_alert').attr('data-l-timeout-processing-req')); } }, 15000); } - return loading_indicator; + return loadingIndicator; }; /** @@ -97,8 +97,8 @@ phpbb.alert = function(title, msg, fadedark) { e.preventDefault(); }); - if (loading_indicator.is(':visible')) { - loading_indicator.fadeOut(phpbb.alertTime, function() { + if (loadingIndicator.is(':visible')) { + loadingIndicator.fadeOut(phpbb.alertTime, function() { dark.append(div); div.fadeIn(phpbb.alertTime); }); @@ -188,8 +188,8 @@ phpbb.confirm = function(msg, callback, fadedark) { e.preventDefault(); }); - if (loading_indicator.is(':visible')) { - loading_indicator.fadeOut(phpbb.alertTime, function() { + if (loadingIndicator.is(':visible')) { + loadingIndicator.fadeOut(phpbb.alertTime, function() { dark.append(div); div.fadeIn(phpbb.alertTime); }); @@ -330,7 +330,7 @@ phpbb.ajaxify = function(options) { // If confirmation is required, display a dialog to the user. phpbb.confirm(res.MESSAGE_BODY, function(del) { if (del) { - phpbb.loading_indicator(); + phpbb.loadingIndicator(); data = $('
' + res.S_HIDDEN_FIELDS + '
').serialize(); $.ajax({ url: res.S_CONFIRM_ACTION, @@ -373,7 +373,7 @@ phpbb.ajaxify = function(options) { } if (overlay && (typeof $this.attr('data-overlay') === 'undefined' || $this.attr('data-overlay') === 'true')) { - phpbb.loading_indicator(); + phpbb.loadingIndicator(); } var request = $.ajax({ @@ -384,7 +384,7 @@ phpbb.ajaxify = function(options) { error: errorHandler }); request.always(function() { - loading_indicator.fadeOut(phpbb.alertTime); + loadingIndicator.fadeOut(phpbb.alertTime); }); event.preventDefault();