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:
Jordan Vidrine 2021-03-11 16:10:40 -06:00 committed by GitHub
parent 9a5a38a529
commit f1c1f9e0e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 0 deletions

View File

@ -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") &&

View File

@ -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",