Added outter shadow to notifications messages box

Former-commit-id: 1eed4b4f2ef7d58dbab73ccb2628bb0ef9ffc7ca

pandora_console/general/header.php

@@ -386,23 +386,25 @@ config_check();
     ?>
 
     function addNotifications(event) {
-        var elements = document.getElementsByClassName("notification-wrapper");
-        if (!elements) return;
-        Array.prototype.forEach.call(elements, function(elem) {
-            toggle_element(elem);
-        });
+        var element = document.getElementById("notification-content");
+        if (!element) return;
+        element.style.display = "block";
         attatch_to_image();
     }
 
     function attatch_to_image() {
-        var notification_elems = document.getElementsByClassName("notification-wrapper");
-        var image_attached = document.getElementById("notification-ball-header").getBoundingClientRect().left;
-        Array.prototype.forEach.call(notification_elems, function(elem) {
-            elem.style.left = image_attached - 300 + "px";
-        });
+        var notification_elem = document.getElementById("notification-wrapper");
+        var image_attached =
+            document.getElementById("notification-ball-header")
+                .getBoundingClientRect()
+                .left
+        ;
+        notification_elem.style.left = image_attached - 300 + "px";
     }
-    function toggle_element(elem) {
-        elem.style.display = elem.style.display === "none" ? "block" : "none";
+
+    function notifications_hide() {
+        var element = document.getElementById("notification-content");
+        element.style.display = "none"
     }
 
     // Resize event

pandora_console/include/functions_notifications.php

@@ -831,8 +831,15 @@ function notifications_print_dropdown()
     }
 
     return sprintf(
-        "<div class='notification-wrapper' style='display:none;'>
-            %s
+        "<div id='notification-content' style='display:none;'>
+            <div id='notification-wrapper'>
+                %s
+            </div>
+            <div
+                id='notification-wrapper-shadow'
+                onclick='notifications_hide()'
+            >
+            </div>
         </div>",
         array_reduce(
             $mess,

pandora_console/include/styles/pandora.css

@@ -4929,7 +4929,7 @@ div#dialog_messages table th:last-child {
   background-color: #fc4444;
 }
 
-.notification-wrapper {
+#notification-wrapper {
   background: white;
   border: #a5a5a5 solid 1px;
   z-index: 900000;
@@ -4937,7 +4937,7 @@ div#dialog_messages table th:last-child {
   width: 400px;
   margin-top: -5px;
 }
-.notification-wrapper::before {
+#notification-wrapper::before {
   content: "";
   display: block;
   position: absolute;
@@ -4952,6 +4952,15 @@ div#dialog_messages table th:last-child {
   margin-left: -12px;
   border-bottom-color: white;
 }
+#notification-wrapper-shadow {
+  height: 100%;
+  width: 100%;
+  background: #111;
+  position: fixed;
+  z-index: 9009;
+  top: 0;
+  opacity: 0.3;
+}
 .notification-item {
   background: whitesmoke;
   height: 100px;