From a4b051fcc12cd20cabfeae3c1d8ac4a93daf80e4 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Fri, 23 Jul 2021 20:57:06 +0200
Subject: [PATCH] web: fix icon flashing in header, fix notification header
 icon in dark mode

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/authentik.css          |  3 ++-
 web/src/elements/PageHeader.ts | 45 +++++++++++++++++++---------------
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/web/src/authentik.css b/web/src/authentik.css
index 312af5a081..486dac2317 100644
--- a/web/src/authentik.css
+++ b/web/src/authentik.css
@@ -127,7 +127,8 @@ body {
     .pf-c-page__main-section {
         --pf-c-page__main-section--BackgroundColor: var(--ak-dark-background);
     }
-    .sidebar-trigger {
+    .sidebar-trigger,
+    .notification-trigger {
         background-color: var(--ak-dark-background-light) !important;
     }
     .pf-c-page__main-section.pf-m-light {
diff --git a/web/src/elements/PageHeader.ts b/web/src/elements/PageHeader.ts
index b3dd34b581..4da4d83086 100644
--- a/web/src/elements/PageHeader.ts
+++ b/web/src/elements/PageHeader.ts
@@ -6,7 +6,6 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import { EVENT_NOTIFICATION_TOGGLE, EVENT_SIDEBAR_TOGGLE, TITLE_DEFAULT } from "../constants";
 import { DEFAULT_CONFIG, tenant } from "../api/Config";
-import { until } from "lit-html/directives/until";
 import { EventsApi } from "../../api/dist";
 
 @customElement("ak-page-header")
@@ -18,6 +17,9 @@ export class PageHeader extends LitElement {
     @property({type: Boolean})
     iconImage = false
 
+    @property({type: Boolean})
+    hasNotifications = false;
+
     @property()
     set header(value: string) {
         tenant().then(tenant => {
@@ -79,6 +81,16 @@ export class PageHeader extends LitElement {
         return html``;
     }
 
+    firstUpdated(): void {
+        new EventsApi(DEFAULT_CONFIG).eventsNotificationsList({
+            seen: false,
+            ordering: "-created",
+            pageSize: 1,
+        }).then(r => {
+            this.hasNotifications = r.pagination.count > 0;
+        });
+    }
+
     render(): TemplateResult {
         return html`<button
             class="sidebar-trigger pf-c-button pf-m-plain"
@@ -102,25 +114,18 @@ export class PageHeader extends LitElement {
                     html`<p>${this.description}</p>` : html``}
             </div>
         </section>
-        ${until(new EventsApi(DEFAULT_CONFIG).eventsNotificationsList({
-            seen: false,
-            ordering: "-created",
-            pageSize: 1,
-        }).then(r => {
-            return html`
-                <button
-                    class="notification-trigger pf-c-button pf-m-plain ${r.pagination.count > 0 ? "has-notifications" : ""}"
-                    @click=${() => {
-                        this.dispatchEvent(
-                            new CustomEvent(EVENT_NOTIFICATION_TOGGLE, {
-                                bubbles: true,
-                                composed: true,
-                            })
-                        );
-                    }}>
-                    <i class="fas fa-bell"></i>
-                </button>`;
-        }))}`;
+        <button
+            class="notification-trigger pf-c-button pf-m-plain ${this.hasNotifications ? "has-notifications" : ""}"
+            @click=${() => {
+                this.dispatchEvent(
+                    new CustomEvent(EVENT_NOTIFICATION_TOGGLE, {
+                        bubbles: true,
+                        composed: true,
+                    })
+                );
+            }}>
+            <i class="fas fa-bell"></i>
+        </button>`;
     }
 
 }