From 7c761ff3d9a31ad24721e24ff2bbd6797a1476f1 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Sat, 10 Apr 2021 17:43:07 +0200
Subject: [PATCH] web/elements: add close button to notification drawer for
 mobile

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 .../notifications/NotificationDrawer.ts       | 36 +++++++++++++------
 web/src/locales/en.po                         |  4 +--
 web/src/locales/pseudo-LOCALE.po              |  4 +--
 3 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/web/src/elements/notifications/NotificationDrawer.ts b/web/src/elements/notifications/NotificationDrawer.ts
index c3ec51eab..b97dd2b9f 100644
--- a/web/src/elements/notifications/NotificationDrawer.ts
+++ b/web/src/elements/notifications/NotificationDrawer.ts
@@ -6,8 +6,10 @@ import { DEFAULT_CONFIG } from "../../api/Config";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFNotificationDrawer from "@patternfly/patternfly/components/NotificationDrawer/notification-drawer.css";
 import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import AKGlobal from "../../authentik.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
+import { EVENT_NOTIFICATION_TOGGLE } from "../../constants";
 
 @customElement("ak-notification-drawer")
 export class NotificationDrawer extends LitElement {
@@ -19,14 +21,8 @@ export class NotificationDrawer extends LitElement {
     unread = 0;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFNotificationDrawer, PFContent, PFDropdown, AKGlobal].concat(
+        return [PFBase, PFButton, PFNotificationDrawer, PFContent, PFDropdown, AKGlobal].concat(
             css`
-                .pf-c-notification-drawer__header {
-                    height: 114px;
-                    padding: var(--pf-c-page__main-section--PaddingTop) var(--pf-c-page__main-section--PaddingRight) var(--pf-c-page__main-section--PaddingBottom) var(--pf-c-page__main-section--PaddingLeft);
-                    display: flex;
-                    flex-direction: column;
-                }
                 .pf-c-notification-drawer__list-item-description {
                     white-space: pre-wrap;
                 }
@@ -98,13 +94,31 @@ export class NotificationDrawer extends LitElement {
         }
         return html`<div class="pf-c-drawer__body pf-m-no-padding">
             <div class="pf-c-notification-drawer">
-                <div class="pf-c-notification-drawer__header pf-c-content">
-                    <h1>
+                <div class="pf-c-notification-drawer__header">
+                    <h1 class="pf-c-notification-drawer__header-title">
                         ${t`Notifications`}
                     </h1>
-                    <p>
+                    <span class="pf-c-notification-drawer__header-status">
                         ${t`${this.unread} unread`}
-                    </p>
+                    </span>
+                    <div class="pf-c-notification-drawer__header-action">
+                        <div class="pf-c-notification-drawer__header-action-close">
+                            <button
+                                @click=${() => {
+                                    this.dispatchEvent(
+                                        new CustomEvent(EVENT_NOTIFICATION_TOGGLE, {
+                                            bubbles: true,
+                                            composed: true,
+                                        })
+                                    );
+                                }}
+                                class="pf-c-button pf-m-plain"
+                                type="button"
+                                aria-label="Close">
+                                <i class="fas fa-times" aria-hidden="true"></i>
+                            </button>
+                        </div>
+                    </div>
                 </div>
                 <div class="pf-c-notification-drawer__body">
                     <ul class="pf-c-notification-drawer__list">
diff --git a/web/src/locales/en.po b/web/src/locales/en.po
index 481862205..3b23e37b8 100644
--- a/web/src/locales/en.po
+++ b/web/src/locales/en.po
@@ -2037,7 +2037,7 @@ msgstr "Notification Transports"
 msgid "Notification rule"
 msgstr "Notification rule"
 
-#: src/elements/notifications/NotificationDrawer.ts:99
+#: src/elements/notifications/NotificationDrawer.ts:95
 msgid "Notifications"
 msgstr "Notifications"
 
@@ -3862,7 +3862,7 @@ msgstr "{0} - {1} of {2}"
 msgid "{0} is available!"
 msgstr "{0} is available!"
 
-#: src/elements/notifications/NotificationDrawer.ts:102
+#: src/elements/notifications/NotificationDrawer.ts:98
 msgid "{0} unread"
 msgstr "{0} unread"
 
diff --git a/web/src/locales/pseudo-LOCALE.po b/web/src/locales/pseudo-LOCALE.po
index f70b9b91b..f67b492a1 100644
--- a/web/src/locales/pseudo-LOCALE.po
+++ b/web/src/locales/pseudo-LOCALE.po
@@ -2029,7 +2029,7 @@ msgstr ""
 msgid "Notification rule"
 msgstr ""
 
-#: src/elements/notifications/NotificationDrawer.ts:99
+#: src/elements/notifications/NotificationDrawer.ts:95
 msgid "Notifications"
 msgstr ""
 
@@ -3850,7 +3850,7 @@ msgstr ""
 msgid "{0} is available!"
 msgstr ""
 
-#: src/elements/notifications/NotificationDrawer.ts:102
+#: src/elements/notifications/NotificationDrawer.ts:98
 msgid "{0} unread"
 msgstr ""