From 46769b9be25ab72e69f92e4e84af4bba540ca921 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 15 Oct 2020 17:41:57 +0200
Subject: [PATCH] js: Add `.impact` to `.content` if a control is automatically
 submitted

---
 public/css/icinga/base.less | 30 ++++++++++++++++++------------
 public/js/icinga/loader.js  | 16 +++++++++++++++-
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/public/css/icinga/base.less b/public/css/icinga/base.less
index 41060493c..4f31ba7e7 100644
--- a/public/css/icinga/base.less
+++ b/public/css/icinga/base.less
@@ -187,7 +187,8 @@ td, th {
 }
 
 .container {
-  &:before {
+  &:before,
+  > .content:before {
     content: "";
     display: block;
 
@@ -195,26 +196,31 @@ td, th {
     background-size: 4em 4em;
 
     opacity: 0;
-    z-index: -10;
+    z-index: -1;
     pointer-events: none;
     .transition(none);
   }
 
-  &.impact {
+  &.impact,
+  > .content.impact {
     overflow: hidden;
     position: relative;
+
+    &:before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+
+      opacity: .7;
+      z-index: 1;
+      pointer-events: all;
+      .transition(opacity 1s 2s linear);
+    }
   }
 
   &.impact:before {
-    position: absolute;
     top: 2.5em;
-    right: 0;
-    bottom: 0;
-    left: 0;
-
-    opacity: .7;
-    z-index: 10;
-    pointer-events: all;
-    .transition(opacity 1s 2s linear);
   }
 }
diff --git a/public/js/icinga/loader.js b/public/js/icinga/loader.js
index 75dfc54a6..d49d81ff3 100644
--- a/public/js/icinga/loader.js
+++ b/public/js/icinga/loader.js
@@ -181,10 +181,19 @@
                 }
             }
 
-            var req = this.loadUrl(url, $target, data, method);
+            var req = this.loadUrl(url, $target, data, method, undefined, !! $autoSubmittedBy);
             req.forceFocus = $autoSubmittedBy ? $autoSubmittedBy : $button.length ? $button : null;
             req.addToHistory = method === 'GET';
             req.progressTimer = progressTimer;
+
+            if ($autoSubmittedBy) {
+                if ($autoSubmittedBy.closest('.controls').length) {
+                    $('.content', req.$target).addClass('impact');
+                } else {
+                    req.$target.addClass('impact');
+                }
+            }
+
             return req;
         },
 
@@ -851,6 +860,11 @@
             // Remove 'impact' class if there was such
             if (req.$target.hasClass('impact')) {
                 req.$target.removeClass('impact');
+            } else {
+                var $impact = req.$target.find('.impact').first();
+                if ($impact.length) {
+                    $impact.removeClass('impact');
+                }
             }
 
             if (! req.autorefresh) {