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

1
authentik/root/messages/storage.py
View File

@ -27,6 +27,7 @@ class ChannelsStorage(BaseStorage):
uid,
{
"type": "event.update",
"message_type": "message",
"level": message.level_tag,
"tags": message.tags,
"message": message.message,

2
web/src/common/ws.ts
View File

@ -4,7 +4,7 @@ import { MessageLevel } from "../elements/messages/Message";
import { showMessage } from "../elements/messages/MessageContainer";
export interface WSMessage {
type: string;
message_type: string;
}
export class WebsocketClient {

38
web/src/elements/PageHeader.ts
View File

@ -4,8 +4,10 @@ import PFContent from "@patternfly/patternfly/components/Content/content.css";
import AKGlobal from "../authentik.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import PFButton from "@patternfly/patternfly/components/Button/button.css";
import { EVENT_SIDEBAR_TOGGLE, TITLE_DEFAULT } from "../constants";
import { tenant } from "../api/Config";
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")
export class PageHeader extends LitElement {
@ -44,12 +46,12 @@ export class PageHeader extends LitElement {
flex-direction: row;
min-height: 114px;
}
button.pf-c-button.pf-m-plain.sidebar-trigger {
.pf-c-button.pf-m-plain {
background-color: var(--pf-c-page__main-section--m-light--BackgroundColor);
border-radius: 0px;
}
.pf-c-page__main-section {
width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
@ -57,6 +59,13 @@ export class PageHeader extends LitElement {
img.pf-icon {
max-height: 24px;
}
.sidebar-trigger,
.notification-trigger {
font-size: 24px;
}
.notification-trigger.has-notifications {
color: #2B9AF3;
}
`];
}
@ -92,7 +101,26 @@ export class PageHeader extends LitElement {
${this.description ?
html`<p>${this.description}</p>` : html``}
</div>
</section>`;
</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>`;
}))}`;
}
}

2
web/src/elements/messages/MessageContainer.ts
View File

@ -33,7 +33,7 @@ export class MessageContainer extends LitElement {
constructor() {
super();
this.addEventListener(EVENT_WS_MESSAGE, ((e: CustomEvent<WSMessage>) => {
if (e.detail.type !== WS_MSG_TYPE_MESSAGE) return;
if (e.detail.message_type !== WS_MSG_TYPE_MESSAGE) return;
this.addMessage(e.detail as unknown as APIMessage);
}) as EventListener);
}

13
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">
<div class="text">
<h1 class="pf-c-notification-drawer__header-title">
${t`Notifications`}
</h1>
<span class="pf-c-notification-drawer__header-status">
<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>`;
}
}

3
web/src/elements/sidebar/SidebarUser.ts
View File

@ -5,7 +5,6 @@ import { me } from "../../api/Users";
import { until } from "lit-html/directives/until";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
import "../notifications/NotificationTrigger";
import { ifDefined } from "lit-html/directives/if-defined";
@customElement("ak-sidebar-user")
@ -39,8 +38,6 @@ export class SidebarUser extends LitElement {
return html`<img class="pf-c-avatar" src="${ifDefined(u.user.avatar)}" alt="" />`;
}), html``)}
</a>
<ak-notification-trigger class="pf-c-nav__link user-notifications">
</ak-notification-trigger>
<a href="/flows/-/default/invalidation/" class="pf-c-nav__link user-logout" id="logout">
<i class="fas fa-sign-out-alt" aria-hidden="true"></i>
</a>

2
web/src/locales/en.po
View File

@ -735,7 +735,7 @@ msgstr "Connect"
msgid "Connected."
msgstr "Connected."
#: src/elements/messages/MessageContainer.ts
#: src/common/ws.ts
msgid "Connection error, reconnecting..."
msgstr "Connection error, reconnecting..."

2
web/src/locales/pseudo-LOCALE.po
View File

@ -729,7 +729,7 @@ msgstr ""
msgid "Connected."
msgstr ""
#: src/elements/messages/MessageContainer.ts
#: src/common/ws.ts
msgid "Connection error, reconnecting..."
msgstr ""