UX: Add class to body on first unread notification (#12362)
* UX: Add class to body on first unread notification This commit adds `first-notification` class to the body element when there is a first unread notification. This will fix any issues with certain themes who use custom headers where z-index issues sometimes cause those custom headers to not be hidden by the transparent shadow over the page.
This commit is contained in:
parent
9a5a38a529
commit
f1c1f9e0e7
|
@ -215,6 +215,13 @@ const SiteHeaderComponent = MountWidget.extend(
|
|||
|
||||
this.appEvents.on("dom:clean", this, "_cleanDom");
|
||||
|
||||
if (
|
||||
this.currentUser &&
|
||||
!this.get("currentUser.read_first_notification")
|
||||
) {
|
||||
document.body.classList.add("unread-first-notification");
|
||||
}
|
||||
|
||||
// Allow first notification to be dismissed on a click anywhere
|
||||
if (
|
||||
this.currentUser &&
|
||||
|
@ -222,6 +229,9 @@ const SiteHeaderComponent = MountWidget.extend(
|
|||
!this.get("currentUser.enforcedSecondFactor")
|
||||
) {
|
||||
this._dismissFirstNotification = (e) => {
|
||||
if (document.body.classList.contains("unread-first-notification")) {
|
||||
document.body.classList.remove("unread-first-notification");
|
||||
}
|
||||
if (
|
||||
!e.target.closest("#current-user") &&
|
||||
!e.target.closest(".ring-backdrop") &&
|
||||
|
|
|
@ -586,6 +586,9 @@ export default createWidget("header", {
|
|||
|
||||
headerDismissFirstNotificationMask() {
|
||||
// Dismiss notifications
|
||||
if (document.body.classList.contains("unread-first-notification")) {
|
||||
document.body.classList.remove("unread-first-notification");
|
||||
}
|
||||
this.store
|
||||
.findStale(
|
||||
"notification",
|
||||
|
|
Loading…
Reference in New Issue