habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web/admin: improve UI for notification toggle

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-07-22 14:15:54 +02:00
parent cbeb6e58ac
commit ff64814f40
9 changed files with 55 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/elements/notifications/NotificationDrawer.ts
View File

@ -23,6 +23,15 @@ export class NotificationDrawer extends LitElement {
static get styles(): CSSResult[] {
return [PFBase, PFButton, PFNotificationDrawer, PFContent, PFDropdown, AKGlobal].concat(
css`
.pf-c-notification-drawer__header {
height: 114px;
align-items: center;
}
.pf-c-notification-drawer__header-action,
.pf-c-notification-drawer__header-action-close,
.pf-c-notification-drawer__header-action-close > .pf-c-button.pf-m-plain {
height: 100%;
}
.pf-c-notification-drawer__list-item-description {
white-space: pre-wrap;
}
@ -95,12 +104,14 @@ 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">
<h1 class="pf-c-notification-drawer__header-title">
${t`Notifications`}
</h1>
<span class="pf-c-notification-drawer__header-status">
${t`${this.unread} unread`}
</span>
<div class="text">
<h1 class="pf-c-notification-drawer__header-title">
${t`Notifications`}
</h1>
<span>
${t`${this.unread} unread`}
</span>
</div>
<div class="pf-c-notification-drawer__header-action">
<div class="pf-c-notification-drawer__header-action-close">
<button

31
web/src/elements/notifications/NotificationTrigger.ts
View File

@ -1,31 +0,0 @@
import { CSSResult, customElement, html, LitElement, TemplateResult } from "lit-element";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFDropdown from "@patternfly/patternfly/components/Dropdown/dropdown.css";
import FA from "@fortawesome/fontawesome-free/css/fontawesome.css";
import { EVENT_NOTIFICATION_TOGGLE } from "../../constants";
@customElement("ak-notification-trigger")
export class NotificationRule extends LitElement {
static get styles(): CSSResult[] {
return [PFBase, PFDropdown, FA];
}
constructor() {
super();
this.addEventListener("click", () => {
this.dispatchEvent(
new CustomEvent(EVENT_NOTIFICATION_TOGGLE, {
bubbles: true,
composed: true,
})
);
});
}
render(): TemplateResult {
// TODO: Show icon with red dot when unread notifications exist
return html`<i class="fas fa-bell pf-c-dropdown__toggle-icon" aria-hidden="true"></i>`;
}
}