Try to keep users from leaving the upgrade page, or running the

upgrade twice.

1) Disable the "Upgrade all" link once clicked
2) Put up a "upgrade in progress" link to show that there's something
   happening.

Fixes ticket #837.

2 files changed, 36 insertions, 7 deletions

diff --git a/modules/gallery/css/upgrader.css b/modules/gallery/css/upgrader.css
index e1038ad1..73da0ff4 100644
--- a/modules/gallery/css/upgrader.css
+++ b/modules/gallery/css/upgrader.css
@@ -92,6 +92,8 @@ div.button-active:hover {
 }
 
 div#dialog {
+  width: 340px;
+  height: 200px;
   position: absolute;
   background: blue;
   z-index: 1000;
@@ -106,6 +108,8 @@ div#dialog a.close {
 }
 
 div#dialog div {
+  width: 292px;
+  height: 152px;
   margin: 2px;
   padding: 20px;
   border: 2px solid #999;
diff --git a/modules/gallery/views/upgrader.html.php b/modules/gallery/views/upgrader.html.php
index 0c985c6b..5cd1cd77 100644
--- a/modules/gallery/views/upgrader.html.php
+++ b/modules/gallery/views/upgrader.html.php
@@ -11,14 +11,22 @@
       <img src="<?= url::file("modules/gallery/images/gallery.png") ?>" />
       <div id="inner">
         <? if ($can_upgrade): ?>
-        <? if ($done): ?>
-        <div id="dialog">
-          <a onclick="$('#dialog').fadeOut(); return false;" href="#" class="close">[x]</a>
-          <div>
+        <div id="dialog" style="visibility: hidden">
+          <a id="dialog_close_link" style="display: none" onclick="$('#dialog').fadeOut(); return false;" href="#" class="close">[x]</a>
+          <div id="busy" style="display: none">
+            <h1>
+              <img width="16" height="16" src="<?= url::file("lib/images/loading-small.gif") ?>"/>
+              <?= t("Upgrade in progress!") ?>
+            </h1>
+            <p>
+              <?= t("Please don't refresh or leave the page.") ?>
+            </p>
+          </div>
+          <div id="done" style="display: none">
             <h1> <?= t("That's it!") ?> </h1>
             <p>
               <?= t("Your <a href=\"%url\">Gallery</a> is up to date.",
-                    array("url" => html::mark_clean(item::root()->url()))) ?>
+                  array("url" => html::mark_clean(item::root()->url()))) ?>
             </p>
           </div>
         </div>
@@ -26,9 +34,26 @@
           $(document).ready(function() {
             $("#dialog").css("left", Math.round(($(window).width() - $("#dialog").width()) / 2));
             $("#dialog").css("top", Math.round(($(window).height() - $("#dialog").height()) / 2));
+            $("#upgrade_link").click(function(event) { show_busy() });
+
+            <? if ($done): ?>
+            show_done();
+            <? endif ?>
           });
+
+          var show_busy = function() {
+            $("#dialog").css("visibility", "visible");
+            $("#busy").show();
+            $("#upgrade_link").parent().removeClass("button-active");
+            $("#upgrade_link").replaceWith($("#upgrade_link").html())
+          }
+
+          var show_done = function() {
+            $("#dialog").css("visibility", "visible");
+            $("#done").show();
+            $("#dialog_close_link").show();
+          }
         </script>
-        <? endif ?>
         <p class="<?= $done ? "muted" : "" ?>">
           <?= t("Welcome to the Gallery upgrader.  One click and you're done!") ?>
         </p>
@@ -64,7 +89,7 @@
         </div>
         <? else: ?>
         <div class="button button-active">
-          <a href="<?= url::site("upgrader/upgrade") ?>">
+          <a id="upgrade_link" href="<?= url::site("upgrader/upgrade") ?>">
             <?= t("Upgrade all") ?>
           </a>
         </div>