Make invisible loading overlay immediate to disable clicking other bu…

…ttons
OpenMage · Aug 19, 2022 · 428df90 · 428df90
1 parent b8d28f6
commit 428df90
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 13 deletions.
diff --git a/app/design/adminhtml/default/default/template/page.phtml b/app/design/adminhtml/default/default/template/page.phtml
@@ -76,7 +76,10 @@
     <?php echo $this->getChildHtml('js') ?>
     <?php echo $this->getChildHtml('profiler') ?>
 <div id="loading-mask" style="display:none">
-    <p class="loader" id="loading_mask_loader"><img src="<?php echo $this->getSkinUrl('images/ajax-loader-tr.gif') ?>" alt="<?php echo Mage::helper('core')->quoteEscape(Mage::helper('adminhtml')->__('Loading...')) ?>"/><br/><?php echo Mage::helper('adminhtml')->__('Please wait...') ?></p>
+    <div class="backdrop" style="display:none"></div>
+    <p class="loader" id="loading_mask_loader" style="display:none">
+        <img src="<?php echo $this->getSkinUrl('images/ajax-loader-tr.gif') ?>" alt="<?php echo Mage::helper('core')->quoteEscape(Mage::helper('adminhtml')->__('Loading...')) ?>"/><br/><?php echo Mage::helper('adminhtml')->__('Please wait...') ?>
+    </p>
 </div>
 
 <?php echo $this->getChildHtml('before_body_end') ?>

diff --git a/js/mage/adminhtml/loader.js b/js/mage/adminhtml/loader.js
@@ -191,14 +191,16 @@ varienLoaderHandler.handler = {
         request.options.loaderArea = $$('#html-body .wrapper')[0]; // Blocks all page
 
         if(request && request.options.loaderArea){
+            Element.clonePosition($('loading-mask'), $(request.options.loaderArea), {offsetLeft:-2});
+            toggleSelectsUnderBlock($('loading-mask'), false);
+            Element.show('loading-mask');
+            Element.childElements('loading-mask').invoke('hide');
+            setLoaderPosition();
             if(this.timeout) {
                 clearTimeout(this.timeout);
             }
             this.timeout = setTimeout(function() {
-                Element.clonePosition($('loading-mask'), $(request.options.loaderArea), {offsetLeft:-2});
-                toggleSelectsUnderBlock($('loading-mask'), false);
-                Element.show('loading-mask');
-                setLoaderPosition();
+                Element.childElements('loading-mask').invoke('show');
             }, typeof window.LOADING_TIMEOUT === 'undefined' ? 100 : window.LOADING_TIMEOUT);
         }
     },
@@ -207,6 +209,7 @@ varienLoaderHandler.handler = {
         if(Ajax.activeRequestCount == 0) {
             toggleSelectsUnderBlock($('loading-mask'), true);
             Element.hide('loading-mask');
+            Element.childElements('loading-mask').invoke('hide');
             if(this.timeout) {
                 clearTimeout(this.timeout);
                 this.timeout = null;

diff --git a/skin/adminhtml/default/openmage/override.css b/skin/adminhtml/default/openmage/override.css
diff --git a/skin/adminhtml/default/openmage/override.css.map b/skin/adminhtml/default/openmage/override.css.map
diff --git a/skin/adminhtml/default/openmage/scss/override.scss b/skin/adminhtml/default/openmage/scss/override.scss
@@ -690,11 +690,16 @@ div {
 }
 
 #loading-mask {
-  background: $black_40;
-  z-index: 1000;
-  color: $color_dark_grey;
   opacity: 1;
-
+  .backdrop {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: $black_40;
+    color: $color_dark_grey;
+  }
   .loader {
     width: 160px;
     height: 100px;
@@ -1135,4 +1140,4 @@ img[src$='grid-cal.gif'] {
 
 .emph, .accent {
   color: $color_action !important;
-}
+}