kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-27 19:53:36 +00:00
Code Issues Projects Releases Wiki Activity

blur modules instead of black overlay

Browse Source
This commit is contained in:
Felix Wiedenbach 2021-10-15 06:43:53 +02:00
parent 75cf1d610e
commit 15fd2021bb
2 changed files with 25 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
modules/default/alert/alert.js
View File

@ -68,20 +68,19 @@ Module.register("alert", {
}, },
async showAlert(alert, sender) { async showAlert(alert, sender) {
//Create overlay // If module already has an open alert close it
const overlay = document.createElement("div");
overlay.id = "overlay";
overlay.innerHTML += '<div class="black_overlay"></div>';
document.body.insertBefore(overlay, document.body.firstChild);
//If module already has an open alert close it
if (this.alerts[sender.name]) { if (this.alerts[sender.name]) {
this.hideAlert(sender, false); this.hideAlert(sender, false);
} }
// Add overlay
if (!Object.keys(this.alerts).length) {
this.toggleBlur(true);
}
const message = await this.renderMessage("alert", alert); const message = await this.renderMessage("alert", alert);
//Store alert in this.alerts // Store alert in this.alerts
this.alerts[sender.name] = new NotificationFx({ this.alerts[sender.name] = new NotificationFx({
message, message,
effect: this.config.alert_effect, effect: this.config.alert_effect,
@ -90,10 +89,10 @@ Module.register("alert", {
al_no: "ns-alert" al_no: "ns-alert"
}); });
//Show alert // Show alert
this.alerts[sender.name].show(); this.alerts[sender.name].show();
//Add timer to dismiss alert and overlay // Add timer to dismiss alert and overlay
if (alert.timer) { if (alert.timer) {
setTimeout(() => { setTimeout(() => {
this.hideAlert(sender); this.hideAlert(sender);
@ -102,13 +101,14 @@ Module.register("alert", {
}, },
hideAlert(sender, close = true) { hideAlert(sender, close = true) {
//Dismiss alert and remove from this.alerts // Dismiss alert and remove from this.alerts
if (this.alerts[sender.name]) { if (this.alerts[sender.name]) {
this.alerts[sender.name].dismiss(close); this.alerts[sender.name].dismiss(close);
this.alerts[sender.name] = null; delete this.alerts[sender.name];
//Remove overlay // Remove overlay
const overlay = document.getElementById("overlay"); if (!Object.keys(this.alerts).length) {
overlay.parentNode.removeChild(overlay); this.toggleBlur(false);
}
} }
}, },
@ -124,6 +124,14 @@ Module.register("alert", {
}); });
}, },
toggleBlur(add = false) {
const method = add ? "add" : "remove";
const modules = document.querySelectorAll(".module");
for (const module of modules) {
module.classList[method]("alert-blur");
}
},
notificationReceived(notification, payload, sender) { notificationReceived(notification, payload, sender) {
if (notification === "SHOW_ALERT") { if (notification === "SHOW_ALERT") {
if (payload.type === "notification") { if (payload.type === "notification") {

8
modules/default/alert/styles/notificationFx.css
View File

@ -39,12 +39,8 @@
border-radius: 20px; border-radius: 20px;
} }
.black_overlay { .alert-blur {
position: fixed; filter: blur(2px) brightness(50%);
z-index: 2;
background-color: rgba(0, 0, 0, 0.93);
width: 100%;
height: 100%;
} }
[class^="ns-effect-"].ns-growl.ns-hide, [class^="ns-effect-"].ns-growl.ns-hide,