trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

web/elements: add close button to notification drawer for mobile

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-10 17:43:07 +02:00
parent f6b8dc5cea
commit 7c761ff3d9
3 changed files with 29 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
web/src/elements/notifications/NotificationDrawer.ts
View file

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

4
web/src/locales/en.po
View file

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

4
web/src/locales/pseudo-LOCALE.po
View file

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