Added outter shadow to notifications messages box

Former-commit-id: 1eed4b4f2ef7d58dbab73ccb2628bb0ef9ffc7ca
This commit is contained in:
Fermin 2019-02-08 18:53:28 +01:00
parent 0124bd0a17
commit d5d58e5b2b
3 changed files with 34 additions and 16 deletions

View File

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

View File

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

View File

@ -4929,7 +4929,7 @@ div#dialog_messages table th:last-child {
background-color: #fc4444; background-color: #fc4444;
} }
.notification-wrapper { #notification-wrapper {
background: white; background: white;
border: #a5a5a5 solid 1px; border: #a5a5a5 solid 1px;
z-index: 900000; z-index: 900000;
@ -4937,7 +4937,7 @@ div#dialog_messages table th:last-child {
width: 400px; width: 400px;
margin-top: -5px; margin-top: -5px;
} }
.notification-wrapper::before { #notification-wrapper::before {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
@ -4952,6 +4952,15 @@ div#dialog_messages table th:last-child {
margin-left: -12px; margin-left: -12px;
border-bottom-color: white; 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 { .notification-item {
background: whitesmoke; background: whitesmoke;
height: 100px; height: 100px;